logo

pleroma-fe

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

appearance_tab.vue (9103B)

    

  1. <template>
  2.   <div class="appearance-tab" :label="$t('settings.general')">
  3.     <div class="setting-item">
  4.       <h2>{{ $t('settings.theme') }}</h2>
  5.       <ul
  6.         class="theme-list"
  7.         ref="themeList"
  8.       >
  9.         <button
  10.           v-if="isCustomThemeUsed"
  11.           disabled
  12.           class="button-default theme-preview"
  13.         >
  14.           <preview />
  15.           <h4 class="theme-name">{{ $t('settings.style.custom_theme_used') }}</h4>
  16.         </button>
  17.         <button
  18.           v-for="style in availableStyles"
  19.           :data-theme-key="style.key"
  20.           :key="style.key"
  21.           class="button-default theme-preview"
  22.           :class="{ toggled: isThemeActive(style.key) }"
  23.           @click="setTheme(style.key)"
  24.         >
  25.           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
  26.           <component
  27.             :is="'style'"
  28.             v-if="style.ready || noIntersectionObserver"
  29.             v-html="previewTheme(style.key, style.data)"
  30.           />
  31.           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
  32.           <preview :class="{ placeholder: ready }" :id="'theme-preview-' + style.key"/>
  33.           <h4 class="theme-name">{{ style.name }}</h4>
  34.         </button>
  35.       </ul>
  36.     </div>
  37.     <div class="alert neutral theme-notice">
  38.       {{ $t("settings.style.appearance_tab_note") }}
  39.     </div>
  40.     <div class="setting-item">
  41.       <h2>{{ $t('settings.scale_and_layout') }}</h2>
  42.       <ul class="setting-list">
  43.         <li>
  44.           <UnitSetting
  45.             path="textSize"
  46.             step="0.1"
  47.             :units="['px', 'rem']"
  48.             :reset-default="{ 'px': 14, 'rem': 1 }"
  49.             timed-apply-mode
  50.           >
  51.             {{ $t('settings.text_size') }}
  52.           </UnitSetting>
  53.           <div>
  54.             <small>
  55.               <i18n-t
  56.                 scope="global"
  57.                 keypath="settings.text_size_tip"
  58.                 tag="span"
  59.               >
  60.                 <code>px</code>
  61.                 <code>rem</code>
  62.               </i18n-t>
  63.               <br/>
  64.               <i18n-t
  65.                 scope="global"
  66.                 keypath="settings.text_size_tip2"
  67.                 tag="span"
  68.               >
  69.                 <code>14px</code>
  70.               </i18n-t>
  71.             </small>
  72.           </div>
  73.         </li>
  74.         <li>
  75.           <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
  76.           <ul class="setting-list">
  77.             <li>
  78.               <FontControl
  79.                 :model-value="mergedConfig.theme3hacks.fonts.interface"
  80.                 name="ui"
  81.                 :label="$t('settings.style.fonts.components.interface')"
  82.                 :fallback="{ family: 'sans-serif' }"
  83.                 no-inherit="1"
  84.                 @update:modelValue="v => updateFont('interface', v)"
  85.               />
  86.             </li>
  87.             <li>
  88.               <FontControl
  89.                 v-if="expertLevel > 0"
  90.                 :model-value="mergedConfig.theme3hacks.fonts.input"
  91.                 name="input"
  92.                 :fallback="{ family: 'inherit' }"
  93.                 :label="$t('settings.style.fonts.components.input')"
  94.                 @update:modelValue="v => updateFont('input', v)"
  95.               />
  96.             </li>
  97.             <li>
  98.               <FontControl
  99.                 v-if="expertLevel > 0"
  100.                 :model-value="mergedConfig.theme3hacks.fonts.post"
  101.                 name="post"
  102.                 :fallback="{ family: 'inherit' }"
  103.                 :label="$t('settings.style.fonts.components.post')"
  104.                 @update:modelValue="v => updateFont('post', v)"
  105.               />
  106.             </li>
  107.             <li>
  108.               <FontControl
  109.                 v-if="expertLevel > 0"
  110.                 :model-value="mergedConfig.theme3hacks.fonts.monospace"
  111.                 name="postCode"
  112.                 :fallback="{ family: 'monospace' }"
  113.                 :label="$t('settings.style.fonts.components.monospace')"
  114.                 @update:modelValue="v => updateFont('monospace', v)"
  115.               />
  116.             </li>
  117.           </ul>
  118.         </li>
  119.         <li>
  120.           <UnitSetting
  121.             path="emojiSize"
  122.             step="0.1"
  123.             :units="['px', 'rem']"
  124.             :reset-default="{ 'px': 32, 'rem': 2.2 }"
  125.           >
  126.             {{ $t('settings.emoji_size') }}
  127.           </UnitSetting>
  128.           <ul
  129.             class="setting-list suboptions"
  130.           >
  131.             <li>
  132.               <FloatSetting
  133.                 v-if="user"
  134.                 path="emojiReactionsScale"
  135.                 expert="1"
  136.               >
  137.                 {{ $t('settings.emoji_reactions_scale') }}
  138.               </FloatSetting>
  139.             </li>
  140.           </ul>
  141.         </li>
  142.         <li>
  143.           <UnitSetting
  144.             path="navbarSize"
  145.             step="0.1"
  146.             :units="['px', 'rem']"
  147.             :reset-default="{ 'px': 55, 'rem': 3.5 }"
  148.           >
  149.             {{ $t('settings.navbar_size') }}
  150.           </UnitSetting>
  151.         </li>
  152.         <h3>{{ $t('settings.columns') }}</h3>
  153.         <li>
  154.           <UnitSetting
  155.             path="panelHeaderSize"
  156.             step="0.1"
  157.             :units="['px', 'rem']"
  158.             :reset-default="{ 'px': 52, 'rem': 3.2 }"
  159.             timed-apply-mode
  160.           >
  161.             {{ $t('settings.panel_header_size') }}
  162.           </UnitSetting>
  163.         </li>
  164.         <li>
  165.           <BooleanSetting path="sidebarRight">
  166.             {{ $t('settings.right_sidebar') }}
  167.           </BooleanSetting>
  168.         </li>
  169.         <li>
  170.           <BooleanSetting path="navbarColumnStretch">
  171.             {{ $t('settings.navbar_column_stretch') }}
  172.           </BooleanSetting>
  173.         </li>
  174.         <li>
  175.           <ChoiceSetting
  176.             v-if="user"
  177.             id="thirdColumnMode"
  178.             path="thirdColumnMode"
  179.             :options="thirdColumnModeOptions"
  180.           >
  181.             {{ $t('settings.third_column_mode') }}
  182.           </ChoiceSetting>
  183.         </li>
  184.         <li v-if="expertLevel > 0">
  185.           {{ $t('settings.column_sizes') }}
  186.           <div class="column-settings">
  187.             <UnitSetting
  188.               v-for="column in columns"
  189.               :key="column"
  190.               :path="column + 'ColumnWidth'"
  191.               :units="horizontalUnits"
  192.               expert="1"
  193.             >
  194.               {{ $t('settings.column_sizes_' + column) }}
  195.             </UnitSetting>
  196.           </div>
  197.         </li>
  198.         <li>
  199.           <BooleanSetting path="disableStickyHeaders">
  200.             {{ $t('settings.disable_sticky_headers') }}
  201.           </BooleanSetting>
  202.         </li>
  203.         <li>
  204.           <BooleanSetting path="showScrollbars">
  205.             {{ $t('settings.show_scrollbars') }}
  206.           </BooleanSetting>
  207.         </li>
  208.       </ul>
  209.     </div>
  210.     <div class="setting-item">
  211.       <h2>{{ $t('settings.visual_tweaks') }}</h2>
  212.       <ul class="setting-list">
  213.         <li>
  214.           <ChoiceSetting
  215.             id="forcedRoundness"
  216.             path="forcedRoundness"
  217.             :options="forcedRoundnessOptions"
  218.           >
  219.             {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
  220.           </ChoiceSetting>
  221.         </li>
  222.         <li>
  223.           <ChoiceSetting
  224.             id="underlayOverride"
  225.             path="theme3hacks.underlay"
  226.             :options="underlayOverrideModes"
  227.           >
  228.             {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
  229.           </ChoiceSetting>
  230.         </li>
  231.         <li v-if="instanceWallpaperUsed">
  232.           <BooleanSetting path="hideInstanceWallpaper">
  233.             {{ $t('settings.hide_wallpaper') }}
  234.           </BooleanSetting>
  235.         </li>
  236.         <li>
  237.           <BooleanSetting
  238.             path="forceThemeRecompilation"
  239.             :expert="1"
  240.           >
  241.             {{ $t('settings.force_theme_recompilation_debug') }}
  242.           </BooleanSetting>
  243.         </li>
  244.         <li>
  245.           <BooleanSetting
  246.             path="themeDebug"
  247.             :expert="1"
  248.           >
  249.             {{ $t('settings.theme_debug') }}
  250.           </BooleanSetting>
  251.         </li>
  252.       </ul>
  253.     </div>
  254.   </div>
  255. </template>
  257. <script src="./appearance_tab.js"></script>
  259. <style lang="scss">
  260. .appearance-tab {
  261.   .theme-notice {
  262.     padding: 0.5em;
  263.     margin: 1em;
  264.   }
  266.   .column-settings {
  267.     display: flex;
  268.     justify-content: space-evenly;
  269.     flex-wrap: wrap;
  270.   }
  272.   .column-settings .size-label {
  273.     display: block;
  274.     margin-bottom: 0.5em;
  275.     margin-top: 0.5em;
  276.   }
  278.   .theme-list {
  279.     list-style: none;
  280.     display: flex;
  281.     flex-wrap: wrap;
  282.     margin: -0.5em 0;
  283.     height: 25em;
  284.     overflow-x: hidden;
  285.     overflow-y: auto;
  286.     scrollbar-gutter: stable;
  287.     border-radius: var(--roundness);
  288.     border: 1px solid var(--border);
  289.     padding: 0;
  291.     .theme-preview {
  292.       font-size: 1rem; // fix for firefox
  293.       width: 19rem;
  294.       display: flex;
  295.       flex-direction: column;
  296.       align-items: center;
  297.       margin: 0.5em;
  299.       &.placeholder {
  300.         opacity: 0.2;
  301.       }
  303.       .theme-preview-container {
  304.         pointer-events: none;
  305.         zoom: 0.5;
  306.         border: none;
  307.         border-radius: var(--roundness);
  308.         text-align: left;
  309.       }
  310.     }
  311.   }
  312. }
  313. </style>