絵文字ピッカーでリモートカスタム絵文字は自動読み込みしないように

mei23 · Feb 5, 2020 · 22f2b12 · 22f2b12
1 parent 2ba2ea8
commit 22f2b12
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -603,6 +603,7 @@ common/views/components/emoji-picker.vue:
   recent-emoji: "Recent Emoji"
   custom-emoji: "Custom Emoji"
   remote-emoji: "Remote Custom Emoji"
+  load-remote: "Load"
   no-category: "No category"
   people: "People"
   animals-and-nature: "Animals & Nature"

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -646,6 +646,7 @@ common/views/components/emoji-picker.vue:
   recent-emoji: "最近使った絵文字"
   custom-emoji: "カスタム絵文字"
   remote-emoji: "リモートカスタム絵文字"
+  load-remote: "読み込み"
   no-category: "カテゴリなし"
   people: "人"
   animals-and-nature: "動物&自然"

diff --git a/src/client/app/common/views/components/emoji-picker.vue b/src/client/app/common/views/components/emoji-picker.vue
@@ -51,8 +51,8 @@
 				</div>
 			</div>
 
-			<header class="category" v-if="this.includeRemote"><fa :icon="faGlobe" fixed-width/> {{ $t('remote-emoji') }}</header>
-			<div class="list">
+			<header class="category" v-if="includeRemote"><fa :icon="faGlobe" fixed-width/> {{ $t('remote-emoji') }}</header>
+			<div class="list" v-if="remoteEmojis != null">
 				<button v-for="emoji in remoteEmojis"
 					:title="emoji.sources ? emoji.sources.map(x => `${x.name}@${x.host}`).join(',\n') : emoji.name"
 					@click="chosen(emoji)"
@@ -61,6 +61,11 @@
 					<img :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
 				</button>
 			</div>
+			<div v-else-if="includeRemote" class="load-remote">
+				<ui-button @click="loadRemote()">
+					{{ $t('load-remote') }}
+				</ui-button>
+			</div>
 		</template>
 	</div>
 </div>
@@ -91,7 +96,7 @@ export default Vue.extend({
 			emojilist,
 			getStaticImageUrl,
 			customEmojis: {},
-			remoteEmojis: [],
+			remoteEmojis: null,
 			faGlobe, faHistory,
 			categories: [{
 				text: this.$t('custom-emoji'),
@@ -146,20 +151,19 @@ export default Vue.extend({
 		local = groupBy(local, (x: any) => x.category || '');
 		this.customEmojis = local;
 
-		if (this.includeRemote) {
-			this.$root.api('emojis/recommendation', {
-				origin: 'remote',
-			}).then((emojis: any[]) => {
-				this.remoteEmojis = emojis;
-			});
-		}
-
 		if (this.$store.state.device.activeEmojiCategoryName) {
 			this.goCategory(this.$store.state.device.activeEmojiCategoryName);
 		}
 	},
 
 	methods: {
+		loadRemote() {
+			this.$root.api('emojis/recommendation', {
+				origin: 'remote',
+			}).then((emojis: any[]) => {
+				this.remoteEmojis = emojis;
+			});
+		},
 		go(category: any) {
 			this.goCategory(category.name);
 		},
@@ -267,5 +271,8 @@ export default Vue.extend({
 					font-size 28px
 					transition transform 0.2s ease
 					pointer-events none
+		
+		>>> div.load-remote
+			padding 0.5em
 
 </style>