logo

pleroma-fe

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

style_tab.vue (13978B)

    

  1. <script src="./style_tab.js">
  2. </script>
  4. <template>
  5.   <div class="StyleTab">
  6.     <div class="setting-item heading">
  7.       <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
  8.       <div class="meta-preview">
  9.         <!-- eslint-disable vue/no-v-text-v-html-on-component -->
  10.         <!-- eslint-disable vue/no-v-html -->
  11.         <component
  12.           :is="'style'"
  13.           v-html="overallPreviewCssRules"
  14.         />
  15.         <!-- eslint-enable vue/no-v-html -->
  16.         <!-- eslint-enable vue/no-v-text-v-html-on-component -->
  17.         <Preview id="edited-style-preview" />
  18.         <teleport
  19.           v-if="isActive"
  20.           to="#unscrolled-content"
  21.         >
  22.           <div class="style-actions-container">
  23.             <div class="style-actions">
  24.               <button
  25.                 class="btn button-default button-new"
  26.                 @click="clearStyle"
  27.               >
  28.                 <FAIcon icon="arrows-rotate" />
  29.                 {{ $t('settings.style.themes3.editor.reset_style') }}
  30.               </button>
  31.               <button
  32.                 class="btn button-default button-load"
  33.                 @click="importStyle"
  34.               >
  35.                 <FAIcon icon="folder-open" />
  36.                 {{ $t('settings.style.themes3.editor.load_style') }}
  37.               </button>
  38.               <button
  39.                 class="btn button-default button-save"
  40.                 @click="exportStyle"
  41.               >
  42.                 <FAIcon icon="floppy-disk" />
  43.                 {{ $t('settings.style.themes3.editor.save_style') }}
  44.               </button>
  45.               <button
  46.                 class="btn button-default button-apply"
  47.                 @click="applyStyle"
  48.               >
  49.                 <FAIcon icon="check" />
  50.                 {{ $t('settings.style.themes3.editor.apply_preview') }}
  51.               </button>
  52.             </div>
  53.           </div>
  54.         </teleport>
  55.         <ul class="setting-list style-metadata">
  56.           <li>
  57.             <StringSetting
  58.               v-model="name"
  59.               class="meta-field"
  60.             >
  61.               {{ $t('settings.style.themes3.editor.style_name') }}
  62.             </StringSetting>
  63.           </li>
  64.           <li>
  65.             <StringSetting
  66.               v-model="author"
  67.               class="meta-field"
  68.             >
  69.               {{ $t('settings.style.themes3.editor.style_author') }}
  70.             </StringSetting>
  71.           </li>
  72.           <li>
  73.             <StringSetting
  74.               v-model="license"
  75.               class="meta-field"
  76.             >
  77.               {{ $t('settings.style.themes3.editor.style_license') }}
  78.             </StringSetting>
  79.           </li>
  80.           <li>
  81.             <StringSetting
  82.               v-model="website"
  83.               class="meta-field"
  84.             >
  85.               {{ $t('settings.style.themes3.editor.style_website') }}
  86.             </StringSetting>
  87.           </li>
  88.         </ul>
  89.       </div>
  90.     </div>
  91.     <tab-switcher>
  92.       <div
  93.         key="component"
  94.         class="setting-item component-editor"
  95.         :label="$t('settings.style.themes3.editor.component_tab')"
  96.       >
  97.         <div class="component-selector">
  98.           <label for="component-selector">
  99.             {{ $t('settings.style.themes3.editor.component_selector') }}
  100.             {{ ' ' }}
  101.           </label>
  102.           <Select
  103.             id="component-selector"
  104.             v-model="selectedComponentKey"
  105.           >
  106.             <option
  107.               v-for="key in componentKeys"
  108.               :key="'component-' + key"
  109.               :value="key"
  110.             >
  111.               {{ componentsMap.get(key).name }}
  112.             </option>
  113.           </Select>
  114.         </div>
  115.         <div
  116.           v-if="selectedComponentVariants.length > 1"
  117.           class="variant-selector"
  118.         >
  119.           <label for="variant-selector">
  120.             {{ $t('settings.style.themes3.editor.variant_selector') }}
  121.           </label>
  122.           <Select
  123.             v-model="selectedVariant"
  124.           >
  125.             <option
  126.               v-for="variant in selectedComponentVariants"
  127.               :key="'component-variant-' + variant"
  128.               :value="variant"
  129.             >
  130.               {{ variant }}
  131.             </option>
  132.           </Select>
  133.         </div>
  134.         <div
  135.           v-if="selectedComponentStates.length > 0"
  136.           class="state-selector"
  137.         >
  138.           <label>
  139.             {{ $t('settings.style.themes3.editor.states_selector') }}
  140.           </label>
  141.           <ul
  142.             class="state-selector-list"
  143.           >
  144.             <li
  145.               v-for="state in selectedComponentStates"
  146.               :key="'component-state-' + state"
  147.             >
  148.               <Checkbox
  149.                 :value="selectedState.has(state)"
  150.                 @update:modelValue="(v) => updateSelectedStates(state, v)"
  151.               >
  152.                 {{ state }}
  153.               </Checkbox>
  154.             </li>
  155.           </ul>
  156.         </div>
  157.         <div class="preview-container">
  158.           <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
  159.           <component
  160.             :is="'style'"
  161.             v-html="previewCss"
  162.           />
  163.           <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
  164.           <ComponentPreview
  165.             class="component-preview"
  166.             :show-text="componentHas('Text')"
  167.             :shadow-control="isShadowTabOpen"
  168.             :preview-class="previewClass"
  169.             :preview-style="editorHintStyle"
  170.             :preview-css="previewCss"
  171.             :disabled="!editedSubShadow && typeof editedShadow !== 'string'"
  172.             :shadow="editedSubShadow"
  173.             :no-color-control="true"
  174.             @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
  175.           />
  176.         </div>
  177.         <tab-switcher
  178.           ref="tabSwitcher"
  179.           class="component-settings"
  180.           :on-switch="onTabSwitch"
  181.         >
  182.           <div
  183.             key="main"
  184.             class="editor-tab"
  185.             :label="$t('settings.style.themes3.editor.main_tab')"
  186.           >
  187.             <ColorInput
  188.               v-model="editedBackgroundColor"
  189.               name="component-background-color"
  190.               :fallback="computeColor(editedBackgroundColor) ?? previewColors.background"
  191.               :disabled="!isBackgroundColorPresent"
  192.               :label="$t('settings.style.themes3.editor.background')"
  193.               :hide-optional-checkbox="true"
  194.             />
  195.             <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
  196.               <Checkbox v-model="isBackgroundColorPresent" />
  197.             </Tooltip>
  198.             <ColorInput
  199.               v-if="componentHas('Text')"
  200.               v-model="editedTextColor"
  201.               name="component-text-color"
  202.               :fallback="computeColor(editedTextColor) ?? previewColors.text"
  203.               :label="$t('settings.style.themes3.editor.text_color')"
  204.               :disabled="!isTextColorPresent"
  205.               :hide-optional-checkbox="true"
  206.             />
  207.             <Tooltip
  208.               v-if="componentHas('Text')"
  209.               :text="$t('settings.style.themes3.editor.include_in_rule')"
  210.             >
  211.               <Checkbox v-model="isTextColorPresent" />
  212.             </Tooltip>
  213.             <div
  214.               v-if="componentHas('Text')"
  215.               class="style-control suboption"
  216.             >
  217.               <label
  218.                 for="textAuto"
  219.                 class="label"
  220.                 :class="{ faint: !isTextAutoPresent }"
  221.               >
  222.                 {{ $t('settings.style.themes3.editor.text_auto.label') }}
  223.               </label>
  224.               <Select
  225.                 id="textAuto"
  226.                 v-model="editedTextAuto"
  227.                 :disabled="!isTextAutoPresent"
  228.               >
  229.                 <option value="no-preserve">
  230.                   {{ $t('settings.style.themes3.editor.text_auto.no-preserve') }}
  231.                 </option>
  232.                 <option value="no-auto">
  233.                   {{ $t('settings.style.themes3.editor.text_auto.no-auto') }}
  234.                 </option>
  235.                 <option value="preserve">
  236.                   {{ $t('settings.style.themes3.editor.text_auto.preserve') }}
  237.                 </option>
  238.               </Select>
  239.             </div>
  240.             <Tooltip
  241.               v-if="componentHas('Text')"
  242.               :text="$t('settings.style.themes3.editor.include_in_rule')"
  243.             >
  244.               <Checkbox v-model="isTextAutoPresent" />
  245.             </Tooltip>
  246.             <div
  247.               v-if="componentHas('Text')"
  248.               class="style-control suboption"
  249.             >
  250.               <label class="label">
  251.                 {{ $t('settings.style.themes3.editor.contrast') }}
  252.               </label>
  253.               <ContrastRatio
  254.                 :show-ratio="true"
  255.                 :contrast="contrast"
  256.               />
  257.             </div>
  258.             <div v-if="componentHas('Text')" />
  259.             <ColorInput
  260.               v-if="componentHas('Link')"
  261.               v-model="editedLinkColor"
  262.               name="component-link-color"
  263.               :fallback="computeColor(editedLinkColor) ?? previewColors.link"
  264.               :label="$t('settings.style.themes3.editor.link_color')"
  265.               :disabled="!isLinkColorPresent"
  266.               :hide-optional-checkbox="true"
  267.             />
  268.             <Tooltip
  269.               v-if="componentHas('Link')"
  270.               :text="$t('settings.style.themes3.editor.include_in_rule')"
  271.             >
  272.               <Checkbox v-model="isLinkColorPresent" />
  273.             </Tooltip>
  274.             <ColorInput
  275.               v-if="componentHas('Icon')"
  276.               v-model="editedIconColor"
  277.               name="component-icon-color"
  278.               :fallback="computeColor(editedIconColor) ?? previewColors.icon"
  279.               :label="$t('settings.style.themes3.editor.icon_color')"
  280.               :disabled="!isIconColorPresent"
  281.               :hide-optional-checkbox="true"
  282.             />
  283.             <Tooltip
  284.               v-if="componentHas('Icon')"
  285.               :text="$t('settings.style.themes3.editor.include_in_rule')"
  286.             >
  287.               <Checkbox v-model="isIconColorPresent" />
  288.             </Tooltip>
  289.             <ColorInput
  290.               v-if="componentHas('Border')"
  291.               v-model="editedBorderColor"
  292.               name="component-border-color"
  293.               :fallback="computeColor(editedBorderColor) ?? previewColors.border"
  294.               :label="$t('settings.style.themes3.editor.border_color')"
  295.               :disabled="!isBorderColorPresent"
  296.               :hide-optional-checkbox="true"
  297.             />
  298.             <Tooltip
  299.               v-if="componentHas('Border')"
  300.               :text="$t('settings.style.themes3.editor.include_in_rule')"
  301.             >
  302.               <Checkbox v-model="isBorderColorPresent" />
  303.             </Tooltip>
  304.             <OpacityInput
  305.               v-model="editedOpacity"
  306.               name="component-opacity"
  307.               :disabled="!isOpacityPresent"
  308.               :label="$t('settings.style.themes3.editor.opacity')"
  309.             />
  310.             <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
  311.               <Checkbox v-model="isOpacityPresent" />
  312.             </Tooltip>
  313.             <RoundnessInput
  314.               v-model="editedRoundness"
  315.               name="component-roundness"
  316.               :disabled="!isRoundnessPresent"
  317.               :label="$t('settings.style.themes3.editor.roundness')"
  318.             />
  319.             <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
  320.               <Checkbox v-model="isRoundnessPresent" />
  321.             </Tooltip>
  322.           </div>
  323.           <div
  324.             key="shadow"
  325.             class="editor-tab shadow-tab"
  326.             :label="$t('settings.style.themes3.editor.shadows_tab')"
  327.           >
  328.             <Checkbox
  329.               v-model="isShadowPresent"
  330.               class="style-control"
  331.             >
  332.               {{ $t('settings.style.themes3.editor.include_in_rule') }}
  333.             </checkbox>
  334.             <ShadowControl
  335.               v-model="editedShadow"
  336.               :disabled="!isShadowPresent"
  337.               :no-preview="true"
  338.               :compact="true"
  339.               :static-vars="staticVars"
  340.               @subShadowSelected="onSubShadow"
  341.             />
  342.           </div>
  343.         </tab-switcher>
  344.       </div>
  345.       <div
  346.         key="palette"
  347.         :label="$t('settings.style.themes3.editor.palette_tab')"
  348.         class="setting-item list-editor palette-editor"
  349.       >
  350.         <label
  351.           class="list-select-label"
  352.           for="palette-selector"
  353.         >
  354.           {{ $t('settings.style.themes3.palette.label') }}
  355.           {{ ' ' }}
  356.         </label>
  357.         <Select
  358.           id="palette-selector"
  359.           v-model="selectedPaletteId"
  360.           class="list-select"
  361.           size="4"
  362.         >
  363.           <option
  364.             v-for="(p, index) in palettes"
  365.             :key="p.name"
  366.             :value="index"
  367.           >
  368.             {{ p.name }}
  369.           </option>
  370.         </Select>
  371.         <SelectMotion
  372.           class="list-select-movement"
  373.           :model-value="palettes"
  374.           :selected-id="selectedPaletteId"
  375.           :get-add-value="getNewPalette"
  376.           @update:modelValue="onPalettesUpdate"
  377.           @update:selectedId="e => selectedPaletteId = e"
  378.         />
  379.         <div class="list-edit-area">
  380.           <StringSetting
  381.             v-model="selectedPalette.name"
  382.             class="palette-name-input"
  383.           >
  384.             {{ $t('settings.style.themes3.palette.name_label') }}
  385.           </StringSetting>
  386.           <PaletteEditor
  387.             v-model="selectedPalette"
  388.             class="palette-editor-single"
  389.           />
  390.         </div>
  391.       </div>
  392.       <VirtualDirectivesTab
  393.         key="variables"
  394.         :label="$t('settings.style.themes3.editor.variables_tab')"
  395.         :model-value="virtualDirectives"
  396.         @update:modelValue="updateVirtualDirectives"
  397.       />
  398.     </tab-switcher>
  399.   </div>
  400. </template>
  402. <style src="./style_tab.scss" lang="scss"></style>