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

Restyle Vector tabs in modern Vector 

Removes gradients from tabs (i.e. article toolbar) in new Vector, moving
the existing MenuTabs.less component into the skins.vector.styles.legacy module
and creating a new MenuTabs.less component for modern Vector.

Bug: T309398
Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
This commit is contained in:
Jan Drewniak 2022-06-06 17:39:57 -04:00 committed by Jon Robson
parent 2adf046c9a
commit c5cfd4dce8
14 changed files with 133 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/common/common.less
View File

@ -15,7 +15,6 @@
@import './components/Indicators.less';
@import './components/SiteNotice.less';
@import './components/Menu.less';
@import './components/MenuTabs.less';
@import './components/TabWatchstarLink.less';
@import './components/MenuDropdown.less';
@import './components/MenuPortal.less';

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

@ -14,6 +14,7 @@
position: relative;
display: block;
box-sizing: border-box;
height: 100%;
&:after {
content: '';
@ -113,22 +114,6 @@
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
}
// Tab Separators
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
// #mw-head rule is legacy Vector only.
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
// Support: IE 9, which doesn't understand `linear-gradient`.
background-image: url( images/tab-separator.png );
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
background-repeat: no-repeat;
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
background-size: @border-width-base 100%;
}
// Invisible checkbox covering the dropdown menu handle
.vector-menu-checkbox {
cursor: pointer;

4
resources/common/typography.less
View File

@ -37,6 +37,10 @@ pre,
font-family: @font-family-sans;
}
.mw-first-heading {
border-color: @border-color-pagetitle;
}
/* Main content area, including siteNotice, indicators, categories, firstHeading and `.vector-body`. */
.mw-body {
// h1's can exist outside of `.mw-body-content` so some heading styles

4
resources/common/variables.less
View File

@ -61,12 +61,14 @@
// Due to darker background gradient, border needs to be darkened for aligned visual perception.
@border-color-content--tabs-inactive: darken( @border-color-content, 10% );
@border-color-portal-heading: #c8ccd1;
@border-color-pagetitle: #eaecf0;
// Use `rgba()` notation for better Safari support, see T254489.
@border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 );
@border-start-blockquote: 4px @border-style-base #eaecf0;
@padding-top-content: 1.25em;
@padding-top-content: 0.5em;
@padding-horizontal-content: 0.5em;
@padding-blockquote: 8px 32px;
@border-tabs: 1px @border-style-base #eaecf0;
// Navigation
@background-color-secondary: #f6f6f6;

9
resources/skins.vector.styles.legacy/components/MenuDropdown.less
View File

@ -24,3 +24,12 @@
}
}
}
.vector-menu-dropdown .vector-menu-heading {
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
background-repeat: no-repeat;
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
background-size: @border-width-base 100%;
background-position: right bottom;
height: 100%;
}

18
resources/common/components/MenuTabs.less → resources/skins.vector.styles.legacy/components/MenuTabs.less
View File

