Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-12 04:45:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 988481 - Implement Windows/Linux styling of Translation Infobar. r=mano

Browse Source
This commit is contained in:
Marco Bonardo 2014-05-20 12:10:17 +02:00
parent cab7935d36
commit b6041d5d9c
4 changed files with 167 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
browser/components/translation/translation-infobar.xml
View File

@ -25,7 +25,7 @@
<xul:deck anonid="translationStates" selectedIndex="0">
<!-- offer to translate -->
<xul:hbox class="translate-offer-box" align="baseline">
<xul:hbox class="translate-offer-box" align="center">
<xul:label value="&translation.thisPageIsIn.label;"/>
<xul:menulist anonid="detectedLanguage">
<xul:menupopup/>
@ -43,7 +43,7 @@
</xul:vbox>
<!-- translated -->
<xul:hbox class="translated-box" align="baseline">
<xul:hbox class="translated-box" align="center">
<xul:label value="&translation.translatedFrom.label;"/>
<xul:menulist anonid="fromLanguage"
oncommand="document.getBindingParent(this).translate()">
@ -64,7 +64,7 @@
</xul:hbox>
<!-- error -->
<xul:hbox class="translation-error" align="baseline">
<xul:hbox class="translation-error" align="center">
<xul:label value="&translation.errorTranslating.label;"/>
<xul:button label="&translation.tryAgain.button;" anonid="tryAgain"
oncommand="document.getBindingParent(this).translate();"/>

47
browser/themes/linux/browser.css
View File

@ -1415,6 +1415,53 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
margin: 0px;
}
/* Translation infobar */
%include ../shared/translation/infobar.inc.css
notification[value="translation"],
notification[value="translation"] button,
notification[value="translation"] menulist {
color: #5A5959;
}
notification[value="translation"] {
background-color: #F2F1F0;
}
notification[value="translation"] menulist {
border: 1px solid #C1C1C1;
background-color: #FFF;
}
notification[value="translation"] button {
border: 1px solid #C1C1C1;
background-color: #F2F1F0;
}
notification[value="translation"] button:hover,
notification[value="translation"] button:active,
notification[value="translation"] menulist:hover,
notification[value="translation"] menulist:active {
background-color: #E2E1E0;
}
notification[value="translation"] button[anonid="translate"] {
color: #FFF;
background-image: linear-gradient(#9FB938, #8DA726);
box-shadow: none;
border: 1px solid #829C1C;
}
notification[value="translation"] button[anonid="translate"]:hover,
notification[value="translation"] button[anonid="translate"]:active {
background-image: linear-gradient(#8DA726, #8DA726);
}
notification[value="translation"] menulist > .menulist-dropmarker {
display: block;
}
.translate-notification-icon,
#translate-notification-icon {
list-style-image: url(chrome://browser/skin/translation-16.png);

60
browser/themes/shared/translation/infobar.inc.css Normal file
View File

@ -0,0 +1,60 @@
%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif
notification[value="translation"] .messageImage {
list-style-image: url(chrome://browser/skin/translation-16.png);
-moz-image-region: rect(0, 32px, 16px, 16px);
}
@media (min-resolution: 1.25dppx) {
notification[value="translation"] .messageImage {
list-style-image: url(chrome://browser/skin/translation-16@2x.png);
-moz-image-region: rect(0, 64px, 32px, 32px);
}
}
notification[value="translation"] {
min-height: 40px;
}
notification[value="translation"] button,
notification[value="translation"] menulist {
-moz-appearance: none;
border-width: 1px;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-radius: 2px;
min-width: 0;
min-height: 30px;
-moz-padding-end: 1ch;
box-shadow: 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(255, 255, 255, 0.5) inset;
}
notification[value="translation"] button > .button-box,
notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker {
padding: 0;
-moz-margin-start: 3ch;
}
notification[value="translation"] button:not([type="menu"]) > .button-box {
-moz-margin-end: 3ch;
}
notification[value="translation"] button,
notification[value="translation"] menulist,
notification[value="translation"] menulist > .menulist-label-box {
-moz-margin-start: 1ch;
-moz-margin-end: 1ch;
}
notification[value="translation"] menulist > .menulist-dropmarker {
-moz-appearance: toolbarbutton-dropdown;
border: none;
background-color: transparent;
margin: auto;
padding: 5px 0;
}

57
browser/themes/windows/browser.css
View File

@ -2348,6 +2348,63 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
margin: 0px;
}
/* Translation infobar */
%include ../shared/translation/infobar.inc.css
@media (-moz-windows-default-theme) {
notification[value="translation"],
notification[value="translation"] button,
notification[value="translation"] menulist {
color: #545454;
}
notification[value="translation"] {
background-color: #EEE;
}
notification[value="translation"] menulist {
border: 1px solid #C1C1C1;
background-color: #FFF;
}
notification[value="translation"] button {
border: 1px solid #C1C1C1;
background-color: #FBFBFB;
}
notification[value="translation"] button:hover,
notification[value="translation"] button:active,
notification[value="translation"] menulist:hover,
notification[value="translation"] menulist:active {
background-color: #EBEBEB;
}
notification[value="translation"] button[anonid="translate"] {
color: #FFF;
background-color: #0095DD;
box-shadow: none;
border: 1px solid #006B9D;
}
notification[value="translation"] button[anonid="translate"]:hover,
notification[value="translation"] button[anonid="translate"]:active {
background-color: #008ACB;
}
notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker,
notification[value="translation"] menulist > .menulist-dropmarker {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
}
@media (min-resolution: 1.25dppx) {
notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker,
notification[value="translation"] menulist > .menulist-dropmarker {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow@2x.png");
}
}
}
.translate-notification-icon,
#translate-notification-icon {
list-style-image: url(chrome://browser/skin/translation-16.png);