From 96136a0e2d0a027f6f34d87f9c374e71b052a5c9 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Fri, 16 Jul 2021 08:32:42 -0700 Subject: [PATCH] Remove Vector skinStyles for icons and fix language button Depends-On: Id08590f6a3fbbfda8226f2899f50f0b64cbb1481 Change-Id: I5be642f2e20d67e1d27c74ddb6ec086738a261aa Bug: T191021 --- .storybook/common.less | 1 - resources/common/variables.less | 16 ---- .../components/LanguageButton.less | 23 ++++-- .../components/UserLinks.less | 3 + .../skins.vector.styles/layouts/screen.less | 6 -- skin.json | 3 +- skinStyles/mediawiki.ui.icon.less | 77 ------------------- 7 files changed, 20 insertions(+), 109 deletions(-) delete mode 100644 skinStyles/mediawiki.ui.icon.less diff --git a/.storybook/common.less b/.storybook/common.less index a06e7d741..b42018d8c 100644 --- a/.storybook/common.less +++ b/.storybook/common.less @@ -1,7 +1,6 @@ @import '../resources/common/variables.less'; @import './integration.less'; @import './icons.less'; -@import '../skinStyles/mediawiki.ui.icon.less'; body { font-family: @font-family-sans; diff --git a/resources/common/variables.less b/resources/common/variables.less index 94f15c2b7..194264108 100644 --- a/resources/common/variables.less +++ b/resources/common/variables.less @@ -20,22 +20,6 @@ @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 == // diff --git a/resources/skins.vector.styles/components/LanguageButton.less b/resources/skins.vector.styles/components/LanguageButton.less index 81e3783f8..ad19cabe4 100644 --- a/resources/skins.vector.styles/components/LanguageButton.less +++ b/resources/skins.vector.styles/components/LanguageButton.less @@ -8,22 +8,31 @@ height: @height-lang-button; .mw-ui-icon:before { - margin-right: 8px; // Put icon on correct standard normal state color. opacity: 0.87; } .vector-menu-heading { - // Special treatment for language button, based on Vector font-size - font-size: @font-size-base; - // avoid sub pixel rendering - line-height: 1.493em; + font-size: initial; // reset padding styles in MenuDropdown.less with right padding for arrow. - padding: 4px 30px 4px 8px; + padding-right: 30px; + padding-left: 8px; // Prevent select of span text "X languages" user-select: none; // Remove opacity on language button (it applies to more menu because of label color). opacity: 1; + // Hack: mw-ui-icon is not designed to be used with mw-ui-button + // Must disable min-height of mw-ui-button + min-height: 22px; + // mw-ui-icon resets the button border. + border: 1px solid transparent; + // center vertically in heading. + margin-top: 2px; + + span { + // Special treatment for language button, based on Vector font-size + font-size: @font-size-base; + } &:after { top: 0; @@ -32,7 +41,7 @@ .vector-menu-content { top: auto; - left: auto; + left: -@border-width-base; right: -@border-width-base; // align borders of open menu align with button .box-sizing( border-box ); diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index 6eca49a59..2b11b8d8e 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -139,6 +139,9 @@ &:after { background-position: 100% 0%; + // FIXME: Ideally this variable should be accessible from mediawiki.skin.variables + // Remove it when we can. + @icon-padding-md: unit( 12 / @font-size-browser, em ); top: @icon-padding-md + ( @bg-height / 2 ); right: @offset-icon-down-arrow; } diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less index f2d66b9d6..c9e60830f 100644 --- a/resources/skins.vector.styles/layouts/screen.less +++ b/resources/skins.vector.styles/layouts/screen.less @@ -208,12 +208,6 @@ body { .mw-body-header { .mixin-clearfix(); - - // TODO: Can be changed to `.mw-portlet-lang` when langauge-in-header feature is default. - #p-lang-btn { - // should be vertically aligned with heading. - margin-top: ( ( @font-size-heading-1 * @line-height-heading ) - @height-lang-button ) / 2; - } } // TODO: Can be changed to `.mw-body .mw-portlet-lang` when langauge-in-header feature is default. diff --git a/skin.json b/skin.json index add53aa20..26fb22952 100644 --- a/skin.json +++ b/skin.json @@ -223,8 +223,7 @@ "+mediawiki.notification": "skinStyles/mediawiki.notification.less", "+oojs-ui-core.styles": "skinStyles/ooui.less", "mediawiki.special": "skinStyles/mediawiki.special.less", - "+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less", - "+mediawiki.ui.icon": "skinStyles/mediawiki.ui.icon.less" + "+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less" } }, "config": { diff --git a/skinStyles/mediawiki.ui.icon.less b/skinStyles/mediawiki.ui.icon.less deleted file mode 100644 index 198b86f11..000000000 --- a/skinStyles/mediawiki.ui.icon.less +++ /dev/null @@ -1,77 +0,0 @@ -// Override core's `.mw-ui-icon` which defaults to 24x24. -// The Design Style Guide and its icons are now set to 20x20. -// FIXME: With core set to 20x20 this file should become obsolete, see T191021. -@import '../resources/common/variables.less'; - -.vector-search-box .mw-ui-icon:before, -.vector-search-box .mw-ui-icon.mw-ui-icon-element:before, -.mw-portlet-lang .mw-ui-icon:before { - background-size: unit( @size-icon / @font-size-base, em ) auto; - 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; - } - } -}