Bug 1105708 - More l10n compliant buttons for Loop. r=mikedeboer
authorNicolas Perriault <nperriault@mozilla.com>
Fri, 19 Dec 2014 14:34:11 +0100
changeset 220629 5312b07dd7e4ba073af073f163b08585c17acdcb
parent 220628 d5cbc65d37b0d2ae7ffcad053016478c36758155
child 220630 6b6e49450b85eb7f74fc6a2afa73403265aabc70
push id27991
push userkwierso@gmail.com
push dateFri, 19 Dec 2014 23:43:54 +0000
treeherdermozilla-central@b052018cf239 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1105708
milestone37.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1105708 - More l10n compliant buttons for Loop. r=mikedeboer
browser/components/loop/content/shared/css/common.css
browser/components/loop/content/shared/css/conversation.css
browser/components/loop/standalone/content/js/webapp.js
browser/components/loop/standalone/content/js/webapp.jsx
--- a/browser/components/loop/content/shared/css/common.css
+++ b/browser/components/loop/content/shared/css/common.css
@@ -76,28 +76,31 @@ p {
 
 /* A reset for all button-appearing elements, with the lowest-common
  * denominator of the needed rules.  Intended to be used as a base class
  * together with .btn-*
  */
 
 .btn {
   display: inline-block;
-  overflow: hidden;
   margin: 0;
   padding: 0;
   border: none;
   background: #a5a;
   color: #fff;
   text-align: center;
   text-decoration: none;
+  font-size: .9em;
+  cursor: pointer;
+}
+
+.btn.btn-constrained {
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: .9em;
-  cursor: pointer;
 }
 
 .btn-info {
   background-color: #0096dd;
   border: 1px solid #0095dd;
   color: #fff;
 }
 
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -257,17 +257,17 @@
 
 .call-action-group {
   display: flex;
   padding: 2.5em 4px 0 4px;
   width: 100%;
 }
 
 .call-action-group > .btn {
-  height: 26px;
+  min-height: 26px;
   border-radius: 2px;
   margin: 0 4px;
   min-width: 64px;
 }
 
 .call-action-group .btn-group-chevron,
 .call-action-group .btn-group {
   width: 100%;
--- a/browser/components/loop/standalone/content/js/webapp.js
+++ b/browser/components/loop/standalone/content/js/webapp.js
@@ -386,17 +386,17 @@ loop.webapp = (function($, _, OT, mozL10
       var chevronClasses = React.addons.classSet({
         "btn-chevron": true,
         "disabled": this.props.disabled
       });
       return (
         React.DOM.div({className: "standalone-btn-chevron-menu-group"}, 
           React.DOM.div({className: "btn-group-chevron"}, 
             React.DOM.div({className: "btn-group"}, 
-              React.DOM.button({className: "btn btn-large btn-accept", 
+              React.DOM.button({className: "btn btn-constrained btn-large btn-accept", 
                       onClick: this.props.startCall("audio-video"), 
                       disabled: this.props.disabled, 
                       title: mozL10n.get("initiate_audio_video_call_tooltip2")}, 
                 React.DOM.span({className: "standalone-call-btn-text"}, 
                   this.props.caption
                 ), 
                 React.DOM.span({className: "standalone-call-btn-video-icon"})
               ), 
--- a/browser/components/loop/standalone/content/js/webapp.jsx
+++ b/browser/components/loop/standalone/content/js/webapp.jsx
@@ -386,17 +386,17 @@ loop.webapp = (function($, _, OT, mozL10
       var chevronClasses = React.addons.classSet({
         "btn-chevron": true,
         "disabled": this.props.disabled
       });
       return (
         <div className="standalone-btn-chevron-menu-group">
           <div className="btn-group-chevron">
             <div className="btn-group">
-              <button className="btn btn-large btn-accept"
+              <button className="btn btn-constrained btn-large btn-accept"
                       onClick={this.props.startCall("audio-video")}
                       disabled={this.props.disabled}
                       title={mozL10n.get("initiate_audio_video_call_tooltip2")}>
                 <span className="standalone-call-btn-text">
                   {this.props.caption}
                 </span>
                 <span className="standalone-call-btn-video-icon" />
               </button>