hyperzlib
/
IsekaiWidgets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改按钮链接的参数和Tile的样式

Browse Source
master
落雨楓 2 years ago
parent da70a27e6f
commit 9077c6ecb8
8 changed files with 570 additions and 230 deletions
Show Stats Download Patch File Download Diff File

32
includes/ButtonLinkWidget.php
Unescape Escape View File

@ -18,7 +18,7 @@ class ButtonLinkWidget {
"ext.isekai.buttonLink" "ext.isekai.buttonLink"
]); ]);
if (isset($params['page'])) { if (!empty($params['page'])) {
$title = Title::newFromText($params['page']); $title = Title::newFromText($params['page']);
if ($title) { if ($title) {
$params['href'] = $title->getFullURL(); $params['href'] = $title->getFullURL();
@ -26,7 +26,7 @@ class ButtonLinkWidget {
} }
$framed = true; $framed = true;
if (isset($params['frameless']) && $params['frameless']) { if (!empty($params['frameless']) && $params['frameless']) {
$framed = false; $framed = false;
} }
@ -34,16 +34,26 @@ class ButtonLinkWidget {
$primary = true; $primary = true;
$type = 'progressive'; $type = 'progressive';
if (isset($params['default']) && $params['default']) {
$primary = false; if (!empty($params['type'])) {
$type = null; switch ($params['type']) {
} case 'progressive':
if (isset($params['secondary']) && $params['secondary']) { // default style
$primary = false; break;
case 'default':
$primary = false;
$type = null;
break;
case 'secondary':
$primary = false;
break;
}
} }
if (isset($params['destructive']) && $params['destructive']) {
if (!empty($params['destructive']) && $params['destructive']) {
$flags[] = 'destructive'; $flags[] = 'destructive';
} }
if ($primary) { if ($primary) {
$flags[] = 'primary'; $flags[] = 'primary';
} }
@ -55,8 +65,8 @@ class ButtonLinkWidget {
$html = Html::element('a', [ $html = Html::element('a', [
'class' => 'isekai-buttonlink', 'class' => 'isekai-buttonlink',
'href' => $params['href'] ?? '#', 'href' => $params['href'] || '#',
'target' => $params['target'] ?? '_self', 'target' => $params['target'] || '_self',
'data-framed' => $framed ? 'true' : 'false', 'data-framed' => $framed ? 'true' : 'false',
'data-flags' => $flags 'data-flags' => $flags
], $text); ], $text);

127
modules/baseWidgets/ext.isekai.baseWidgets.js
View File

File diff suppressed because one or more lines are too long

22
modules/baseWidgets/ext.isekai.baseWidgets.less
Unescape Escape View File

@ -136,10 +136,13 @@
} }
} }
.isekai-bottom-nav-placeholder { @media screen and (max-width: 850px) {
display: flex; .isekai-bottom-nav-placeholder {
width: 100%; display: flex;
height: @isekai-bottom-nav-button-size; width: 100%;
height: @isekai-bottom-nav-button-size;
height: ~"calc(var(--safe-area-inset-bottom, 0px) + " @isekai-bottom-nav-button-size ~")";
}
} }
.isekai-bottom-nav-btn { .isekai-bottom-nav-btn {
@ -210,10 +213,13 @@
} }
} }
.use-isekai-bottom-nav { @media screen and (max-width: 850px) {
&.skin-minerva { .use-isekai-bottom-nav {
#mw-mf-page-center { &.skin-minerva {
padding-bottom: 40px; #mw-mf-page-center {
padding-bottom: @isekai-bottom-nav-button-size;
padding-bottom: ~"calc(var(--safe-area-inset-bottom, 0px) + " @isekai-bottom-nav-button-size ~")";
}
} }
} }
} }

97
modules/createPage/ext.isekai.createPage.js
View File

File diff suppressed because one or more lines are too long

97
modules/discover/ext.isekai.discover.js
View File

File diff suppressed because one or more lines are too long

131
modules/tile/ext.isekai.tile.css
Unescape Escape View File

