From 0c935f69affe04340d124a512594e6c7b3686aa3 Mon Sep 17 00:00:00 2001 From: Trevor Parscal Date: Tue, 11 Jun 2013 13:56:22 -0700 Subject: [PATCH] Improve langlinks styling in meta dialog Change-Id: I88d6d374d34dc08ecf46053cfc639c03ec23f8bf --- VisualEditor.i18n.php | 4 +-- VisualEditor.php | 2 +- modules/ve/ui/dialogs/ve.ui.MWMetaDialog.js | 38 ++++++++++++++------- modules/ve/ui/styles/ve.ui.Dialog.css | 33 +++++++++++++----- 4 files changed, 53 insertions(+), 24 deletions(-) diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php index ad779f571d..def627629a 100644 --- a/VisualEditor.i18n.php +++ b/VisualEditor.i18n.php @@ -84,7 +84,7 @@ $messages['en'] = array( 'visualeditor-inspector-remove-tooltip' => 'Remove', 'visualeditor-dialog-meta-categories-section' => 'Categories', 'visualeditor-dialog-meta-categories-data-label' => 'Categories', - 'visualeditor-dialog-meta-categories-settings-label' => 'Category settings', + 'visualeditor-dialog-meta-categories-options' => 'Options', 'visualeditor-dialog-meta-categories-input-placeholder' => 'Add a category', 'visualeditor-dialog-meta-categories-input-newcategorylabel' => 'New category', 'visualeditor-dialog-meta-categories-input-movecategorylabel' => 'Move this category here', @@ -238,7 +238,7 @@ See also: {{Identical|Category}}', 'visualeditor-dialog-meta-categories-data-label' => 'Label for the categories sub-section. {{Identical|Category}}', - 'visualeditor-dialog-meta-categories-settings-label' => 'Label for the category settings sub-section', + 'visualeditor-dialog-meta-categories-options' => 'Label for the category options sub-section', 'visualeditor-dialog-meta-categories-input-placeholder' => 'Placeholder text for category input {{Identical|Add category}}', 'visualeditor-dialog-meta-categories-input-newcategorylabel' => 'Label for suggested categories for an uncreated category', diff --git a/VisualEditor.php b/VisualEditor.php index 7b7888454d..58262ba592 100644 --- a/VisualEditor.php +++ b/VisualEditor.php @@ -529,7 +529,7 @@ $wgResourceModules += array( 'visualeditor-dialog-meta-title', 'visualeditor-dialog-meta-categories-section', 'visualeditor-dialog-meta-categories-data-label', - 'visualeditor-dialog-meta-categories-settings-label', + 'visualeditor-dialog-meta-categories-options', 'visualeditor-dialog-meta-categories-input-placeholder', 'visualeditor-dialog-meta-categories-input-newcategorylabel', 'visualeditor-dialog-meta-categories-input-movecategorylabel', diff --git a/modules/ve/ui/dialogs/ve.ui.MWMetaDialog.js b/modules/ve/ui/dialogs/ve.ui.MWMetaDialog.js index 3a16e9fc9f..ffeeb43a28 100644 --- a/modules/ve/ui/dialogs/ve.ui.MWMetaDialog.js +++ b/modules/ve/ui/dialogs/ve.ui.MWMetaDialog.js @@ -58,10 +58,14 @@ ve.ui.MWMetaDialog.prototype.initialize = function () { // Properties this.categoriesFieldset = new ve.ui.FieldsetLayout( { - '$$': this.frame.$$, 'label': ve.msg( 'visualeditor-dialog-meta-categories-data-label' ), 'icon': 'tag' + '$$': this.frame.$$, + 'label': ve.msg( 'visualeditor-dialog-meta-categories-data-label' ), + 'icon': 'tag' } ); - this.categorySettingsFieldset = new ve.ui.FieldsetLayout( { - '$$': this.frame.$$, 'label': ve.msg( 'visualeditor-dialog-meta-categories-settings-label' ), 'icon': 'settings' + this.categoryOptionsFieldset = new ve.ui.FieldsetLayout( { + '$$': this.frame.$$, + 'label': ve.msg( 'visualeditor-dialog-meta-categories-options' ), + 'icon': 'settings' } ); this.categoryWidget = new ve.ui.MWCategoryWidget( { '$$': this.frame.$$, '$overlay': this.$overlay @@ -75,7 +79,9 @@ ve.ui.MWMetaDialog.prototype.initialize = function () { 'label': ve.msg( 'visualeditor-dialog-meta-categories-defaultsort-label' ) } ); this.languagesFieldset = new ve.ui.FieldsetLayout( { - '$$': this.frame.$$, 'label': ve.msg( 'visualeditor-dialog-meta-languages-label' ), 'icon': 'language' + '$$': this.frame.$$, + 'label': ve.msg( 'visualeditor-dialog-meta-languages-label' ), + 'icon': 'language' } ); // Events @@ -97,25 +103,33 @@ ve.ui.MWMetaDialog.prototype.initialize = function () { 'icon': 'language' } ); - this.pages.categories.$.append( this.categoriesFieldset.$, this.categorySettingsFieldset.$ ); + this.pages.categories.$.append( this.categoriesFieldset.$, this.categoryOptionsFieldset.$ ); this.categoriesFieldset.$.append( this.categoryWidget.$ ); - this.categorySettingsFieldset.$.append( this.defaultSortLabel.$, this.defaultSortInput.$ ); + this.categoryOptionsFieldset.$.append( this.defaultSortLabel.$, this.defaultSortInput.$ ); this.pages.languages.$.append( this.languagesFieldset.$ ); - this.languagesFieldset.$ - .append( this.frame.$$( '' ).text( ve.msg( 'visualeditor-dialog-meta-languages-readonlynote' ) ) ); + this.languagesFieldset.$.append( + this.frame.$$( '' ) + .text( ve.msg( 'visualeditor-dialog-meta-languages-readonlynote' ) ) + ); languagePromise = this.getAllLanguageItems(); languagePromise.done( ve.bind( function ( languages ) { var i, $languagesTable = this.frame.$$( '' ), languageslength = languages.length; $languagesTable - .addClass( 've-ui-dialog-meta-languages-table' ) + .addClass( 've-ui-mwMetaDialog-languages-table' ) .append( this.frame.$$( '' ) - .append( this.frame.$$( '
' ).append( ve.msg( 'visualeditor-dialog-meta-languages-code-label' ) ) ) - .append( this.frame.$$( '' ).append( ve.msg( 'visualeditor-dialog-meta-languages-link-label' ) ) ) - ); + .append( + this.frame.$$( '' ) + .append( ve.msg( 'visualeditor-dialog-meta-languages-code-label' ) ) + ) + .append( + this.frame.$$( '' ) + .append( ve.msg( 'visualeditor-dialog-meta-languages-link-label' ) ) + ) + ); for ( i = 0; i < languageslength; i++ ) { $languagesTable diff --git a/modules/ve/ui/styles/ve.ui.Dialog.css b/modules/ve/ui/styles/ve.ui.Dialog.css index 244b8ae346..66f4a485d7 100644 --- a/modules/ve/ui/styles/ve.ui.Dialog.css +++ b/modules/ve/ui/styles/ve.ui.Dialog.css @@ -165,25 +165,40 @@ height: 10em; } -.ve-ui-dialog-meta-languages-table { - margin: 2em 0 0 3em; - border: 1px solid silver; +.ve-ui-mwTemplateDialog-addParameterFieldset .ve-ui-widget { + display: inline-block; + margin-right: 0.5em; +} + +/* ve.ui.MWMetaDialog */ + +.ve-ui-mwMetaDialog-languages-table { + margin: 2em 0 0 0; + padding: 0; + width: 100%; + border: none; border-collapse: collapse; } -.ve-ui-dialog-meta-languages-table th { - background: #E8E8E8; +.ve-ui-mwMetaDialog-languages-table th { + border-bottom: solid 1px #ddd; + text-align: left; } -.ve-ui-dialog-meta-languages-table th, td { - padding: 0.5em 1em; +.ve-ui-mwMetaDialog-languages-table th, td { + padding: 0.75em 1em; + border-bottom: solid 1px white; } -.ve-ui-dialog-meta-languages-table tr:nth-child(odd) td { +.ve-ui-mwMetaDialog-languages-table tr td:first-child { + width: 30%; +} + +.ve-ui-mwMetaDialog-languages-table tr:nth-child(odd) td { background: #F0F0F0; } -.ve-ui-dialog-meta-languages-table tr:nth-child(even) td { +.ve-ui-mwMetaDialog-languages-table tr:nth-child(even) td { background: #F8F8F8; }