Nikerabbit has uploaded a new change for review.

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

Change subject: MessageTable: make the info column hiding nicer
......................................................................

MessageTable: make the info column hiding nicer

* Rename the ambigious caret class (used twice) to better name
* The editing column now cleanly expands over the info column.
  To achieve this effect, we cannot use hiding. Instead, now
  using z-index. Also when contracting, there is no longer
  text from info column overlapping, it just reveals nicely.

Bug: T146134
Change-Id: I1000422210062b154a7b139073f4ccb210d2f3bb
---
M resources/css/ext.translate.editor.css
M resources/js/ext.translate.editor.js
2 files changed, 25 insertions(+), 21 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Translate 
refs/changes/41/312041/1

diff --git a/resources/css/ext.translate.editor.css 
b/resources/css/ext.translate.editor.css
index 97dbc2b..ddd6814 100644
--- a/resources/css/ext.translate.editor.css
+++ b/resources/css/ext.translate.editor.css
@@ -42,13 +42,24 @@
        border-right: 1px solid #AAA;
        -webkit-transition: width 0.5s;
        transition: width 0.5s;
+       background-color: white;
+       z-index: 1;
        /* Padding to have space for the arrow indicating split section */
        padding-right: 40px;
+}
+
+.grid .tux-message-editor__expanded .editcolumn {
+       width: 100%;
+       padding-right: 5px;
 }
 
 .grid .tux-message-editor .tux-editor-titletools {
        /* Ignore the padding added for the arrow */
        margin-right: -40px;
+}
+
+.grid .tux-message-editor__expanded .tux-editor-titletools {
+       margin-right: -5px;
 }
 
 .tux-message-editor textarea {
@@ -152,7 +163,8 @@
        transition: width 0.5s;
 }
 
-.tux-message-editor .infocolumn-block .caret:before {
+.tux-message-editor--caret:before,
+.tux-message-editor--caret:after {
        border-top: 20px solid transparent;
        border-right: 20px solid #AAA;
        border-bottom: 20px solid transparent;
@@ -161,17 +173,19 @@
        left: -21px;
        position: absolute;
        bottom: 50%;
+       z-index: 2;
+       transition: visibility 0s 0.5s;
 }
 
-.tux-message-editor .infocolumn-block .caret:after {
-       border-top: 20px solid transparent;
+.tux-message-editor--caret:after {
        border-right: 20px solid #FCFCFC;
-       border-bottom: 20px solid transparent;
-       content: "";
-       display: inline-block;
        left: -20px;
-       position: absolute;
-       bottom: 50%;
+}
+
+.tux-message-editor__expanded .tux-message-editor--caret:before,
+.tux-message-editor__expanded .tux-message-editor--caret:after {
+       visibility: hidden;
+       transition: visibility 0s 0s;
 }
 
 .infocolumn-block .infocolumn .message-desc-editor {
diff --git a/resources/js/ext.translate.editor.js 
b/resources/js/ext.translate.editor.js
index 26c5f11..491cad3 100644
--- a/resources/js/ext.translate.editor.js
+++ b/resources/js/ext.translate.editor.js
@@ -1101,7 +1101,7 @@
                        return $( '<div>' )
                                .addClass( 'five columns infocolumn-block' )
                                .append(
-                                       $( '<span>' ).addClass( 'caret' ),
+                                       $( '<span>' ).addClass( 
'tux-message-editor--caret' ),
                                        $infoColumn
                                );
                },
@@ -1186,12 +1186,7 @@
                                .addClass( 'editor-expand' )
                                .attr( 'title', mw.msg( 
'tux-editor-expand-tooltip' ) );
 
-                       this.$editor.find( '.infocolumn-block' )
-                               .removeClass( 'hide' );
-                       this.$editor.find( '.editcolumn' )
-                               .removeClass( 'twelve' )
-                               .addClass( 'seven' );
-
+                       this.$editor.removeClass( 
'tux-message-editor__expanded' );
                        this.expanded = false;
                },
 
@@ -1202,12 +1197,7 @@
                                .addClass( 'editor-contract' )
                                .attr( 'title', mw.msg( 
'tux-editor-collapse-tooltip' ) );
 
-                       this.$editor.find( '.infocolumn-block' )
-                               .addClass( 'hide' );
-                       this.$editor.find( '.editcolumn' )
-                               .removeClass( 'seven' )
-                               .addClass( 'twelve' );
-
+                       this.$editor.addClass( 'tux-message-editor__expanded' );
                        this.expanded = true;
                },
 

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: I1000422210062b154a7b139073f4ccb210d2f3bb
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Translate
Gerrit-Branch: master
Gerrit-Owner: Nikerabbit <niklas.laxst...@gmail.com>

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

Reply via email to