Refactor
This commit is contained in:
		
							parent
							
								
									e85dec030a
								
							
						
					
					
						commit
						d399241e65
					
				
					 4 changed files with 23 additions and 25 deletions
				
			
		
							
								
								
									
										19
									
								
								src/client/app/common/views/components/error.vue
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										19
									
								
								src/client/app/common/views/components/error.vue
									
										
									
									
									
										Normal file
									
								
							|  | @ -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> | ||||||
|  | @ -1,5 +1,6 @@ | ||||||
| import Vue from 'vue'; | import Vue from 'vue'; | ||||||
| 
 | 
 | ||||||
|  | import error from './error.vue'; | ||||||
| import apiSettings from './api-settings.vue'; | import apiSettings from './api-settings.vue'; | ||||||
| import driveSettings from './drive-settings.vue'; | import driveSettings from './drive-settings.vue'; | ||||||
| import profileEditor from './profile-editor.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 formButton from './ui/form/button.vue'; | ||||||
| import formRadio from './ui/form/radio.vue'; | import formRadio from './ui/form/radio.vue'; | ||||||
| 
 | 
 | ||||||
|  | Vue.component('mk-error', error); | ||||||
| Vue.component('mk-api-settings', apiSettings); | Vue.component('mk-api-settings', apiSettings); | ||||||
| Vue.component('mk-drive-settings', driveSettings); | Vue.component('mk-drive-settings', driveSettings); | ||||||
| Vue.component('mk-profile-editor', profileEditor); | Vue.component('mk-profile-editor', profileEditor); | ||||||
|  |  | ||||||
|  | @ -4,10 +4,7 @@ | ||||||
| 
 | 
 | ||||||
| 	<slot name="empty" v-if="notes.length == 0 && !fetching && requestInitPromise == null"></slot> | 	<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"> | 	<div class="placeholder" v-if="fetching"> | ||||||
| 		<template v-for="i in 10"> | 		<template v-for="i in 10"> | ||||||
|  | @ -215,16 +212,6 @@ export default Vue.extend({ | ||||||
| 		> * | 		> * | ||||||
| 			transition transform .3s ease, opacity .3s ease | 			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 | 	> .placeholder | ||||||
| 		padding 32px | 		padding 32px | ||||||
| 		opacity 0.3 | 		opacity 0.3 | ||||||
|  |  | ||||||
|  | @ -8,10 +8,7 @@ | ||||||
| 		</template> | 		</template> | ||||||
| 	</div> | 	</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">--> | 	<!--<transition-group name="mk-notes" class="transition" ref="notes">--> | ||||||
|  | @ -221,13 +218,6 @@ export default Vue.extend({ | ||||||
| 		> * | 		> * | ||||||
| 			transition transform .3s ease, opacity .3s ease | 			transition transform .3s ease, opacity .3s ease | ||||||
| 
 | 
 | ||||||
| 	> .error |  | ||||||
| 		max-width 300px |  | ||||||
| 		margin 0 auto |  | ||||||
| 		padding 16px |  | ||||||
| 		text-align center |  | ||||||
| 		color var(--text) |  | ||||||
| 
 |  | ||||||
| 	> .placeholder | 	> .placeholder | ||||||
| 		padding 16px | 		padding 16px | ||||||
| 		opacity 0.3 | 		opacity 0.3 | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue