From 2e2ad80e0e0045b0faac2b7668c8688798c5e0b6 Mon Sep 17 00:00:00 2001 From: Steve Chung Date: Fri, 20 Mar 2015 16:59:16 +0800 Subject: [PATCH] Bug 1139179 - [RTL][Contacts] Fix dual sim call button icon misaligned by utilizing flex, r=arcturus --- .../contacts/elements/details.html | 4 +- .../contacts/elements/phone_details.html | 4 +- .../contacts/test/marionette/lib/contacts.js | 2 +- apps/communications/dialer/style/buttons.css | 311 +++++++++++++++++- build/csslint/xfail.list | 2 +- shared/style/contacts/contacts_buttons.css | 43 +-- 6 files changed, 333 insertions(+), 33 deletions(-) diff --git a/apps/communications/contacts/elements/details.html b/apps/communications/contacts/elements/details.html index 308f96f81012..42d2aafd2ac1 100644 --- a/apps/communications/contacts/elements/details.html +++ b/apps/communications/contacts/elements/details.html @@ -19,10 +19,10 @@

- +
diff --git a/apps/communications/contacts/elements/phone_details.html b/apps/communications/contacts/elements/phone_details.html index b3513dd7e1a1..f91ab82b5886 100644 --- a/apps/communications/contacts/elements/phone_details.html +++ b/apps/communications/contacts/elements/phone_details.html @@ -11,10 +11,10 @@

