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"
]);
if (isset($params['page'])) {
if (!empty($params['page'])) {
$title = Title::newFromText($params['page']);
if ($title) {
$params['href'] = $title->getFullURL();
@ -26,7 +26,7 @@ class ButtonLinkWidget {
}
$framed = true;
if (isset($params['frameless']) && $params['frameless']) {
if (!empty($params['frameless']) && $params['frameless']) {
$framed = false;
}
@ -34,16 +34,26 @@ class ButtonLinkWidget {
$primary = true;
$type = 'progressive';
if (isset($params['default']) && $params['default']) {
$primary = false;
$type = null;
}
if (isset($params['secondary']) && $params['secondary']) {
$primary = false;
if (!empty($params['type'])) {
switch ($params['type']) {
case 'progressive':
// default style
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';
}
if ($primary) {
$flags[] = 'primary';
}
@ -55,8 +65,8 @@ class ButtonLinkWidget {
$html = Html::element('a', [
'class' => 'isekai-buttonlink',
'href' => $params['href'] ?? '#',
'target' => $params['target'] ?? '_self',
'href' => $params['href'] || '#',
'target' => $params['target'] || '_self',
'data-framed' => $framed ? 'true' : 'false',
'data-flags' => $flags
], $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 {
display: flex;
width: 100%;
height: @isekai-bottom-nav-button-size;
@media screen and (max-width: 850px) {
.isekai-bottom-nav-placeholder {
display: flex;
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 {
@ -210,10 +213,13 @@
}
}
.use-isekai-bottom-nav {
&.skin-minerva {
#mw-mf-page-center {
padding-bottom: 40px;
@media screen and (max-width: 850px) {
.use-isekai-bottom-nav {
&.skin-minerva {
#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-medium,
.tile-wide,
@ -43,9 +46,10 @@
.tile-wide,
.tile-large,
.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;
transform: none;
filter: brightness(1);
}
.tile-small .icon,
.tile-medium .icon,
@ -123,6 +127,15 @@
transform: translate3d(0, -4px, 0);
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 {
/*.branding-bar {
display: none;
@ -141,122 +154,6 @@
max-width: 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 {
position: relative;
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-large,
.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;
transform: none;
filter: brightness(1);
.icon {
max-width: 33%;
@ -104,6 +105,12 @@
transform: translate3d(0, -4px, 0);
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 {
@ -132,95 +139,95 @@
}
}
.tile-small,
.tile-medium,
.tile-wide,
.tile-large,
.tile-app {
&.transform-right {
.transformOrigin(left 50%);
.perspective(@tileTransformPerspective)!important;
.rotateY(@tileTransformRotate)!important;
&.tile-small {
.perspective(@tileTransformPerspective)!important;
.rotateY(@tileTransformRotate * 2)!important;
}
&.tile-wide {
.perspective(@tileTransformPerspective)!important;
.rotateY(@tileTransformRotate / 2)!important;
}
&.tile-large {
.perspective(@tileTransformPerspective)!important;
.rotateY(@tileTransformRotate / 3)!important;
}
}
&.transform-left {
.transformOrigin(right 50%);
.perspective(@tileTransformPerspective)!important;
.rotateY(-@tileTransformRotate)!important;
&.tile-small {
.perspective(@tileTransformPerspective)!important;
.rotateY(-@tileTransformRotate * 2)!important;
}
&.tile-wide {
.perspective(@tileTransformPerspective)!important;
.rotateY(-@tileTransformRotate / 2)!important;
}
&.tile-large {
.perspective(@tileTransformPerspective)!important;
.rotateY(-@tileTransformRotate / 3)!important;
}
}
&.transform-top {
.transformOrigin(50% bottom);
.perspective(@tileTransformPerspective)!important;
.rotateX(@tileTransformRotate)!important;
&.tile-small {
.perspective(@tileTransformPerspective)!important;
.rotateX(@tileTransformRotate * 2)!important;
}
&.tile-wide {
.perspective(@tileTransformPerspective)!important;
.rotateX(@tileTransformRotate / 2)!important;
}
&.tile-large {
.perspective(@tileTransformPerspective)!important;
.rotateX(@tileTransformRotate / 3)!important;
}
}
&.transform-bottom {
.transformOrigin(50% top);
.perspective(@tileTransformPerspective)!important;
.rotateX(-@tileTransformRotate)!important;
&.tile-small {
.perspective(@tileTransformPerspective)!important;
.rotateX(-@tileTransformRotate * 2)!important;
}
&.tile-wide {
.perspective(@tileTransformPerspective)!important;
.rotateX(-@tileTransformRotate / 2)!important;
}
&.tile-large {
.perspective(@tileTransformPerspective)!important;
.rotateX(-@tileTransformRotate / 3)!important;
}
}
}
// .tile-small,
// .tile-medium,
// .tile-wide,
// .tile-large,
// .tile-app {
// &.transform-right {
// .transformOrigin(left 50%);
// .perspective(@tileTransformPerspective)!important;
// .rotateY(@tileTransformRotate)!important;
// &.tile-small {
// .perspective(@tileTransformPerspective)!important;
// .rotateY(@tileTransformRotate * 2)!important;
// }
// &.tile-wide {
// .perspective(@tileTransformPerspective)!important;
// .rotateY(@tileTransformRotate / 2)!important;
// }
// &.tile-large {
// .perspective(@tileTransformPerspective)!important;
// .rotateY(@tileTransformRotate / 3)!important;
// }
// }
// &.transform-left {
// .transformOrigin(right 50%);
// .perspective(@tileTransformPerspective)!important;
// .rotateY(-@tileTransformRotate)!important;
// &.tile-small {
// .perspective(@tileTransformPerspective)!important;
// .rotateY(-@tileTransformRotate * 2)!important;
// }
// &.tile-wide {
// .perspective(@tileTransformPerspective)!important;
// .rotateY(-@tileTransformRotate / 2)!important;
// }
// &.tile-large {
// .perspective(@tileTransformPerspective)!important;
// .rotateY(-@tileTransformRotate / 3)!important;
// }
// }
// &.transform-top {
// .transformOrigin(50% bottom);
// .perspective(@tileTransformPerspective)!important;
// .rotateX(@tileTransformRotate)!important;
// &.tile-small {
// .perspective(@tileTransformPerspective)!important;
// .rotateX(@tileTransformRotate * 2)!important;
// }
// &.tile-wide {
// .perspective(@tileTransformPerspective)!important;
// .rotateX(@tileTransformRotate / 2)!important;
// }
// &.tile-large {
// .perspective(@tileTransformPerspective)!important;
// .rotateX(@tileTransformRotate / 3)!important;
// }
// }
// &.transform-bottom {
// .transformOrigin(50% top);
// .perspective(@tileTransformPerspective)!important;
// .rotateX(-@tileTransformRotate)!important;
// &.tile-small {
// .perspective(@tileTransformPerspective)!important;
// .rotateX(-@tileTransformRotate * 2)!important;
// }
// &.tile-wide {
// .perspective(@tileTransformPerspective)!important;
// .rotateX(-@tileTransformRotate / 2)!important;
// }
// &.tile-large {
// .perspective(@tileTransformPerspective)!important;
// .rotateX(-@tileTransformRotate / 3)!important;
// }
// }
// }
.tiles-grid {

Write Preview
Loading…
Cancel
Save