logo

pleroma-fe

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

emoji_tab.vue (11897B)

    

  1. <template>
  2.   <div
  3.     class="emoji-tab"
  4.     :label="$t('admin_dash.tabs.emoji')"
  5.   >
  6.     <div class="setting-item">
  7.       <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
  9.       <ul class="setting-list">
  10.         <h3>{{ $t('admin_dash.emoji.global_actions') }}</h3>
  12.         <li class="btn-group setting-item">
  13.           <button
  14.             class="button button-default btn"
  15.             type="button"
  16.             @click="reloadEmoji"
  17.           >
  18.             {{ $t('admin_dash.emoji.reload') }}
  19.           </button>
  20.           <button
  21.             class="button button-default btn"
  22.             type="button"
  23.             @click="importFromFS"
  24.           >
  25.             {{ $t('admin_dash.emoji.importFS') }}
  26.           </button>
  27.         </li>
  29.         <li class="btn-group setting-item">
  30.           <button
  31.             class="button button-default btn"
  32.             type="button"
  33.             @click="$refs.remotePackPopover.showPopover"
  34.           >
  35.             {{ $t('admin_dash.emoji.remote_packs') }}
  37.             <Popover
  38.               ref="remotePackPopover"
  39.               popover-class="emoji-tab-edit-popover popover-default"
  40.               trigger="click"
  41.               placement="bottom"
  42.               bound-to-selector=".emoji-tab"
  43.               :bound-to="{ x: 'container' }"
  44.               :offset="{ y: 5 }"
  45.             >
  46.               <template #content>
  47.                 <div class="emoji-tab-popover-input">
  48.                   <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
  49.                   <input
  50.                     v-model="remotePackInstance"
  51.                     class="input"
  52.                     :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
  53.                   >
  54.                   <button
  55.                     class="button button-default btn emoji-tab-popover-button"
  56.                     type="button"
  57.                     @click="listRemotePacks"
  58.                   >
  59.                     {{ $t('admin_dash.emoji.do_list') }}
  60.                   </button>
  61.                 </div>
  62.               </template>
  63.             </Popover>
  64.           </button>
  65.         </li>
  67.         <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
  69.         <li>
  70.           <h4>{{ $t('admin_dash.emoji.edit_pack') }}</h4>
  72.           <Select
  73.             v-model="packName"
  74.             class="form-control"
  75.           >
  76.             <option
  77.               value=""
  78.               disabled
  79.               hidden
  80.             >
  81.               {{ $t('admin_dash.emoji.emoji_pack') }}
  82.             </option>
  83.             <option
  84.               v-for="(pack, listPackName) in knownPacks"
  85.               :key="listPackName"
  86.               :label="listPackName"
  87.             >
  88.               {{ listPackName }}
  89.             </option>
  90.           </Select>
  92.           <button
  93.             class="button button-default btn emoji-tab-popover-button"
  94.             type="button"
  95.             @click="$refs.createPackPopover.showPopover"
  96.           >
  97.             {{ $t('admin_dash.emoji.create_pack') }}
  98.           </button>
  99.           <Popover
  100.             ref="createPackPopover"
  101.             popover-class="emoji-tab-edit-popover popover-default"
  102.             trigger="click"
  103.             placement="bottom"
  104.             bound-to-selector=".emoji-tab"
  105.             :bound-to="{ x: 'container' }"
  106.             :offset="{ y: 5 }"
  107.           >
  108.             <template #content>
  109.               <div class="emoji-tab-popover-input">
  110.                 <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
  111.                 <input
  112.                   v-model="newPackName"
  113.                   :placeholder="$t('admin_dash.emoji.new_pack_name')"
  114.                   class="input"
  115.                 >
  116.                 <button
  117.                   class="button button-default btn emoji-tab-popover-button"
  118.                   type="button"
  119.                   @click="createEmojiPack"
  120.                 >
  121.                   {{ $t('admin_dash.emoji.create') }}
  122.                 </button>
  123.               </div>
  124.             </template>
  125.           </Popover>
  126.         </li>
  127.       </ul>
  129.       <div v-if="pack">
  130.         <div class="pack-info-wrapper">
  131.           <ul class="setting-list">
  132.             <li>
  133.               <label>
  134.                 {{ $t('admin_dash.emoji.description') }}
  135.                 <ModifiedIndicator
  136.                   :changed="metaEdited('description')"
  137.                   message-key="admin_dash.emoji.metadata_changed"
  138.                 />
  140.                 <textarea
  141.                   v-model="packMeta.description"
  142.                   :disabled="pack.remote !== undefined"
  143.                   class="bio resize-height input"
  144.                 />
  145.               </label>
  146.             </li>
  147.             <li>
  148.               <label>
  149.                 {{ $t('admin_dash.emoji.homepage') }}
  150.                 <ModifiedIndicator
  151.                   :changed="metaEdited('homepage')"
  152.                   message-key="admin_dash.emoji.metadata_changed"
  153.                 />
  155.                 <input
  156.                   v-model="packMeta.homepage"
  157.                   class="emoji-info-input input"
  158.                   :disabled="pack.remote !== undefined"
  159.                 >
  160.               </label>
  161.             </li>
  162.             <li>
  163.               <label>
  164.                 {{ $t('admin_dash.emoji.fallback_src') }}
  165.                 <ModifiedIndicator
  166.                   :changed="metaEdited('fallback-src')"
  167.                   message-key="admin_dash.emoji.metadata_changed"
  168.                 />
  170.                 <input
  171.                   v-model="packMeta['fallback-src']"
  172.                   class="emoji-info-input input"
  173.                   :disabled="pack.remote !== undefined"
  174.                 >
  175.               </label>
  176.             </li>
  177.             <li>
  178.               <label>
  179.                 {{ $t('admin_dash.emoji.fallback_sha256') }}
  181.                 <input
  182.                   v-model="packMeta['fallback-src-sha256']"
  183.                   :disabled="true"
  184.                   class="emoji-info-input input"
  185.                 >
  186.               </label>
  187.             </li>
  188.             <li>
  189.               <Checkbox
  190.                 v-model="packMeta['share-files']"
  191.                 :disabled="pack.remote !== undefined"
  192.               >
  193.                 {{ $t('admin_dash.emoji.share') }}
  194.               </Checkbox>
  196.               <ModifiedIndicator
  197.                 :changed="metaEdited('share-files')"
  198.                 message-key="admin_dash.emoji.metadata_changed"
  199.               />
  200.             </li>
  201.             <li class="btn-group">
  202.               <button
  203.                 v-if="pack.remote === undefined"
  204.                 class="button button-default btn"
  205.                 type="button"
  206.                 @click="savePackMetadata"
  207.               >
  208.                 {{ $t('admin_dash.emoji.save_meta') }}
  209.               </button>
  210.               <button
  211.                 v-if="pack.remote === undefined"
  212.                 class="button button-default btn"
  213.                 type="button"
  214.                 @click="savePackMetadata"
  215.               >
  216.                 {{ $t('admin_dash.emoji.revert_meta') }}
  217.               </button>
  219.               <button
  220.                 v-if="pack.remote === undefined"
  221.                 class="button button-default btn"
  222.                 type="button"
  223.                 @click="deleteModalVisible = true"
  224.               >
  225.                 {{ $t('admin_dash.emoji.delete_pack') }}
  227.                 <ConfirmModal
  228.                   v-if="deleteModalVisible"
  229.                   :title="$t('admin_dash.emoji.delete_title')"
  230.                   :cancel-text="$t('status.delete_confirm_cancel_button')"
  231.                   :confirm-text="$t('status.delete_confirm_accept_button')"
  232.                   @cancelled="deleteModalVisible = false"
  233.                   @accepted="deleteEmojiPack"
  234.                 >
  235.                   {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
  236.                 </ConfirmModal>
  237.               </button>
  239.               <button
  240.                 v-if="pack.remote !== undefined"
  241.                 class="button button-default btn"
  242.                 type="button"
  243.                 @click="$refs.dlPackPopover.showPopover"
  244.               >
  245.                 {{ $t('admin_dash.emoji.download_pack') }}
  247.                 <Popover
  248.                   ref="dlPackPopover"
  249.                   trigger="click"
  250.                   placement="bottom"
  251.                   bound-to-selector=".emoji-tab"
  252.                   popover-class="emoji-tab-edit-popover popover-default"
  253.                   :bound-to="{ x: 'container' }"
  254.                   :offset="{ y: 5 }"
  255.                 >
  256.                   <template #content>
  257.                     <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
  258.                     <div>
  259.                       <div>
  260.                         <div class="emoji-tab-popover-input">
  261.                           <label>
  262.                             {{ $t('admin_dash.emoji.download_as_name') }}
  263.                             <input
  264.                               v-model="remotePackDownloadAs"
  265.                               class="emoji-data-input input"
  266.                               :placeholder="$t('admin_dash.emoji.download_as_name_full')"
  267.                             >
  268.                           </label>
  270.                           <div
  271.                             v-if="downloadWillReplaceLocal"
  272.                             class="warning"
  273.                           >
  274.                             <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
  275.                           </div>
  276.                         </div>
  278.                         <button
  279.                           class="button button-default btn"
  280.                           type="button"
  281.                           @click="downloadRemotePack"
  282.                         >
  283.                           {{ $t('admin_dash.emoji.download') }}
  284.                         </button>
  285.                       </div>
  286.                     </div>
  287.                   </template>
  288.                 </Popover>
  289.               </button>
  290.             </li>
  291.           </ul>
  292.         </div>
  294.         <ul class="setting-list">
  295.           <h4>
  296.             {{ $t('admin_dash.emoji.files') }}
  298.             <ModifiedIndicator
  299.               v-if="pack"
  300.               :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
  301.               message-key="admin_dash.emoji.emoji_changed"
  302.             />
  303.           </h4>
  305.           <div
  306.             v-if="pack"
  307.             class="emoji-list"
  308.           >
  309.             <EmojiEditingPopover
  310.               v-if="pack.remote === undefined"
  311.               placement="bottom"
  312.               new-upload
  313.               :title="$t('admin_dash.emoji.adding_new')"
  314.               :pack-name="packName"
  315.               @updatePackFiles="updatePackFiles"
  316.               @displayError="displayError"
  317.             >
  318.               <template #trigger>
  319.                 <FAIcon
  320.                   icon="plus"
  321.                   size="2x"
  322.                   :title="$t('admin_dash.emoji.add_file')"
  323.                 />
  324.               </template>
  325.             </EmojiEditingPopover>
  327.             <EmojiEditingPopover
  328.               v-for="(file, shortcode) in pack.files"
  329.               ref="emojiPopovers"
  330.               :key="shortcode"
  331.               placement="top"
  332.               :title="$t('admin_dash.emoji.editing', [shortcode])"
  333.               :disabled="pack.remote !== undefined"
  334.               :shortcode="shortcode"
  335.               :file="file"
  336.               :pack-name="packName"
  337.               @updatePackFiles="updatePackFiles"
  338.               @displayError="displayError"
  339.             >
  340.               <template #trigger>
  341.                 <StillImage
  342.                   class="emoji"
  343.                   :src="emojiAddr(file)"
  344.                   :title="`:${shortcode}:`"
  345.                   :alt="`:${shortcode}:`"
  346.                 />
  347.               </template>
  348.             </EmojiEditingPopover>
  349.           </div>
  350.         </ul>
  351.       </div>
  352.     </div>
  353.   </div>
  354. </template>
  356. <script src="./emoji_tab.js"></script>
  358. <style lang="scss" src="./emoji_tab.scss"></style>