[MediaWiki-commits] [Gerrit] Styling adjustments for the new translation dialog - change (mediawiki...ContentTranslation)

[Pginer (Code Review)]

Pginer has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/179498

Change subject: Styling adjustments for the new translation dialog
......................................................................

Styling adjustments for the new translation dialog

Colors, spacing and font size have been adjusted to make the legal text area 
less prominent.
The language selectors have been styled and turned them into button elements
to allow (a) keyboard selection and (b) reuse the existing button style.

Change-Id: I3607163489491eae953c1b85e329c4745840c481
---
M modules/source/ext.cx.source.selector.js
M modules/source/styles/ext.cx.source.selector.less
2 files changed, 28 insertions(+), 13 deletions(-)


  git pull 
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation 
refs/changes/98/179498/1

diff --git a/modules/source/ext.cx.source.selector.js 
b/modules/source/ext.cx.source.selector.js
index 1b71fc5..8ea3d0a 100644
--- a/modules/source/ext.cx.source.selector.js
+++ b/modules/source/ext.cx.source.selector.js
@@ -656,8 +656,9 @@
                $sourceLanguageLabel = $( '<label>' ).addClass( 
'cx-sourceselector-dialog__language-label' )
                        .text( mw.msg( 
'cx-sourceselector-dialog-source-language-label' ) );
 
-               this.$sourceLanguage = $( '<div>' )
+               this.$sourceLanguage = $( '<button>' )
                        .addClass( 'cx-sourceselector-dialog__language' )
+                       .addClass( 'mw-ui-button' )
                        .text( $.uls.data.getAutonym( mw.config.get( 
'wgContentLanguage' ) ) );
 
                this.$sourceLanguage.uls( {
@@ -673,8 +674,9 @@
 
                $targetLanguageLabel = $( '<label>' ).addClass( 
'cx-sourceselector-dialog__language-label' )
                        .text( mw.msg( 
'cx-sourceselector-dialog-target-language-label' ) );
-               this.$targetLanguage = $( '<div>' )
+               this.$targetLanguage = $( '<button>' )
                        .addClass( 'cx-sourceselector-dialog__language' )
+                       .addClass( 'mw-ui-button' )
                        .text( $.uls.data.getAutonym( mw.config.get( 
'wgContentLanguage' ) ) );
 
                this.fillTargetLanguages();
diff --git a/modules/source/styles/ext.cx.source.selector.less 
b/modules/source/styles/ext.cx.source.selector.less
index 8dfa11f..efe5648 100644
--- a/modules/source/styles/ext.cx.source.selector.less
+++ b/modules/source/styles/ext.cx.source.selector.less
@@ -5,10 +5,10 @@
        .mw-ui-item;
        color: #333;
        position: absolute;
-       min-width: 400px;
-       max-width: 600px;
+       min-width: 500px;
+       max-width: 700px;
        background: white;
-       border: 1px solid #ccc;
+       border: 1px solid #ddd;
        border-bottom-width: 3px;
        border-radius: 3px;
        padding: 0;
@@ -21,9 +21,9 @@
        .mw-ui-item;
        .mw-ui-one-whole;
        padding: @vertical-margin @horizontal-margin;
-       font-size: 2em;
+       font-size: 1.6em;
        line-height: 1.5em;
-       border-bottom: 1px solid #ccc;
+       border-bottom: 1px solid #eee;
        font-weight: normal;
 }
 
@@ -33,7 +33,7 @@
        .mw-ui-one-whole;
        height: 50px;
        padding: 10px;
-       border-bottom: 1px solid #ccc;
+       border-bottom: 1px solid #eee;
 }
 
 .cx-sourceselector-dialog__language-label {
@@ -47,10 +47,22 @@
        .mw-ui-item;
        .mw-ui-two-tenths;
        font-size: medium;
-       height: 30px;
-       margin-top: 5px;
+       padding: 5px 10px;
        background: #efefef;
        cursor: pointer;
+       text-align: inherit;
+       position: relative;
+       &:after {
+               .background-image-svg('../../tools/images/dropdown.svg', 
'../../tools/images/dropdown.png');
+               content: "";
+               display: inline-block;
+               width: 20px;
+               height: 12px;
+               right: 2px;
+               position: absolute;
+               bottom: 50%;
+               margin-bottom: -6px;
+       }
 }
 
 .cx-sourceselector-dialog__title {
@@ -82,7 +94,7 @@
        .mw-ui-one-whole;
        padding: 10px 15px 15px 15px;
        text-align: right;
-       background-color: #F0F0F0;
+       background-color: #FBFBFB;
        button {
                margin-left: 10px;
        }
@@ -102,8 +114,9 @@
        .mw-ui-item;
        .mw-ui-one-whole;
        padding: 10px;
-       background-color: #F0F0F0;
-       font-size: small;
+       background-color: #FBFBFB;
+       font-size: 12px;
+       color: #777;
 }
 
 .uls-language-list a.cx-sourceselector-unavailable-target {

-- 
To view, visit https://gerrit.wikimedia.org/r/179498
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I3607163489491eae953c1b85e329c4745840c481
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Pginer <pgi...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits