pleroma-fe/src/components/settings_modal/tabs/appearance_tab.vue

<template>
  <div
    class="appearance-tab"
    :label="$t('settings.interface')"
    icon="table-columns"
  >
    <div
      class="setting-item"
      :label="$t('settings.theme')"
      icon="paintbrush"
    >
      <h3>{{ $t('settings.style.style_section') }}</h3>
      <ul
        ref="themeList"
        class="theme-list"
      >
        <button
          class="button-default theme-preview"
          data-theme-key="stock"
          :class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
          :disabled="switchInProgress"
          @click="resetTheming"
        >
          <preview id="theme-preview-stock" />
          <span class="theme-name">
            {{ $t('settings.style.stock_theme_used') }}
            <span class="alert neutral version">v3</span>
          </span>
        </button>
        <button
          v-if="isCustomThemeUsed"
          disabled
          class="button-default theme-preview toggled"
        >
          <preview />
          <span class="theme-name">
            {{ $t('settings.style.custom_theme_used') }}
            <span class="alert neutral version">v2</span>
          </span>
        </button>
        <button
          v-if="isCustomStyleUsed"
          disabled
          class="button-default theme-preview toggled"
        >
          <preview />
          <span class="theme-name">
            {{ $t('settings.style.custom_style_used') }}
            <span class="alert neutral version">v3</span>
          </span>
        </button>
        <button
          v-for="style in availableStyles"
          :key="style.key"
          :data-theme-key="style.key"
          class="button-default theme-preview"
          :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
          :disabled="switchInProgress"
          @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
        >
          <preview :id="'theme-preview-' + style.key" />
          <span class="theme-name">
            {{ style.name }}
            <span class="alert neutral version">{{ style.version }}</span>
          </span>
        </button>
      </ul>
      <div class="import-file-container">
        <button
          class="btn button-default"
          :class="{ disabled: switchInProgress }"
          :disabled="switchInProgress"
          @click="importFile"
        >
          <FAIcon icon="folder-open" />
          {{ $t('settings.style.themes3.editor.load_style') }}
        </button>
        <h4>{{ $t('settings.style.themes3.palette.label') }}</h4>
        <div
          v-if="customThemeVersion === 'v3'"
          class="palettes-container"
        >
          <h5 v-if="stylePalettes?.length > 0">
            {{ $t('settings.style.themes3.palette.style') }}
          </h5>
          <div class="palettes">
            <button
              v-for="p in stylePalettes || []"
              :key="p.name"
              class="btn button-default palette-entry"
              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
              :disabled="switchInProgress"
              @click="() => setPalette(p.key, p)"
            >
              <div class="palette-label">
                <label>
                  {{ p.name ?? $t('settings.style.themes3.palette.user') }}
                </label>
              </div>
              <div class="palette-preview">
                <span
                  v-for="c in palettesKeys"
                  :key="c"
                  class="palette-square"
                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
                />
              </div>
            </button>
            <h5>{{ $t('settings.style.themes3.palette.bundled') }}</h5>
            <button
              v-for="p in bundledPalettes"
              :key="p.name"
              class="btn button-default palette-entry"
              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
              :disabled="switchInProgress"
              @click="() => setPalette(p.key, p)"
            >
              <div class="palette-label">
                <label>
                  {{ p.name }}
                </label>
              </div>
              <div class="palette-preview">
                <span
                  v-for="c in palettesKeys"
                  :key="c"
                  class="palette-square"
                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
                />
              </div>
            </button>
          </div>
        </div>
        <div>
          <template v-if="customThemeVersion === 'v3'">
            <h5 v-if="expertLevel > 0">
              {{ $t('settings.style.themes3.palette.user') }}
            </h5>
            <PaletteEditor
              v-if="expertLevel > 0"
              v-model="userPalette"
              class="userPalette"
              :compact="true"
              :apply="true"
              :disabled="switchInProgress"
              @apply-palette="data => setPaletteCustom(data)"
            />
          </template>
          <template v-else-if="customThemeVersion === 'v2'">
            <div class="alert neutral theme-notice unsupported-theme-v2">
              {{ $t('settings.style.themes3.palette.v2_unsupported') }}
            </div>
          </template>
        </div>
      </div>
      <h3>{{ $t('settings.background') }}</h3>
      <div class="banner-background-preview">
        <img :src="user.background_image">
        <button
          v-if="!isDefaultBackground"
          class="button-unstyled reset-button"
          :title="$t('settings.reset_profile_background')"
          @click="resetBackground"
        >
          <FAIcon
            icon="times"
            type="button"
          />
        </button>
      </div>
      <p>{{ $t('settings.set_new_background') }}</p>
      <img
        v-if="backgroundPreview"
        class="banner-background-preview"
        :src="backgroundPreview"
      >
      <div>
        <input
          type="file"
          class="input"
          @change="uploadFile('background', $event)"
        >
      </div>
      <FAIcon
        v-if="backgroundUploading"
        class="uploading"
        spin
        icon="circle-notch"
      />
      <button
        v-else-if="backgroundPreview"
        class="btn button-default"
        @click="submitBackground(background)"
      >
        {{ $t('settings.save') }}
      </button>
      <h3>{{ $t('settings.visual_tweaks') }}</h3>
      <div class="alert neutral theme-notice">
        {{ $t("settings.style.visual_tweaks_section_note") }}
      </div>
      <ul class="setting-list">
        <li>
          <ChoiceSetting
            id="forcedRoundness"
            path="forcedRoundness"
            :options="forcedRoundnessOptions"
          >
            {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
          </ChoiceSetting>
        </li>
        <li>
          <ChoiceSetting
            id="underlayOverride"
            path="theme3hacks.underlay"
            :options="underlayOverrideModes"
          >
            {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
          </ChoiceSetting>
        </li>
        <li v-if="instanceWallpaperUsed">
          <BooleanSetting path="hideInstanceWallpaper">
            {{ $t('settings.hide_wallpaper') }}
          </BooleanSetting>
        </li>
      </ul>
    </div>
  </div>
</template>

<script src="./appearance_tab.js"></script>

<style lang="scss" src="./appearance_tab.scss"></style>