wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 988480 - Implement OS X styling of Translation Infobar. r=mak

Browse Source
This commit is contained in:
Asaf Romano 2014-05-31 00:21:11 +03:00
parent 6cda87d588
commit c9be06e855
5 changed files with 204 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,59 +21,75 @@
<content>
<xul:hbox class="notification-inner outset" flex="1" xbl:inherits="type">
<xul:hbox anonid="details" align="center" flex="1">
<xul:image anonid="messageImage" class="messageImage"/>
<xul:image class="translate-infobar-element messageImage"
anonid="messageImage"/>
<xul:deck anonid="translationStates" selectedIndex="0">
<!-- offer to translate -->
<xul:hbox class="translate-offer-box" align="center">
<xul:label value="&translation.thisPageIsIn.label;"/>
<xul:menulist anonid="detectedLanguage">
<xul:label class="translate-infobar-element" value="&translation.thisPageIsIn.label;"/>
<xul:menulist class="translate-infobar-element" anonid="detectedLanguage">
<xul:menupopup/>
</xul:menulist>
<xul:label value="&translation.translateThisPage.label;"/>
<xul:button label="&translation.translate.button;" anonid="translate"
<xul:label class="translate-infobar-element" value="&translation.translateThisPage.label;"/>
<xul:button class="translate-infobar-element"
label="&translation.translate.button;"
anonid="translate"
oncommand="document.getBindingParent(this).translate();"/>
<xul:button label="&translation.notNow.button;" anonid="notNow"
<xul:button class="translate-infobar-element"
label="&translation.notNow.button;" anonid="notNow"
oncommand="document.getBindingParent(this).close();"/>
</xul:hbox>
<!-- translating -->
<xul:vbox class="translating-box" pack="center">
<xul:label value="&translation.translatingContent.label;"/>
</xul:vbox>
<xul:hbox class="translating-box" pack="center">
<xul:label class="translate-infobar-element"
value="&translation.translatingContent.label;"/>
</xul:hbox>
<!-- translated -->
<xul:hbox class="translated-box" align="center">
<xul:label value="&translation.translatedFrom.label;"/>
<xul:menulist anonid="fromLanguage"
<xul:label class="translate-infobar-element"
value="&translation.translatedFrom.label;"/>
<xul:menulist class="translate-infobar-element"
anonid="fromLanguage"
oncommand="document.getBindingParent(this).translate()">
<xul:menupopup/>
</xul:menulist>
<xul:label value="&translation.translatedTo.label;"/>
<xul:label class="translate-infobar-element"
value="&translation.translatedTo.label;"/>
<xul:menulist anonid="toLanguage"
oncommand="document.getBindingParent(this).translate()">
<xul:menupopup/>
</xul:menulist>
<xul:label value="&translation.translatedToSuffix.label;"/>
<xul:button anonid="showOriginal"
class="translate-infobar-element"
label="&translation.showOriginal.button;"
oncommand="document.getBindingParent(this).showOriginal();"/>
<xul:button anonid="showTranslation"
class="translate-infobar-element"
label="&translation.showTranslation.button;"
oncommand="document.getBindingParent(this).showTranslation();"/>
</xul:hbox>
<!-- error -->
<xul:hbox class="translation-error" align="center">
<xul:label value="&translation.errorTranslating.label;"/>
<xul:button label="&translation.tryAgain.button;" anonid="tryAgain"
<xul:label class="translate-infobar-element"
value="&translation.errorTranslating.label;"/>
<xul:button class="translate-infobar-element"
label="&translation.tryAgain.button;"
anonid="tryAgain"
oncommand="document.getBindingParent(this).translate();"/>
</xul:hbox>
</xul:deck>
<xul:spacer flex="1"/>
<xul:button type="menu" anonid="options" label="&translation.options.menu;">
<xul:button type="menu"
class="translate-infobar-element options-menu-button"
anonid="options"
label="&translation.options.menu;">
<xul:menupopup onpopupshowing="document.getBindingParent(this).optionsShowing();">
<xul:menuitem anonid="neverForLanguage"
oncommand="document.getBindingParent(this).neverForLanguage();"/>

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

