Petar.petkovic has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/404683 )
Change subject: Restyle personal header
......................................................................
Restyle personal header
* Rearrange the code in ContentTranslationSpecialPage to unify
'userpage' tool into method other tools are using.
* Show missing pages in personal menu options with red color.
* Remove underline for personal menu options on hover.
* Small adjustments to personal header style:
- Reduce size of label next to the trademark to 20px.
- Reduce the size of menu handle and options.
- Increase separation between menu and notification icons.
Bug: T184842
Bug: T184571
Bug: T184719
Change-Id: I5f254d9324bf3e27047429b102eb20883be00827
---
M extension.json
M modules/ui/legacy/mw.cx.ui.Header.js
M modules/ui/legacy/styles/mw.cx.ui.Header.less
M modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
A modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.monobook.less
M modules/ui/mw.cx.ui.Header.js
M modules/ui/styles/mw.cx.ui.Header.less
M modules/ui/styles/mw.cx.ui.Header.monobook.less
M modules/ui/styles/mw.cx.ui.Header.vector.less
M modules/ui/styles/widgets/mw.cx.ui.PersonalMenuWidget.less
M modules/widgets/common/ext.cx.common.less
M specials/ContentTranslationSpecialPage.php
12 files changed, 113 insertions(+), 93 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/83/404683/1
diff --git a/extension.json b/extension.json
index 23a88c6..5d23d3b 100644
--- a/extension.json
+++ b/extension.json
@@ -1510,7 +1510,6 @@
"cx-save-draft-save-success",
"cx-save-draft-saving",
"cx-save-draft-tooltip",
- "cx-personaltools-user",
"cx-personaltools-anon",
"login"
],
@@ -1539,7 +1538,6 @@
"cx-save-draft-save-success",
"cx-save-draft-saving",
"cx-save-draft-tooltip",
- "cx-personaltools-user",
"cx-personaltools-anon",
"login"
],
@@ -1685,6 +1683,9 @@
"styles": [
"ui/legacy/styles/mw.cx.ui.ToolsColumn.less"
],
+ "skinStyles": {
+ "monobook": [
"ui/legacy/styles/mw.cx.ui.ToolsColumn.monobook.less" ]
+ },
"dependencies": [
"mw.cx.ui",
"mw.cx.ui.ProgressBarWidget"
diff --git a/modules/ui/legacy/mw.cx.ui.Header.js
b/modules/ui/legacy/mw.cx.ui.Header.js
index d65e203..0e8b156 100644
--- a/modules/ui/legacy/mw.cx.ui.Header.js
+++ b/modules/ui/legacy/mw.cx.ui.Header.js
@@ -116,44 +116,36 @@
* @return {array} menuItems Array of menu items
*/
mw.cx.ui.Header.prototype.getPersonalMenuItems = function () {
- var i, length, menuItem,
+ var index, menuItem,
menuItems = [],
personalMenuList = mw.config.get( 'personalMenuList' );
if ( !this.isAnon ) {
- menuItems.push( this.addUserMenuOption() );
+ menuItem = personalMenuList.user;
+ menuItems.push( this.createUserMenuOption( menuItem ) );
+ delete personalMenuList.user;
}
- for ( i = 0, length = personalMenuList.length; i < length; i++ ) {
- menuItem = personalMenuList[ i ];
-
- menuItems.push( new OO.ui.MenuOptionWidget( {
- label: menuItem.text,
- data: menuItem.href,
- accessKey: menuItem.accesskey,
- $element: $( '<a>' )
- .attr( {
- href: menuItem.href,
- title: menuItem.title
- } )
- } ) );
+ for ( index in personalMenuList ) {
+ menuItem = personalMenuList[ index ];
+ menuItems.push( this.createUserMenuOption( menuItem ) );
}
return menuItems;
};
-mw.cx.ui.Header.prototype.addUserMenuOption = function () {
- var userPageData = mw.config.get( 'userPageData' ),
- userLabel = mw.msg( 'cx-personaltools-user' );
+mw.cx.ui.Header.prototype.createUserMenuOption = function ( menuItem ) {
+ var classes = menuItem.notvisited ? [
'cx-header__personal-menu-option--missing' ] : [];
return new OO.ui.MenuOptionWidget( {
- label: userLabel,
- data: userPageData.link,
- accessKey: userPageData.accesskey,
+ label: menuItem.text,
+ data: menuItem.href,
+ classes: classes,
+ accessKey: menuItem.accesskey,
$element: $( '<a>' )
.attr( {
- href: userPageData.link,
- title: userPageData.title
+ href: menuItem.href,
+ title: menuItem.title
} )
} );
};
diff --git a/modules/ui/legacy/styles/mw.cx.ui.Header.less
b/modules/ui/legacy/styles/mw.cx.ui.Header.less
index dc55bce..7846c7e 100644
--- a/modules/ui/legacy/styles/mw.cx.ui.Header.less
+++ b/modules/ui/legacy/styles/mw.cx.ui.Header.less
@@ -80,7 +80,11 @@
&-menu {
width: auto;
- margin: 0;
+ margin: 0 0 0 4px;
+
+ &-option--missing > .oo-ui-labelElement-label {
+ color: @colorDestructive;
+ }
}
}
diff --git a/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
b/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
index 0fcece6..6a97976 100644
--- a/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
+++ b/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
@@ -8,6 +8,11 @@
min-height: 100vh;
top: @personal-header-height + 2 * @personal-header-padding;
border-left: 1px solid @colorGray12;
+ font-size: 14px;
+
+ > div {
+ font-size: medium;
+ }
&.sticky {
top: 0;
diff --git a/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.monobook.less
b/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.monobook.less
new file mode 100644
index 0000000..d0d7c59
--- /dev/null
+++ b/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.monobook.less
@@ -0,0 +1,4 @@
+
+.cx-column--tools {
+ font-size: 12px;
+}
diff --git a/modules/ui/mw.cx.ui.Header.js b/modules/ui/mw.cx.ui.Header.js
index 2c13a54..132c01e 100644
--- a/modules/ui/mw.cx.ui.Header.js
+++ b/modules/ui/mw.cx.ui.Header.js
@@ -111,44 +111,36 @@
* @return {array} menuItems Array of menu items
*/
mw.cx.ui.Header.prototype.getPersonalMenuItems = function () {
- var i, length, menuItem,
+ var index, menuItem,
menuItems = [],
personalMenuList = mw.config.get( 'personalMenuList' );
if ( !this.isAnon ) {
- menuItems.push( this.addUserMenuOption() );
+ menuItem = personalMenuList.user;
+ menuItems.push( this.createUserMenuOption( menuItem ) );
+ delete personalMenuList.user;
}
- for ( i = 0, length = personalMenuList.length; i < length; i++ ) {
- menuItem = personalMenuList[ i ];
-
- menuItems.push( new OO.ui.MenuOptionWidget( {
- label: menuItem.text,
- data: menuItem.href,
- accessKey: menuItem.accesskey,
- $element: $( '<a>' )
- .attr( {
- href: menuItem.href,
- title: menuItem.title
- } )
- } ) );
+ for ( index in personalMenuList ) {
+ menuItem = personalMenuList[ index ];
+ menuItems.push( this.createUserMenuOption( menuItem ) );
}
return menuItems;
};
-mw.cx.ui.Header.prototype.addUserMenuOption = function () {
- var userPageData = mw.config.get( 'userPageData' ),
- userLabel = mw.msg( 'cx-personaltools-user' );
+mw.cx.ui.Header.prototype.createUserMenuOption = function ( menuItem ) {
+ var classes = menuItem.notvisited ? [
'cx-header__personal-menu-option--missing' ] : [];
return new OO.ui.MenuOptionWidget( {
- label: userLabel,
- data: userPageData.link,
- accessKey: userPageData.accesskey,
+ label: menuItem.text,
+ data: menuItem.href,
+ classes: classes,
+ accessKey: menuItem.accesskey,
$element: $( '<a>' )
.attr( {
- href: userPageData.link,
- title: userPageData.title
+ href: menuItem.href,
+ title: menuItem.title
} )
} );
};
diff --git a/modules/ui/styles/mw.cx.ui.Header.less
b/modules/ui/styles/mw.cx.ui.Header.less
index 34f516d..20adc68 100644
--- a/modules/ui/styles/mw.cx.ui.Header.less
+++ b/modules/ui/styles/mw.cx.ui.Header.less
@@ -11,7 +11,7 @@
}
.cx-header:not( .cx-header--dashboard ) > .cx-header__main {
- padding: 10px;
+ padding: @personal-header-padding;
}
.cx-header__trademark {
@@ -75,7 +75,11 @@
&-menu {
width: auto;
- margin: 0;
+ margin: 0 0 0 4px;
+
+ &-option--missing > .oo-ui-labelElement-label {
+ color: @colorDestructive;
+ }
}
}
@@ -101,7 +105,7 @@
.cx-header__main,
.cx-header__trademark {
- min-height: 2.5em;
+ min-height: @personal-header-height;
}
.cx-header__main:after {
diff --git a/modules/ui/styles/mw.cx.ui.Header.monobook.less
b/modules/ui/styles/mw.cx.ui.Header.monobook.less
index 7f2bb2c..311fc35 100644
--- a/modules/ui/styles/mw.cx.ui.Header.monobook.less
+++ b/modules/ui/styles/mw.cx.ui.Header.monobook.less
@@ -35,6 +35,19 @@
}
.cx-header__trademark-text {
- font-size: 20px;
+ margin-left: 6px;
+ font-size: 18px;
+ }
+
+ .cx-header__main {
+ font-size: 12px;
+ }
+
+ .cx-header__personal {
+ font-size: 12.7px;
+
+ &-menu {
+ font-size: 12px;
+ }
}
}
diff --git a/modules/ui/styles/mw.cx.ui.Header.vector.less
b/modules/ui/styles/mw.cx.ui.Header.vector.less
index aeab13c..0131c64 100644
--- a/modules/ui/styles/mw.cx.ui.Header.vector.less
+++ b/modules/ui/styles/mw.cx.ui.Header.vector.less
@@ -11,7 +11,20 @@
}
.cx-header__trademark-text {
- font-size: 24px;
+ margin-left: 8px;
+ font-size: 20px;
+}
+
+.cx-header__main {
+ font-size: 14px;
+}
+
+.cx-header__personal {
+ font-size: 16px;
+
+ &-menu {
+ font-size: 14px;
+ }
}
/* stylelint-disable selector-no-id */
diff --git a/modules/ui/styles/widgets/mw.cx.ui.PersonalMenuWidget.less
b/modules/ui/styles/widgets/mw.cx.ui.PersonalMenuWidget.less
index 6ddcb31..f4fb5e8 100644
--- a/modules/ui/styles/widgets/mw.cx.ui.PersonalMenuWidget.less
+++ b/modules/ui/styles/widgets/mw.cx.ui.PersonalMenuWidget.less
@@ -6,6 +6,10 @@
font-weight: bold;
}
+ a.oo-ui-menuOptionWidget {
+ text-decoration: none;
+ }
+
.oo-ui-dropdownWidget-handle > .oo-ui-labelElement-label {
display: none;
diff --git a/modules/widgets/common/ext.cx.common.less
b/modules/widgets/common/ext.cx.common.less
index 884d81c..daedce1 100644
--- a/modules/widgets/common/ext.cx.common.less
+++ b/modules/widgets/common/ext.cx.common.less
@@ -18,7 +18,7 @@
@header-bar-height-legacy: 40px;
@personal-header-height: 2.5em;
-@personal-header-padding: 0.625em;
+@personal-header-padding: 0.7em;
.box-shadow-card() {
.box-shadow( 0 1px 1px rgba( 0, 0, 0, 0.15 ) );
diff --git a/specials/ContentTranslationSpecialPage.php
b/specials/ContentTranslationSpecialPage.php
index c97a891..9c4e41f 100644
--- a/specials/ContentTranslationSpecialPage.php
+++ b/specials/ContentTranslationSpecialPage.php
@@ -80,20 +80,7 @@
// Get personal tools for the user
$personalTools = $skin->getStructuredPersonalTools();
- if ( $this->getUser()->isLoggedIn() ) {
- // Customized personal menu on Content Translation
special pages uses current user's
- // username as dropdown menu label, and 'User' menu
item for accessing User: page
- // We send only the link to User: page and the tooltip
for the link
- $userPageData[ 'link' ] = $this->getToolLink(
$personalTools, 'userpage' );
- $tipAndAccesskey = $this->getTooltipAndAccesskey(
'pt-userpage' );
- $userPageData[ 'title' ] = $tipAndAccesskey[ 'title' ];
- $userPageData[ 'accesskey' ] = $tipAndAccesskey[
'accesskey' ];
- $out->addJsConfigVars( 'userPageData', $userPageData );
-
- // Remove userpage, because we have different ways of
providing username and User page
- // link on customized Content translation special pages
personal tools.
- unset( $personalTools[ 'userpage' ] );
- } else {
+ if ( $this->getUser()->isAnon() ) {
// Reorder personal tools for anonymous user.
$personalTools = $this->reorderPersonalTools(
$personalTools,
[ 'createaccount', 'login', 'anontalk',
'anoncontribs' ]
@@ -172,28 +159,47 @@
// From the rest of the personal tools, we need flat
structures of attributes
if ( isset( $item[ 'links' ] ) ) {
foreach ( $item[ 'links' ] as $linkKey => $link
) {
+ $isMissing = false;
+
$menuItem = [
'text' => $link[ 'text' ],
'href' => $link[ 'href' ]
];
+ // We want red links for missing pages
in custom header on Content Translation
+ if ( isset( $link[ 'class' ] ) &&
$link[ 'class' ] === 'new' &&
+ isset( $link[ 'exists' ] ) &&
$link[ 'exists' ] === false
+ ) {
+ $isMissing = true;
+ $menuItem[ 'notvisited' ] =
true;
+ }
+
// single-id has the form of 'pt-uls',
'pt-watchlist'...
// This id is used to get the message
as 'tooltip-$id'
if ( $link[ 'single-id' ] ) {
if ( isset( $link[
'tooltiponly' ] ) && $link[ 'tooltiponly' ] ) {
- $title =
Linker::titleAttrib( $link[ 'single-id' ], null );
+ $title =
Linker::titleAttrib( $link[ 'single-id' ], [ 'nonexisting' ] );
if ( $title !== false )
{
$menuItem[
'title' ] = $title;
}
} else {
$menuItem = array_merge(
$menuItem,
-
$this->getTooltipAndAccesskey( $link[ 'single-id' ] )
+
$this->getTooltipAndAccesskey( $link[ 'single-id' ], $isMissing )
);
}
}
- $personalMenuItems[] = $menuItem;
+ // In Content Translation custom
header, we want to treat User page menu option
+ // separatelly, as username is
displayed in menu handle, and we use just display
+ // "User" as menu option for user's
page.
+ if ( $key === 'userpage' ) {
+ $menuItem[ 'text' ] =
+ wfMessage(
"cx-personaltools-user" )->inContentLanguage()->text();
+ $personalMenuItems[ 'user' ] =
$menuItem;
+ } else {
+ $personalMenuItems[] =
$menuItem;
+ }
}
// We unset all tools except notification
alerts and notices and ULS,
@@ -207,34 +213,16 @@
}
/**
- * Get link for the specified personal tool ( e.g. Preferences )
- *
- * @param array $personalTools
- * @param string $tool Name of the tool
- * @return string|null Link to the tool or null
- */
- protected function getToolLink( array $personalTools, $tool ) {
- $tools = $personalTools[ $tool ];
-
- if ( isset( $tools[ 'links' ] ) ) {
- foreach ( $tools[ 'links' ] as $linkKey => $link ) {
- return $link[ 'href' ];
- }
- }
-
- return null;
- }
-
- /**
* Get tooltip and access key for the specified personal tool ( e.g.
Preferences )
*
* @param string $tool Name of the tool
+ * @param boolean $isMissing True if tool page is missing
* @return array Associative array of title and/or accesskey for the
tool or empty array
*/
- protected function getTooltipAndAccesskey( $tool ) {
+ protected function getTooltipAndAccesskey( $tool, $isMissing ) {
$tipAndAccesskey = [];
- $tip = Linker::tooltipAndAccesskeyAttribs( $tool );
+ $tip = Linker::tooltipAndAccesskeyAttribs( $tool, [],
$isMissing ? 'nonexisting' : [] );
if ( isset( $tip[ 'title' ] ) ) {
$tipAndAccesskey[ 'title' ] = $tip[ 'title' ];
}
--
To view, visit https://gerrit.wikimedia.org/r/404683
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5f254d9324bf3e27047429b102eb20883be00827
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Petar.petkovic <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
