jenkins-bot has submitted this change and it was merged.

Change subject: Overhaul navigation drawer to better focus on navigation
......................................................................


Overhaul navigation drawer to better focus on navigation

Overhauling navigation drawer colors to give better focus on
navigation and aligning to improved color palette.
Also removing unnecessary properties.

Bug: T148108
Change-Id: Ia4b34a1efece98a4167e036901c5def1f73c4b05
---
M extension.json
M includes/skins/SkinMinerva.php
M minerva.less/minerva.variables.less
M resources/mobile.mainMenu.icons/contributions.svg
M resources/mobile.mainMenu/mainmenu.less
5 files changed, 39 insertions(+), 45 deletions(-)

Approvals:
  Jdlrobson: Looks good to me, but someone else must approve
  Bmansurov: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/extension.json b/extension.json
index e7840f1..93507a3 100644
--- a/extension.json
+++ b/extension.json
@@ -343,15 +343,8 @@
                },
                "mobile.mainMenu.icons": {
                        "class": "ResourceLoaderImageModule",
-                       "selectorWithVariant": 
".mw-ui-icon-{name}-{variant}:before,.mw-ui-icon-mf-{name}-{variant}:before",
-                       "selectorWithoutVariant": 
".mw-ui-icon-{name}:before,.mw-ui-icon-mf-{name}:before",
+                       "selector": 
".mw-ui-icon-{name}:before,.mw-ui-icon-mf-{name}:before",
                        "prefix": "mw-ui",
-                       "variants": {
-                               "invert": {
-                                       "color": "#FFFFFF",
-                                       "global": true
-                               }
-                       },
                        "images": {
                                "anonymous": 
"resources/mobile.mainMenu.icons/anonymous.svg",
                                "home": 
"resources/mobile.mainMenu.icons/home.svg",
diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php
index f135fca..55bec2a 100644
--- a/includes/skins/SkinMinerva.php
+++ b/includes/skins/SkinMinerva.php
@@ -398,7 +398,7 @@
                        ->addComponent(
                                $this->msg( 
'mobile-frontend-main-menu-contributions' )->escaped(),
                                SpecialPage::getTitleFor( 'Contributions', 
$user->getName() )->getLocalUrl(),
-                               MobileUI::iconClass( 'mf-contributions-invert', 
'before' ),
+                               MobileUI::iconClass( 'mf-contributions', 
'before' ),
                                [ 'data-event-name' => 'contributions' ]
                        );
        }
@@ -433,7 +433,7 @@
                                        'mobile-frontend-watchlist-purpose',
                                        $watchlistQuery
                                ),
-                               MobileUI::iconClass( 'mf-watchlist-invert', 
'before' ),
+                               MobileUI::iconClass( 'mf-watchlist', 'before' ),
                                [ 'data-event-name' => 'watchlist' ]
                        );
        }
@@ -456,7 +456,7 @@
                                        $this->msg( 
'mobile-frontend-main-menu-settings' )->escaped(),
                                        SpecialPage::getTitleFor( 
'MobileOptions' )->
                                                getLocalUrl( [ 'returnto' => 
$returnToTitle ] ),
-                                       MobileUI::iconClass( 
'mf-settings-invert', 'before' ),
+                                       MobileUI::iconClass( 'mf-settings', 
'before' ),
                                        [ 'data-event-name' => 'settings' ]
                                );
 
@@ -557,7 +557,7 @@
                        ->addComponent(
                                $this->msg( 'mobile-frontend-home-button' 
)->escaped(),
                                Title::newMainPage()->getLocalUrl(),
-                               MobileUI::iconClass( 'mf-home-invert', 'before' 
),
+                               MobileUI::iconClass( 'mf-home', 'before' ),
                                [ 'data-event-name' => 'home' ]
                        );
 
@@ -568,7 +568,7 @@
                                SpecialPage::getTitleFor( 'Randompage',
                                        MWNamespace::getCanonicalName( 
$config->get( 'MFContentNamespace' ) ) )->getLocalUrl() .
                                                '#/random',
-                               MobileUI::iconClass( 'mf-random-invert', 
'before' ),
+                               MobileUI::iconClass( 'mf-random', 'before' ),
                                [
                                        'id' => 'randomButton',
                                        'data-event-name' => 'random',
@@ -584,7 +584,7 @@
                                ->addComponent(
                                        $this->msg( 
'mobile-frontend-main-menu-nearby' )->escaped(),
                                        SpecialPage::getTitleFor( 'Nearby' 
)->getLocalURL(),
-                                       MobileUI::iconClass( 
'mf-nearby-invert', 'before', 'nearby' ),
+                                       MobileUI::iconClass( 'mf-nearby', 
'before', 'nearby' ),
                                        [ 'data-event-name' => 'nearby' ]
                                );
                }
