From 22f2b123a6f99277b8b82e8e840aff6039b7b771 Mon Sep 17 00:00:00 2001
From: mei23 <m@m544.net>
Date: Wed, 5 Feb 2020 11:51:15 +0900
Subject: [PATCH] =?UTF-8?q?=E7=B5=B5=E6=96=87=E5=AD=97=E3=83=94=E3=83=83?=
 =?UTF-8?q?=E3=82=AB=E3=83=BC=E3=81=A7=E3=83=AA=E3=83=A2=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E3=82=AB=E3=82=B9=E3=82=BF=E3=83=A0=E7=B5=B5=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E3=81=AF=E8=87=AA=E5=8B=95=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF?=
 =?UTF-8?q?=E3=81=97=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en-US.yml                             |  1 +
 locales/ja-JP.yml                             |  1 +
 .../common/views/components/emoji-picker.vue  | 29 ++++++++++++-------
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 1f833dff0514..5a2a89692d6d 100644
--- 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
index ff77b2f8111b..5b31d96b5604 100644
--- 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
index a851b832b3aa..0c71791e8737 100644
--- 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>