jenkins-bot has submitted this change and it was merged.
Change subject: Split language settings view into two tabs
......................................................................
Split language settings view into two tabs
Change-Id: I539b9794227e0aeac9a759b7e4aa3daf8b73a5c8
---
M i18n/en.json
M i18n/qqq.json
M resources/css/ext.uls.displaysettings.css
M resources/js/ext.uls.displaysettings.js
4 files changed, 99 insertions(+), 17 deletions(-)
Approvals:
Nikerabbit: Looks good to me, approved
jenkins-bot: Verified
diff --git a/i18n/en.json b/i18n/en.json
index 7d1322e..cf43331 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -7,6 +7,8 @@
"message-documentation": "qqq"
},
"ext-uls-display-settings-title": "Display settings",
+"ext-uls-display-settings-language-tab": "Language",
+"ext-uls-display-settings-fonts-tab": "Fonts",
"ext-uls-display-settings-title-short": "Display",
"ext-uls-display-settings-desc": "Set language used for menus and fonts.",
"ext-uls-select-language-settings-icon-tooltip": "Language settings",
@@ -15,7 +17,7 @@
"ext-uls-language-settings-apply": "Apply settings",
"ext-uls-language-settings-cancel": "Cancel",
"ext-uls-display-settings-font-settings": "Font settings",
-"ext-uls-display-settings-ui-language": "Language for display",
+"ext-uls-display-settings-ui-language": "Display language",
"ext-uls-webfonts-settings-title": "Download font when needed",
"ext-uls-webfonts-settings-info": "Webfonts will be downloaded for displaying
text in special scripts.",
"ext-uls-webfonts-settings-info-link": "More information",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 52f57cb..0108faa 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -9,6 +9,8 @@
]
},
"ext-uls-display-settings-title": "Display settings title text",
+ "ext-uls-display-settings-language-tab": "A button label, which shows
the language selection buttons",
+ "ext-uls-display-settings-fonts-tab": "A button label, which shows the
fonts settings",
"ext-uls-display-settings-title-short": "A short name for display
settings screen. Can be a translation for 'Display'",
"ext-uls-display-settings-desc": "Short description about display
settings. 'Set language used for menus and set fonts' is equivalent in meaning
to the source message.",
"ext-uls-select-language-settings-icon-tooltip": "A tooltip for the
icon that shows the language selector.",
diff --git a/resources/css/ext.uls.displaysettings.css
b/resources/css/ext.uls.displaysettings.css
index d880a43..7586d9f 100644
--- a/resources/css/ext.uls.displaysettings.css
+++ b/resources/css/ext.uls.displaysettings.css
@@ -10,6 +10,56 @@
cursor: pointer;
}
+.uls-display-settings-tab-switcher {
+ text-align: center;
+}
+
+.uls-button-group {
+ display: inline-block;
+ position: relative;
+ padding: 0 0 0 0;
+ left: -20px;
+ z-index: 1;
+}
+
+.uls-button-group > button.button {
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ -ms-border-radius: 0;
+ -o-border-radius: 0;
+ border-radius: 0;
+ float: left;
+ padding: 8px 10px;
+ min-width: 80px;
+ margin: 0;
+}
+
+.uls-button-group > button.button:first-child {
+ -moz-border-radius-topleft: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-top-left-radius: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+}
+
+.uls-button-group > button.button:last-child {
+ -moz-border-radius-topright: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-top-right-radius: 3px;
+ -moz-border-radius-bottomright: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+.ext-uls-sub-panel {
+ border-top: 1px solid #EEEEEE;
+ padding-top: 25px;
+ top: -20px;
+ position:relative;
+ min-height: 150px;
+}
+
.uls-font-label,
.uls-font-select {
font-size: 10pt;
diff --git a/resources/js/ext.uls.displaysettings.js
b/resources/js/ext.uls.displaysettings.js
index 2fbde47..08709ed 100644
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -21,13 +21,19 @@
'use strict';
var template = '<div class="uls-display-settings">'
- + '<div class="row">' // Top "Display settings" title
- + '<div class="twelve columns">'
- + '<h3 data-i18n="ext-uls-display-settings-title"></h3>'
+
+ + '<div class="row">' // Tab switcher buttons
+ + '<div class="twelve columns
uls-display-settings-tab-switcher">'
+ + '<div class="uls-button-group">'
+ + '<button id="uls-display-settings-language-tab" class="button
down" data-i18n="ext-uls-display-settings-language-tab"></button>'
+ + '<button id="uls-display-settings-fonts-tab" class="button"
data-i18n="ext-uls-display-settings-fonts-tab"></button>'
+ + '</div>'
+ '</div>'
+ '</div>'
- // "Language for display", title above the buttons row
+ + '<div class="ext-uls-sub-panel
uls-display-settings-language-tab">' // Begin display language sub-panel
+
+ // "Display language", title above the buttons row
+ '<div class="row">'
+ '<div class="eleven columns">'
+ '<h4 data-i18n="ext-uls-display-settings-ui-language"></h4>'
@@ -38,6 +44,10 @@
+ '<div class="row">'
+ '<div class="uls-ui-languages eleven columns"></div>'
+ '</div>'
+
+ + '</div>' // End display language section
+
+ + '<div class="ext-uls-sub-panel uls-display-settings-fonts-tab
hide">' // Begin font settings section, hidden by default
// "Font settings" title
+ '<div class="row">'
@@ -73,6 +83,8 @@
+ '</div>'
+ '<select id="ui-font-selector" class="four columns end
uls-font-select"></select>'
+ '</div>'
+
+ + '</div>' // End font settings section
// Separator
+ '<div class="row"></div>'
@@ -391,23 +403,18 @@
*/
listen: function () {
var displaySettings = this,
- $contentFontSelector, $uiFontSelector,
- oldFont;
-
- $contentFontSelector = this.$template
- .find( '#content-font-selector' );
- $uiFontSelector = this.$template
- .find( '#ui-font-selector' );
-
- oldFont = $uiFontSelector.find( 'option:selected'
).val();
+ $contentFontSelector = this.$template.find(
'#content-font-selector' ),
+ $uiFontSelector = this.$template.find(
'#ui-font-selector' ),
+ oldFont = $uiFontSelector.find(
'option:selected' ).val(),
+ $tabButtons = displaySettings.$template.find(
'.uls-display-settings-tab-switcher button' );
// TODO all these repeated selectors can be placed in
object constructor.
- this.$template.find( '#uls-displaysettings-apply' ).on(
'click', function () {
+ displaySettings.$template.find(
'#uls-displaysettings-apply' ).on( 'click', function () {
displaySettings.apply();
} );
- this.$template.find(
'button.uls-display-settings-cancel' ).on( 'click', function () {
+ displaySettings.$template.find(
'button.uls-display-settings-cancel' ).on( 'click', function () {
mw.webfonts.preferences.setFont(
displaySettings.contentLanguage, oldFont );
displaySettings.$webfonts.refresh();
@@ -424,7 +431,7 @@
displaySettings.close();
} );
- this.$template.find( '#webfonts-enable-checkbox' ).on(
'click', function () {
+ displaySettings.$template.find(
'#webfonts-enable-checkbox' ).on( 'click', function () {
displaySettings.enableApplyButton();
if ( this.checked ) {
@@ -462,6 +469,27 @@
displaySettings.$webfonts.refresh();
} );
+ $tabButtons.on( 'click', function () {
+ var $subPanels,
+ $button = $( this );
+
+ if ( $button.hasClass( 'down' ) ) {
+ return;
+ }
+
+ displaySettings.$template.find(
'.ext-uls-sub-panel' ).each( function () {
+ var $subPanel = $( this );
+
+ if ( $subPanel.hasClass( $button.attr(
'id' ) ) ) {
+ $subPanel.removeClass( 'hide' );
+ } else {
+ $subPanel.addClass( 'hide' );
+ }
+ } );
+
+ $tabButtons.filter( '.down' ).removeClass(
'down');
+ $button.addClass( 'down' );
+ } );
},
/**
--
To view, visit https://gerrit.wikimedia.org/r/60271
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I539b9794227e0aeac9a759b7e4aa3daf8b73a5c8
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/extensions/UniversalLanguageSelector
Gerrit-Branch: master
Gerrit-Owner: Amire80 <[email protected]>
Gerrit-Reviewer: Nikerabbit <[email protected]>
Gerrit-Reviewer: Pginer <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