@@ -647,14 +647,14 @@
                                ->addComponent(
                                        $username,
                                        Title::newFromText( $username, NS_USER 
)->getLocalUrl(),
-                                       MobileUI::iconClass( 
'mf-profile-invert', 'before', 'truncated-text primary-action' ),
+                                       MobileUI::iconClass( 'mf-profile', 
'before', 'truncated-text primary-action' ),
                                        [ 'data-event-name' => 'profile' ]
                                )
                                ->addComponent(
                                        $this->msg( 
'mobile-frontend-main-menu-logout' )->escaped(),
                                        $url,
                                        MobileUI::iconClass(
-                                               'mf-logout-invert', 'element', 
'secondary-action truncated-text' ),
+                                               'mf-logout', 'element', 
'secondary-action truncated-text' ),
                                        [ 'data-event-name' => 'logout' ]
                                );
                } else {
@@ -669,7 +669,7 @@
                                ->addComponent(
                                        $this->msg( 
'mobile-frontend-main-menu-login' )->escaped(),
                                        $url,
-                                       MobileUI::iconClass( 
'mf-anonymous-invert', 'before' ),
+                                       MobileUI::iconClass( 'mf-anonymous', 
'before' ),
                                        [ 'data-event-name' => 'login' ]
                                );
                }
diff --git a/minerva.less/minerva.variables.less 
b/minerva.less/minerva.variables.less
index f57eef2..9d20b40 100644
--- a/minerva.less/minerva.variables.less
+++ b/minerva.less/minerva.variables.less
@@ -5,7 +5,7 @@
 // Navigation Drawers
 @menuWidth: 240px;
 @rightDrawerWidth: 60%;
-@primaryNavBackgroundColor: @colorGray3;
+@primaryNavBackgroundColor: @colorGray14;
 
 // Headings
 @firstHeadingFontSize: 2.6525em; // 42px
@@ -35,7 +35,7 @@
 // colors
 @chromeColor: @grayLightest;
 @chromeContentSeparator: @colorGray13;
-@semiTransparent: rgba( 255, 255, 255, 0.8 );
+@semiTransparent: rgba( 0, 0, 0, 0.8 );
 // note this is also used for red links
 @redBase: @colorErrorText;
 @colorTutorial: #2e76ff;
diff --git a/resources/mobile.mainMenu.icons/contributions.svg 
b/resources/mobile.mainMenu.icons/contributions.svg
index 0bebd5c..3908e1f 100644
--- a/resources/mobile.mainMenu.icons/contributions.svg
+++ b/resources/mobile.mainMenu.icons/contributions.svg
@@ -1 +1 @@
-<svg width="48" height="48" viewBox="0 0 48 48" 
xmlns="http://www.w3.org/2000/svg";><title>edit-history</title><path d="M42.88 
29.968c-1.85 9.98-10.664 17.152-21.262 17.152C9.679 47.12 0 37.52 0 25.68 0 
13.84 9.68 4.24 21.618 4.24c.68 0 .68 1.947 0 1.949-10.853.038-19.653 
8.727-19.653 19.49 0 10.765 8.8 19.492 19.653 19.492 9.507 0 17.726-6.305 
19.547-15.203h1.715zm-.857-5.146l-4.289 
5.146h8.576l-4.287-5.146zm-25.557-.282v6.457h6.457l19.043-19.043-6.457-6.457L16.466
 24.54zM46.959 6.96a1.715 1.715 0 0 0 0-2.427L42.93.503a1.715 1.715 0 0 0-2.428 
0l-3.15 3.152 6.456 6.456 3.151-3.15z" fill="#FFF" fill-rule="evenodd"/></svg>
\ No newline at end of file
+<svg width="48" height="48" viewBox="0 0 48 48" 
xmlns="http://www.w3.org/2000/svg";><title>edit-history</title><path d="M42.88 
29.968c-1.85 9.98-10.664 17.152-21.262 17.152C9.679 47.12 0 37.52 0 25.68 0 
13.84 9.68 4.24 21.618 4.24c.68 0 .68 1.947 0 1.949-10.853.038-19.653 
8.727-19.653 19.49 0 10.765 8.8 19.492 19.653 19.492 9.507 0 17.726-6.305 
19.547-15.203h1.715zm-.857-5.146l-4.289 
5.146h8.576l-4.287-5.146zm-25.557-.282v6.457h6.457l19.043-19.043-6.457-6.457L16.466
 24.54zM46.959 6.96a1.715 1.715 0 0 0 0-2.427L42.93.503a1.715 1.715 0 0 0-2.428 