- +
diff --git a/apps/communications/contacts/test/marionette/lib/contacts.js b/apps/communications/contacts/test/marionette/lib/contacts.js index 8f85bbc43e1c..97d83b5179c3 100644 --- a/apps/communications/contacts/test/marionette/lib/contacts.js +++ b/apps/communications/contacts/test/marionette/lib/contacts.js @@ -41,7 +41,7 @@ Contacts.Selectors = { details: '#view-contact-details', detailsEditContact: '#edit-contact-button', detailsTelLabelFirst: '#phone-details-template-0 h2', - detailsTelButtonFirst: 'button.icon-call[data-tel]', + detailsTelButtonFirst: '.button.icon-call[data-tel]', detailsEmail: '#contact-detail-inner #email-details-template-0 div.item', detailsAddress: '#contact-detail-inner #address-details-template-0 div.item', detailsOrg: '#contact-detail-inner #org-title', diff --git a/apps/communications/dialer/style/buttons.css b/apps/communications/dialer/style/buttons.css index e14240bf7732..7f231083eb6f 100644 --- a/apps/communications/dialer/style/buttons.css +++ b/apps/communications/dialer/style/buttons.css @@ -4,6 +4,10 @@ * had to be made more specific. We should remove this file and use that one * instead. */ +/* ---------------------------------- + * Buttons + * ---------------------------------- */ + .activity::-moz-focus-inner { border: none; outline: none; @@ -17,7 +21,7 @@ margin: 0 0 1rem; padding: 0 1.2rem; -moz-box-sizing: border-box; - /*display: inline-block;*/ + display: inline-block; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; @@ -34,20 +38,94 @@ outline: none; } +/* Recommend */ +.activity.recommend { + background-color: #00caf2; + color: #fff; +} + +/* Danger */ +.danger.activity { + background-color: #e51e1e; + color: #fff; +} + +/* Pressed */ .activity:active { background-color: #b2f2ff; color: #fff; } +/* Icons */ +.activity[data-icon] { + position: relative; +} + +.activity[data-icon]:before { + position: absolute; + top: 50%; + margin-top: -1.5rem; + right: 1.5rem; + line-height: 3rem; +} + +.activity[data-icon]:active:before { + color: #fff; +} + +/* Pressed with dark skin */ +.skin-dark .activity:active { + background-color: #00aacc; +} + +/* Disabled */ +.activity[aria-disabled="true"] { + background-color: rgba(0,0,0,0.05); + color: #c7c7c7; + pointer-events: none; +} + +.activity[aria-disabled="true"].recommend { + background-color: #97cbd5; + color: rgba(255,255,255,0.5); +} + +.activity[aria-disabled="true"].danger { + background-color: #eb7474; + color: rgba(255,255,255,0.5); +} + +/* Disabled with dark background */ +.skin-dark .activity[aria-disabled="true"] { + background-color: #565656; + color: rgba(255,255,255,0.4); +} + +.skin-dark .activity[aria-disabled="true"].recommend { + background-color: #006579; +} + +.skin-dark .activity[aria-disabled="true"].danger { + background-color: #730f0f; +} + +.activity[aria-disabled="true"]::-moz-selection { + -moz-user-select: none; +} + +/* ---------------------------------- + * Buttons inside lists + * ---------------------------------- */ + li .activity { position: relative; - text-align: left; + text-align: start; border: 0.1rem solid #c7c7c7; background: rgba(0,0,0,0.05); margin: 0 0 1rem; overflow: hidden; border-radius: 0; - /*display: flex;*/ + display: flex; height: auto; min-height: 4rem; text-overflow: initial; @@ -56,6 +134,21 @@ li .activity { padding: 1rem 1.2rem; } +/* Press */ +li .activity:active:after { + opacity: 0; +} + +/* Disabled */ +li .activity[aria-disabled="true"] { + opacity: 0.5; +} + +/* Icons */ +li .activity.icon { + -moz-padding-end: 4rem; +} + li .activity.icon:before { content: ""; width: 3rem; @@ -68,15 +161,217 @@ li .activity.icon:before { pointer-events: none; } -html[dir="rtl"] li .activity { - text-align: right; +li .activity.icon-view:active { + background-color: #b2f2ff; +} + +li .activity.icon-view:before { + background-image: url(buttons/images/forward-light.svg); + background-size: 3rem; + right: 0; +} + +li .activity[data-icon]:before { + right: 1rem; +} + +li .activity[data-icon="expand"]:before { + color: #00aac5; + top: unset; + bottom: 0; +} + +li .activity[data-icon="expand"][aria-disabled="true"]:before { + color: #A9A9A9; +} + +li .activity[data-icon="forward"]:before { + color: #686f72; +} + +/* Getting more space for text, as icon is shorter */ +li .activity.icon-dialog { + -moz-padding-end: 3rem; +} + +li .activity.icon-dialog:before { + width: 0; + height: 0; + top: auto; + right: 0.8rem; + bottom: 0.5rem; + border-top: 0.7rem solid transparent; + border-bottom: 0.7rem solid transparent; + border-left: 0.7rem solid #00aac5; + transform: rotate(45deg); + z-index: 1; +} + +li .activity[aria-disabled="true"].icon-dialog:before { + border-left: 0.7rem solid #a9a9a9; +} + +/* ---------------------------------- + * Theme: Dark + * ---------------------------------- */ + +.skin-dark li .activity { + background-color: #454545; + border: none; + color: #fff; + font-weight: normal; +} + +.skin-dark li .activity:active { + background-color: #00aacc; +} + +.skin-dark li .activity.icon-view:active { + background-color: #00aacc; +} + +.skin-dark li .activity.icon-dialog:active:before { + border-left: 0.7rem solid #b2f2ff; +} + +.skin-dark li .activity[aria-disabled="true"] { + background-color: #454545; + opacity: 0.5; +} + +/* Inputs inside of .button */ +body[role="application"] .activity input { + border: 0; + background: none; +} + +/* select */ +select { + width: 100%; + -moz-box-sizing: border-box; + font-family: sans-serif; + font-style: italic; + font-size: 1.6rem; + color: #333; + margin: 0 0 1rem; + padding: 0; + -moz-padding-start: 1.1rem; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + height: 4rem; + border: 0.1rem solid #c7c7c7; + background: rgba(0,0,0,0.05); +} + +.skin-dark select { + background-color: rgba(87, 87, 87, 0.8); + border: none; + color: #fff; } -html[dir="rtl"] li .activity.icon { - padding: 1rem 1.3rem 1rem 4rem; +/* remove dotted outline */ +select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #333; } +.skin-dark select:-moz-focusring { + text-shadow: 0 0 0 #fff; +} + +/* Hides dropdown arrow until bug #649849 is fixed */ +.activity.icon select, +.activity[data-icon] select { + position: absolute; + top: -0.6rem; + left: 0; + width: calc(100% + 3rem); + height: 100%; + margin: 0; + padding: 0; + -moz-padding-end: 5rem; + text-indent: 0; + font-weight: 400; + font-size: 1.7rem; + /* + The select element uses the text color to determine the color of the outline. + We put a text shadow with needed offset and no blur, so that replaces the text. + */ + color: rgba(0,0,0,0); + text-shadow: 1rem 0.5rem 0 #333; + border: none; + background: none; +} + +.activity.icon select option, +.activity[data-icon] select option { + color: #000; + border: 0; + padding: 0.6rem 1.3rem; + text-shadow: 0 0 0 rgba(0,0,0,0); +} + +.activity.icon-dialog { + overflow: hidden; +} + +.skin-dark .activity.icon select, +.skin-dark .activity[data-icon] select { + text-shadow: 1rem 0.5rem 0 #fff; +} + +/****************************************************************************** + * Right-To-Left layout + */ + +html[dir="rtl"] .activity[data-icon]:before { + left: 1.5rem; + right: unset; + transform: scale(-1, 1); +} + +html[dir="rtl"] li .activity.icon-view:before { + left: 0; + right: unset; + transform: rotate(180deg); +} + +html[dir="rtl"] li .activity[data-icon]:before { + left: 1rem; + right: unset; +} + + html[dir="rtl"] li .activity.icon:before { - right: auto; left: 0.5rem; + right: unset; +} + + +html[dir="rtl"] li .activity.icon-dialog:before { + left: 0.8rem; + right: unset; + transform: rotate(315deg); + border-left: unset; + border-right: 0.7rem solid #00aac5; +} + +html[dir="rtl"] li .activity[aria-disabled="true"].icon-dialog:before { + border-left: unset; + border-right: 0.7rem solid #a9a9a9; +} + +html[dir="rtl"] .skin-dark li .activity.icon-dialog:active:before { + border-left: unset; + border-right: 0.7rem solid #b2f2ff; +} + + +/* Hides dropdown arrow until bug #649849 is fixed */ +html[dir="rtl"] .activity.icon-dialog select, +html[dir="rtl"] .activity[data-icon] select { + left: unset; + right: 0.3rem; /* .3rem space because of italic */ + text-indent: 1rem; } diff --git a/build/csslint/xfail.list b/build/csslint/xfail.list index 894b49f59773..c137599c81d0 100644 --- a/build/csslint/xfail.list +++ b/build/csslint/xfail.list @@ -70,7 +70,7 @@ shared/style/value_selector.css 0 1 shared/style/edit_mode.css 0 2 shared/style/action_menu.css 0 1 shared/style/headers.css 0 0 -shared/style/contacts/contacts_buttons.css 0 8 +shared/style/contacts/contacts_buttons.css 0 7 shared/pages/import/style/import.css 0 4 shared/pages/import/style/search.css 0 3 shared/style/action_menu.css 0 1 diff --git a/shared/style/contacts/contacts_buttons.css b/shared/style/contacts/contacts_buttons.css index e4b56afc5438..21fb056861fb 100644 --- a/shared/style/contacts/contacts_buttons.css +++ b/shared/style/contacts/contacts_buttons.css @@ -3,7 +3,7 @@ display: none !important; } -li button.icon-call:before { +li .icon-call:before { background-image: url("/shared/style/contacts/images/call.png") !important; } @@ -16,15 +16,26 @@ li button.send-sms { } li button.icon-email:before { background-image: url("/shared/style/contacts/images/mail.png") !important; +} + +.has-preferred-sim .button.icon-call { + display: flex; + align-items: center; + padding: 0 1.2rem; } -.has-preferred-sim .icon-call b { - right: 6.5rem; +.has-preferred-sim .button.icon-call b { + position: unset; + order: 1; + flex: 1 1 auto; } -.has-preferred-sim .icon-call:before { - width: 9.5rem !important; +.has-preferred-sim .activity.icon-call:before { + margin-top: 0; background-size: 3rem !important; + position: unset; + order: 2; + flex: 0 0 auto; } .call-action .js-sim-indication { @@ -35,12 +46,9 @@ li button.icon-email:before { line-height: 4rem; height: 4rem; text-align: end; - width: 5.5rem; - right: 1rem; - top: 0; margin: 0; - position: absolute; background: url("/shared/elements/gaia_sim_picker/images/long-tap-indicator.png") no-repeat right bottom 0.2rem / 1.4rem 1rem; + order: 3; } .has-preferred-sim .call-action .js-sim-indication { @@ -87,7 +95,7 @@ li button.icon-email:before { -moz-margin-end: 0; } -.item-media.pull-right button { +.item-media.pull-right .activity { -moz-padding-end: 3rem; } @@ -114,7 +122,7 @@ li button.icon-email:before { float: right; } -li button.activity > b { +li .activity > b { font-weight: normal; overflow: hidden; text-overflow: ellipsis; @@ -136,14 +144,7 @@ li button.activity > b { } /* RTL View */ -html[dir="rtl"] .has-preferred-sim .icon-call b { - left: 6.5rem; - right: unset; -} - html[dir="rtl"] .call-action .js-sim-indication { - left: 1rem; - right: unset; background-position: left bottom 0.2rem; } @@ -159,7 +160,11 @@ html[dir="rtl"] .pull-right { float: left; } -html[dir="rtl"] li button.activity > b { +html[dir="rtl"] li .activity > b { left: 3rem; right: 1.5rem; } + +html[dir="rtl"] li .icon-call { + text-align: right; +}