mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1219158 - FTU panel visual UI update, r=mikedeboer
This commit is contained in:
Chris Rafuse
parent
2ab299daf2
commit
98253789fe
@ -487,7 +487,7 @@ html[dir="rtl"] .generate-url-spinner {
|
||||
#powered-by,
|
||||
.terms-service {
|
||||
color: #4a4a4a;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#powered-by {
|
||||
@ -502,10 +502,10 @@ html[dir="rtl"] .generate-url-spinner {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
background-image: url("../../shared/img/telefonica.png");
|
||||
background-size: 72px 20px;
|
||||
width: 72px;
|
||||
height: 20px;
|
||||
background-image: url("../../shared/img/telefonica-logo.svg");
|
||||
width: 84px;
|
||||
height: 23px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#powered-by-logo.en-GB,
|
||||
@ -531,10 +531,6 @@ html[dir="rtl"] .generate-url-spinner {
|
||||
}
|
||||
|
||||
@media (min-resolution: 2dppx) {
|
||||
#powered-by-logo {
|
||||
background-image: url("../../shared/img/telefonica@2x.png");
|
||||
}
|
||||
|
||||
#powered-by-logo.en-GB,
|
||||
#powered-by-logo.de {
|
||||
background-image: url("../../shared/img/02@2x.png");
|
||||
@ -666,28 +662,59 @@ html[dir="rtl"] .settings-menu .dropdown-menu {
|
||||
.fte-get-started-content {
|
||||
/* Manual vertical centering */
|
||||
flex: 1;
|
||||
padding: 7.5rem 0 0;
|
||||
padding: 2rem 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fte-title {
|
||||
margin: 0 44px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.fte-title > img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fte-subheader {
|
||||
img.fte-logo {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.fte-subheader, .fte-content {
|
||||
font-size: 1.6rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 2rem;
|
||||
margin: 2rem auto;
|
||||
color: #4a4a4a;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.fte-content {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
.fte-separator {
|
||||
/* Constrain separator width with magic number. */
|
||||
width: 164px;
|
||||
border: solid #c5c5c5 1px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img.fte-hello-web-share {
|
||||
/* Set custom SVG size and position to align with powered-by-wrapper element. */
|
||||
width: 290px;
|
||||
height: 148px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
.fte-get-started-content + .powered-by-wrapper {
|
||||
width: 100%;
|
||||
background: #ebebeb;
|
||||
}
|
||||
|
||||
.fte-get-started-content + .powered-by-wrapper > #powered-by {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fte-get-started-container {
|
||||
@ -698,12 +725,20 @@ html[dir="rtl"] .settings-menu .dropdown-menu {
|
||||
background: #fbfbfb;
|
||||
}
|
||||
|
||||
.fte-button-container {
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 8px 8px 0;
|
||||
background: #ebebeb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fte-get-started-button {
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: #00a9dc;
|
||||
line-height: 43px;
|
||||
margin: 0 15px;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
font-size: 1.4rem;
|
||||
|
||||
@ -28,16 +28,23 @@ loop.panel = (function(_, mozL10n) {
|
||||
render: function() {
|
||||
return (
|
||||
React.createElement("div", {className: "fte-get-started-content"},
|
||||
React.createElement("header", {className: "fte-title"},
|
||||
React.createElement("img", {src: "shared/img/hello_logo.svg"}),
|
||||
React.createElement("div", {className: "fte-title"},
|
||||
React.createElement("img", {className: "fte-logo", src: "shared/img/hello_logo.svg"}),
|
||||
React.createElement("div", {className: "fte-subheader"},
|
||||
mozL10n.get("first_time_experience_subheading")
|
||||
)
|
||||
mozL10n.get("first_time_experience_subheading2")
|
||||
),
|
||||
React.createElement("hr", {className: "fte-separator"}),
|
||||
React.createElement("div", {className: "fte-content"},
|
||||
mozL10n.get("first_time_experience_content")
|
||||
),
|
||||
React.createElement("img", {className: "fte-hello-web-share", src: "shared/img/hello-web-share.svg"})
|
||||
),
|
||||
React.createElement(Button, {additionalClass: "fte-get-started-button",
|
||||
caption: mozL10n.get("first_time_experience_button_label"),
|
||||
htmlId: "fte-button",
|
||||
onClick: this.handleButtonClick})
|
||||
React.createElement("div", {className: "fte-button-container"},
|
||||
React.createElement(Button, {additionalClass: "fte-get-started-button",
|
||||
caption: mozL10n.get("first_time_experience_button_label"),
|
||||
htmlId: "fte-button",
|
||||
onClick: this.handleButtonClick})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -28,16 +28,23 @@ loop.panel = (function(_, mozL10n) {
|
||||
render: function() {
|
||||
return (
|
||||
<div className="fte-get-started-content">
|
||||
<header className="fte-title">
|
||||
<img src="shared/img/hello_logo.svg" />
|
||||
<div className="fte-title">
|
||||
<img className="fte-logo" src="shared/img/hello_logo.svg" />
|
||||
<div className="fte-subheader">
|
||||
{mozL10n.get("first_time_experience_subheading")}
|
||||
{mozL10n.get("first_time_experience_subheading2")}
|
||||
</div>
|
||||
</header>
|
||||
<Button additionalClass="fte-get-started-button"
|
||||
caption={mozL10n.get("first_time_experience_button_label")}
|
||||
htmlId="fte-button"
|
||||
onClick={this.handleButtonClick} />
|
||||
<hr className="fte-separator"/>
|
||||
<div className="fte-content">
|
||||
{mozL10n.get("first_time_experience_content")}
|
||||
</div>
|
||||
<img className="fte-hello-web-share" src="shared/img/hello-web-share.svg" />
|
||||
</div>
|
||||
<div className="fte-button-container">
|
||||
<Button additionalClass="fte-get-started-button"
|
||||
caption={mozL10n.get("first_time_experience_button_label")}
|
||||
htmlId="fte-button"
|
||||
onClick={this.handleButtonClick} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.9 KiB |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="73" height="20" viewBox="0 0 73 20"><path fill="#21465D" fill-rule="evenodd" d="M54.408 3.09c.5-.01.998-.467 1.11-1.022.112-.555-.203-.997-.703-.987-.5.01-1 .468-1.112 1.023-.11.555.204.997.705.988zM36.5 19.018c-18.108 0-36.5.218-36.5.488s18.392.488 36.5.488 36.5-.22 36.5-.488c0-.27-18.392-.488-36.5-.488zM21.42 8.89c-1.108 1.57-2.622 3.005-3.937 3.022-.55.006-.794-.312-.792-.954.002-.38.09-.925.165-1.2 1.247-.62 2.498-1.317 3.626-2.486.626-.67 1.055-1.342 1.07-2.04.012-.66-.4-1.002-1.22-1.01-1.185-.01-2.617.796-3.537 1.782-1.216 1.325-2.16 3.206-2.177 4.87-.012 1.18.546 2.115 2.07 2.07 1.63-.045 3.222-1.306 4.05-2.21-.108.384-.174.744-.174 1.053 0 1.048.524 1.785 1.55 2.107l.212-.1c-.093-.284-.116-.578-.092-.914.074-1.018.476-2.167 1.072-3.68 1.124-2.857 2.787-6.13 3.52-8.06l-1.747.325c-.267.066-.427.27-.518.46-.84 1.776-1.707 3.674-2.776 6.14-.117.264-.24.54-.363.824zM19.79 5.072c.266 0 .37.185.37.425-.006 1.113-1.378 2.536-3.136 3.582.44-1.733 1.676-4.014 2.766-4.007zm29.622 6.65c0 .786.493 1.27 1.452 1.25.992-.022 2.008-.607 2.846-1.416.158.85.77 1.466 2.018 1.43 1.303-.04 2.55-.865 3.425-1.81-.005.093-.01.186-.01.277 0 .872.455 1.52 1.46 1.52 1.077 0 2.32-.81 3.293-2.198l.034.02c-.093.322-.19.885-.198 1.265-.025 1.052.59 1.648 1.474 1.827l.2-.084c-.312-.765.122-2.663.315-3.292.64-2.08 1.67-4.465 2.266-5.696-.27-.225-.905-.39-1.583-.416-2.242-.083-4.49.84-6.143 3.753-.283.5-.595 1.088-.818 1.717-.235.298-.473.576-.58.678-.592.576-1.44 1.31-2.3 1.32-.49.007-.757-.334-.754-.944.015-2.335 2.077-5.872 3.467-5.88.38 0 .55.17.55.498 0 .38-.27.922-.64 1.266l.16.144c.93-.355 1.803-1.013 1.806-1.7.005-.796-.91-.94-1.723-.932-1.078.01-2.443.546-3.534 1.734-1.36 1.482-2.055 3.283-2.2 4.546-.623.736-1.318 1.22-1.784 1.23-.265.02-.444-.122-.448-.406-.004-.237.13-.736.373-1.38.6-1.5 1.474-3.366 2.546-5.59 0 0-1.63.275-1.86.334-.254.065-.44.224-.552.462-.695 1.468-1.523 3.187-2.038 4.455-.325.8-.52 1.568-.52 2.023zm15.265-6.37c.534-.25.966-.266 1.328-.183-.134.277-.763 1.544-1.256 2.686-.77 1.787-1.93 3.58-3.005 3.85-.376.093-.592-.065-.585-.423.033-1.59 1.774-5.11 3.518-5.93zm-38.196.65c-1.217 1.326-2.16 3.207-2.178 4.87-.013 1.15.597 2.117 2.154 2.072 1.665-.047 3.19-1.02 4.504-2.397-.33.884-.618 1.643-.784 2.055-.49 1.222-.853 2.2-1.604 2.773l.088.147c2.2.126 3.02-1.41 3.93-3.938.907-2.526 1.672-4.72 2.27-6.234.96 0 2.324.033 3.09-.144-2.003.89-3.686 4.068-3.484 6.165.09.925.63 1.562 1.82 1.567 2.29.01 4.213-2.705 4.947-4.49.422-1.028.695-1.904.744-2.78.542-.097 1.063-.19 1.32-.227.51-.072.408.482.255.91-.933 2.604-2.555 6.408-2.56 6.458l1.788-.002c.765-1.606 1.245-2.646 1.867-3.734.738-1.288 2.4-3.418 3.065-3.422.232-.002.297.155.25.377-.127.868-2.265 4.22-2.236 5.885.02 1.074.596 1.723 1.59 1.966l.2-.113c-.12-.23-.135-.53-.142-.873-.02-1.103.876-3.028 1.23-3.786.553-1.18 1.532-2.898 1.472-3.834-.03-.465-.387-.876-1.167-.88-1.46-.003-2.91 1.413-4.126 3.304l-.03-.018c.484-1.09.867-2.126.852-2.61-.015-.457-.265-.643-.81-.64-.387.005-.907.157-1.422.29-.717.188-1.482.384-2.316.562-.513.073-.682.158-.674.34.104 2.898-1.866 6.32-3.18 6.326-.57 0-.703-.412-.703-.983 0-2.01 1.647-5.372 3.263-5.904.135-.046.28-.075.372-.1l.2-.543c-.343.07-1.15.085-1.58.087-.43.002-3.54.004-3.54.004.935-2.228 2.25-3.667 4.17-3.744 1.195-.047 1.995.402 2.062 1.09.055.58-.112 1.045-.57 1.528l.13.132c1.045-.5 1.773-1.338 1.778-1.914.007-.894-1.06-1.444-2.775-1.43-2.178.018-4.87.515-6.75 4.4-.557.09-1.07.306-1.496.748l.082.182c.297-.107.66-.138 1.07-.13-.26.64-.78 2.028-1.308 3.442-1.578 2.1-3.168 3.085-4.33 3.1-.64.007-.898-.34-.9-.955-.004-.382.088-.918.163-1.198 1.248-.62 2.5-1.32 3.627-2.488.624-.67 1.054-1.342 1.068-2.04.012-.66-.398-1.002-1.22-1.01-1.184-.01-2.616.796-3.536 1.782zm2.994-.93c.266 0 .37.185.37.425-.006 1.113-1.38 2.536-3.136 3.582.44-1.733 1.675-4.014 2.766-4.007zM7.26 6.105l.113-.086c-.163-.285-.226-.754-.22-1.04.062-2.356 2.55-3.695 6.446-3.695h2.152c-1.253.73-2.3 1.697-3.105 3.515-.347.785-1.993 5.004-2.665 6.907-.835 2.246-1.368 3.272-2.032 3.646l.106.2c1.868.113 2.977-.837 3.697-2.6.682-1.667 1.582-4.313 2.03-5.493 1.436-3.782 2.065-5.384 3.203-6.176 1.584 0 3.13 0 3.133-.002 1.71-.05 2.44-.475 2.97-1.137L22.97 0c-.426.223-1.358.27-2.145.274H13.09c-4.344 0-7.01 1.422-7.447 3.553-.21 1.022.36 2.146 1.616 2.278z"/></svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -107,9 +107,9 @@
|
||||
content/shared/img/vivo@2x.png (content/shared/img/vivo@2x.png)
|
||||
content/shared/img/02.png (content/shared/img/02.png)
|
||||
content/shared/img/02@2x.png (content/shared/img/02@2x.png)
|
||||
content/shared/img/telefonica.png (content/shared/img/telefonica.png)
|
||||
content/shared/img/telefonica-logo.svg (content/shared/img/telefonica-logo.svg)
|
||||
content/shared/img/hello_logo.svg (content/shared/img/hello_logo.svg)
|
||||
content/shared/img/telefonica@2x.png (content/shared/img/telefonica@2x.png)
|
||||
content/shared/img/hello-web-share.svg (content/shared/img/hello-web-share.svg)
|
||||
content/shared/img/ellipsis-v.svg (content/shared/img/ellipsis-v.svg)
|
||||
content/shared/img/empty_conversations.svg (content/shared/img/empty_conversations.svg)
|
||||
content/shared/img/empty_search.svg (content/shared/img/empty_search.svg)
|
||||
|
||||
@ -168,3 +168,8 @@ body {
|
||||
.force-menu-show .dropdown-menu {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
/* Force FTU panel height */
|
||||
.panel.ftu-panel {
|
||||
height: 553px;
|
||||
}
|
||||
|
||||
@ -278,7 +278,8 @@
|
||||
constants: {},
|
||||
activeRoomStore: makeActiveRoomStore({
|
||||
roomState: ROOM_STATES.HAS_PARTICIPANTS
|
||||
})
|
||||
}),
|
||||
IsMultiProcessEnabled: function() { return true; }
|
||||
});
|
||||
|
||||
var desktopRoomStoreLoading = new loop.store.RoomStore(dispatcher, {
|
||||
@ -636,10 +637,10 @@
|
||||
),
|
||||
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
||||
dashed: true,
|
||||
height: 410,
|
||||
height: 553,
|
||||
summary: "First time experience view",
|
||||
width: 330},
|
||||
React.createElement("div", {className: "panel"},
|
||||
React.createElement("div", {className: "panel ftu-panel", height: "553"},
|
||||
React.createElement(PanelView, {dispatcher: dispatcher,
|
||||
gettingStartedSeen: false,
|
||||
notifications: notifications,
|
||||
|
||||
@ -278,7 +278,8 @@
|
||||
constants: {},
|
||||
activeRoomStore: makeActiveRoomStore({
|
||||
roomState: ROOM_STATES.HAS_PARTICIPANTS
|
||||
})
|
||||
}),
|
||||
IsMultiProcessEnabled: function() { return true; }
|
||||
});
|
||||
|
||||
var desktopRoomStoreLoading = new loop.store.RoomStore(dispatcher, {
|
||||
@ -636,10 +637,10 @@
|
||||
</p>
|
||||
<FramedExample cssClass="fx-embedded-panel"
|
||||
dashed={true}
|
||||
height={410}
|
||||
height={553}
|
||||
summary="First time experience view"
|
||||
width={330}>
|
||||
<div className="panel">
|
||||
<div className="panel ftu-panel" height="553">
|
||||
<PanelView dispatcher={dispatcher}
|
||||
gettingStartedSeen={false}
|
||||
notifications={notifications}
|
||||
|
||||
@ -26,9 +26,15 @@ panel_browse_with_friend_button=Browse this page with a friend
|
||||
panel_stop_sharing_tabs_button=Stop sharing your tabs
|
||||
|
||||
first_time_experience_button_label=Get Started
|
||||
## LOCALIZATION_NOTE(first_time_experience_subheading): Message inviting the
|
||||
## LOCALIZATION_NOTE(first_time_experience_subheading2): Message inviting the
|
||||
## user to create his or her first conversation.
|
||||
first_time_experience_subheading=Join the conversation
|
||||
first_time_experience_subheading2=Click the Hello button to browse Web pages with a friend.
|
||||
|
||||
## LOCALIZATION_NOTE(first_time_experience_content): Message describing
|
||||
## ways to use Hello project.
|
||||
first_time_experience_content=Use it to plan together, work together, laugh together.
|
||||
first_time_experience_button_label=See how it works
|
||||
|
||||
|
||||
|
||||
## LOCALIZATION NOTE (invite_header_text2) will be removed when bug 1230058 is implemented.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user