diff --git a/TimelessTemplate.php b/TimelessTemplate.php index 02af916..40ab7ad 100644 --- a/TimelessTemplate.php +++ b/TimelessTemplate.php @@ -12,14 +12,13 @@ class TimelessTemplate extends BaseTemplate { $pileOfTools = $this->getPageTools(); $this->html( 'headelement' ); + $userLinks = $this->getUserLinks(); ?> -
+
-
- outputUserLinks(); ?> -
outputLogo( 'p-logo-text', 'text' ); $this->outputSearch(); ?> @@ -351,8 +350,8 @@ class TimelessTemplate extends BaseTemplate { * Outputs the search */ private function outputSearch() { + echo Html::openElement( 'div', [ 'class' => 'mw-portlet', 'id' => 'p-search' ] ); ?> - -
getSkin()->getUser(); - ?> -
-

- - getPersonalTools() as $key => $item ) { + // Skip echo icons and stick them elsewhere + if ( in_array( $key, [ 'notifications-alert', 'notifications-notice' ] ) ) { + $extraTools[$key] = $item; + continue; + } + if ( $key == 'userpage' ) { + $item['links'][0]['text'] = wfMessage( 'timeless-userpage', $user->getName() )->text(); + } + if ( $key == 'mytalk' ) { + $item['links'][0]['text'] = wfMessage( 'timeless-talkpage', $user->getName() )->text(); + } + $dropdownContent .= $this->makeListItem( $key, $item ); + } + $class = empty( $extraTools ) ? '' : 'extension-icons'; + + // p-personal portlet + $html .= Html::openElement( 'div', [ 'id' => 'p-personal' ] ); + + // Header if ( $user->isLoggedIn() ) { $userName = $user->getName(); - // Make sure it fit firsts - if ( mb_strlen( $userName ) < 12 ) { - echo htmlspecialchars( $userName, ENT_QUOTES ); + // Make sure it fits first (numbers slightly made up, may need adjusting) + $fit = empty( $extraTools ) ? 13 : 9; + if ( mb_strlen( $userName ) < $fit ) { + $header = htmlspecialchars( $userName, ENT_QUOTES ); } else { - echo wfMessage( 'timeless-loggedin' )->escaped(); + $header = wfMessage( 'timeless-loggedin' )->escaped(); } } else { - echo wfMessage( 'timeless-anonymous' )->escaped(); - } - ?> - -
-

- -
- 'p-body' ], + Html::rawElement( 'ul', [], $dropdownContent ) + ); + + $html .= Html::closeElement( 'div' ); + $html .= Html::closeElement( 'div' ); + + $html .= Html::closeElement( 'div' ); + + // Extra icon stuff (echo etc) + if ( !empty( $extraTools ) ) { + $iconList = ''; + foreach ( $extraTools as $key => $item ) { + $iconList .= $this->makeListItem( $key, $item ); + } + + $html .= Html::rawElement( + 'div', + [ 'id' => 'p-personal-extra', 'class' => 'p-body' ], + Html::rawElement( 'ul', [], $iconList ) + ); + } + + return [ + 'html' => Html::rawElement( + 'div', + [ 'id' => 'user-tools' ], + $html + ), + 'class' => $class + ]; } /* diff --git a/resources/screen-common.less b/resources/screen-common.less index 68c7390..d4648de 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -146,11 +146,11 @@ div.suggestions { border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; - height: 0px; + height: 0; position: absolute; transform: rotate(360deg); // to force some smoothing in annoying browsers - width: 0px; - z-index: 2; + width: 0; + z-index: 4; } .pokey { top: 1.85em; @@ -477,6 +477,30 @@ table.wikitable > * > tr > th { margin-right: @column-right-size + 1em; } +/* Extension specific junk */ + +/* Echo */ + +#p-personal h2, +#p-personal-extra, +#p-personal-extra ul, +#p-personal-extra li { + display: inline-block; +} +#p-personal-extra { + // Position and keep it from randomly overflowing massively for no apparent reason + margin: .7em 0 -2em 0; + + ul { + list-style: none; + margin: 0 -1em 0 0; + padding: 0; + } + li { + margin: 0 .75em 0 0; + } +} + /* Hidden stuff */ #p-namespaces h3, diff --git a/resources/screen-desktop-mid.less b/resources/screen-desktop-mid.less index 9768e7f..3550130 100644 --- a/resources/screen-desktop-mid.less +++ b/resources/screen-desktop-mid.less @@ -13,6 +13,16 @@ margin-left: @column-left-size; } +// Echo +.extension-icons { + #user-tools { + width: auto; + } + .color-middle { + margin-right: @column-left-size + 2 * @content-padding + 4em; + } +} + // Redundant content category list #catlinks { display: none; diff --git a/resources/screen-desktop-small.less b/resources/screen-desktop-small.less index 5553043..e5d60a7 100644 --- a/resources/screen-desktop-small.less +++ b/resources/screen-desktop-small.less @@ -116,7 +116,7 @@ .dropdown { right: -1em; } - } +} #user-tools { width: 6em; @@ -125,3 +125,10 @@ margin-right: 6em; } +// Echo +.extension-icons #p-search { + margin-right: 11em; +} +#p-personal-extra { + margin-left: -2.5em; +} diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less index 3bb2251..dbcf791 100644 --- a/resources/screen-desktop.less +++ b/resources/screen-desktop.less @@ -78,7 +78,7 @@ right: -2em; } .pokey { - top: 2.125em; + top: 2.05em; } h2 { margin: 0; @@ -91,6 +91,13 @@ background-repeat: no-repeat; .dropdown-header(); + + span { + display: inline-block; + height: 1em; + overflow: hidden; + word-wrap: break-word; + } } &:hover { .pokey, @@ -100,6 +107,16 @@ } } +/* Echo stuff */ +#p-personal-extra { + float: left; + margin-left: -4.5em; +} +.extension-icons { + #p-search { + margin-right: 21em; + } +} #mw-page-header-links #ca-more, #mw-page-header-links #ca-languages, diff --git a/resources/screen-mobile.less b/resources/screen-mobile.less index 25c98aa..31f76aa 100644 --- a/resources/screen-mobile.less +++ b/resources/screen-mobile.less @@ -35,7 +35,6 @@ } /* Dropdowns */ - .sidebar-inner, .dropdown { display: none; @@ -124,6 +123,21 @@ .background-image-svg('images/gear-large-grey.svg', 'images/gear-large-grey.png'); } +/* Echo icons */ + +.mw-echo-ui-notificationBadgeButtonPopupWidget { + z-index: 2; +} +#p-personal-extra { + position: absolute; + top: .9em; + right: 11.75em; + + li { + margin-right: 1.25em; + } +} + /* Logo */ #p-logo-text {