@ -1376,9 +1376,14 @@ toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
%include ../shared/translation/infobar.inc.css
notification[value="translation"] {
min-height: 40px;
}
notification[value="translation"],
notification[value="translation"] button,
notification[value="translation"] menulist {
min-height: 30px;
color: #5A5959;
}
@ -1386,6 +1391,11 @@ notification[value="translation"] {
background-color: #F2F1F0;
}
notification[value="translation"] button,
notification[value="translation"] menulist {
-moz-padding-end: 1ch;
}
notification[value="translation"] menulist {
border: 1px solid #C1C1C1;
background-color: #FFF;
@ -1396,6 +1406,13 @@ notification[value="translation"] button {
background-color: #F2F1F0;
}
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"] button:hover,
notification[value="translation"] button:active,
notification[value="translation"] menulist:hover,
@ -1415,6 +1432,16 @@ notification[value="translation"] button[anonid="translate"]:active {
background-image: linear-gradient(#8DA726, #8DA726);
}
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"] menulist > .menulist-dropmarker {
display: block;
}

119
browser/themes/osx/browser.css
View File

@ -3616,6 +3616,8 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
}
}
/* Translation */
.translate-notification-icon,
#translate-notification-icon {
list-style-image: url(chrome://browser/skin/translation-16.png);
@ -3642,6 +3644,123 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
}
}
%include ../shared/translation/infobar.inc.css
notification[value="translation"] {
color: #484848;
background-color: #EFEFEF;
background-image: none;
border-top: none;
border-bottom: 1px solid #c4c4c4;
padding-top: 1px;
padding-bottom: 1px;
}
.translate-infobar-element {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
button.translate-infobar-element {
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) repeat scroll 0% 0% padding-box transparent;
color: #333333;
border: 1px solid;
border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 1px 0px rgba(255, 255, 255, 0.2);
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
min-height: 22px;
min-width: 0;
padding: 0 0.8em !important;
margin-left: 0.25em;
margin-right: 0.25em;
}
button.translate-infobar-element .button-text {
margin-left: 0 !important;
margin-right: 0 !important;
}
label.translate-infobar-element {
padding-top: 2px;
}
button.translate-infobar-element:hover {
background: #f0f0f0;
box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset, 0 0 0 1px hsla(0,0%,100%,.05) inset, 0 1px 0 hsla(210,54%,20%,.01), 0 0 4px hsla(206,100%,20%,.1);
}
button.translate-infobar-element:active {
box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset, 0 0 1px hsla(211,79%,6%,.2) inset;
transition-duration: 0ms;
}
button.translate-infobar-element[anonid="translate"] {
color: #ffffff;
background-image: linear-gradient(#4cb1ff, #1793e5);
box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset, 0 0 0 1px hsla(0,0%,100%,.1) inset, 0 1px 0 hsla(210,54%,20%,.03);
border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
padding: 0 1.1em !important;;
}
button.translate-infobar-element[anonid="translate"]:hover {
background-image: linear-gradient(#66bdff, #0d9eff);
}
button.translate-infobar-element.options-menu-button {
-moz-padding-start: 0.5em !important;
-moz-padding-end: 0.3em !important;
}
button.translate-infobar-element.options-menu-button > .button-box > .button-menu-dropmarker {
display: -moz-box;
list-style-image: url("chrome://browser/skin/toolbarbutton-dropmarker.png");
padding: 0 !important;
margin: 0 !important;
}
@media (min-resolution: 1.25dppx) {
button.translate-infobar-element.options-menu-button > .button-box > .button-menu-dropmarker {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropmarker@2x.png");
}
button.translate-infobar-element.options-menu-button > .button-box > .button-menu-dropmarker > .dropmarker-icon {
width: 7px;
}
}
menulist.translate-infobar-element {
text-shadow: 0 1px 1px #FEFFFE;
border: 1px solid;
border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
box-shadow: 0 1px 1px 0 #FFFFFF, inset 0 2px 2px 0 #FFFFFF;
background-color: #F1F1F1;
background-image: linear-gradient(#FFFFFF, rgba(255,255,255,0.1));
color: #333333;
padding: 0;
}
menulist.translate-infobar-element > .menulist-label-box {
padding-top: 1px;
-moz-padding-start: 0.3em;
margin-top: 0;
margin-bottom: 0;
}
menulist.translate-infobar-element:hover {
background-image: linear-gradient(#FFFFFF, rgba(255,255,255,0.6));
}
menulist.translate-infobar-element[open="true"] {
background-image: linear-gradient(rgba(255,255,255,0.1),
rgba(255,255,255,0.6));
}
menulist.translate-infobar-element > .menulist-dropmarker {
display: -moz-box;
list-style-image: url("chrome://global/skin/icons/menulist-dropmarker.png");
}
.popup-notification-icon {
width: 64px;

23
browser/themes/shared/translation/infobar.inc.css
View File

@ -26,10 +26,6 @@ notification[value="translation"][state="translating"] .messageImage {
}
}
notification[value="translation"] {
min-height: 40px;
}
notification[value="translation"] button,
notification[value="translation"] menulist {
-moz-appearance: none;
@ -40,28 +36,9 @@ notification[value="translation"] menulist {
-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;

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

@ -2350,10 +2350,15 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
%include ../shared/translation/infobar.inc.css
notification[value="translation"] {
min-height: 40px;
}
@media (-moz-windows-default-theme) {
notification[value="translation"],
notification[value="translation"] button,
notification[value="translation"] menulist {
min-height: 30px;
color: #545454;
}
@ -2361,6 +2366,11 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
background-color: #EEE;
}
notification[value="translation"] button,
notification[value="translation"] menulist {
-moz-padding-end: 1ch;
}
notification[value="translation"] menulist {
border: 1px solid #C1C1C1;
background-color: #FFF;
@ -2371,6 +2381,13 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
background-color: #FBFBFB;
}
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"] button:hover,
notification[value="translation"] button:active,
notification[value="translation"] menulist:hover,
@ -2395,6 +2412,16 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png");
}
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;
}
@media (min-resolution: 1.25dppx) {
notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker,
notification[value="translation"] menulist > .menulist-dropmarker {