From ef2f7650580793dd51317d3809bde9a8503b7906 Mon Sep 17 00:00:00 2001 From: aleth Date: Sat, 8 Nov 2014 02:27:51 +0100 Subject: [PATCH] Bug 954845 - Get rid of the status bar: Port bug 736002 (move character counter to input box) and improve styling. r=clokep --HG-- extra : histedit_source : 35353ecaae62798e9d6042705c75093a26c3b83f --- im/content/conversation.xml | 31 +++--- im/themes/conversation.css | 193 +++++++++++++++++++++++++++--------- 2 files changed, 167 insertions(+), 57 deletions(-) diff --git a/im/content/conversation.xml b/im/content/conversation.xml index 02429ce5d5..92f8d5980e 100644 --- a/im/content/conversation.xml +++ b/im/content/conversation.xml @@ -48,11 +48,12 @@ onkeypress="onNicklistKeyPress(event);"/> - - - - + + + + + @@ -854,9 +855,10 @@ if (!this._conv) return; - let text = this.editor.value; + let inputBox = this.editor; + let text = inputBox.value; - // try to avoid sending typing notifications when the user is + // Try to avoid sending typing notifications when the user is // typing a command in the conversation. // These checks are not perfect (especially if non-existing // commands are sent as regular messages on the in-use prpl). @@ -867,15 +869,20 @@ left = this._conv.sendTyping(text.slice(4)); // When the input box is cleared or there is no character limit, - // don't show the character limit in the statusbar. + // don't show the character limit. + let charCounter = this.getElt("charCounter"); if (left == Ci.prplIConversation.NO_TYPING_LIMIT || !text.length) { - this._statusTextEnd = ""; - this._statusTextEndIsError = false; + charCounter.setAttribute("value", ""); + inputBox.removeAttribute("invalidInput"); } else { // 200 is a 'magic' constant to avoid showing big numbers. - this._statusTextEnd = left < 200 ? left.toString() : ""; - this._statusTextEndIsError = left < 0; + charCounter.setAttribute("value", (left < 200 ? left : "")); + + if (left >= 0) + inputBox.removeAttribute("invalidInput"); + else if (left < 0) + inputBox.setAttribute("invalidInput", "true"); } this.displayStatusText(); ]]> diff --git a/im/themes/conversation.css b/im/themes/conversation.css index 1cc4b22eaa..e991de97b4 100644 --- a/im/themes/conversation.css +++ b/im/themes/conversation.css @@ -259,23 +259,127 @@ } %endif + +/* Input box */ + .conv-textbox { - margin: 0 0; - padding: 0 0; - box-sizing: content-box; + margin: 0; +} + +%ifdef XP_MACOSX +.conv-textbox { + -moz-appearance: none; + padding: 3px; + border: none; + box-shadow: inset 0 1px 3px 0px rgba(0, 0, 0, 0.6); +} + +.conv-textbox[focused="true"] { + box-shadow: inset 0 0 2px 1px rgba(40, 120, 212, 0.9), + 0 0 2px 0px rgba(40, 120, 212, 0.6), + inset 0 1px 2px 0px rgba(0, 0, 0, 0.5); +} + +.conv-textbox[invalidInput="true"] { + box-shadow: inset 0 0 2px 1px rgba(255, 0, 0, 0.8), + 0 0 2px 0px rgba(255, 0, 0, 0.5), + inset 0 1px 2px 0px rgba(0, 0, 0, 0.4); +} + +%else +.conv-textbox { + padding: 2px; + border: 1px solid transparent; +} + +.conv-textbox[invalidInput="true"] { + border-color: red; } -%ifndef XP_MACOSX .conv-textbox > .textbox-input-box { background: inherit; } -%endif -%ifdef XP_MACOSX -grippy { - display: none; +%ifndef XP_WIN +.conv-textbox { + -moz-margin-start: 1px; + -moz-appearance: none; +} +%else +.conv-textbox { + -moz-appearance: none; + /* Right/left margins so the borders show up on all sides. */ + margin: 0 1px 0 1px; } %endif +%endif + + +/* Character counter */ + +.conv-counter { + color: black; + background-color: rgba(246, 246, 246, 0.7); + -moz-border-start: 1px solid rgb(200, 200, 200); + border-top: 1px solid rgb(200, 200, 200); + font-size: 120%; + padding-top: 0; + -moz-padding-start: 5px; +} + +.conv-counter:-moz-locale-dir(ltr) { + border-top-left-radius: 3px; +} + +.conv-counter:-moz-locale-dir(rtl) { + border-top-right-radius: 3px; +} + +.conv-counter[value=""] { + display: none; +} + +/* Negative counter values (user went over the character limit). */ +.conv-counter[value^="-"] { + color: red; +} + +%ifdef XP_MACOSX +.conv-counter { + padding-bottom: 0; + -moz-padding-end: 5px; + -moz-margin-end: 2px; + margin-bottom: 2px !important; /* override 4px from description */ +} + +%else +.conv-counter { + padding-bottom: 1px; + -moz-padding-end: 6px; + margin: 0; +} + +.conv-counter[value^="-"] { + margin-bottom: 1px; + /* The 6px padding-end from .conv-counter is split into a 1px + margin-end (to avoid the border) and 5px padding-end (as + regular padding). */ + -moz-margin-end: 1px; + padding-top: 1px; + padding-bottom: 0; + -moz-padding-end: 5px; +} + +%ifdef XP_WIN +.conv-counter[value^="-"] { + -moz-margin-end: 2px; + -moz-padding-end: 4px; +} +%endif +%endif + + +/* Splitters */ .splitter { margin: 0; @@ -289,6 +393,42 @@ grippy { %endif } +.splitter-bottom { + background: #ddd; /* match URL popup bottom edge from tabbrowser-*.css */ +} + +%ifdef XP_MACOSX +grippy { + display: none; +} + +.splitter.conv-chat { + background: -moz-linear-gradient(top, #404040, rgba(0,0,0,0.35)); + min-width: 1px; + width: 1px; +} + +.splitter.conv-chat:-moz-window-inactive { + background: rgba(0,0,0,0.35); +} + +.splitter.conv-chat[state="collapsed"] { + width: 3px; +} +%else +%ifdef XP_WIN +.splitter.conv-chat { + border-left: 1px solid rgba(0, 0, 0, 0.25); +} + +/* Splitter style change above somehow made it smaller, fix this here: */ +grippy { + margin: 0 1px; +} +%endif +%endif + + #conv-toolbar { border-style: none; } @@ -326,33 +466,6 @@ grippy { } %ifdef XP_MACOSX -.conv-textbox { - padding: 3px; - border: none; - -moz-appearance: none; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); -} - -.conv-textbox[focused="true"] { - box-shadow: inset 0 0 2px 1px rgba(40, 120, 212, 0.7), - 0 0 4px 1px rgb(40, 120, 212), - inset 0 1px 2px rgba(0, 0, 0, 0.7); -} - -.splitter.conv-chat { - background: -moz-linear-gradient(top, #404040, rgba(0,0,0,0.35)); - min-width: 1px; - width: 1px; -} - -.splitter.conv-chat:-moz-window-inactive { - background: rgba(0,0,0,0.35); -} - -.splitter.conv-chat[state="collapsed"] { - width: 3px; -} - .conv-nicklist { -moz-appearance: none; background: -moz-linear-gradient(top, #d2d8e2, #e8e8e8); @@ -364,16 +477,6 @@ grippy { background: #e8e8e8; } %endif -%ifdef XP_WIN -.splitter.conv-chat { - border-left: 1px solid rgba(0, 0, 0, 0.25); -} - -/* Splitter style change above somehow made it smaller, fix this here: */ -grippy { - margin: 0 1px; -} -%endif .listitem-iconic[inactive] > .listcell-iconic > .listcell-icon { opacity: 0.45;