Only allow editing local packs

src/views/emoji-packs/components/EmojiPack.vue

@@ -3,39 +3,41 @@
     <h2>{{ name }}</h2>
 
     <prop-editing-row name="Share pack">
-      <el-switch v-model="share" />
+      <el-switch v-model="share" :disabled="!isLocal" />
     </prop-editing-row>
     <prop-editing-row name="Homepage">
-      <el-input v-model="homepage" />
+      <el-input v-if="isLocal" v-model="homepage" />
+      <el-input v-else :value="homepage" />
     </prop-editing-row>
     <prop-editing-row name="Description">
-      <el-input :rows="2" v-model="description" type="textarea" />
+      <el-input v-if="isLocal" :rows="2" v-model="description" type="textarea" />
+      <el-input v-else :rows="2" :value="description" type="textarea" />
     </prop-editing-row>
     <prop-editing-row name="License">
-      <el-input v-model="license" />
+      <el-input v-if="isLocal" v-model="license" />
+      <el-input v-else :value="license" />
     </prop-editing-row>
     <prop-editing-row name="Fallback source">
-      <el-input v-model="fallbackSrc" />
+      <el-input v-if="isLocal" v-model="fallbackSrc" />
+      <el-input v-else :value="fallbackSrc" />
     </prop-editing-row>
 
     <prop-editing-row v-if="fallbackSrc && fallbackSrc.trim() !== ''" name="Fallback source SHA">
       {{ pack.pack["fallback-src-sha256"] }}
     </prop-editing-row>
 
-    <el-button type="success" @click="savePackMetadata">Save pack metadata</el-button>
+    <el-button v-if="isLocal" type="success" @click="savePackMetadata">Save pack metadata</el-button>
 
     <el-collapse v-model="shownPackEmoji" class="contents-collapse">
       <el-collapse-item :name="name" title="Show pack contents">
-        <el-row v-for="(file, ename) in pack.files" :key="ename" :gutter="20" class="emoji-preview">
-          <el-col :span="4">
-            <b>{{ ename }}</b>
-          </el-col>
-          <el-col :span="4">
-            <img
-              :src="`//${host}/emoji/${name}/${file}`"
-              class="emoji-preview-img">
-          </el-col>
-        </el-row>
+        <single-emoji-editor
+          v-for="(file, ename) in pack.files"
+          :key="ename"
+          :host="host"
+          :pack-name="name"
+          :name="ename"
+          :file="file"
+          :is-local="isLocal" />
       </el-collapse-item>
     </el-collapse>
 
@@ -92,10 +94,11 @@
 
 <script>
 import PropEditingRow from './PropertyEditingRow.vue'
+import SingleEmojiEditor from './SingleEmojiEditor.vue'
 
 export default {
 
-  components: { PropEditingRow },
+  components: { PropEditingRow, SingleEmojiEditor },
   props: {
     name: {
       type: String,