From d399241e65b4cd6ab4fa0e95ccabfd1e41140a2d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 30 Oct 2018 09:36:20 +0900
Subject: [PATCH] Refactor
---
.../app/common/views/components/error.vue | 19 +++++++++++++++++++
.../app/common/views/components/index.ts | 2 ++
.../app/desktop/views/components/notes.vue | 15 +--------------
.../desktop/views/pages/deck/deck.notes.vue | 12 +-----------
4 files changed, 23 insertions(+), 25 deletions(-)
create mode 100644 src/client/app/common/views/components/error.vue
diff --git a/src/client/app/common/views/components/error.vue b/src/client/app/common/views/components/error.vue
new file mode 100644
index 000000000..7381cf537
--- /dev/null
+++ b/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>
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 54880e3c2..33216e459 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/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);
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 54299f933..37ce2c9dd 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/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">
- <p>%fa:exclamation-triangle% %i18n:common.error.title%</p>
- <ui-button @click="resolveInitPromise">%i18n:common.error.retry%</ui-button>
- </div>
+ <mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
<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
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 3231bd722..a5f20df5b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -8,10 +8,7 @@
</template>
</div>
- <div v-if="!fetching && requestInitPromise != null" class="error">
- <p>%fa:exclamation-triangle% %i18n:common.error.title%</p>
- <ui-button @click="resolveInitPromise">%i18n:common.error.retry%</ui-button>
- </div>
+ <mk-error v-if="!fetching && requestInitPromise != null" @retry="resolveInitPromise"/>
<!-- トランジションを有効にするとなぜかメモリリークする -->
<!--<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