0l-3.15 3.152 6.456 6.456 3.151-3.15z"/></svg>
\ No newline at end of file
diff --git a/resources/mobile.mainMenu/mainmenu.less 
b/resources/mobile.mainMenu/mainmenu.less
index 15bd905..7b827cc 100644
--- a/resources/mobile.mainMenu/mainmenu.less
+++ b/resources/mobile.mainMenu/mainmenu.less
@@ -9,8 +9,8 @@
 @menuSectionPadding: 22px;
 @menuBorderColor: #252525;
 @menuLinkLineHeight: 24px;
-@menuItemFontSize: 1.2em;
-@menuItemBackgroundColor: @colorGray4;
+@menuItemFontSize: 0.875em;
+@menuItemBackgroundColor: @skinContentBgColor;
 
 @pageLeftListDarkBorderColor: #3e3e3e;
 @pageLeftListMediumBorderColor: #5c5c5c;
@@ -37,7 +37,7 @@
                        position: absolute;
                        top: -0.4em;
                        right: 0.6em;
-                       border: solid 0.2em #fff;
+                       border: 0.2em solid #fff;
                        border-radius: 0.5em;
                }
        }
@@ -46,7 +46,6 @@
 // needs to be more specific than .overlay rules
 .notifications-overlay.navigation-drawer {
        right: 0;
-
        height: 100%;
        width: auto;
        box-shadow: -5px 0 0 0 rgba( 0, 0, 0, 0.3 );
@@ -55,7 +54,6 @@
 nav {
        background-color: @primaryNavBackgroundColor;
        float: left;
-       font-size: 90%;
        min-height: 100%;
 
        .client-js & {
@@ -66,7 +64,7 @@
                        top: 0;
                        bottom: 0;
                        padding-right: 0;
-                       border-left: 1px solid @colorGray6;
+                       border-left: 1px solid @grayMediumLight;
                }
 
                .primary-action {
@@ -85,49 +83,56 @@
                }
 
                li {
+                       background-color: @menuItemBackgroundColor;
                        position: relative; // ensure the logout link in beta 
can be position absolute
-                       font-size: @menuItemFontSize;
-                       border-top: 1px solid @colorGray6;
+                       border-top: 1px solid @colorGray14;
                        // offset the border for the icon by 1px
                        margin-top: -1px;
-                       background-color: @menuItemBackgroundColor;
+                       font-size: @menuItemFontSize;
 
                        &:first-child {
                                border-top: 0;
                        }
 
                        a {
-                               color: #fff;
+                               color: @colorGray5;
                                display: block;
                                padding: @menuLinkLineHeight / 2 10px 
@menuLinkLineHeight / 2 15px;
 
                                &:hover {
-                                       background-color: @colorGray5;
                                        box-shadow: inset 4px 0 0 0 
@colorProgressive;
                                        text-decoration: none;
                                }
 
                                &:visited,
                                &:active {
-                                       color: #fff;
+                                       color: @colorGray5;
+                               }
+
+                               &.mw-ui-icon {
+                                       font-weight: bold;
+                                       line-height: 1.857; // equals `26px` at 
`font-size: 14px` above
+
+                                       &:before {
+                                               font-size: 16px;
+                                       }
                                }
                        }
                }
 
                &.hlist {
                        li {
-                               font-size: 0.8em;
-                               margin: 0;
-                               border: 0;
                                background-color: transparent;
+                               border: 0;
+                               margin: 0;
+                               font-size: 0.75em; // equals `12px` at base 
`font-size: 16px`
 
                                a {
-                                       color: @colorGray12;
-                                       border: 0;
+                                       color: @colorProgressive;
                                        padding: 0.7em 12px;
-                                       margin-left: 0;
 
                                        &:hover {
+                                               background-color: transparent;
                                                box-shadow: none;
                                        }
                                }
@@ -136,8 +141,7 @@
        }
 }
 
-body.navigation-enabled {
-
+.navigation-enabled {
        #mw-mf-viewport {
                // disable horizontal scrolling
                overflow: hidden;
@@ -154,9 +158,6 @@
                height: 100%;
                // Overriden in mainmenuAnimation
                left: @menuWidth;
-               // set border here (nav doesn't expand height)
-               border-left: solid 1px #000;
-               box-shadow: -1px 0 3px 0 rgba( 0, 0, 0, 0.3 );
        }
 
        .navigation-drawer,
@@ -166,7 +167,8 @@
 
        .transparent-shield {
                background: @semiTransparent;
-               opacity: 1;
+               opacity: 0.5;
+               .transition( opacity 0.25s ease-in-out );
        }
 }
 
@@ -255,7 +257,6 @@
        nav {
                // make menu scrollable when open (on small screens)
                position: static;
-
                .transition( none );
        }
 }

-- 
To view, visit https://gerrit.wikimedia.org/r/317746
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Ia4b34a1efece98a4167e036901c5def1f73c4b05
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Nirzar <npangar...@wikimedia.org>
Gerrit-Reviewer: VolkerE <volke...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to