@ -1,4 +1,4 @@
@import '../variables.less';
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
/**
@ -82,3 +82,19 @@
}
}
}
// Tab Separators
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
// #mw-head rule is legacy Vector only.
.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
// Support: IE 9, which doesn't understand `linear-gradient`.
background-image: url( images/tab-separator.png );
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
background-repeat: no-repeat;
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
background-size: @border-width-base 100%;
}

0
resources/common/images/tab-normal-fade.png → resources/skins.vector.styles.legacy/images/tab-normal-fade.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 B

After

Width:  |  Height:  |  Size: 116 B

0
resources/common/images/tab-separator.png → resources/skins.vector.styles.legacy/images/tab-separator.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 B

After

Width:  |  Height:  |  Size: 124 B

1
resources/skins.vector.styles.legacy/skin-legacy.less
View File

@ -9,6 +9,7 @@
// Legacy specific components
@import './components/MenuDropdown.less';
@import './components/MenuTabs.less';
@import './components/SearchBox.less';
@import './components/Sidebar.less';
@import './components/UserLinks.less';

32
resources/skins.vector.styles/components/ArticleToolbar.less
View File

@ -1,6 +1,8 @@
@import '../../common/variables.less';
.mw-article-toolbar-container {
border-bottom: @border-tabs;
.mw-portlet-views {
display: none;
@ -27,12 +29,6 @@
}
}
// T303549: When page title is above tabs, `.mw-article-toolbar-container` is
// moved inside `.mw-body` and requires margin between itself and the tagline.
.mw-body .mw-article-toolbar-container {
margin-bottom: 1.25em;
}
// FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class.
.vector-article-toolbar .mw-article-toolbar-container {
display: flex;
@ -42,25 +38,10 @@
padding-right: @padding-horizontal-tabs - 1px;
}
.vector-menu-tabs {
// Account for background-image gradient.
margin-top: -1px;
}
.vector-menu-dropdown .vector-menu-heading {
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
background-repeat: no-repeat;
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
background-size: @border-width-base 100%;
background-position: right bottom;
height: 100%;
}
#right-navigation {
display: flex;
flex-grow: 1;
justify-content: end;
border-bottom: @border-width-base @border-style-base @border-color-content;
// Layout correction - as it was before introduce of flex box.
margin-right: -1px;
@ -71,21 +52,12 @@
#left-navigation {
display: flex;
border-bottom: @border-width-base @border-style-base @border-color-content;
// Layout correction - as it was before introduce of flex box.
@media ( min-width: @width-breakpoint-desktop-wide ) {
margin-left: @border-base-ems * 3;
}
}
.vector-menu-tabs li {
margin-top: 1px;
&.selected {
background: #fff;
}
}
}
// Currently when right navigation is empty and sidebar is open no

89
resources/skins.vector.styles/components/MenuTabs.less Normal file
View File

@ -0,0 +1,89 @@
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
/**
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
*/
/* Namespaces and Views */
.vector-menu-tabs {
// Tab separator: Outer start border (left in LTR) of tab row.
float: left;
height: 2.5em;
padding-left: @border-width-base;
/* Navigation Labels */
.vector-menu-heading {
display: none;
}
ul {
float: left;
height: 100%;
list-style: none none;
margin: 0;
padding: 0;
}
li {
// Tab fade background: Fade inside from light grey to white.
float: left;
display: block;
height: 100%;
padding: 0;
line-height: @line-height-nav;
white-space: nowrap;
&:first-child a {
margin-left: 0;
}
&:last-child a {
margin-right: 0;
}
a {
// Tab separator: Border between tabs and outer right border.
color: @color-link;
box-sizing: border-box;
display: block;
float: left;
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
position: relative;
padding-top: 1.25em;
margin: 0 @padding-horizontal-tabs;
font-size: @font-size-tabs;
cursor: pointer;
&:hover {
text-decoration: none;
border-bottom: 1px solid;
}
}
}
.new {
a,
a:visited {
color: @color-link-new;
}
}
.selected {
a {
border-bottom: 1px solid;
}
a,
a:visited {
color: @color-link-selected;
}
}
.icon {
a {
background-position: right bottom;
background-repeat: no-repeat;
}
}
}

5
resources/skins.vector.styles/layouts/screen.less
View File

@ -90,9 +90,14 @@ body {
.firstHeading {
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
overflow: visible;
margin-bottom: 0;
}
}
.mw-body-subheader {
margin-top: 1em;
}
.mw-header {
// allow z-index to apply so search results overlay article
position: relative;

1
resources/skins.vector.styles/skin.less
View File

@ -18,6 +18,7 @@
@import './components/LanguageButton.less';
@import './components/UserLinks.less';
@import './components/Header.less';
@import './components/MenuTabs.less';
@import './components/StickyHeader.less';
@import './components/TableOfContents.less';
}

2
stories/MenuTabs.stories.js
View File

@ -1,7 +1,7 @@
import mustache from 'mustache';
import { menuTemplate as vectorTabsTemplate } from './Menu.stories.data';
import { namespaceTabsData, pageActionsData } from './MenuTabs.stories.data';
import '../resources/skins.vector.styles/MenuTabs.less';
import '../resources/skins.vector.styles/components/MenuTabs.less';
import '../resources/skins.vector.styles/TabWatchstarLink.less';
export default {