jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/396281 )
Change subject: CX1: Make header bar on translation view sticky again
......................................................................
CX1: Make header bar on translation view sticky again
- Bring back the sticky behavior for header bar on CX1,
which was removed in Ia74ddbe3af.
- Integrate publish button into the document area of
the translation view on CX1.
Bug: T174138
Bug: T160068
Change-Id: Id77aa5be3e807f19021eca4eb21d2bb7d1d02bc3
---
M extension.json
A modules/ui/legacy/mw.cx.ui.Header.js
M modules/ui/legacy/styles/mw.cx.ui.Columns.less
A modules/ui/legacy/styles/mw.cx.ui.Header.less
M modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
M modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
M modules/widgets/common/ext.cx.common.less
7 files changed, 267 insertions(+), 5 deletions(-)
Approvals:
jenkins-bot: Verified
Nikerabbit: Checked; Looks good to me, approved
diff --git a/extension.json b/extension.json
index 0b6d644..05213f7 100644
--- a/extension.json
+++ b/extension.json
@@ -1475,7 +1475,7 @@
"ext.cx.sitemapper",
"ext.cx.util",
"mw.cx.ui.Columns.legacy",
- "mw.cx.ui.Header",
+ "mw.cx.ui.Header.legacy",
"mw.cx.ui.PublishSettingsWidget",
"mw.cx.util"
]
@@ -1513,6 +1513,32 @@
"mw.cx.ui.Infobar"
]
},
+ "mw.cx.ui.Header.legacy": {
+ "targets": [ "desktop", "mobile" ],
+ "scripts": [
+ "ui/legacy/mw.cx.ui.Header.js"
+ ],
+ "styles": [
+ "ui/legacy/styles/mw.cx.ui.Header.less"
+ ],
+ "messages": [
+ "cx",
+ "cx-draft-restore-failed",
+ "cx-draft-restored",
+ "cx-draft-restoring",
+ "cx-save-draft-error",
+ "cx-save-draft-save-success",
+ "cx-save-draft-saving",
+ "cx-save-draft-tooltip",
+ "login"
+ ],
+ "dependencies": [
+ "jquery.throttle-debounce",
+ "mw.cx.ui",
+ "oojs-ui.styles.icons-wikimedia",
+ "mw.cx.ui.Infobar"
+ ]
+ },
"mw.cx.ui.Header.skin": {
"targets": [ "desktop", "mobile" ],
"styles": [
diff --git a/modules/ui/legacy/mw.cx.ui.Header.js
b/modules/ui/legacy/mw.cx.ui.Header.js
new file mode 100644
index 0000000..0218132
--- /dev/null
+++ b/modules/ui/legacy/mw.cx.ui.Header.js
@@ -0,0 +1,126 @@
+'use strict';
+
+/**
+ * TranslationView Header
+ *
+ * @class
+ * @extends OO.ui.PanelLayout
+ * @param {Object} [config] Configuration object
+ */
+mw.cx.ui.Header = function ( config ) {
+ // Configuration initialization
+ this.config = config || {};
+ this.$headerBar = null;
+ this.$headerBarContainer = null;
+ this.$toolbar = null;
+ this.infobar = null;
+ this.statusbar = null;
+ // Parent constructor
+ mw.cx.ui.Header.super.call( this, $.extend( {}, this.config, {
+ continuous: true,
+ expanded: false,
+ $content: this.getContent(),
+ classes: [ 'cx-widget__header', 'cx-header' ]
+ } ) );
+ this.listen();
+};
+
+/* Inheritance */
+
+OO.inheritClass( mw.cx.ui.Header, OO.ui.PanelLayout );
+
+mw.cx.ui.Header.static.timer = null;
+
+mw.cx.ui.Header.prototype.getContent = function () {
+ var logo, $titleText, $headerTitle, $translationCenterLink,
$translationCenter;
+
+ logo = new OO.ui.ButtonWidget( {
+ href: mw.config.get( 'wgScript' ),
+ icon: 'logoWikipedia',
+ classes: [ 'cx-header__logo' ],
+ framed: false
+ } );
+ $titleText = $( '<span>' )
+ .addClass( 'cx-header__title-text' )
+ .text( this.config.titleText || mw.msg( 'cx' ) );
+
+ $headerTitle = $( '<div>' )
+ .addClass( 'cx-header__title' )
+ .append( logo.$element, $titleText );
+
+ $translationCenterLink = $( '<a>' )
+ .attr( 'href', mw.util.getUrl( 'Special:ContentTranslation' ) )
+ .text( mw.msg( 'cx-header-all-translations' ) );
+
+ $translationCenter = $( '<div>' )
+ .addClass( 'cx-header__translation-center' )
+ .append( $translationCenterLink );
+
+ this.statusbar = new OO.ui.LabelWidget( {
+ classes: [ 'cx-header-draft-status' ],
+ title: mw.msg( 'cx-save-draft-tooltip' )
+ } );
+
+ this.$toolbar = $( '<div>' )
+ .addClass( 'cx-header__toolbar' );
+
+ this.$headerBar = $( '<div>' )
+ .addClass( 'cx-header__bar' )
+ .append( $translationCenter, this.statusbar.$element,
this.$toolbar );
+
+ this.$headerBarContainer = $( '<div>' )
+ .addClass( 'cx-header__bar-container' )
+ .append( this.$headerBar );
+
+ this.infobar = new mw.cx.ui.Infobar( this.config );
+ return $( '<div>' ).append( $headerTitle, this.$headerBarContainer,
this.infobar.$element );
+};
+
+mw.cx.ui.Header.prototype.listen = function () {
+ mw.hook( 'mw.cx.translation.save-started' ).add(
+ this.setStatusMessage.bind( this, mw.msg(
'cx-save-draft-saving' ) )
+ );
+ mw.hook( 'mw.cx.translation.saved' ).add( function () {
+ var minutes = 0;
+
+ clearTimeout( this.constructor.static.timer );
+ this.setStatusMessage( mw.msg( 'cx-save-draft-save-success', 0
) );
+ this.constructor.static.timer = setInterval( function () {
+ minutes++;
+ this.setStatusMessage(
+ mw.msg( 'cx-save-draft-save-success',
mw.language.convertNumber( minutes ) )
+ );
+ }.bind( this ), 60 * 1000 );
+ }.bind( this ) );
+ mw.hook( 'mw.cx.translation.save-failed' ).add(
+ this.setStatusMessage.bind( this, mw.msg( 'cx-save-draft-error'
) )
+ );
+
+ mw.hook( 'mw.cx.draft.restoring' ).add(
+ this.setStatusMessage.bind( this, mw.msg( 'cx-draft-restoring'
) )
+ );
+ mw.hook( 'mw.cx.draft.restored' ).add(
+ this.setStatusMessage.bind( this, mw.msg( 'cx-draft-restored' )
)
+ );
+ mw.hook( 'mw.cx.draft.restore-failed' ).add( function () {
+ this.setStatusMessage( mw.msg( 'cx-draft-restore-failed' ) );
+ $( '.cx-widget__columns' ).addClass( 'disabled' );
+ }.bind( this ) );
+
+ $( window ).on( 'scroll resize', $.throttle( 250,
this.onWindowScroll.bind( this ) ) );
+};
+
+mw.cx.ui.Header.prototype.setStatusMessage = function ( message ) {
+ this.statusbar.setLabel( message );
+};
+
+mw.cx.ui.Header.prototype.onWindowScroll = function () {
+ var scrollTop = $( window ).scrollTop(),
+ headerOffsetTop = this.$headerBarContainer.offset().top;
+
+ if ( scrollTop > headerOffsetTop ) {
+ this.$element.addClass( 'sticky' );
+ } else {
+ this.$element.removeClass( 'sticky' );
+ }
+};
diff --git a/modules/ui/legacy/styles/mw.cx.ui.Columns.less
b/modules/ui/legacy/styles/mw.cx.ui.Columns.less
index 1435014..1411c74 100644
--- a/modules/ui/legacy/styles/mw.cx.ui.Columns.less
+++ b/modules/ui/legacy/styles/mw.cx.ui.Columns.less
@@ -2,7 +2,6 @@
@import '../../../widgets/common/ext.cx.common.less';
.cx-widget__columns {
- margin-top: 80px;
min-height: 100vh;
&.disabled {
@@ -12,13 +11,11 @@
}
.cx-column {
- .mw-ui-item;
.mw-ui-one-third;
.mw-ui-gutter(3%);
}
.cx-column__sub-heading {
- .mw-ui-item;
.mw-ui-one-whole;
padding: 5px 0;
line-height: 2em;
diff --git a/modules/ui/legacy/styles/mw.cx.ui.Header.less
b/modules/ui/legacy/styles/mw.cx.ui.Header.less
new file mode 100644
index 0000000..6463bf5
--- /dev/null
+++ b/modules/ui/legacy/styles/mw.cx.ui.Header.less
@@ -0,0 +1,104 @@
+@import '../../../widgets/common/ext.cx.common.less';
+@import 'mediawiki.mixins';
+
+.cx-header {
+ transition: width 0.15s;
+}
+
+.cx-header__logo {
+ display: inline-block;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 42px;
+ height: 38px;
+ border-right: 1px solid @colorGray12;
+}
+
+.cx-header__title {
+ .mw-ui-two-fifths;
+
+ padding: 0;
+ font-size: 18px;
+ color: @colorGray7;
+}
+
+.cx-header__title-text {
+ display: inline-block;
+ padding-top: 8px;
+}
+
+.cx-header__bar-container {
+ .mw-ui-two-thirds;
+
+ height: @header-bar-height-legacy;
+ border: 1px solid @colorGray14;
+ border-width: 1px 0 1px 0;
+ padding: 0;
+}
+
+.cx-header__translation-center {
+ .mw-ui-one-third;
+ line-height: 2.5;
+
+ a {
+ color: @gray-dark;
+ font-weight: bold;
+
+ &:before {
+ content: '';
+
+ display: inline-block;
+ border: 6px solid transparent;
+ border-right-color: @gray-dark;
+ margin: 0 8px 0 0;
+ }
+
+ &:after {
+ content: '';
+
+ position: absolute;
+ // Subtract two pixels as parent doesn't have
`box-sizing: border-box`,
+ // and loses two pixels on borders
+ height: @header-bar-height-legacy - 2px;
+ margin-left: 0.5em;
+ border-right: 1px solid @colorGray14;
+ }
+ }
+}
+
+.cx-header-draft-status {
+ .mw-ui-one-third;
+ color: @colorGray7;
+
+ font-size: medium;
+ font-weight: bold;
+ line-height: 2.5;
+ text-align: center;
+}
+
+.cx-header.sticky {
+ .cx-header__bar {
+ background-color: @white;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ width: 66.666%;
+ padding: 0;
+ .box-shadow( 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ) );
+
+ z-index: 10;
+
+ .cx-header__translation-center a:after {
+ // On sticky header bar, there are no borders, so we
fill the whole height
+ height: @header-bar-height-legacy;
+ }
+
+ .cx-header__publish > .oo-ui-buttonWidget >
.oo-ui-buttonElement-button {
+ height: @header-bar-height-legacy;
+ }
+ }
+}
diff --git a/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
b/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
index 45f9156..28f2b15 100644
--- a/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
+++ b/modules/ui/legacy/styles/mw.cx.ui.ToolsColumn.less
@@ -6,6 +6,7 @@
background-color: #eaecf0;
min-height: 100vh;
position: relative;
+ top: -@header-bar-height-legacy;
z-index: 20;
border-left: 1px solid #c8ccd1;
diff --git a/modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
b/modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
index 3120174..cf94a05 100644
--- a/modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
+++ b/modules/ui/legacy/styles/mw.cx.ui.TranslationView.less
@@ -45,7 +45,13 @@
}
.cx-header__publish {
- .mw-ui-item;
.mw-ui-one-third;
+
float: right;
+ padding: 0;
+ text-align: right;
+
+ .oo-ui-buttonWidget > .oo-ui-buttonElement-button {
+ border-radius: 0;
+ }
}
diff --git a/modules/widgets/common/ext.cx.common.less
b/modules/widgets/common/ext.cx.common.less
index 3351fbf..b6b9bd3 100644
--- a/modules/widgets/common/ext.cx.common.less
+++ b/modules/widgets/common/ext.cx.common.less
@@ -16,6 +16,8 @@
@wide: 1200px;
@max-dashboard-width: 1500px;
+@header-bar-height-legacy: 40px;
+
.box-shadow-card() {
.box-shadow( 0 1px 1px rgba( 0, 0, 0, 0.15 ) );
}
--
To view, visit https://gerrit.wikimedia.org/r/396281
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id77aa5be3e807f19021eca4eb21d2bb7d1d02bc3
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Petar.petkovic <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Nikerabbit <[email protected]>
Gerrit-Reviewer: Petar.petkovic <[email protected]>
Gerrit-Reviewer: Santhosh <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
