@yuebai008/cli/dist/cli-server/client/front_end/panels/settings/components/SyncSection.js

Command line interface for rapid qg-minigame development

import*as Common from"../../../core/common/common.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as i18n from"../../../core/i18n/i18n.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Settings from"../../../ui/components/settings/settings.js";import*as ChromeLink from"../../../ui/components/chrome_link/chrome_link.js";import syncSectionStyles from"./syncSection.css.js";const UIStrings={syncDisabled:"To turn this setting on, you must enable Chrome sync.",preferencesSyncDisabled:"To turn this setting on, you must first enable settings sync in Chrome.",settings:"Go to Settings",signedIn:"Signed into Chrome as:"},str_=i18n.i18n.registerUIStrings("panels/settings/components/SyncSection.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class SyncSection extends HTMLElement{static litTagName=LitHtml.literal`devtools-sync-section`;#n=this.attachShadow({mode:"open"});#t={isSyncActive:!1};#e;#i=this.#s.bind(this);connectedCallback(){this.#n.adoptedStyleSheets=[syncSectionStyles]}set data(n){this.#t=n.syncInfo,this.#e=n.syncSetting,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#i)}#s(){if(!this.#e)throw new Error("SyncSection not properly initialized");const n=!this.#t.isSyncActive||!this.#t.arePreferencesSynced;LitHtml.render(LitHtml.html`
      <fieldset>
        <legend>${Common.Settings.getLocalizedSettingsCategory(Common.Settings.SettingCategory.SYNC)}</legend>
        ${renderAccountInfoOrWarning(this.#t)}
        <${Settings.SettingCheckbox.SettingCheckbox.litTagName} .data=${{setting:this.#e,disabled:n}}>
        </${Settings.SettingCheckbox.SettingCheckbox.litTagName}>
      </fieldset>
    `,this.#n,{host:this})}}function renderAccountInfoOrWarning(n){if(!n.isSyncActive){const n="chrome://settings/syncSetup";return LitHtml.html`
      <span class="warning">
        ${i18nString(UIStrings.syncDisabled)}
        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${n}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
      </span>`}if(!n.arePreferencesSynced){const n="chrome://settings/syncSetup/advanced";return LitHtml.html`
      <span class="warning">
        ${i18nString(UIStrings.preferencesSyncDisabled)}
        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${n}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
      </span>`}return LitHtml.html`
    <div class="account-info">
      <img src="data:image/png;base64, ${n.accountImage}" alt="Account avatar" />
      <div class="account-email">
        <span>${i18nString(UIStrings.signedIn)}</span>
        <span>${n.accountEmail}</span>
      </div>
    </div>`}ComponentHelpers.CustomElements.defineComponent("devtools-sync-section",SyncSection);