aboutsummaryrefslogtreecommitdiff
path: root/src/components/settings_modal/admin_tabs/emoji_tab.vue
blob: 699e4afe6c0e418b9a2a2b95b5657c4db2a55368 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<template>
  <div
    class="emoji-tab"
    :label="$t('admin_dash.tabs.emoji')"
  >
    <div class="setting-item">
      <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>

      <span class="btn-group">
        <button
          class="button button-default btn"
          type="button"
          @click="reloadEmoji">
          {{ $t('admin_dash.emoji.reload') }}
        </button>
        <button
          class="button button-default btn"
          type="button"
          @click="importFromFS">
          {{ $t('admin_dash.emoji.importFS') }}
        </button>
      </span>

      <tab-switcher :scrollable-tabs="true" v-if="Object.keys(knownPacks).length > 0">
        <div v-for="(pack, packName) in knownPacks" :label="packName" :key="packName">
          <div class="pack-info-wrapper">
            <ul class="setting-list">
              <li>
                <div>Description</div>
                <textarea
                  v-model="pack.pack.description"
                  class="bio resize-height" />
              </li>
              <li>
                <div>Homepage</div>
                <input class="emoji-info-input" v-model="pack.pack.homepage">
              </li>
              <li>
                <div>Fallback source</div>
                <input class="emoji-info-input" v-model="pack.pack['fallback-src']">
              </li>
              <li>
                <Checkbox v-model="pack.pack['can-download']">Downloadable</Checkbox>
              </li>
            </ul>
          </div>

          <h2>Files</h2>

          <ul class="setting-list">
            <li v-for="(file, shortcode) in pack.files" :key="shortcode">
              <StillImage
                class="emoji img"
                :src="emojiAddr(packName, file)"
                :title="`:${shortcode}:`"
                :alt="`:${shortcode}:`"
              />

              <template v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
                <input class="emoji-data-input"
                  v-model="editedParts[packName][shortcode].shortcode">
                <input class="emoji-data-input"
                  v-model="editedParts[packName][shortcode].file">

                <button
                  class="button button-default btn"
                  type="button"
                  @click="saveEditedEmoji(packName, shortcode)">
                  Save
                </button>
              </template>
              <template v-else>
                <input disabled class="emoji-data-input" :value="shortcode">
                <input disabled class="emoji-data-input" :value="file">

                <button
                  class="button button-default btn"
                  type="button"
                  @click="editEmoji(packName, shortcode)">
                  Edit
                </button>
              </template>
            </li>
          </ul>
        </div>
      </tab-switcher>
    </div>
  </div>
</template>

<script src="./emoji_tab.js"></script>

<style lang="scss" src="./emoji_tab.scss"></style>