@ -1,3 +1,6 @@
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/.pnpm/css-loader@6.7.3_webpack@5.82.0/node_modules/css-loader/dist/cjs.js!./node_modules/.pnpm/postcss-loader@7.3.0_postcss@8.4.23_webpack@5.82.0/node_modules/postcss-loader/dist/cjs.js!./node_modules/.pnpm/less-loader@11.1.0_less@4.1.3_webpack@5.82.0/node_modules/less-loader/dist/cjs.js!./src/tile/tile.less ***!
\************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.tile-small, .tile-small,
.tile-medium, .tile-medium,
.tile-wide, .tile-wide,
@ -43,9 +46,10 @@
.tile-wide, .tile-wide,
.tile-large, .tile-large,
.tile-app { .tile-app {
transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out; transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out, filter 200ms ease-in-out;
box-shadow: none; box-shadow: none;
transform: none; transform: none;
filter: brightness(1);
} }
.tile-small .icon, .tile-small .icon,
.tile-medium .icon, .tile-medium .icon,
@ -123,6 +127,15 @@
transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
} }
.tile-small:active,
.tile-medium:active,
.tile-wide:active,
.tile-large:active,
.tile-app:active {
transform: translate3d(0, 0, 0);
box-shadow: none;
filter: brightness(0.94);
}
.tile-small { .tile-small {
/*.branding-bar { /*.branding-bar {
display: none; display: none;
@ -141,122 +154,6 @@
max-width: 75%; max-width: 75%;
height: 75%; height: 75%;
} }
.tile-small.transform-right,
.tile-medium.transform-right,
.tile-wide.transform-right,
.tile-large.transform-right,
.tile-app.transform-right {
transform-origin: left 50%;
transform: perspective(500px) rotateY(0.138372rad) !important;
}
.tile-small.transform-right.tile-small,
.tile-medium.transform-right.tile-small,
.tile-wide.transform-right.tile-small,
.tile-large.transform-right.tile-small,
.tile-app.transform-right.tile-small {
transform: perspective(500px) rotateY(0.276744rad) !important;
}
.tile-small.transform-right.tile-wide,
.tile-medium.transform-right.tile-wide,
.tile-wide.transform-right.tile-wide,
.tile-large.transform-right.tile-wide,
.tile-app.transform-right.tile-wide {
transform: perspective(500px) rotateY(0.138372rad / 2) !important;
}
.tile-small.transform-right.tile-large,
.tile-medium.transform-right.tile-large,
.tile-wide.transform-right.tile-large,
.tile-large.transform-right.tile-large,
.tile-app.transform-right.tile-large {
transform: perspective(500px) rotateY(0.138372rad / 3) !important;
}
.tile-small.transform-left,
.tile-medium.transform-left,
.tile-wide.transform-left,
.tile-large.transform-left,
.tile-app.transform-left {
transform-origin: right 50%;
transform: perspective(500px) rotateY(-0.138372rad) !important;
}
.tile-small.transform-left.tile-small,
.tile-medium.transform-left.tile-small,
.tile-wide.transform-left.tile-small,
.tile-large.transform-left.tile-small,
.tile-app.transform-left.tile-small {
transform: perspective(500px) rotateY(-0.276744rad) !important;
}
.tile-small.transform-left.tile-wide,
.tile-medium.transform-left.tile-wide,
.tile-wide.transform-left.tile-wide,
.tile-large.transform-left.tile-wide,
.tile-app.transform-left.tile-wide {
transform: perspective(500px) rotateY(-0.138372rad / 2) !important;
}
.tile-small.transform-left.tile-large,
.tile-medium.transform-left.tile-large,
.tile-wide.transform-left.tile-large,
.tile-large.transform-left.tile-large,
.tile-app.transform-left.tile-large {
transform: perspective(500px) rotateY(-0.138372rad / 3) !important;
}
.tile-small.transform-top,
.tile-medium.transform-top,
.tile-wide.transform-top,
.tile-large.transform-top,
.tile-app.transform-top {
transform-origin: 50% bottom;
transform: perspective(500px) rotateX(0.138372rad) !important;
}
.tile-small.transform-top.tile-small,
.tile-medium.transform-top.tile-small,
.tile-wide.transform-top.tile-small,
.tile-large.transform-top.tile-small,
.tile-app.transform-top.tile-small {
transform: perspective(500px) rotateX(0.276744rad) !important;
}
.tile-small.transform-top.tile-wide,
.tile-medium.transform-top.tile-wide,
.tile-wide.transform-top.tile-wide,
.tile-large.transform-top.tile-wide,
.tile-app.transform-top.tile-wide {
transform: perspective(500px) rotateX(0.138372rad / 2) !important;
}
.tile-small.transform-top.tile-large,
.tile-medium.transform-top.tile-large,
.tile-wide.transform-top.tile-large,
.tile-large.transform-top.tile-large,
.tile-app.transform-top.tile-large {
transform: perspective(500px) rotateX(0.138372rad / 3) !important;
}
.tile-small.transform-bottom,
.tile-medium.transform-bottom,
.tile-wide.transform-bottom,
.tile-large.transform-bottom,
.tile-app.transform-bottom {
transform-origin: 50% top;
transform: perspective(500px) rotateX(-0.138372rad) !important;
}
.tile-small.transform-bottom.tile-small,
.tile-medium.transform-bottom.tile-small,
.tile-wide.transform-bottom.tile-small,
.tile-large.transform-bottom.tile-small,
.tile-app.transform-bottom.tile-small {
transform: perspective(500px) rotateX(-0.276744rad) !important;
}
.tile-small.transform-bottom.tile-wide,
.tile-medium.transform-bottom.tile-wide,
.tile-wide.transform-bottom.tile-wide,
.tile-large.transform-bottom.tile-wide,
.tile-app.transform-bottom.tile-wide {
transform: perspective(500px) rotateX(-0.138372rad / 2) !important;
}
.tile-small.transform-bottom.tile-large,
.tile-medium.transform-bottom.tile-large,
.tile-wide.transform-bottom.tile-large,
.tile-large.transform-bottom.tile-large,
.tile-app.transform-bottom.tile-large {
transform: perspective(500px) rotateX(-0.138372rad / 3) !important;
}
.tiles-grid { .tiles-grid {
position: relative; position: relative;
display: grid; display: grid;

107
modules/tile/ext.isekai.tile.js
View File

File diff suppressed because one or more lines are too long

187
src/tile/tile.less
Unescape Escape View File

@ -48,9 +48,10 @@
.tile-wide, .tile-wide,
.tile-large, .tile-large,
.tile-app { .tile-app {
transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out; transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out, filter 200ms ease-in-out;
box-shadow: none; box-shadow: none;
transform: none; transform: none;
filter: brightness(1);
.icon { .icon {
max-width: 33%; max-width: 33%;
@ -104,6 +105,12 @@
transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
} }
&:active {
transform: translate3d(0, 0, 0);
box-shadow: none;
filter: brightness(0.94);
}
} }
.tile { .tile {
@ -132,95 +139,95 @@
} }
} }
.tile-small, // .tile-small,
.tile-medium, // .tile-medium,
.tile-wide, // .tile-wide,
.tile-large, // .tile-large,
.tile-app { // .tile-app {
&.transform-right { // &.transform-right {
.transformOrigin(left 50%); // .transformOrigin(left 50%);
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateY(@tileTransformRotate)!important; // .rotateY(@tileTransformRotate)!important;
&.tile-small { // &.tile-small {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateY(@tileTransformRotate * 2)!important; // .rotateY(@tileTransformRotate * 2)!important;
} // }
&.tile-wide { // &.tile-wide {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateY(@tileTransformRotate / 2)!important; // .rotateY(@tileTransformRotate / 2)!important;
} // }
&.tile-large { // &.tile-large {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateY(@tileTransformRotate / 3)!important; // .rotateY(@tileTransformRotate / 3)!important;
} // }
} // }
&.transform-left { // &.transform-left {
.transformOrigin(right 50%); // .transformOrigin(right 50%);
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateY(-@tileTransformRotate)!important; // .rotateY(-@tileTransformRotate)!important;
&.tile-small { // &.tile-small {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateY(-@tileTransformRotate * 2)!important; // .rotateY(-@tileTransformRotate * 2)!important;
} // }
&.tile-wide { // &.tile-wide {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateY(-@tileTransformRotate / 2)!important; // .rotateY(-@tileTransformRotate / 2)!important;
} // }
&.tile-large { // &.tile-large {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateY(-@tileTransformRotate / 3)!important; // .rotateY(-@tileTransformRotate / 3)!important;
} // }
} // }
&.transform-top { // &.transform-top {
.transformOrigin(50% bottom); // .transformOrigin(50% bottom);
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateX(@tileTransformRotate)!important; // .rotateX(@tileTransformRotate)!important;
&.tile-small { // &.tile-small {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateX(@tileTransformRotate * 2)!important; // .rotateX(@tileTransformRotate * 2)!important;
} // }
&.tile-wide { // &.tile-wide {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateX(@tileTransformRotate / 2)!important; // .rotateX(@tileTransformRotate / 2)!important;
} // }
&.tile-large { // &.tile-large {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateX(@tileTransformRotate / 3)!important; // .rotateX(@tileTransformRotate / 3)!important;
} // }
} // }
&.transform-bottom { // &.transform-bottom {
.transformOrigin(50% top); // .transformOrigin(50% top);
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateX(-@tileTransformRotate)!important; // .rotateX(-@tileTransformRotate)!important;
&.tile-small { // &.tile-small {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateX(-@tileTransformRotate * 2)!important; // .rotateX(-@tileTransformRotate * 2)!important;
} // }
&.tile-wide { // &.tile-wide {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateX(-@tileTransformRotate / 2)!important; // .rotateX(-@tileTransformRotate / 2)!important;
} // }
&.tile-large { // &.tile-large {
.perspective(@tileTransformPerspective)!important; // .perspective(@tileTransformPerspective)!important;
.rotateX(-@tileTransformRotate / 3)!important; // .rotateX(-@tileTransformRotate / 3)!important;
} // }
} // }
} // }
.tiles-grid { .tiles-grid {

Write Preview
Loading…
Cancel
Save