Bug 1183386 - Update conversation tab headers for Loop panel. r=Standard8

This commit is contained in:
Marina Rodriguez Iglesias 2015-08-06 11:54:55 +01:00
parent cd35639c86
commit 8e8f6588f9
8 changed files with 132 additions and 56 deletions

View File

@ -71,58 +71,120 @@ body {
}
.tab-view {
display: flex;
flex-direction: row;
padding: 10px 0;
border-bottom: 1px solid #ccc;
color: #000;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
position: relative;
width: 100%;
height: 4rem;
line-height: 3.7rem;
color: #4A4A4A;
list-style: none;
border-bottom: 2px solid #ccc;
}
.tab-view > li {
flex: 1;
display: inline-block;
vertical-align: middle;
line-height: 1.2rem;
text-align: center;
color: #ccc;
-moz-border-end: 1px solid #ccc;
padding: 0 10px;
height: 16px;
padding: 0;
cursor: pointer;
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: center;
}
.tab-view > li:last-child {
-moz-border-end-style: none;
.tab-view > .slide-bar {
position: absolute;
bottom: -2px;
left: 0;
height: .2em;
width: 50%;
background: #00A9DC;
border: none;
transition: margin .3s ease-in-out;
}
.tab-view > li[data-tab-name="call"],
.tab-view > li[data-tab-name="rooms"] {
background-image: url("../shared/img/icons-16x16.svg#precall");
.tab-view li:nth-child(1).selected ~ .slide-bar {
margin-left: 0;
}
.tab-view > li[data-tab-name="call"]:hover,
.tab-view > li[data-tab-name="rooms"]:hover {
background-image: url("../shared/img/icons-16x16.svg#precall-hover");
.tab-view li:nth-child(2).selected ~ .slide-bar {
margin-left: 50%;
}
.tab-view > li[data-tab-name="call"].selected,
.tab-view > li[data-tab-name="rooms"].selected {
background-image: url("../shared/img/icons-16x16.svg#precall-active");
html[dir="rtl"] .tab-view li:nth-child(1).selected ~ .slide-bar {
margin-left: 50%;
}
.tab-view > li[data-tab-name="contacts"] {
background-image: url("../shared/img/icons-16x16.svg#contacts");
html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
margin-left: 0;
}
.tab-view > li[data-tab-name="contacts"]:hover {
background-image: url("../shared/img/icons-16x16.svg#contacts-hover");
.tab-view > li > div {
font-size: 1.2rem;
pointer-events: none;
display: inline;
}
.tab-view > li[data-tab-name="contacts"].selected {
background-image: url("../shared/img/icons-16x16.svg#contacts-active");
.tab-view > li:before {
content: "";
pointer-events: none;
display: inline-block;
-moz-margin-end: .5rem;
vertical-align: middle;
height: 1.4rem;
width: 1.4rem;
transition-property: background-image;
}
.tab-view > li.selected {
transition-delay: .3s;
}
.tab-view > li[data-tab-name="rooms"]:before {
background-image: url("../shared/img/icons-14x14.svg#hello");
}
.tab-view > li[data-tab-name="rooms"]:hover:before {
background-image: url("../shared/img/icons-14x14.svg#hello-hover");
}
.tab-view > li[data-tab-name="rooms"].selected:before {
background-image: url("../shared/img/icons-14x14.svg#hello-active");
}
.tab-view > li[data-tab-name="contacts"]:before {
background-image: url("../shared/img/icons-14x14.svg#contacts");
}
.tab-view > li[data-tab-name="contacts"]:hover:before {
background-image: url("../shared/img/icons-14x14.svg#contacts-hover");
}
.tab-view > li[data-tab-name="contacts"].selected:before {
background-image: url("../shared/img/icons-14x14.svg#contacts-active");
}
/* Styling for one tab */
.tab-view li:first-child:nth-last-child(2) {
width: 100%;
}
.tab-view li:first-child:nth-last-child(2) > span {
display: none;
}
.tab-view li:first-child:nth-last-child(2) > span {
display: none;
}
.tab-view li:first-child:nth-last-child(2):before {
background-image: url("../shared/img/icons-14x14.svg#hello-hover");
}
.tab-view li:first-child:nth-last-child(2) ~ div {
display: none;
}
.tab-view li:first-child:nth-last-child(3),
.tab-view li:first-child:nth-last-child(3) ~ li {
width: 50%;
}
.tab {

View File

@ -81,12 +81,14 @@ loop.panel = (function(_, mozL10n) {
}
var isSelected = (this.state.selectedTab == tabName);
if (!tab.props.hidden) {
var label = mozL10n.get(tabName + "_tab_button");
tabButtons.push(
React.createElement("li", {className: cx({selected: isSelected}),
"data-tab-name": tabName,
key: i,
onClick: this.handleSelectTab,
title: mozL10n.get(tabName + "_tab_button_tooltip")})
onClick: this.handleSelectTab},
React.createElement("div", null, label)
)
);
}
tabs.push(
@ -97,7 +99,10 @@ loop.panel = (function(_, mozL10n) {
}, this);
return (
React.createElement("div", {className: "tab-view-container"},
React.createElement("ul", {className: "tab-view"}, tabButtons),
React.createElement("ul", {className: "tab-view"},
tabButtons,
React.createElement("div", {className: "slide-bar"})
),
tabs
)
);

View File

@ -81,12 +81,14 @@ loop.panel = (function(_, mozL10n) {
}
var isSelected = (this.state.selectedTab == tabName);
if (!tab.props.hidden) {
var label = mozL10n.get(tabName + "_tab_button");
tabButtons.push(
<li className={cx({selected: isSelected})}
data-tab-name={tabName}
key={i}
onClick={this.handleSelectTab}
title={mozL10n.get(tabName + "_tab_button_tooltip")} />
onClick={this.handleSelectTab}>
<div>{label}</div>
</li>
);
}
tabs.push(
@ -97,7 +99,10 @@ loop.panel = (function(_, mozL10n) {
}, this);
return (
<div className="tab-view-container">
<ul className="tab-view">{tabButtons}</ul>
<ul className="tab-view">
{tabButtons}
<div className="slide-bar" />
</ul>
{tabs}
</div>
);

View File

@ -40,16 +40,24 @@
<path fill-rule="evenodd" d="M3.513,4.404H1.896c-0.417,0-0.756,0.338-0.756,0.755v3.679 c0,0.417,0.338,0.755,0.756,0.755H3.51l2.575,2.575c0.261,0.261,0.596,0.4,0.938,0.422V1.409C6.682,1.431,6.346,1.57,6.085,1.831 L3.513,4.404z M8.555,5.995C8.619,6.32,8.653,6.656,8.653,7c0,0.344-0.034,0.679-0.098,1.004l0.218,0.142 C8.852,7.777,8.895,7.393,8.895,7c0-0.394-0.043-0.777-0.123-1.147L8.555,5.995z M12.224,3.6l-0.475,0.31 c0.359,0.962,0.557,2.003,0.557,3.09c0,1.087-0.198,2.128-0.557,3.09l0.475,0.31c0.41-1.054,0.635-2.201,0.635-3.4 C12.859,5.8,12.634,4.654,12.224,3.6z M10.061,5.012C10.25,5.642,10.353,6.308,10.353,7c0,0.691-0.103,1.358-0.293,1.987 l0.351,0.229C10.634,8.517,10.756,7.772,10.756,7c0-0.773-0.121-1.517-0.345-2.216L10.061,5.012z"/>
<path d="M7.164,12.74l-0.15-0.009c-0.389-0.024-0.754-0.189-1.028-0.463L3.452,9.735H1.896 C1.402,9.735,1,9.333,1,8.838V5.16c0-0.494,0.402-0.896,0.896-0.896h1.558l2.531-2.531C6.26,1.458,6.625,1.293,7.014,1.269 l0.15-0.009V12.74z M1.896,4.545c-0.339,0-0.615,0.276-0.615,0.615v3.679c0,0.339,0.276,0.615,0.615,0.615h1.672l2.616,2.616 c0.19,0.19,0.434,0.316,0.697,0.363V1.568C6.619,1.615,6.375,1.741,6.185,1.931L3.571,4.545H1.896z M12.292,10.612l-0.714-0.467 l0.039-0.105C11.981,9.067,12.165,8.044,12.165,7c0-1.044-0.184-2.067-0.548-3.041l-0.039-0.105l0.714-0.467l0.063,0.162 C12.783,4.649,13,5.81,13,7s-0.217,2.351-0.645,3.451L12.292,10.612z M11.92,10.033l0.234,0.153 c0.374-1.019,0.564-2.09,0.564-3.186s-0.19-2.167-0.564-3.186L11.92,3.966C12.27,4.94,12.447,5.96,12.447,7 C12.447,8.04,12.27,9.059,11.92,10.033z M10.489,9.435L9.895,9.047l0.031-0.101C10.116,8.315,10.212,7.66,10.212,7 c0-0.661-0.096-1.316-0.287-1.947L9.895,4.952l0.594-0.388l0.056,0.176C10.779,5.471,10.897,6.231,10.897,7 c0,0.769-0.118,1.529-0.351,2.259L10.489,9.435z M10.225,8.926l0.106,0.069C10.52,8.348,10.615,7.677,10.615,7 c0-0.677-0.095-1.348-0.284-1.996l-0.106,0.07C10.403,5.699,10.494,6.347,10.494,7C10.494,7.652,10.403,8.3,10.225,8.926z M8.867,8.376L8.398,8.07l0.018-0.093C8.48,7.654,8.512,7.325,8.512,7S8.48,6.345,8.417,6.022L8.398,5.929l0.469-0.306l0.043,0.2 C8.994,6.211,9.036,6.607,9.036,7c0,0.393-0.042,0.789-0.126,1.176L8.867,8.376z"/>
</g>
<path id="contacts-shape" fill-rule="evenodd" transform="translate(-79.000000, -59.000000)" d="M91.5000066,69.9765672 C91.5000066,68.2109401 91.0859436,65.4999994 88.7968783,65.4999994 C88.5546906,65.4999994 87.5312518,66.5859382 86,66.5859382 C84.4687482,66.5859382 83.4453095,65.4999994 83.2031217,65.4999994 C80.9140564,65.4999994 80.4999935,68.2109401 80.4999935,69.9765672 C80.4999935,71.2421938 81.3437445,72.0000072 82.5859334,72.0000072 L89.4140666,72.0000072 C90.6562555,72.0000072 91.5000066,71.2421938 91.5000066,69.9765672 L91.5000066,69.9765672 L91.5000066,69.9765672 Z M89.0000036,62.9999964 C89.0000036,61.3437444 87.656252,59.9999928 86,59.9999928 C84.343748,59.9999928 82.9999964,61.3437444 82.9999964,62.9999964 C82.9999964,64.6562484 84.343748,66 86,66 C87.656252,66 89.0000036,64.6562484 89.0000036,62.9999964 L89.0000036,62.9999964 L89.0000036,62.9999964 Z" />
<path id="hello-shape" fill-rule="evenodd" transform="translate(-261.000000, -59.000000)" d="M268.273778,60 C264.809073,60 262,62.4730749 262,65.523237 C262,67.0417726 262.697086,68.4174001 263.822897,69.4155754 C263.627626,70.1061164 263.240356,71.0442922 262.474542,71.959559 C262.605451,72.1919211 264.761073,71.3737446 266.2807,70.7617485 C266.907968,70.946111 267.577782,71.046474 268.274868,71.046474 C271.740664,71.046474 274.549737,68.5733991 274.549737,65.523237 C274.549737,62.4730749 271.739573,60 268.274868,60 L268.273778,60 Z M270.15122,63.3119786 C270.609399,63.3119786 270.980306,63.6850671 270.980306,64.1432459 C270.980306,64.6036066 270.609399,64.9756042 270.15122,64.9756042 C269.693041,64.9756042 269.321044,64.6036066 269.321044,64.1432459 C269.321044,63.6850671 269.693041,63.3119786 270.15122,63.3119786 L270.15122,63.3119786 Z M266.36579,63.3119786 C266.823969,63.3119786 267.195966,63.6850671 267.195966,64.1432459 C267.195966,64.6036066 266.823969,64.9756042 266.36579,64.9756042 C265.907611,64.9756042 265.535613,64.6036066 265.535613,64.1432459 C265.535613,63.6850671 265.907611,63.3119786 266.36579,63.3119786 L266.36579,63.3119786 Z M268.283596,69.3675757 L268.258505,69.3664848 L268.233414,69.3675757 C266.557789,69.3675757 264.685801,68.2777646 264.254894,66.4428674 C265.38616,66.9675913 266.967968,67.1966807 268.258505,67.1966807 C269.549042,67.1966807 271.13085,66.9675913 272.262115,66.4428674 C271.8323,68.2777646 269.959221,69.3675757 268.283596,69.3675757 L268.283596,69.3675757 Z" />
</defs>
<use id="audio" xlink:href="#audio-shape"/>
<use id="audio-active" xlink:href="#audio-shape"/>
<use id="audio-disabled" xlink:href="#audio-shape"/>
<use id="contacts" xlink:href="#contacts-shape"/>
<use id="contacts-hover" xlink:href="#contacts-shape"/>
<use id="contacts-active" xlink:href="#contacts-shape"/>
<use id="facemute" xlink:href="#facemute-shape"/>
<use id="facemute-active" xlink:href="#facemute-shape"/>
<use id="facemute-disabled" xlink:href="#facemute-shape"/>
<use id="hangup" xlink:href="#hangup-shape"/>
<use id="hangup-active" xlink:href="#hangup-shape"/>
<use id="hangup-disabled" xlink:href="#hangup-shape"/>
<use id="hello" xlink:href="#hello-shape"/>
<use id="hello-hover" xlink:href="#hello-shape"/>
<use id="hello-active" xlink:href="#hello-shape"/>
<use id="incoming" xlink:href="#incoming-shape"/>
<use id="incoming-active" xlink:href="#incoming-shape"/>
<use id="incoming-disabled" xlink:href="#incoming-shape"/>

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -40,7 +40,6 @@
<path fill-rule="evenodd" d="M8,0C3.582,0,0,3.582,0,8s3.582,8,8,8c4.418,0,8-3.582,8-8 S12.418,0,8,0z M10.544,4.471c0.17,0.453,0.194,0.954,0.021,1.416c-0.163,0.436-0.495,0.811-0.982,1.096 C9.307,7.146,9.167,7.351,9.151,7.548c-0.045,0.575,0.658,0.993,1.064,1.297c0.889,0.666,1.236,1.758,0.648,2.813 c-0.562,1.007-1.901,1.457-3.322,1.462c-1.766-0.008-2.88-0.817-2.938-1.918C4.527,9.779,5.987,9.101,7.307,8.947 c0.369-0.043,0.7-0.036,1.01-0.014C7.85,8.625,7.675,7.998,7.914,7.58c0.062-0.109,0.023-0.072-0.095-0.054 C6.739,7.689,5.628,6.985,5.367,5.92c-0.132-0.54-0.05-1.105,0.156-1.547C5.97,3.413,6.964,2.88,8.067,2.88 c1.147,0,2.209,0,3.334,0.009L10.612,3.4H9.714C10.093,3.665,10.384,4.046,10.544,4.471z"/>
</g>
<path id="history-shape" fill-rule="evenodd" d="M8,16c-4.418,0-8-3.582-8-8c0-4.418,3.582-8,8-8 c4.418,0,8,3.582,8,8C16,12.418,12.418,16,8,16z M8,2.442C4.911,2.442,2.408,4.931,2.408,8c0,3.069,2.504,5.557,5.592,5.557 S13.592,11.069,13.592,8C13.592,4.931,11.089,2.442,8,2.442z M7.649,9.048C7.206,8.899,6.882,8.493,6.882,8V4.645 c0-0.618,0.501-1.119,1.118-1.119c0.618,0,1.119,0.501,1.119,1.119v3.078c1.176,1.22,2.237,3.633,2.237,3.633 S8.844,10.252,7.649,9.048z"/>
<path id="precall-shape" fill-rule="evenodd" d="M8.014,0.003c-4.411,0-7.987,3.576-7.987,7.986 c0,1.642,0.496,3.168,1.346,4.437L0,15.997l3.568-1.372c1.271,0.853,2.8,1.352,4.446,1.352c4.411,0,7.986-3.576,7.986-7.987 C16,3.579,12.424,0.003,8.014,0.003z"/>
<path id="settings-shape" fill-rule="evenodd" d="M14.77,8c0,0.804,0.262,1.548,0.634,1.678L16,9.887 c-0.205,0.874-0.553,1.692-1.011,2.434l-0.567-0.272c-0.355-0.171-1.066,0.17-1.635,0.738c-0.569,0.569-0.909,1.279-0.738,1.635 l0.273,0.568c-0.741,0.46-1.566,0.79-2.438,0.998l-0.205-0.584c-0.13-0.372-0.874-0.634-1.678-0.634s-1.548,0.262-1.678,0.634 l-0.209,0.596c-0.874-0.205-1.692-0.553-2.434-1.011l0.272-0.567c0.171-0.355-0.17-1.066-0.739-1.635 c-0.568-0.568-1.279-0.909-1.635-0.738l-0.568,0.273c-0.46-0.741-0.79-1.566-0.998-2.439l0.584-0.205 C0.969,9.547,1.231,8.804,1.231,8c0-0.804-0.262-1.548-0.634-1.678L0,6.112c0.206-0.874,0.565-1.685,1.025-2.427l0.554,0.266 c0.355,0.171,1.066-0.17,1.635-0.738c0.569-0.568,0.909-1.28,0.739-1.635L3.686,1.025c0.742-0.46,1.553-0.818,2.427-1.024 l0.209,0.596C6.453,0.969,7.197,1.23,8.001,1.23s1.548-0.262,1.678-0.634l0.209-0.596c0.874,0.205,1.692,0.553,2.434,1.011 l-0.272,0.567c-0.171,0.355,0.17,1.066,0.738,1.635c0.569,0.568,1.279,0.909,1.635,0.738l0.568-0.273 c0.46,0.741,0.79,1.566,0.998,2.438l-0.584,0.205C15.032,6.452,14.77,7.196,14.77,8z M8.001,3.661C5.604,3.661,3.661,5.603,3.661,8 c0,2.397,1.943,4.34,4.339,4.34c2.397,0,4.339-1.943,4.339-4.34C12.34,5.603,10.397,3.661,8.001,3.661z"/>
<g id="share-shape">
<path fill-rule="evenodd" d="M8.999,10.654L8.69,10.6L8.999,16l2.56-3.754L8.999,10.654z M8.658,10.041l0.341-0.043l6,2.898V0L1,10.998l4.55-0.569L8.999,16l-1.892-5.68l-0.283-0.05l0.256-0.032L7,9.998l6.999-8.003 L8.656,9.998L8.658,10.041z"/>
@ -113,9 +112,6 @@
<use id="history-hover" xlink:href="#history-shape"/>
<use id="history-active" xlink:href="#history-shape"/>
<use id="leave" xlink:href="#leave-shape"/>
<use id="precall" xlink:href="#precall-shape"/>
<use id="precall-hover" xlink:href="#precall-shape"/>
<use id="precall-active" xlink:href="#precall-shape"/>
<use id="settings" xlink:href="#settings-shape"/>
<use id="settings-hover" xlink:href="#settings-shape"/>
<use id="settings-active" xlink:href="#settings-shape"/>

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

View File

@ -508,7 +508,8 @@
],
"14x14": ["audio", "audio-active", "audio-disabled", "facemute",
"facemute-active", "facemute-disabled", "hangup", "hangup-active",
"hangup-disabled", "incoming", "incoming-active", "incoming-disabled",
"hangup-disabled", "hello", "hello-hover", "hello-active",
"incoming", "incoming-active", "incoming-disabled",
"link", "link-active", "link-disabled", "mute", "mute-active",
"mute-disabled", "pause", "pause-active", "pause-disabled", "video",
"video-white", "video-active", "video-disabled", "volume", "volume-active",
@ -518,11 +519,10 @@
"block", "block-red", "block-hover", "block-active", "contacts", "contacts-hover",
"contacts-active", "copy", "checkmark", "delete", "globe", "google", "google-hover",
"google-active", "history", "history-hover", "history-active", "leave",
"precall", "precall-hover", "precall-active", "screen-white", "screenmute-white",
"settings", "settings-hover", "settings-active", "share-darkgrey", "tag",
"tag-hover", "tag-active", "trash", "unblock", "unblock-hover", "unblock-active",
"video", "video-hover", "video-active", "tour", "status-available",
"status-unavailable"
"screen-white", "screenmute-white", "settings", "settings-hover", "settings-active",
"share-darkgrey", "tag", "tag-hover", "tag-active", "trash", "unblock",
"unblock-hover", "unblock-active", "video", "video-hover", "video-active", "tour",
"status-available", "status-unavailable"
]
},

View File

@ -508,7 +508,8 @@
],
"14x14": ["audio", "audio-active", "audio-disabled", "facemute",
"facemute-active", "facemute-disabled", "hangup", "hangup-active",
"hangup-disabled", "incoming", "incoming-active", "incoming-disabled",
"hangup-disabled", "hello", "hello-hover", "hello-active",
"incoming", "incoming-active", "incoming-disabled",
"link", "link-active", "link-disabled", "mute", "mute-active",
"mute-disabled", "pause", "pause-active", "pause-disabled", "video",
"video-white", "video-active", "video-disabled", "volume", "volume-active",
@ -518,11 +519,10 @@
"block", "block-red", "block-hover", "block-active", "contacts", "contacts-hover",
"contacts-active", "copy", "checkmark", "delete", "globe", "google", "google-hover",
"google-active", "history", "history-hover", "history-active", "leave",
"precall", "precall-hover", "precall-active", "screen-white", "screenmute-white",
"settings", "settings-hover", "settings-active", "share-darkgrey", "tag",
"tag-hover", "tag-active", "trash", "unblock", "unblock-hover", "unblock-active",
"video", "video-hover", "video-active", "tour", "status-available",
"status-unavailable"
"screen-white", "screenmute-white", "settings", "settings-hover", "settings-active",
"share-darkgrey", "tag", "tag-hover", "tag-active", "trash", "unblock",
"unblock-hover", "unblock-active", "video", "video-hover", "video-active", "tour",
"status-available", "status-unavailable"
]
},

View File

@ -9,8 +9,8 @@
clientShortname2=Firefox Hello
clientSuperShortname=Hello
rooms_tab_button_tooltip=Conversations
contacts_tab_button_tooltip=Contacts
rooms_tab_button=Conversations
contacts_tab_button=Contacts
## LOCALIZATION_NOTE(sign_in_again_title_line_one, sign_in_again_title_line_two2):
## These are displayed together at the top of the panel when a user is needed to