golem
/
VectorGOLEM
9
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Prepare for updated mw-ui-icon implementation in Vector 

We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.

This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.

Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
This commit is contained in:
jdlrobson 2021-06-30 12:52:44 -07:00 committed by Jdlrobson
parent 63100569e6
commit 13de4ff225
6 changed files with 111 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
includes/SkinVector.php
View File

@ -97,6 +97,10 @@ class SkinVector extends SkinMustache {
}
}
$options['responsive'] = $responsive;
if ( $this->shouldConsolidateUserLinks() ) {
$options['link'] = [ 'text-wrapper' => [ 'tag' => 'span' ] ];
}
}
$options['templateDirectory'] = __DIR__ . '/templates';

23
resources/common/components/MenuDropdown.less
View File

@ -14,12 +14,15 @@
position: relative;
display: block;
.box-sizing( border-box );
// `padding-top` needs to scale with font-size.
padding-top: 1.25em;
padding-left: 8px;
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
font-size: @font-size-tabs;
font-weight: normal;
&:not( .mw-ui-icon ) {
// `padding-top` needs to scale with font-size.
padding-top: 1.25em;
padding-left: 8px;
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
font-size: @font-size-tabs;
font-weight: normal;
}
&:after {
content: '';
@ -77,7 +80,7 @@
}
li {
padding: 0;
padding: 0.625em;
margin: 0;
text-align: left;
line-height: 1em;
@ -85,10 +88,12 @@
a {
color: @color-link;
display: block;
padding: 0.625em;
white-space: nowrap;
cursor: pointer;
font-size: @font-size-tabs;
span {
font-size: @font-size-tabs;
}
}
}

16
resources/common/variables.less
View File

@ -20,6 +20,22 @@
@outline-color-base--focus: @color-primary;
//
// == Icons ==
// FIXME: Use mediawiki.skin.variables when available.
//
@icon-touch-area-sm: 34;
@icon-touch-area-md: 44;
@font-size-browser: 16; // Assumed browser default of `16px`.
// Small icon
@icon-glyph-size-sm: 16;
@icon-size-sm: unit( @icon-glyph-size-sm / @font-size-browser, em );
@icon-padding-sm: unit( ( @icon-touch-area-sm - @icon-glyph-size-sm ) / 2 / @font-size-browser, em );
// Medium icon
@icon-glyph-size-md: 20;
@icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em );
@icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em );
//
// == Typography ==
//

12
resources/skins.vector.styles/components/Sidebar.less
View File

@ -16,22 +16,10 @@
}
#mw-sidebar-button {
// Override minimum dimensions set by mw-ui-icon.mw-ui-icon-element.
min-width: @size-sidebar-button;
min-height: @size-sidebar-button;
width: @size-sidebar-button;
height: @size-sidebar-button;
border: @border-width-base @border-style-base transparent;
border-radius: @border-radius-base;
&:before {
// FIXME: the icon itself is supposed to be 20px. mediawiki.ui uses 24px.
// As soon as mediawiki.ui is standardized, remove this override. See T191021.
min-width: 20px;
min-height: 20px;
height: 100%;
// Center it horizontally.
margin: 0 @margin-horizontal-sidebar-button-icon;
// Equals `#555`, closest to `#54595d` on background-color `#fff`.
opacity: 0.67;
/* @embed */

20
resources/skins.vector.styles/components/UserLinks.less
View File

@ -3,7 +3,6 @@
.vector-user-links {
display: flex;
align-items: center;
height: 30px;
position: relative;
justify-content: flex-end;
flex-shrink: 1;
@ -42,8 +41,9 @@
height: 100%;
h3 {
color: transparent; // overrides MediaWiki UI icon
height: 100%;
padding: 0;
font-size: inherit;
}
.vector-menu-checkbox {
@ -89,7 +89,11 @@
.vector-user-menu-login {
padding: 0.625em;
margin: 0;
font-size: @font-size-tabs;
p,
span {
font-size: @font-size-tabs;
}
}
// "Login" and "Logout" links in user menu
@ -125,18 +129,18 @@
}
.vector-user-menu-logged-in h3 {
min-width: 48px;
@offset-icon-down-arrow: 4px;
@bg-height: unit( 12px / @font-size-browser, em );
&:before {
left: -25%;
top: 0;
bottom: 0;
background-size: auto;
color: #54595d;
margin-left: -@offset-icon-down-arrow;
}
&:after {
background-position: 100% 0%;
top: @icon-padding-md + ( @bg-height / 2 );
right: @offset-icon-down-arrow;
}
}
}

65
skinStyles/mediawiki.ui.icon.less
View File

@ -10,3 +10,68 @@
width: unit( @size-icon / @font-size-base, em );
height: unit( @size-icon / @font-size-base, em );
}
.skin-vector-consolidated-user-links .vector-search-box,
.skin-vector-consolidated-user-links .mw-portlet-lang,
.skin-vector-consolidated-user-links {
.mw-ui-icon {
font-size: initial;
&:before {
display: block;
height: 100%;
min-width: 1.25em;
min-height: 1.25em;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
background-position: center;
position: static;
margin: 0;
}
}
.mw-ui-icon-element {
padding: 0.75em;
width: 1.25em;
height: 1.25em;
min-width: 1.25em;
min-height: 1.25em;
// stylelint-disable-next-line declaration-no-important
box-sizing: content-box !important;
line-height: 0;
&:before {
width: 100%;
}
}
.mw-ui-icon-before {
&:before {
display: inline-block;
font-size: initial;
width: auto;
min-width: 1.25em;
min-height: 1.25em;
margin-right: 8px;
vertical-align: middle;
}
}
}
body:not( .skin-vector-consolidated-user-links ) {
#mw-sidebar-button {
// Override minimum dimensions set by mw-ui-icon.mw-ui-icon-element.
min-width: @size-sidebar-button;
min-height: @size-sidebar-button;
width: @size-sidebar-button;
height: @size-sidebar-button;
&:before {
min-width: 20px;
min-height: 20px;
height: 100%;
// Center it horizontally.
margin: 0 unit( 12px / @font-size-browser, em ); // 0.75em @ 16;
}
}
}