Bug 1801688 - Add "Manage account / Sign out" section to Sync Settings page. r=aleca
Differential Revision: https://phabricator.services.mozilla.com/D162312 --HG-- extra : amend_source : d2d50570c96b4f46611bc287de51d19d7ebb2dab
This commit is contained in:
Micah Ilbery
Родитель
05d58ec0e4
Коммит
f7f516aa98
|
|
@ -12,6 +12,7 @@ messenger.jar:
|
|||
* content/messenger/preferences/dockoptions.xhtml
|
||||
#endif
|
||||
content/messenger/preferences/chat.js
|
||||
content/messenger/preferences/sync.js
|
||||
content/messenger/preferences/messagestyle.js
|
||||
content/messenger/preferences/messengerLanguages.js
|
||||
content/messenger/preferences/messengerLanguages.xhtml
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
/* import-globals-from downloads.js */
|
||||
/* import-globals-from privacy.js */
|
||||
/* import-globals-from chat.js */
|
||||
/* import-globals-from sync.js */
|
||||
/* import-globals-from findInPage.js */
|
||||
/* globals gCalendarPane */
|
||||
|
||||
|
|
@ -133,6 +134,7 @@ function init() {
|
|||
register_module("paneCompose", gComposePane);
|
||||
register_module("panePrivacy", gPrivacyPane);
|
||||
register_module("paneCalendar", gCalendarPane);
|
||||
register_module("paneSync", gSyncPane);
|
||||
register_module("paneSearchResults", gSearchResultsPane);
|
||||
if (Services.prefs.getBoolPref("mail.chat.enabled")) {
|
||||
register_module("paneChat", gChatPane);
|
||||
|
|
|
|||
|
|
@ -147,6 +147,18 @@
|
|||
alt="" />
|
||||
<label class="category-name" flex="1" data-l10n-id="pane-calendar-title"/>
|
||||
</richlistitem>
|
||||
|
||||
<richlistitem id="category-sync"
|
||||
class="category"
|
||||
value="paneSync"
|
||||
hidden="true"
|
||||
data-l10n-id="category-sync"
|
||||
align="center">
|
||||
<html:img class="category-icon"
|
||||
src="chrome://messenger/skin/icons/new/touch/sync.svg"
|
||||
alt="" />
|
||||
<label class="category-name" flex="1" data-l10n-id="pane-sync-title"/>
|
||||
</richlistitem>
|
||||
</richlistbox>
|
||||
|
||||
<spacer flex="1"/>
|
||||
|
|
@ -188,6 +200,7 @@
|
|||
#include privacy.inc.xhtml
|
||||
#include chat.inc.xhtml
|
||||
#include ../../../calendar/base/content/preferences/calendar-preferences.inc.xhtml
|
||||
#include sync.inc.xhtml
|
||||
</vbox>
|
||||
</vbox>
|
||||
</vbox>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
# 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/.
|
||||
<script src="chrome://messenger/content/preferences/sync.js"/>
|
||||
|
||||
<html:template id="paneSync">
|
||||
<html:div id="syncPaneCategory"
|
||||
class="subcategory"
|
||||
data-category="paneSync"
|
||||
xmlns="http://www.w3.org/1999/xhtml">
|
||||
<h1 data-l10n-id="sync-pane-header"></h1>
|
||||
|
||||
<!-- TODO: Sync Account Not Signed In View -->
|
||||
|
||||
<section id="syncAccountSignedIn">
|
||||
<div id="syncAccountSection">
|
||||
<div id="photoInput">
|
||||
<button type="button" id="photoButton"
|
||||
class="plain-button"
|
||||
data-l10n-id="sync-pane-edit-photo">
|
||||
<img class="contact-photo" src="" alt="" />
|
||||
<div id="photoOverlay"></div>
|
||||
</button>
|
||||
</div>
|
||||
<div id="syncAccountInfo">
|
||||
<span id="syncAccountName">Jane Doe</span>
|
||||
<span id="syncAccountMail">example@example.com</span>
|
||||
<a href="#" data-l10n-id="sync-pane-manage-account"></a>
|
||||
</div>
|
||||
<button id="syncAccountSignOut"
|
||||
data-l10n-id="sync-pane-sign-out"
|
||||
type="button">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TODO: Device Name section -->
|
||||
|
||||
<!-- TODO: Section to show what is being synced -->
|
||||
</section>
|
||||
</html:div>
|
||||
</html:template>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/* 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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
/* import-globals-from preferences.js */
|
||||
|
||||
var gSyncPane = {
|
||||
init() {
|
||||
/* TODO: hook up Sync backend to front-end */
|
||||
},
|
||||
};
|
||||
|
|
@ -30,6 +30,10 @@ pane-calendar-title = Calendar
|
|||
category-calendar =
|
||||
.tooltiptext = Calendar
|
||||
|
||||
pane-sync-title = Sync
|
||||
category-sync =
|
||||
.tooltiptext = Sync
|
||||
|
||||
general-language-and-appearance-header = Language & Appearance
|
||||
|
||||
general-incoming-mail-header = Incoming Mails
|
||||
|
|
@ -908,3 +912,14 @@ search-results-empty-message2 = { PLATFORM() ->
|
|||
}
|
||||
|
||||
search-results-help-link = Need help? Visit <a data-l10n-name="url">{ -brand-short-name } Support</a>
|
||||
|
||||
## Sync Tab
|
||||
|
||||
sync-pane-header = Sync
|
||||
|
||||
sync-pane-edit-photo =
|
||||
.title = Change profile picture
|
||||
|
||||
sync-pane-manage-account = Manage account
|
||||
|
||||
sync-pane-sign-out = Sign out…
|
||||
|
|
|
|||
|
|
@ -648,6 +648,7 @@
|
|||
skin/classic/messenger/icons/new/touch/pencil.svg (../shared/mail/icons/new/touch/pencil.svg)
|
||||
skin/classic/messenger/icons/new/touch/settings.svg (../shared/mail/icons/new/touch/settings.svg)
|
||||
skin/classic/messenger/icons/new/touch/subtract-circle.svg (../shared/mail/icons/new/touch/subtract-circle.svg)
|
||||
skin/classic/messenger/icons/new/touch/sync.svg (../shared/mail/icons/new/touch/sync.svg)
|
||||
skin/classic/messenger/icons/new/touch/tasks.svg (../shared/mail/icons/new/touch/tasks.svg)
|
||||
|
||||
skin/classic/messenger/icons/new/address-book-indicator.svg (../shared/mail/icons/new/address-book-indicator.svg)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<!-- 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/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" version="1.1" viewBox="0 0 24 24" height="24" width="24">
|
||||
<path d="M12 3a8.972 8.972 0 0 0-5.803 2.12.5.5 0 0 0-.058.704.5.5 0 0 0 .703.06A7.962 7.962 0 0 1 12 4c4.424 0 8 3.575 8 8v.293l-2.146-2.147a.5.5 0 0 0-.708 0 .5.5 0 0 0 0 .707l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0L21 12.293V12c0-4.965-4.035-9-9-9Zm-8.578 7.006a.5.5 0 0 0-.276.14l-3 3a.5.5 0 0 0 0 .707.5.5 0 0 0 .708 0L3 11.707v.3C3.004 16.969 7.038 21 12 21a8.972 8.972 0 0 0 5.816-2.131.5.5 0 0 0 .059-.705.5.5 0 0 0-.705-.059A7.963 7.963 0 0 1 12 20c-4.424 0-8-3.576-8-8v-.293l2.146 2.146a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.707l-3-3a.5.5 0 0 0-.432-.14z" fill="context-stroke"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 960 B |
|
|
@ -3,6 +3,7 @@
|
|||
- You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
@import url("chrome://messenger/skin/shared/preferences/subdialog.css");
|
||||
@import url("chrome://messenger/skin/colors.css");
|
||||
@import url("chrome://messenger/skin/icons.css");
|
||||
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
|
|
@ -727,3 +728,101 @@ calendar-notifications-setting .remove-button {
|
|||
/**
|
||||
* End connection dialog
|
||||
*/
|
||||
|
||||
/**
|
||||
* Sync Settings Page
|
||||
*/
|
||||
|
||||
#syncAccountSection {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 24px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
#photoInput {
|
||||
display: contents;
|
||||
place-self: center;
|
||||
}
|
||||
|
||||
.contact-photo,
|
||||
#photoButton {
|
||||
border-radius: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contact-photo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: -1px;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
background-color: var(--in-content-button-background);
|
||||
background-image: var(--icon-user);
|
||||
background-size: 48px;
|
||||
background-position: calc(50% - 1px) calc(50% - 1px);
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
-moz-context-properties: stroke;
|
||||
stroke: color-mix(in srgb, currentColor 30%, transparent);
|
||||
}
|
||||
|
||||
#photoButton {
|
||||
position: relative;
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
min-width: 78px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#photoButton:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#photoOverlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
#photoButton:focus-visible {
|
||||
outline: 2px solid var(--in-content-focus-outline-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
#photoButton:is(:focus-visible, :hover) #photoOverlay {
|
||||
background-color: color-mix(in srgb, var(--color-gray-90) 75%, transparent);
|
||||
background-image: var(--icon-more);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 48px;
|
||||
-moz-context-properties: stroke;
|
||||
stroke: var(--color-white);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (prefers-contrast) {
|
||||
#photoButton:is(:focus-visible, :hover) #photoOverlay {
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
||||
#syncAccountInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#syncAccountName {
|
||||
font-weight: bold;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
#syncAccountMail {
|
||||
margin-bottom: 6px
|
||||
}
|
||||
|
||||
#syncAccountSignOut {
|
||||
place-self: end;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче