Refactor

src/client/app/common/views/components/error.vue

@@ -0,0 +1,19 @@
+<template>
+<div class="wjqjnyhzogztorhrdgcpqlkxhkmuetgj">
+	<p>%fa:exclamation-triangle% %i18n:common.error.title%</p>
+	<ui-button @click="() => $emit('retry')">%i18n:common.error.retry%</ui-button>
+</div>
+</template>
+
+<style lang="stylus" scoped>
+.wjqjnyhzogztorhrdgcpqlkxhkmuetgj
+	max-width 350px
+	margin 0 auto
+	padding 32px
+	text-align center
+	color var(--text)
+
+	> p
+		margin 0 0 8px 0
+
+</style>

src/client/app/common/views/components/index.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import error from './error.vue';
 import apiSettings from './api-settings.vue';
 import driveSettings from './drive-settings.vue';
 import profileEditor from './profile-editor.vue';
@@ -49,6 +50,7 @@ import uiInfo from './ui/info.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-error', error);
 Vue.component('mk-api-settings', apiSettings);
 Vue.component('mk-drive-settings', driveSettings);
 Vue.component('mk-profile-editor', profileEditor);

src/client/app/desktop/views/components/notes.vue

@@ -4,10 +4,7 @@
 
 	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot>
 
-	<div v-if="!fetching && requestInitPromise != null" class="error">
+	<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
-		<p>%fa:exclamation-triangle% %i18n:common.error.title%</p>
-		<ui-button @click="resolveInitPromise">%i18n:common.error.retry%</ui-button>
-	</div>
 
 	<div class="placeholder" v-if="fetching">
 		<template v-for="i in 10">
@@ -215,16 +212,6 @@ export default Vue.extend({
 		> *
 			transition transform .3s ease, opacity .3s ease
 
-	> .error
-		max-width 300px
-		margin 0 auto
-		padding 32px
-		text-align center
-		color var(--text)
-
-		> p
-			margin 0 0 8px 0
-
 	> .placeholder
 		padding 32px
 		opacity 0.3

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -8,10 +8,7 @@
 		</template>
 	</div>
 
-	<div v-if="!fetching && requestInitPromise != null" class="error">
+	<mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
-		<p>%fa:exclamation-triangle% %i18n:common.error.title%</p>
-		<ui-button @click="resolveInitPromise">%i18n:common.error.retry%</ui-button>
-	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<!--<transition-group name="mk-notes" class="transition" ref="notes">-->
@@ -221,13 +218,6 @@ export default Vue.extend({
 		> *
 			transition transform .3s ease, opacity .3s ease
 
-	> .error
-		max-width 300px
-		margin 0 auto
-		padding 16px
-		text-align center
-		color var(--text)
-
 	> .placeholder
 		padding 16px
 		opacity 0.3