logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

appearance_tab.vue (12971B)

    

  1. <template>
  2.   <div
  3.     class="appearance-tab"
  4.     :label="$t('settings.general')"
  5.   >
  6.     <div class="setting-item">
  7.       <h2>{{ $t('settings.theme') }}</h2>
  8.       <ul
  9.         ref="themeList"
  10.         class="theme-list"
  11.       >
  12.         <button
  13.           class="button-default theme-preview"
  14.           data-theme-key="stock"
  15.           :class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
  16.           :disabled="switchInProgress"
  17.           @click="resetTheming"
  18.         >
  19.           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
  20.           <!-- eslint-disable vue/no-v-html -->
  21.           <component
  22.             :is="'style'"
  23.             v-html="previewTheme('stock', 'v3')"
  24.           />
  25.           <!-- eslint-enable vue/no-v-html -->
  26.           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
  27.           <preview id="theme-preview-stock" />
  28.           <h4 class="theme-name">
  29.             {{ $t('settings.style.stock_theme_used') }}
  30.             <span class="alert neutral version">v3</span>
  31.           </h4>
  32.         </button>
  33.         <button
  34.           v-if="isCustomThemeUsed"
  35.           disabled
  36.           class="button-default theme-preview toggled"
  37.         >
  38.           <preview />
  39.           <h4 class="theme-name">
  40.             {{ $t('settings.style.custom_theme_used') }}
  41.             <span class="alert neutral version">v2</span>
  42.           </h4>
  43.         </button>
  44.         <button
  45.           v-if="isCustomStyleUsed"
  46.           disabled
  47.           class="button-default theme-preview toggled"
  48.         >
  49.           <preview />
  50.           <h4 class="theme-name">
  51.             {{ $t('settings.style.custom_style_used') }}
  52.             <span class="alert neutral version">v3</span>
  53.           </h4>
  54.         </button>
  55.         <button
  56.           v-for="style in availableStyles"
  57.           :key="style.key"
  58.           :data-theme-key="style.key"
  59.           class="button-default theme-preview"
  60.           :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
  61.           :disabled="switchInProgress"
  62.           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
  63.         >
  64.           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
  65.           <!-- eslint-disable vue/no-v-html -->
  66.           <div v-if="style.ready || noIntersectionObserver">
  67.             <component
  68.               :is="'style'"
  69.               v-html="previewTheme(style.key, style.version, style.data)"
  70.             />
  71.           </div>
  72.           <!-- eslint-enable vue/no-v-html -->
  73.           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
  74.           <preview :id="'theme-preview-' + style.key" />
  75.           <h4 class="theme-name">
  76.             {{ style.name }}
  77.             <span class="alert neutral version">{{ style.version }}</span>
  78.           </h4>
  79.         </button>
  80.       </ul>
  81.       <div class="import-file-container">
  82.         <button
  83.           class="btn button-default"
  84.           :class="{ disabled: switchInProgress }"
  85.           :disabled="switchInProgress"
  86.           @click="importFile"
  87.         >
  88.           <FAIcon icon="folder-open" />
  89.           {{ $t('settings.style.themes3.editor.load_style') }}
  90.         </button>
  91.       </div>
  92.       <div class="setting-item">
  93.         <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
  94.         <div
  95.           v-if="customThemeVersion === 'v3'"
  96.           class="palettes-container"
  97.         >
  98.           <h4 v-if="stylePalettes?.length > 0">
  99.             {{ $t('settings.style.themes3.palette.style') }}
  100.           </h4>
  101.           <div class="palettes">
  102.             <button
  103.               v-for="p in stylePalettes || []"
  104.               :key="p.name"
  105.               class="btn button-default palette-entry"
  106.               :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
  107.               :disabled="switchInProgress"
  108.               @click="() => setPalette(p.key, p)"
  109.             >
  110.               <div class="palette-label">
  111.                 <label>
  112.                   {{ p.name ?? $t('settings.style.themes3.palette.user') }}
  113.                 </label>
  114.               </div>
  115.               <div class="palette-preview">
  116.                 <span
  117.                   v-for="c in palettesKeys"
  118.                   :key="c"
  119.                   class="palette-square"
  120.                   :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
  121.                 />
  122.               </div>
  123.             </button>
  124.             <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
  125.             <button
  126.               v-for="p in bundledPalettes"
  127.               :key="p.name"
  128.               class="btn button-default palette-entry"
  129.               :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
  130.               :disabled="switchInProgress"
  131.               @click="() => setPalette(p.key, p)"
  132.             >
  133.               <div class="palette-label">
  134.                 <label>
  135.                   {{ p.name }}
  136.                 </label>
  137.               </div>
  138.               <div class="palette-preview">
  139.                 <span
  140.                   v-for="c in palettesKeys"
  141.                   :key="c"
  142.                   class="palette-square"
  143.                   :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
  144.                 />
  145.               </div>
  146.             </button>
  147.           </div>
  148.         </div>
  149.         <div>
  150.           <template v-if="customThemeVersion === 'v3'">
  151.             <h4 v-if="expertLevel > 0">
  152.               {{ $t('settings.style.themes3.palette.user') }}
  153.             </h4>
  154.             <PaletteEditor
  155.               v-if="expertLevel > 0"
  156.               v-model="userPalette"
  157.               class="userPalette"
  158.               :compact="true"
  159.               :apply="true"
  160.               :disabled="switchInProgress"
  161.               @applyPalette="data => setPaletteCustom(data)"
  162.             />
  163.           </template>
  164.           <template v-else-if="customThemeVersion === 'v2'">
  165.             <div class="alert neutral theme-notice unsupported-theme-v2">
  166.               {{ $t('settings.style.themes3.palette.v2_unsupported') }}
  167.             </div>
  168.           </template>
  169.         </div>
  170.       </div>
  171.     </div>
  172.     <div class="setting-item">
  173.       <h2>{{ $t('settings.scale_and_layout') }}</h2>
  174.       <div class="alert neutral theme-notice">
  175.         {{ $t("settings.style.appearance_tab_note") }}
  176.       </div>
  177.       <ul class="setting-list">
  178.         <li>
  179.           <UnitSetting
  180.             path="textSize"
  181.             :step="0.1"
  182.             :units="['px', 'rem']"
  183.             :reset-default="{ 'px': 14, 'rem': 1 }"
  184.             timed-apply-mode
  185.           >
  186.             {{ $t('settings.text_size') }}
  187.           </UnitSetting>
  188.           <div>
  189.             <small>
  190.               <i18n-t
  191.                 scope="global"
  192.                 keypath="settings.text_size_tip"
  193.                 tag="span"
  194.               >
  195.                 <code>px</code>
  196.                 <code>rem</code>
  197.               </i18n-t>
  198.               <br>
  199.               <i18n-t
  200.                 scope="global"
  201.                 keypath="settings.text_size_tip2"
  202.                 tag="span"
  203.               >
  204.                 <code>14px</code>
  205.               </i18n-t>
  206.             </small>
  207.           </div>
  208.         </li>
  209.         <li>
  210.           <UnitSetting
  211.             path="emojiSize"
  212.             :step="0.1"
  213.             :units="['px', 'rem']"
  214.             :reset-default="{ 'px': 32, 'rem': 2.2 }"
  215.           >
  216.             {{ $t('settings.emoji_size') }}
  217.           </UnitSetting>
  218.           <ul
  219.             class="setting-list suboptions"
  220.           >
  221.             <li>
  222.               <FloatSetting
  223.                 v-if="user"
  224.                 path="emojiReactionsScale"
  225.                 expert="1"
  226.               >
  227.                 {{ $t('settings.emoji_reactions_scale') }}
  228.               </FloatSetting>
  229.             </li>
  230.           </ul>
  231.         </li>
  232.         <li>
  233.           <UnitSetting
  234.             path="navbarSize"
  235.             :step="0.1"
  236.             :units="['px', 'rem']"
  237.             :reset-default="{ 'px': 55, 'rem': 3.5 }"
  238.           >
  239.             {{ $t('settings.navbar_size') }}
  240.           </UnitSetting>
  241.         </li>
  242.         <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
  243.         <li>
  244.           <FontControl
  245.             :model-value="mergedConfig.theme3hacks.fonts.interface"
  246.             name="ui"
  247.             :label="$t('settings.style.fonts.components.interface')"
  248.             :fallback="{ family: 'sans-serif' }"
  249.             no-inherit="1"
  250.             @update:modelValue="v => updateFont('interface', v)"
  251.           />
  252.         </li>
  253.         <li>
  254.           <FontControl
  255.             v-if="expertLevel > 0"
  256.             :model-value="mergedConfig.theme3hacks.fonts.input"
  257.             name="input"
  258.             :fallback="{ family: 'inherit' }"
  259.             :label="$t('settings.style.fonts.components.input')"
  260.             @update:modelValue="v => updateFont('input', v)"
  261.           />
  262.         </li>
  263.         <li>
  264.           <FontControl
  265.             v-if="expertLevel > 0"
  266.             :model-value="mergedConfig.theme3hacks.fonts.post"
  267.             name="post"
  268.             :fallback="{ family: 'inherit' }"
  269.             :label="$t('settings.style.fonts.components.post')"
  270.             @update:modelValue="v => updateFont('post', v)"
  271.           />
  272.         </li>
  273.         <li>
  274.           <FontControl
  275.             v-if="expertLevel > 0"
  276.             :model-value="mergedConfig.theme3hacks.fonts.monospace"
  277.             name="postCode"
  278.             :fallback="{ family: 'monospace' }"
  279.             :label="$t('settings.style.fonts.components.monospace')"
  280.             @update:modelValue="v => updateFont('monospace', v)"
  281.           />
  282.         </li>
  283.         <h3>{{ $t('settings.columns') }}</h3>
  284.         <li>
  285.           <UnitSetting
  286.             path="panelHeaderSize"
  287.             :step="0.1"
  288.             :units="['px', 'rem']"
  289.             :reset-default="{ 'px': 52, 'rem': 3.2 }"
  290.             timed-apply-mode
  291.           >
  292.             {{ $t('settings.panel_header_size') }}
  293.           </UnitSetting>
  294.         </li>
  295.         <li>
  296.           <BooleanSetting path="sidebarRight">
  297.             {{ $t('settings.right_sidebar') }}
  298.           </BooleanSetting>
  299.         </li>
  300.         <li>
  301.           <BooleanSetting path="navbarColumnStretch">
  302.             {{ $t('settings.navbar_column_stretch') }}
  303.           </BooleanSetting>
  304.         </li>
  305.         <li>
  306.           <ChoiceSetting
  307.             v-if="user"
  308.             id="thirdColumnMode"
  309.             path="thirdColumnMode"
  310.             :options="thirdColumnModeOptions"
  311.           >
  312.             {{ $t('settings.third_column_mode') }}
  313.           </ChoiceSetting>
  314.         </li>
  315.         <li v-if="expertLevel > 0">
  316.           {{ $t('settings.column_sizes') }}
  317.           <div class="column-settings">
  318.             <UnitSetting
  319.               v-for="column in columns"
  320.               :key="column"
  321.               :path="column + 'ColumnWidth'"
  322.               :units="horizontalUnits"
  323.               expert="1"
  324.             >
  325.               {{ $t('settings.column_sizes_' + column) }}
  326.             </UnitSetting>
  327.           </div>
  328.         </li>
  329.         <li>
  330.           <BooleanSetting path="disableStickyHeaders">
  331.             {{ $t('settings.disable_sticky_headers') }}
  332.           </BooleanSetting>
  333.         </li>
  334.         <li>
  335.           <BooleanSetting path="showScrollbars">
  336.             {{ $t('settings.show_scrollbars') }}
  337.           </BooleanSetting>
  338.         </li>
  339.       </ul>
  340.     </div>
  341.     <div class="setting-item">
  342.       <h2>{{ $t('settings.visual_tweaks') }}</h2>
  343.       <ul class="setting-list">
  344.         <li>
  345.           <BooleanSetting path="modalMobileCenter">
  346.             {{ $t('settings.mobile_center_dialog') }}
  347.           </BooleanSetting>
  348.         </li>
  349.         <li>
  350.           <ChoiceSetting
  351.             id="forcedRoundness"
  352.             path="forcedRoundness"
  353.             :options="forcedRoundnessOptions"
  354.           >
  355.             {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
  356.           </ChoiceSetting>
  357.         </li>
  358.         <li>
  359.           <ChoiceSetting
  360.             id="underlayOverride"
  361.             path="theme3hacks.underlay"
  362.             :options="underlayOverrideModes"
  363.           >
  364.             {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
  365.           </ChoiceSetting>
  366.         </li>
  367.         <li v-if="instanceWallpaperUsed">
  368.           <BooleanSetting path="hideInstanceWallpaper">
  369.             {{ $t('settings.hide_wallpaper') }}
  370.           </BooleanSetting>
  371.         </li>
  372.         <li>
  373.           <BooleanSetting
  374.             path="forceThemeRecompilation"
  375.             :expert="1"
  376.           >
  377.             {{ $t('settings.force_theme_recompilation_debug') }}
  378.           </BooleanSetting>
  379.         </li>
  380.         <li>
  381.           <BooleanSetting
  382.             path="themeDebug"
  383.             :expert="1"
  384.           >
  385.             {{ $t('settings.theme_debug') }}
  386.           </BooleanSetting>
  387.         </li>
  388.       </ul>
  389.     </div>
  390.   </div>
  391. </template>
  393. <script src="./appearance_tab.js"></script>
  395. <style lang="scss" src="./appearance_tab.scss"></style>