logo

pleroma-fe

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

component_preview.vue (7991B)

    

  1. <template>
  2.   <div
  3.     class="ComponentPreview"
  4.     :class="{ '-shadow-controls': shadowControl }"
  5.   >
  6.     <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
  7.     <component
  8.       :is="'style'"
  9.       v-html="previewCss"
  10.     />
  11.     <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
  12.     <label
  13.       v-show="shadowControl"
  14.       role="heading"
  15.       class="header"
  16.       :class="{ faint: disabled }"
  17.     >
  18.       {{ $t('settings.style.shadows.offset') }}
  19.     </label>
  20.     <label
  21.       v-show="shadowControl && !hideControls"
  22.       class="x-shift-number"
  23.     >
  24.       {{ $t('settings.style.shadows.offset-x') }}
  25.       <input
  26.         :value="shadow?.x"
  27.         :disabled="disabled"
  28.         :class="{ disabled }"
  29.         class="input input-number"
  30.         type="number"
  31.         @input="e => updateProperty('x', e.target.value)"
  32.       >
  33.     </label>
  34.     <label
  35.       v-show="shadowControl && !hideControls"
  36.       class="y-shift-number"
  37.     >
  38.       {{ $t('settings.style.shadows.offset-y') }}
  39.       <input
  40.         :value="shadow?.y"
  41.         :disabled="disabled"
  42.         :class="{ disabled }"
  43.         class="input input-number"
  44.         type="number"
  45.         @input="e => updateProperty('y', e.target.value)"
  46.       >
  47.     </label>
  48.     <input
  49.       v-show="shadowControl && !hideControls"
  50.       :value="shadow?.x"
  51.       :disabled="disabled"
  52.       :class="{ disabled }"
  53.       class="input input-range x-shift-slider"
  54.       type="range"
  55.       max="20"
  56.       min="-20"
  57.       @input="e => updateProperty('x', e.target.value)"
  58.     >
  59.     <input
  60.       v-show="shadowControl && !hideControls"
  61.       :value="shadow?.y"
  62.       :disabled="disabled"
  63.       :class="{ disabled }"
  64.       class="input input-range y-shift-slider"
  65.       type="range"
  66.       max="20"
  67.       min="-20"
  68.       @input="e => updateProperty('y', e.target.value)"
  69.     >
  70.     <div
  71.       class="preview-window"
  72.       :class="{ '-light-grid': lightGrid }"
  73.     >
  74.       <div
  75.         class="preview-block"
  76.         :class="previewClass"
  77.         :style="style"
  78.       >
  79.         {{ $t('settings.style.themes3.editor.test_string') }}
  80.       </div>
  81.       <div
  82.         v-if="invalid"
  83.         class="invalid-container"
  84.       >
  85.         <div class="alert error invalid-label">
  86.           {{ $t('settings.style.themes3.editor.invalid') }}
  87.         </div>
  88.       </div>
  89.     </div>
  90.     <div class="assists">
  91.       <Checkbox
  92.         v-model="lightGrid"
  93.         name="lightGrid"
  94.         class="input-light-grid"
  95.       >
  96.         {{ $t('settings.style.shadows.light_grid') }}
  97.       </Checkbox>
  98.       <div class="style-control">
  99.         <label class="label">
  100.           {{ $t('settings.style.shadows.zoom') }}
  101.         </label>
  102.         <input
  103.           v-model="zoom"
  104.           class="input input-number y-shift-number"
  105.           type="number"
  106.         >
  107.       </div>
  108.       <ColorInput
  109.         v-if="!noColorControl"
  110.         v-model="colorOverride"
  111.         class="input-color-input"
  112.         fallback="#606060"
  113.         :label="$t('settings.style.shadows.color_override')"
  114.       />
  115.     </div>
  116.   </div>
  117. </template>
  119. <script>
  120. import Checkbox from 'src/components/checkbox/checkbox.vue'
  121. import ColorInput from 'src/components/color_input/color_input.vue'
  123. export default {
  124.   components: {
  125.     Checkbox,
  126.     ColorInput
  127.   },
  128.   props: [
  129.     'shadow',
  130.     'shadowControl',
  131.     'previewClass',
  132.     'previewStyle',
  133.     'previewCss',
  134.     'disabled',
  135.     'invalid',
  136.     'noColorControl'
  137.   ],
  138.   emits: ['update:shadow'],
  139.   data () {
  140.     return {
  141.       colorOverride: undefined,
  142.       lightGrid: false,
  143.       zoom: 100
  144.     }
  145.   },
  146.   computed: {
  147.     style () {
  148.       const result = [
  149.         this.previewStyle,
  150.         `zoom: ${this.zoom / 100}`
  151.       ]
  152.       if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
  153.       return result
  154.     },
  155.     hideControls () {
  156.       return typeof this.shadow === 'string'
  157.     }
  158.   },
  159.   methods: {
  160.     updateProperty (axis, value) {
  161.       this.$emit('update:shadow', { axis, value: Number(value) })
  162.     }
  163.   }
  164. }
  165. </script>
  166. <style lang="scss">
  167. .ComponentPreview {
  168.   display: grid;
  169.   grid-template-columns: 1em 1fr 1fr 1em;
  170.   grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
  171.   grid-template-areas:
  172.     "header     header     header     header "
  173.     "preview    preview    preview    y-slide"
  174.     "preview    preview    preview    y-slide"
  175.     "preview    preview    preview    y-slide"
  176.     "x-slide    x-slide    x-slide    .      "
  177.     "x-num      x-num      y-num      y-num  "
  178.     "assists    assists    assists    assists";
  179.   grid-gap: 0.5em;
  181.   &:not(.-shadow-controls) {
  182.     grid-template-areas:
  183.       "header     header     header     header "
  184.       "preview    preview    preview    y-slide"
  185.       "preview    preview    preview    y-slide"
  186.       "preview    preview    preview    y-slide"
  187.       "assists    assists    assists    assists";
  188.     grid-template-rows: 2em 1fr 1fr 1fr max-content;
  189.   }
  191.   .header {
  192.     grid-area: header;
  193.     justify-self: center;
  194.     align-self: baseline;
  195.     line-height: 2;
  196.   }
  198.   .invalid-container {
  199.     position: absolute;
  200.     top: 0;
  201.     bottom: 0;
  202.     left: 0;
  203.     right: 0;
  204.     display: grid;
  205.     align-items: center;
  206.     justify-items: center;
  207.     background-color: rgba(100 0 0 / 50%);
  209.     .alert {
  210.       padding: 0.5em 1em;
  211.     }
  212.   }
  214.   .assists {
  215.     grid-area: assists;
  216.     display: grid;
  217.     grid-auto-flow: rows;
  218.     grid-auto-rows: 2em;
  219.     grid-gap: 0.5em;
  220.   }
  222.   .input-light-grid {
  223.     justify-self: center;
  224.   }
  226.   .input-number {
  227.     min-width: 2em;
  228.   }
  230.   .x-shift-number {
  231.     grid-area: x-num;
  232.     justify-self: right;
  233.   }
  235.   .y-shift-number {
  236.     grid-area: y-num;
  237.     justify-self: left;
  238.   }
  240.   .x-shift-number,
  241.   .y-shift-number {
  242.     input {
  243.       max-width: 4em;
  244.     }
  245.   }
  247.   .x-shift-slider {
  248.     grid-area: x-slide;
  249.     height: auto;
  250.     align-self: start;
  251.     min-width: 10em;
  252.   }
  254.   .y-shift-slider {
  255.     grid-area: y-slide;
  256.     writing-mode: vertical-lr;
  257.     justify-self: left;
  258.     min-height: 10em;
  259.   }
  261.   .x-shift-slider,
  262.   .y-shift-slider {
  263.     padding: 0;
  264.   }
  266.   .preview-window {
  267.     --__grid-color1: rgb(102 102 102);
  268.     --__grid-color2: rgb(153 153 153);
  269.     --__grid-color1-disabled: rgba(102 102 102 / 20%);
  270.     --__grid-color2-disabled: rgba(153 153 153 / 20%);
  272.     &.-light-grid {
  273.       --__grid-color1: rgb(205 205 205);
  274.       --__grid-color2: rgb(255 255 255);
  275.       --__grid-color1-disabled: rgba(205 205 205 / 20%);
  276.       --__grid-color2-disabled: rgba(255 255 255 / 20%);
  277.     }
  279.     position: relative;
  280.     grid-area: preview;
  281.     aspect-ratio: 1;
  282.     display: flex;
  283.     align-items: center;
  284.     justify-content: center;
  285.     min-width: 10em;
  286.     min-height: 10em;
  287.     background-color: var(--__grid-color2);
  288.     background-image:
  289.       linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
  290.       linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
  291.       linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
  292.       linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
  293.     background-size: 20px 20px;
  294.     background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  295.     border-radius: var(--roundness);
  297.     &.disabled {
  298.       background-color: var(--__grid-color2-disabled);
  299.       background-image:
  300.         linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
  301.         linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
  302.         linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
  303.         linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
  304.     }
  306.     .preview-block {
  307.       background: var(--background, var(--bg));
  308.       display: flex;
  309.       justify-content: center;
  310.       align-items: center;
  311.       min-width: 33%;
  312.       min-height: 33%;
  313.       max-width: 80%;
  314.       max-height: 80%;
  315.       border-width: 0;
  316.       border-style: solid;
  317.       border-color: var(--border);
  318.       border-radius: var(--roundness);
  319.       box-shadow: var(--shadow);
  320.     }
  321.   }
  322. }
  323. </style>