jenkins-bot has submitted this change and it was merged.
Change subject: Add Fixed header experiment to Vector Beta
......................................................................
Add Fixed header experiment to Vector Beta
Winter. It's on.
$wgVectorBetaWinter = true to enable.
Change-Id: I8f34fdbc4857adb8534bc9393749ba2bf5ca37fc
---
M VectorBeta.hooks.php
M VectorBeta.i18n.php
M VectorBeta.php
A javascripts/header.js
A less/header.less
A less/search-suggestions.less
M less/styles.less
M less/variables-beta.less
8 files changed, 265 insertions(+), 36 deletions(-)
Approvals:
JGonera: Looks good to me, approved
jenkins-bot: Verified
diff --git a/VectorBeta.hooks.php b/VectorBeta.hooks.php
index 9b70d8f..dd81a8e 100644
--- a/VectorBeta.hooks.php
+++ b/VectorBeta.hooks.php
@@ -21,7 +21,8 @@
class VectorBetaHooks {
static function getPreferences( $user, &$prefs ) {
- global $wgExtensionAssetsPath, $wgVectorBetaPersonalBar;
+ global $wgExtensionAssetsPath, $wgVectorBetaPersonalBar,
+ $wgVectorBetaWinter;
$screenshotFileName = '/VectorBeta/typography-beta.svg';
$language = RequestContext::getMain()->getLanguage();
@@ -52,6 +53,17 @@
'info-link' =>
'https://www.mediawiki.org/wiki/Compact_Personal_Bar',
'discussion-link' =>
'https://www.mediawiki.org/wiki/Talk:Compact_Personal_Bar',
'screenshot' =>
"$wgExtensionAssetsPath/VectorBeta/compactPersonalBar-$dir.svg",
+ );
+ }
+
+ if ( $wgVectorBetaWinter ) {
+ $prefs['betafeatures-vector-fixedheader'] = array(
+ 'label-message' =>
'vector-beta-feature-fixedheader-message',
+ 'desc-message' =>
'vector-beta-feature-fixedheader-description',
+ 'info-link' =>
'//www.mediawiki.org/wiki/Winter',
+ 'discussion-link' =>
'//www.mediawiki.org/wiki/Talk:Winter',
+ // FIXME: Get a screenshot from Jared asap
+ 'screenshot' => '',
'requirements' => array(
'skins' => array( 'vector' ),
),
@@ -68,17 +80,23 @@
* @return bool
*/
static function skinVectorStyleModules( $skin, &$modules ) {
- if ( class_exists( 'BetaFeatures')
- && BetaFeatures::isFeatureEnabled( $skin->getUser(),
'betafeatures-vector-typography-update' )
- ) {
- $index = array_search( 'skins.vector.styles', $modules
);
- if ( $index !== false ) {
- array_splice( $modules, $index, 1 );
+ if ( class_exists( 'BetaFeatures' ) ) {
+ $typeEnabled = BetaFeatures::isFeatureEnabled(
$skin->getUser(), 'betafeatures-vector-typography-update' );
+ $fixedHeaderEnabled = BetaFeatures::isFeatureEnabled(
$skin->getUser(), 'betafeatures-vector-fixedheader' );
+ if ( $typeEnabled ) {
+ $index = array_search( 'skins.vector.styles',
$modules );
+ if ( $index !== false ) {
+ array_splice( $modules, $index, 1 );
+ }
+ $modules[] = 'skins.vector.beta';
}
- $modules[] = 'skins.vector.beta';
- } elseif ( !class_exists( 'BetaFeatures' ) ) {
+ if ( $fixedHeaderEnabled ) {
+ $modules[] = 'skins.vector.header.beta';
+ }
+ } else {
wfDebugLog( 'VectorBeta', 'The BetaFeatures extension
is not installed' );
}
+
return true;
}
@@ -90,14 +108,22 @@
*/
static function onBeforePageDisplay( &$out, &$skin ) {
if ( class_exists( 'BetaFeatures' ) ) {
- $out->addModules( array(
-
'skins.vector.compactPersonalBar.defaultTracking',
- ) );
- if ( BetaFeatures::isFeatureEnabled(
$out->getSkin()->getUser(), 'betafeatures-vector-compact-personal-bar' ) ) {
- $out->addModules( array(
- 'skins.vector.compactPersonalBar',
- ) );
+ $user = $out->getUser();
+ $modules = array();
+
+ // Fixed header experiment modules
+ if ( BetaFeatures::isFeatureEnabled( $user,
'betafeatures-vector-fixedheader' ) ) {
+ $modules[] = 'skins.vector.headerjs.beta';
}
+
+ // Compact Personal Bar modules
+ $modules[] =
'skins.vector.compactPersonalBar.defaultTracking';
+
+ if ( BetaFeatures::isFeatureEnabled( $user,
'betafeatures-vector-compact-personal-bar' ) ) {
+ $modules[] = 'skins.vector.compactPersonalBar';
+ }
+
+ $out->addModules( $modules );
} else {
wfDebugLog( 'VectorBeta', 'The BetaFeatures extension
is not installed' );
}
diff --git a/VectorBeta.i18n.php b/VectorBeta.i18n.php
index 2e7c44f..53c9858 100644
--- a/VectorBeta.i18n.php
+++ b/VectorBeta.i18n.php
@@ -30,6 +30,8 @@
'vector-beta-feature-typography-description' => 'Updates typography of
the Vector skin to improve readability, accessibility and consistency.',
'vector-beta-feature-compact-personal-bar-message' => 'Compact personal
bar',
'vector-beta-feature-compact-personal-bar-description' => 'Collapses
personal bar into a flyout menu.',
+ 'vector-beta-feature-fixedheader-message' => 'Winter',
+ 'vector-beta-feature-fixedheader-description' => 'Turns the header on
the default Vector skin into a fixed header.',
);
/** Message documentation (Message documentation)
@@ -40,6 +42,8 @@
'vector-beta-feature-typography-description' => 'Brief explanation of
Vector typography beta feature experiment which updates/refreshes Vectors
existing typography for first time since its launch.',
'vector-beta-feature-compact-personal-bar-message' => 'Name shown in
user preferences for Compact personal bar beta feature experiment.',
'vector-beta-feature-compact-personal-bar-description' => 'Brief
explanation of Compact personal bar beta feature experiment.',
+ 'vector-beta-feature-fixedheader-message' => 'Name shown in user
preferences for Vector header beta feature experiment.',
+ 'vector-beta-feature-fixedheader-description' => 'Brief explanation of
Vector header beta feature experiment which makes the header fixed.',
);
/** Arabic (العربية)
diff --git a/VectorBeta.php b/VectorBeta.php
index f5e0b16..ecb9d98 100644
--- a/VectorBeta.php
+++ b/VectorBeta.php
@@ -19,8 +19,10 @@
* @ingroup extensions
*/
-$localBasePath = dirname( __DIR__ ) . '/VectorBeta';
-$remoteExtPath = 'VectorBeta';
+$wgVBResourceBoilerplate = array(
+ 'localBasePath' => __DIR__,
+ 'remoteExtPath' => 'VectorBeta',
+);
$wgExtensionCredits['betafeatures'][] = array(
'author' => array( 'Jon Robson', 'Trevor Parscal', 'Juliusz Gonera' ),
@@ -35,25 +37,45 @@
*/
$wgVectorBetaPersonalBar = false;
-$wgResourceModules = array_merge( $wgResourceModules, array(
- 'skins.vector.beta' => array(
- 'styles' => array(
- 'less/styles.less',
- ),
- 'remoteExtPath' => $remoteExtPath,
- 'localBasePath' => $localBasePath,
- ),
-) );
+/**
+ * Enable Winter experiment.
+ */
+$wgVectorBetaWinter = false;
$wgAutoloadClasses['VectorBetaHooks'] = __DIR__ . '/VectorBeta.hooks.php';
$wgExtensionMessagesFiles['VectorBeta'] = __DIR__ . '/VectorBeta.i18n.php';
-$wgVBResourceBoilerplate = array(
- 'localBasePath' => __DIR__,
- 'remoteExtPath' => 'VectorBeta',
-);
+$wgResourceModules = array_merge( $wgResourceModules, array(
+ 'skins.vector.beta' => $wgVBResourceBoilerplate + array(
+ 'styles' => array(
+ 'less/styles.less',
+ ),
+ ),
+ 'skins.vector.header.beta' => $wgVBResourceBoilerplate + array(
+ 'styles' => array(
+ 'less/header.less',
+ ),
+ // Other ensures this loads after the Vector skin styles
+ 'group' => 'other',
+ ),
+
+ 'skins.vector.headerjs.beta' => $wgVBResourceBoilerplate + array(
+ 'dependencies' => array(
+ 'jquery.throttle-debounce',
+ ),
+ 'scripts' => array(
+ 'javascripts/header.js',
+ ),
+ 'styles' => array(
+ 'less/search-suggestions.less',
+ ),
+ ),
+) );
+
+
+// FIXME: Move these into array_merge above
$wgResourceModules['skins.vector.compactPersonalBar.trackClick'] =
$wgVBResourceBoilerplate + array(
'dependencies' => array(
'mediawiki.user',
@@ -97,6 +119,7 @@
);
$wgHooks['GetBetaFeaturePreferences'][] = 'VectorBetaHooks::getPreferences';
+$wgHooks['BeforePageDisplay'][] = 'VectorBetaHooks::onBeforePageDisplay';
$wgHooks['SkinVectorStyleModules'][] =
'VectorBetaHooks::skinVectorStyleModules';
$wgHooks['BeforePageDisplay'][] = 'VectorBetaHooks::onBeforePageDisplay';
$wgHooks['ResourceLoaderRegisterModules'][] =
'VectorBetaHooks::onResourceLoaderRegisterModules';
diff --git a/javascripts/header.js b/javascripts/header.js
new file mode 100644
index 0000000..8b33233
--- /dev/null
+++ b/javascripts/header.js
@@ -0,0 +1,11 @@
+jQuery( function( $ ) {
+ var $body = $( 'body' );
+ function goPositionFixed() {
+ if ( $( this ).scrollTop() > 0 ) {
+ $body.addClass( 'mw-scrolled' );
+ } else {
+ $body.removeClass( 'mw-scrolled' );
+ }
+ }
+ $( window ).on( 'scroll', $.debounce( 100, goPositionFixed ) );
+} );
diff --git a/less/header.less b/less/header.less
new file mode 100644
index 0000000..4ea9dec
--- /dev/null
+++ b/less/header.less
@@ -0,0 +1,111 @@
+@import 'variables-beta';
+
+#p-logo,
+body {
+ background-color: #fff;
+}
+
+div#content {
+ padding-left: @header-height;
+}
+
+#mw-page-base {
+ background: none;
+}
+
+#p-search {
+ position: fixed;
+ top: 0;
+ left: @left-nav-width;
+ font-size: 1em;
+ margin: 0;
+ width: 100%;
+ background-color: #FFF;
+
+ // FIXME: Reset original vector style. When upstream just remove the
rule.
+ form {
+ margin: 0;
+ }
+}
+
+.mw-scrolled #p-logo,
+div#simpleSearch {
+ height: @header-height;
+}
+
+.mw-scrolled #p-logo {
+ position: fixed;
+ left: 0;
+ top: 0;
+ padding: 0;
+ margin: 0;
+ width: @left-nav-width;
+ border-bottom: 1px solid @content-nav-divider-color;
+
+ a {
+ height: 2.2em;
+ width: 11em;
+ background-size: auto 2.2em;
+ background-position: center top;
+ }
+}
+
+
+// Change the border left of the content panes
+div.vectorTabs {
+ background: none;
+}
+
+#p-search,
+div.vectorTabs,
+div#content {
+ border-left: 1px solid @content-nav-divider-color;
+}
+
+#p-cactions {
+ ul {
+ right: 0;
+ }
+}
+
+div#simpleSearch {
+ background: none;
+ margin: 0;
+ border: none;
+ border-bottom: 1px solid @content-nav-divider-color;
+ width: 100%;
+
+ #searchButton {
+ position: absolute;
+ left: 0;
+ height: 100%;
+ padding: 0;
+ top: 0;
+ width: 50px;
+
+ // FIXME: Kill image tag when upstream to core.
+ img {
+ display: none;
+ }
+ }
+
+ // FIXME: Doesn't need to be so specific
+ input#searchInput {
+ position: relative;
+ left: @header-height + .35em;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ }
+}
+
+// These are not needed when typography feature is enabled but just in case
they are not...
+@media screen and (min-width: 982px) {
+ #p-logo {
+ left: 0;
+ }
+ #left-navigation,
+ div#content {
+ margin-left: @left-nav-width;
+ }
+}
diff --git a/less/search-suggestions.less b/less/search-suggestions.less
new file mode 100644
index 0000000..66ef621
--- /dev/null
+++ b/less/search-suggestions.less
@@ -0,0 +1,47 @@
+@import 'variables-beta';
+
+.suggestions-results,
+.suggestions,
+.suggestions-special {
+ border: none;
+}
+
+.suggestions {
+ // Override 13px default in inline style (yuk)
+ font-size: 1em !important;
+ position: fixed !important;
+ // Add the border and the height of the header to get the top position
+ top: @header-height + .35em !important;
+ margin-top: 1px !important;
+ width: auto !important;
+ box-sizing: border-box;
+ right: 0.35em !important;
+ border-bottom: 1px solid @content-nav-divider-color;
+
+ .suggestions-results {
+ margin-bottom: 2px;
+
+ a {
+ display: block;
+ border-bottom: solid 1px @gray-base-color;
+ padding: 0;
+ width: 100%;
+ div {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 50px;
+ &.suggestions-result-current {
+ background-color: @blue-base-color;
+ color: white;
+ }
+ }
+ }
+ }
+}
+
+@media screen and (min-width: 768px) {
+ .suggestions {
+ // Add the border and the height of the header to get the top
position
+ top: @header-height !important;
+ }
+}
diff --git a/less/styles.less b/less/styles.less
index 31dfe34..0d5b98a 100644
--- a/less/styles.less
+++ b/less/styles.less
@@ -4,13 +4,10 @@
@media screen {
@import "components/common.less";
+ // FIXME: Refactor this in core and break this out so VectorBeta Winter
can completely rewrite it
@import "components/navigation.less";
@import "components/footer.less";
@import "components/notifications.less";
@import "screen-beta.less";
@import "thumbnails.less";
-}
-
-@media screen and (min-width: 982px) {
- @import "screen-hd.less";
}
diff --git a/less/variables-beta.less b/less/variables-beta.less
index 940d713..8cb7252 100644
--- a/less/variables-beta.less
+++ b/less/variables-beta.less
@@ -2,6 +2,10 @@
@body-font-size: inherit;
+// Header
+@content-nav-divider-color: #ccc;
+@header-height: 3em;
+
// Page content
@content-font-family: Arimo, "Liberation Sans", "Helvetica Neue", Helvetica,
Arial, sans-serif;
@content-font-color: #252525;
@@ -9,4 +13,10 @@
@content-line-height: 1.6;
@content-padding: 1em;
@content-heading-font-size: 1.6em;
-@content-heading-font-family: "Linux Libertine", Georgia, Times, serif;
\ No newline at end of file
+@content-heading-font-family: "Linux Libertine", Georgia, Times, serif;
+
+// Colors
+@blue-base-color: #1B61DD;
+@left-nav-width: 10em;
+@gray-base-color: #EEE;
+
--
To view, visit https://gerrit.wikimedia.org/r/107523
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8f34fdbc4857adb8534bc9393749ba2bf5ca37fc
Gerrit-PatchSet: 16
Gerrit-Project: mediawiki/extensions/VectorBeta
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Awjrichards <[email protected]>
Gerrit-Reviewer: Gabrielchihonglee <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Jorm <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: MaxSem <[email protected]>
Gerrit-Reviewer: Swalling <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
