wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Use standard utility classes for flushing icons left and right"

Browse source
This commit is contained in:
jenkins-bot 2022-10-27 15:03:34 +00:00 committed by Gerrit Code Review
parent fa97772903 a1199a0917
commit 5112811e47
14 changed files with 92 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
includes/SkinVector.php
View file

@ -719,9 +719,11 @@ abstract class SkinVector extends SkinMustache {
/**
* Creates portlet data for the ULS button in the header
*
* @param string $className
* @param bool $atTop
* @return array
*/
private function getULSPortletData() {
private function getULSPortletData( string $className, bool $atTop ) {
$numLanguages = count( $this->getLanguagesCached() );
$languageButtonData = [
@ -731,6 +733,7 @@ abstract class SkinVector extends SkinMustache {
// ext.uls.interface attaches click handler to this selector.
'checkbox-class' => ' mw-interlanguage-selector ',
'icon' => 'language-progressive',
'class' => $atTop ? $className . ' mw-ui-icon-flush-right' : $className,
'button' => true,
'heading-class' => self::CLASS_PROGRESSIVE . ' mw-portlet-lang-heading-' . strval( $numLanguages ),
];
@ -738,7 +741,7 @@ abstract class SkinVector extends SkinMustache {
// Adds class to hide language button
// Temporary solution to T287206, can be removed when ULS dialog includes interwiki links
if ( $this->shouldHideLanguages() ) {
$languageButtonData['class'] = ' mw-portlet-empty';
$languageButtonData['class'] .= ' mw-portlet-empty';
}
return $languageButtonData;
@ -891,7 +894,12 @@ abstract class SkinVector extends SkinMustache {
}
if ( $key === 'data-languages' && $this->isLanguagesInContent() ) {
$portletData = array_merge( $portletData, $this->getULSPortletData() );
$portletData = array_merge( $portletData,
$this->getULSPortletData(
$portletData[ 'class' ] ?? '',
$this->isLanguagesInContentAt( 'top' )
)
);
}
if ( $key === 'data-user-menu' && !$this->isLegacy() ) {

2
includes/templates/Header.mustache
View file

@ -1,4 +1,4 @@
<header class="mw-header">
<header class="mw-header mw-ui-icon-flush-left mw-ui-icon-flush-right">
<div class="mw-header-aside vector-header-start">
<label
id="mw-sidebar-button"

2
includes/templates/PageTitlebar.mustache
View file

@ -6,7 +6,7 @@
{{#data-toc}}
<label
id="vector-toc-collapsed-button"
class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-listBullet mw-checkbox-hack-button"
class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-flush-left mw-ui-icon-element mw-ui-icon-wikimedia-listBullet mw-checkbox-hack-button"
for="vector-toc-collapsed-checkbox"
role="button"
aria-controls="toc-toggle-list"

6
includes/templates/StickyHeader.mustache
View file

@ -10,7 +10,7 @@
<header id="vector-sticky-header" aria-hidden="true"
class="vector-sticky-header">
<div class="vector-sticky-header-start">
<div class="vector-sticky-header-icon-start">
<div class="vector-sticky-header-icon-start mw-ui-icon-flush-left">
{{#data-button-start}}
{{>Button}}
{{/data-button-start}}
@ -19,7 +19,7 @@
{{>SearchBox}}
{{/data-search}}
<div class="vector-sticky-header-context-bar">
<div class="vector-sticky-header-toc-container">
<div class="vector-sticky-header-toc-container mw-ui-icon-flush-left">
{{! TOC is cloned into this menu from the sidebar in stickyHeader.js. }}
{{#data-sticky-header-toc}}
{{>Menu}}
@ -28,7 +28,7 @@
<div class="vector-sticky-header-context-bar-primary" {{{html-user-language-attributes}}}>{{{html-title}}}</div>
</div>
</div>
<div class="vector-sticky-header-end">
<div class="vector-sticky-header-end mw-ui-icon-flush-right">
<div class="vector-sticky-header-icons">
{{#data-buttons}}
{{>Button}}

2
includes/templates/TableOfContentsContainer.mustache
View file

@ -1,4 +1,4 @@
<div class="mw-table-of-contents-container">
<div class="mw-table-of-contents-container mw-ui-icon-flush-left">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc}}
<div class="vector-sticky-toc-container">

26
resources/common/mixins.less
View file

@ -45,34 +45,12 @@
// 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;
}
}
// FIXME: Deprecated. Remove when VectorVisualEnhancementNext is everywhere
.mixin-vector-flush-left-margin-left() {
margin-left: -@icon-padding-md;
.vector-feature-visual-enhancement-next-enabled & {
margin-left: -@icon-padding-md-next;
}
}
// FIXME: Deprecated. Remove when VectorVisualEnhancementNext is everywhere
.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;
}
}

2
resources/common/variables.less
View file

@ -67,8 +67,6 @@
// Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button`
@icon-padding-md: 12px;
@icon-padding-md-next: 5px;
@icon-padding-md-em: unit( @icon-padding-md / @font-size-browser, em );
@icon-padding-md-next-em: unit( @icon-padding-md-next / @font-size-browser, em );
@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 );

10
resources/skins.vector.styles/components/Header.less
View file

@ -14,16 +14,18 @@
// A min-height is set to account for projects where no icon is set.
min-height: @height-logo-icon;
padding: 8px 0;
// T315261 Align header icon buttons with main content
margin: 0;
.mixin-vector-flush-left-margin-left();
.mixin-vector-flush-right-margin-right();
// Vertical centering of header elements (IE>=11), requires Flexbox.
.flex-display();
flex-wrap: nowrap;
// https://caniuse.com/#search=align-items
align-items: center;
// FIXME: Remove mixin when this block is removed.
.vector-feature-visual-enhancement-next-disabled & {
.mixin-vector-flush-left-margin-left();
.mixin-vector-flush-right-margin-right();
}
#mw-sidebar-button {
margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
}

6
resources/skins.vector.styles/components/LanguageButton.less
View file

@ -12,11 +12,15 @@
.vector-page-titlebar .mw-portlet-lang {
// FIXME [review whether margin-top is needed] center vertically in heading.
margin-top: 2px;
.mixin-vector-flush-right-margin-right();
box-sizing: border-box;
height: @height-button-lang;
flex-shrink: 0;
// FIXME: Remove mixin when this block is removed.
.vector-feature-visual-enhancement-next-disabled & {
.mixin-vector-flush-right-margin-right();
}
// If there are no languages and JavaScript is not enabled there is no fallback so we hide
// the button altogether.
.mw-portlet-lang-heading-0 {

10
resources/skins.vector.styles/components/MainMenu.less
View file

@ -15,12 +15,18 @@
// T305069 Layout adjustments of sidebar elements
// Align the left edge of main menu with the main menu button.
width: @width-sidebar-px;
.mixin-vector-flush-left-margin-left();
.vector-feature-visual-enhancement-next-disabled & {
.mixin-vector-flush-left-margin-left();
}
// 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: 0;
.vector-feature-visual-enhancement-next-disabled & {
margin-left: 0;
}
}
}

15
resources/skins.vector.styles/components/StickyHeader.less
View file

@ -26,18 +26,18 @@
max-width: none;
}
// T317573 Account for icon padding, align with header icons
padding: 6px (@padding-horizontal-page-container-desktop - @icon-padding-md-em);
// T317573 Account for page container.
padding: 6px @padding-horizontal-page-container-desktop;
@media ( min-width: @min-width-desktop-wide ) {
padding: 6px (@padding-horizontal-page-container-desktop-wide - @icon-padding-md-em);
padding: 6px @padding-horizontal-page-container-desktop-wide;
}
.vector-feature-visual-enhancement-next-enabled & {
padding: 6px (@padding-horizontal-page-container-desktop - @icon-padding-md-next-em);
padding: 6px @padding-horizontal-page-container-desktop;
@media ( min-width: @min-width-desktop-wide ) {
padding: 6px (@padding-horizontal-page-container-desktop-wide - @icon-padding-md-next-em);
padding: 6px @padding-horizontal-page-container-desktop-wide;
}
}
@ -87,7 +87,10 @@
&-toc-container {
display: none;
position: relative;
.mixin-vector-flush-left-margin-left();
.vector-feature-visual-enhancement-next-disabled & {
.mixin-vector-flush-left-margin-left();
}
// Only show TOC in sticky header when collapsed class is present
.vector-toc-collapsed & {

34
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -7,13 +7,16 @@
// 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 {
// Needed for Grid-based layout
align-self: start;
height: 100%;
.vector-feature-visual-enhancement-next-disabled & {
margin-left: 0;
}
}
.vector-sticky-toc-container {
@ -21,6 +24,10 @@
position: sticky;
top: 0;
.vector-feature-visual-enhancement-next-disabled & {
margin-left: 0;
}
@media ( min-width: @min-width-desktop ) {
.vector-toc-not-collapsed & {
// Default spacing separating the sidebar TOC from the main menu or viewport.
@ -35,23 +42,16 @@
}
}
.sidebar-toc,
.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: -@sidebar-toc-left-padding;
@media ( min-width: @min-width-desktop-wide ) {
// Align the TOC subsection toggle button icon with the main menu button icon.
margin-left: -@icon-padding-md;
}
.vector-feature-visual-enhancement-next-enabled & {
margin-left: -@sidebar-toc-left-padding-next;
.vector-feature-visual-enhancement-next-disabled {
.sidebar-toc,
.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: -@sidebar-toc-left-padding;
@media ( min-width: @min-width-desktop-wide ) {
// Align the TOC subsection toggle button icon with the main menu button icon.
margin-left: -@icon-padding-md-next;
margin-left: -@icon-padding-md;
}
}
}
@ -64,10 +64,6 @@
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;
}

32
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View file

@ -11,7 +11,6 @@
display: none;
float: left;
margin-right: 4px;
.mixin-vector-flush-left-margin-left();
// Reduce vertical padding to fit with page title
padding: 7px @icon-padding-md-next;
// Override background color for when the TOC is overlaps content
@ -24,6 +23,7 @@
}
.vector-feature-visual-enhancement-next-disabled & {
.mixin-vector-flush-left-margin-left();
// Reduce vertical padding to fit with page title
padding-left: @icon-padding-md;
padding-right: @icon-padding-md;
@ -68,7 +68,6 @@
// Shared collapsed TOC styles, applies across all collapsed cases (header, floating, sticky header)
.mixin-toc-collapsed() {
margin: 0;
// T316056 Remove TOC menu fixed width and apply min/max-width
// using min() so that the TOC menu doesn't fully cover the text even on small viewports
width: auto;
@ -92,12 +91,19 @@
display: none;
position: absolute;
top: @height-collapsed-toc-button; // TOC button height
.mixin-vector-flush-left-left();
left: -@icon-padding-md;
margin-top: @padding-top-content-px; // Account for padding-top from .mw-body
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
border: @border-width-base @border-style-base @border-color-base;
}
.vector-feature-visual-enhancement-next-disabled {
.sidebar-toc {
margin-left: 0;
margin-right: 0;
}
}
@{selector-collapsed-toc-open} ~ .mw-table-of-contents-container .sidebar-toc {
// Hide the TOC when the button is not checked
display: block;
@ -153,6 +159,14 @@
.vector-below-page-title& {
.mixin-toc-collapsed-floating();
}
// Disable left and right margin
&.vector-feature-visual-enhancement-next-disabled {
.sidebar-toc {
margin-left: 0;
margin-right: 0;
}
}
}
// Show the "move to sidebar/hide" buttons
@ -161,6 +175,13 @@
display: inline-block;
}
}
.vector-toc-collapsed.vector-feature-visual-enhancement-next-disabled:not( .vector-sticky-header-visible ) {
.sidebar-toc {
margin-left: 0;
margin-right: 0;
}
}
}
}
@ -168,18 +189,19 @@
// Collapsed to sticky header
//
.vector-toc-collapsed .vector-sticky-header-toc-container .sidebar-toc {
margin-left: 0;
margin-right: 0;
.mixin-toc-collapsed();
// T316056 Use max-content because collapsed TOC is absolutely positioned, width is relative to the collapsed TOC button
// max-content doesn't account for padding even when we use box-sizing, so use content-box instead
// 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-sticky-header-collapsed-toc-next: @max-width-collapsed-toc - @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 & {

6
tests/jest/__snapshots__/stickyHeader.test.js.snap
View file

@ -3,7 +3,7 @@
exports[`Sticky header renders 1`] = `
"<header id=\\"vector-sticky-header\\" aria-hidden=\\"true\\" class=\\"vector-sticky-header\\">
<div class=\\"vector-sticky-header-start\\">
<div class=\\"vector-sticky-header-icon-start\\">
<div class=\\"vector-sticky-header-icon-start mw-ui-icon-flush-left\\">
<button tabindex=\\"-1\\" data-event-name=\\"ui.vector-sticky-search-form.icon\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search vector-sticky-header-search-toggle\\">
<span>search</span>
@ -11,7 +11,7 @@ exports[`Sticky header renders 1`] = `
</button>
</div>
<div> </div> <div class=\\"vector-sticky-header-context-bar\\">
<div class=\\"vector-sticky-header-toc-container\\">
<div class=\\"vector-sticky-header-toc-container mw-ui-icon-flush-left\\">
<div id=\\"p-sticky-header-toc\\" class=\\"vector-menu mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc\\">
<div class=\\"vector-menu-content\\">
@ -24,7 +24,7 @@ exports[`Sticky header renders 1`] = `
<div class=\\"vector-sticky-header-context-bar-primary\\"></div>
</div>
</div>
<div class=\\"vector-sticky-header-end\\">
<div class=\\"vector-sticky-header-end mw-ui-icon-flush-right\\">
<div class=\\"vector-sticky-header-icons\\">
<a href=\\"#\\" id=\\"ca-talk-sticky-header\\" data-event-name=\\"talk-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-speechBubbles sticky-header-icon\\">
<span></span>