jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Technical: Generalize icon flushing 

This code is not resilient to changes in the mw-ui-icon definition
In preparation for changing touch areas we need an easy way to
flush these correctly based on feature flag.

No expected visual changes.

Bug: T314323
Change-Id: Ia10a7c696c690887a37851684215e515474fbd90
This commit is contained in:
Jon Robson 2022-09-29 15:54:55 -07:00 committed by Jdlrobson
parent 21573d8288
commit 785926d8ba
8 changed files with 75 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
resources/common/mixins.less
View File

@ -27,3 +27,44 @@
color: @color-link-selected;
}
}
// Copied from mediawiki.ui.icons
// (Ifccaadabd72a12814d3d4d01200931f7254c6cd5)
// but converted to px to match `mw-ui-button`
@icon-padding-md: 12px;
// Copied from mediawiki.ui.icons,
// (Ifccaadabd72a12814d3d4d01200931f7254c6cd5)
// but converted to px to match `mw-ui-button`
@icon-padding-md-next: 5px;
.mixin-vector-flush-right-margin-left() {
margin-left: @icon-padding-md;
.vector-feature-visual-enhancement-next-enabled & {
margin-left: @icon-padding-md-next;
}
}
.mixin-vector-flush-left-margin-left() {
margin-left: -@icon-padding-md;
.vector-feature-visual-enhancement-next-enabled & {
margin-left: -@icon-padding-md-next;
}
}
.mixin-vector-flush-right-margin-right() {
margin-right: -@icon-padding-md;
.vector-feature-visual-enhancement-next-enabled & {
margin-right: -@icon-padding-md-next;
}
}
.mixin-vector-flush-left-left() {
left: -@icon-padding-md;
.vector-feature-visual-enhancement-next-enabled & {
left: -@icon-padding-md-next;
}
}

1
resources/common/variables.less
View File

@ -66,6 +66,7 @@
@size-indicator: unit( 12 / @font-size-browser, em );
// Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button`
@icon-padding-md: 12px;
@icon-padding-md-next: 5px;
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );

5
resources/skins.vector.styles/components/Header.less
View File

@ -1,4 +1,5 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
// Header sizes defined in the description of T246170 and comment T246170#5957100
@ -53,7 +54,9 @@
@media ( max-width: @max-width-tablet ) {
// T315261 Align header icon buttons with main content
margin: 0 -@icon-padding-md 0 -@icon-padding-md;
margin: 0;
.mixin-vector-flush-left-margin-left();
.mixin-vector-flush-right-margin-right();
/**
* Toggles the visibility of the search box at lower resolutions.

3
resources/skins.vector.styles/components/LanguageButton.less
View File

@ -1,5 +1,6 @@
// The use of mixins.buttons requires @font-size-base to be defined for this to work in Storybook
@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
// Note vector-feature-language-in-header-enabled class is not used here as that class
@ -9,7 +10,7 @@
.mw-body-header .mw-portlet-lang {
// FIXME [review whether margin-top is needed] center vertically in heading.
margin-top: 2px;
margin-right: -@icon-padding-md;
.mixin-vector-flush-right-margin-right();
box-sizing: border-box;
height: @height-button-lang;
flex-shrink: 0;

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

@ -1,4 +1,5 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@import '../layouts/screen.less';
@import './checkboxHack.less';
@ -17,7 +18,7 @@
// Align the left edge of main menu with the main menu button icon.
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-px-wide;
margin-left: @icon-padding-md;
.mixin-vector-flush-right-margin-left();
}
}
@ -25,7 +26,7 @@
.sidebar-toc:after {
// T312156 Update TOC spacing after removing background color
// Align the left edge of the TOC text with the main menu button icon.
margin-left: -@icon-padding-md;
.mixin-vector-flush-left-margin-left();
@media ( min-width: @min-width-desktop-wide ) {
// Align the TOC subsection toggle button icon with the main menu button icon.

3
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -1,4 +1,5 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@import 'mediawiki.mixins.less';
@font-size-sticky-header-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
@ -69,7 +70,7 @@
&-toc-container {
display: none;
position: relative;
margin-left: -@icon-padding-md;
.mixin-vector-flush-left-margin-left();
// Only show TOC in sticky header when collapsed class is present
.vector-toc-collapsed & {

5
resources/skins.vector.styles/components/TableOfContents.less
View File

@ -7,6 +7,7 @@
// a 15px spacing without clipping the chevron icon
// https://phabricator.wikimedia.org/T312156#8095894
@sidebar-toc-left-padding: 15px + @icon-padding-md;
@sidebar-toc-left-padding-next: 15px + @icon-padding-md-next;
@toc-subsection-toggle-icon-size: 1.834em;
.mw-table-of-contents-container {
@ -42,6 +43,10 @@
overflow-x: hidden;
background-color: @background-color-page-container;
.vector-feature-visual-enhancement-next-enabled & {
padding-left: @sidebar-toc-left-padding-next;
}
.sidebar-toc-header {
padding-bottom: 12px;
}

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

@ -1,4 +1,5 @@
@import '../../common/variables.less';
@import '../../common/mixins.less';
@height-collapsed-toc-button: 36px;
@padding-top-content-px: unit( @padding-top-content * @font-size-browser, px );
@ -10,9 +11,9 @@
display: none;
float: left;
margin-right: 4px;
margin-left: -@icon-padding-md;
.mixin-vector-flush-left-margin-left();
// Reduce vertical padding to fit with page title
padding: 7px @icon-padding-md;
padding: 7px @icon-padding-md-next;
// Override background color for when the TOC is overlaps content
// as a sticky element when the page is scrolled down.
background-color: @background-color-base;
@ -21,6 +22,12 @@
&:active {
background-color: @colorGray15;
}
.vector-feature-visual-enhancement-next-disabled & {
// Reduce vertical padding to fit with page title
padding-left: @icon-padding-md;
padding-right: @icon-padding-md;
}
}
#vector-toc-collapsed-button,
@ -119,7 +126,7 @@
.mixin-toc-collapsed-header();
.sidebar-toc {
left: -@icon-padding-md;
.mixin-vector-flush-left-left();
}
//
@ -170,8 +177,15 @@
// and manually account for horizontal padding in the max width
box-sizing: content-box;
width: max-content;
@sidebar-toc-left-padding-next-em: unit( @sidebar-toc-left-padding-next / @font-size-browser, em );
@sidebar-toc-left-padding-em: unit( @sidebar-toc-left-padding / @font-size-browser, em );
@sidebar-toc-right-padding-em: unit( @sidebar-toc-right-padding / @font-size-browser, em );
@max-width-sticky-header-collapsed-toc: @max-width-collapsed-toc - @sidebar-toc-left-padding-em - @sidebar-toc-right-padding-em;
@max-width-sticky-header-collapsed-toc-next: @max-width-collapsed-toc - @sidebar-toc-left-padding-next-em - @sidebar-toc-right-padding-em;
max-width: ~'min( @{max-width-sticky-header-collapsed-toc}, 75vw )'; // min( 48.5625em, 75vw )
.vector-feature-visual-enhancement-next-enabled & {
max-width: ~'min( @{max-width-sticky-header-collapsed-toc-next}, 75vw )';
}
}