Improve client
This commit is contained in:
		
							parent
							
								
									65f1afc4e0
								
							
						
					
					
						commit
						5f869e5d87
					
				
					 10 changed files with 171 additions and 59 deletions
				
			
		|  | @ -769,6 +769,7 @@ sent: "送信" | ||||||
| received: "受信" | received: "受信" | ||||||
| searchResult: "検索結果" | searchResult: "検索結果" | ||||||
| hashtags: "ハッシュタグ" | hashtags: "ハッシュタグ" | ||||||
|  | troubleshooting: "トラブルシューティング" | ||||||
| 
 | 
 | ||||||
| _docs:  | _docs:  | ||||||
|   continueReading: "続きを読む" |   continueReading: "続きを読む" | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| <template> | <template> | ||||||
| <component class="bghgjjyj _button" | <component class="bghgjjyj _button" | ||||||
| 	:is="link ? 'a' : 'button'" | 	:is="link ? 'MkA' : 'button'" | ||||||
| 	:class="{ inline, primary, danger, full }" | 	:class="{ inline, primary, danger, full }" | ||||||
| 	:type="type" | 	:type="type" | ||||||
| 	@click="$emit('click', $event)" | 	@click="$emit('click', $event)" | ||||||
|  | @ -115,6 +115,7 @@ export default defineComponent({ | ||||||
| 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため | 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため | ||||||
| 	display: block; | 	display: block; | ||||||
| 	min-width: 100px; | 	min-width: 100px; | ||||||
|  | 	width: min-content; | ||||||
| 	padding: 8px 14px; | 	padding: 8px 14px; | ||||||
| 	text-align: center; | 	text-align: center; | ||||||
| 	font-weight: normal; | 	font-weight: normal; | ||||||
|  | @ -125,6 +126,7 @@ export default defineComponent({ | ||||||
| 	background: var(--buttonBg); | 	background: var(--buttonBg); | ||||||
| 	border-radius: 999px; | 	border-radius: 999px; | ||||||
| 	overflow: hidden; | 	overflow: hidden; | ||||||
|  | 	box-sizing: border-box; | ||||||
| 
 | 
 | ||||||
| 	&:not(:disabled):hover { | 	&:not(:disabled):hover { | ||||||
| 		background: var(--buttonHoverBg); | 		background: var(--buttonHoverBg); | ||||||
|  |  | ||||||
|  | @ -1,11 +1,11 @@ | ||||||
| <template> | <template> | ||||||
| <transition :name="$store.state.animation ? 'zoom' : ''" appear> | <transition :name="$store.state.animation ? 'zoom' : ''" appear> | ||||||
| 	<div class="_section"> | 	<div class="mjndxjch"> | ||||||
| 		<div class="mjndxjch _content"> | 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> | ||||||
| 			<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/> | 		<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p> | ||||||
| 			<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p> | 		<p>{{ $ts.pageLoadErrorDescription }}</p> | ||||||
| 			<p>{{ $ts.pageLoadErrorDescription }}</p> | 		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p> | ||||||
| 		</div> | 		<p v-if="error" class="error">ERROR: {{ error }}</p> | ||||||
| 	</div> | 	</div> | ||||||
| </transition> | </transition> | ||||||
| </template> | </template> | ||||||
|  | @ -19,6 +19,11 @@ export default defineComponent({ | ||||||
| 	components: { | 	components: { | ||||||
| 		MkButton, | 		MkButton, | ||||||
| 	}, | 	}, | ||||||
|  | 	props: { | ||||||
|  | 		error: { | ||||||
|  | 			required: false, | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 			[symbols.PAGE_INFO]: { | 			[symbols.PAGE_INFO]: { | ||||||
|  | @ -32,10 +37,11 @@ export default defineComponent({ | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
| .mjndxjch { | .mjndxjch { | ||||||
|  | 	padding: 32px; | ||||||
| 	text-align: center; | 	text-align: center; | ||||||
| 
 | 
 | ||||||
| 	> p { | 	> p { | ||||||
| 		margin: 0 0 8px 0; | 		margin: 0 0 12px 0; | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	> .button { | 	> .button { | ||||||
|  | @ -45,8 +51,12 @@ export default defineComponent({ | ||||||
| 	> img { | 	> img { | ||||||
| 		vertical-align: bottom; | 		vertical-align: bottom; | ||||||
| 		height: 128px; | 		height: 128px; | ||||||
| 		margin-bottom: 16px; | 		margin-bottom: 24px; | ||||||
| 		border-radius: 16px; | 		border-radius: 16px; | ||||||
| 	} | 	} | ||||||
|  | 
 | ||||||
|  | 	> .error { | ||||||
|  | 		opacity: 0.7; | ||||||
|  | 	} | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
							
								
								
									
										51
									
								
								src/client/pages/my-antennas/create.vue
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										51
									
								
								src/client/pages/my-antennas/create.vue
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,51 @@ | ||||||
|  | <template> | ||||||
|  | <div class="geegznzt"> | ||||||
|  | 	<XAntenna :antenna="draft" @created="onAntennaCreated"/> | ||||||
|  | </div> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script lang="ts"> | ||||||
|  | import { defineComponent } from 'vue'; | ||||||
|  | import MkButton from '@client/components/ui/button.vue'; | ||||||
|  | import XAntenna from './editor.vue'; | ||||||
|  | import * as symbols from '@client/symbols'; | ||||||
|  | 
 | ||||||
|  | export default defineComponent({ | ||||||
|  | 	components: { | ||||||
|  | 		MkButton, | ||||||
|  | 		XAntenna, | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			[symbols.PAGE_INFO]: { | ||||||
|  | 				title: this.$ts.manageAntennas, | ||||||
|  | 				icon: 'fas fa-satellite', | ||||||
|  | 			}, | ||||||
|  | 			draft: { | ||||||
|  | 				name: '', | ||||||
|  | 				src: 'all', | ||||||
|  | 				userListId: null, | ||||||
|  | 				userGroupId: null, | ||||||
|  | 				users: [], | ||||||
|  | 				keywords: [], | ||||||
|  | 				excludeKeywords: [], | ||||||
|  | 				withReplies: false, | ||||||
|  | 				caseSensitive: false, | ||||||
|  | 				withFile: false, | ||||||
|  | 				notify: false | ||||||
|  | 			}, | ||||||
|  | 		}; | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	methods: { | ||||||
|  | 		onAntennaCreated() { | ||||||
|  | 			this.$router.push('/my/antennas'); | ||||||
|  | 		}, | ||||||
|  | 	} | ||||||
|  | }); | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | 
 | ||||||
|  | </style> | ||||||
							
								
								
									
										56
									
								
								src/client/pages/my-antennas/edit.vue
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										56
									
								
								src/client/pages/my-antennas/edit.vue
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,56 @@ | ||||||
|  | <template> | ||||||
|  | <div class=""> | ||||||
|  | 	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/> | ||||||
|  | </div> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script lang="ts"> | ||||||
|  | import { defineComponent } from 'vue'; | ||||||
|  | import MkButton from '@client/components/ui/button.vue'; | ||||||
|  | import XAntenna from './editor.vue'; | ||||||
|  | import * as symbols from '@client/symbols'; | ||||||
|  | import * as os from '@client/os'; | ||||||
|  | 
 | ||||||
|  | export default defineComponent({ | ||||||
|  | 	components: { | ||||||
|  | 		MkButton, | ||||||
|  | 		XAntenna, | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	props: { | ||||||
|  | 		antennaId: { | ||||||
|  | 			type: String, | ||||||
|  | 			required: true, | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	data() { | ||||||
|  | 		return { | ||||||
|  | 			[symbols.PAGE_INFO]: { | ||||||
|  | 				title: this.$ts.manageAntennas, | ||||||
|  | 				icon: 'fas fa-satellite', | ||||||
|  | 			}, | ||||||
|  | 			antenna: null, | ||||||
|  | 		}; | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	watch: { | ||||||
|  | 		antennaId: { | ||||||
|  | 			async handler() { | ||||||
|  | 				this.antenna = await os.api('antennas/show', { antennaId: this.antennaId }); | ||||||
|  | 			}, | ||||||
|  | 			immediate: true, | ||||||
|  | 		} | ||||||
|  | 	}, | ||||||
|  | 
 | ||||||
|  | 	methods: { | ||||||
|  | 		onAntennaUpdated() { | ||||||
|  | 			this.$router.push('/my/antennas'); | ||||||
|  | 		}, | ||||||
|  | 	} | ||||||
|  | }); | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | 
 | ||||||
|  | </style> | ||||||
|  | @ -1,8 +1,7 @@ | ||||||
| <template> | <template> | ||||||
| <div class="shaynizk _card"> | <div class="shaynizk"> | ||||||
| 	<div class="_title" v-if="antenna.name">{{ antenna.name }}</div> | 	<div class="form"> | ||||||
| 	<div class="_content body"> | 		<MkInput v-model="name" class="_inputNoTopMargin"> | ||||||
| 		<MkInput v-model="name"> |  | ||||||
| 			<template #label>{{ $ts.name }}</template> | 			<template #label>{{ $ts.name }}</template> | ||||||
| 		</MkInput> | 		</MkInput> | ||||||
| 		<MkSelect v-model="src"> | 		<MkSelect v-model="src"> | ||||||
|  | @ -38,9 +37,9 @@ | ||||||
| 		<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch> | 		<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch> | ||||||
| 		<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch> | 		<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch> | ||||||
| 	</div> | 	</div> | ||||||
| 	<div class="_footer"> | 	<div class="actions"> | ||||||
| 		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> | 		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> | ||||||
| 		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton> | 		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton> | ||||||
| 	</div> | 	</div> | ||||||
| </div> | </div> | ||||||
| </template> | </template> | ||||||
|  | @ -117,7 +116,7 @@ export default defineComponent({ | ||||||
| 	methods: { | 	methods: { | ||||||
| 		async saveAntenna() { | 		async saveAntenna() { | ||||||
| 			if (this.antenna.id == null) { | 			if (this.antenna.id == null) { | ||||||
| 				await os.api('antennas/create', { | 				await os.apiWithDialog('antennas/create', { | ||||||
| 					name: this.name, | 					name: this.name, | ||||||
| 					src: this.src, | 					src: this.src, | ||||||
| 					userListId: this.userListId, | 					userListId: this.userListId, | ||||||
|  | @ -132,7 +131,7 @@ export default defineComponent({ | ||||||
| 				}); | 				}); | ||||||
| 				this.$emit('created'); | 				this.$emit('created'); | ||||||
| 			} else { | 			} else { | ||||||
| 				await os.api('antennas/update', { | 				await os.apiWithDialog('antennas/update', { | ||||||
| 					antennaId: this.antenna.id, | 					antennaId: this.antenna.id, | ||||||
| 					name: this.name, | 					name: this.name, | ||||||
| 					src: this.src, | 					src: this.src, | ||||||
|  | @ -146,9 +145,8 @@ export default defineComponent({ | ||||||
| 					keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')), | 					keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')), | ||||||
| 					excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')), | 					excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')), | ||||||
| 				}); | 				}); | ||||||
|  | 				this.$emit('updated'); | ||||||
| 			} | 			} | ||||||
| 
 |  | ||||||
| 			os.success(); |  | ||||||
| 		}, | 		}, | ||||||
| 
 | 
 | ||||||
| 		async deleteAntenna() { | 		async deleteAntenna() { | ||||||
|  | @ -180,9 +178,13 @@ export default defineComponent({ | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
| .shaynizk { | .shaynizk { | ||||||
| 	> .body { | 	> .form { | ||||||
| 		max-height: 250px; | 		padding: 32px; | ||||||
| 		overflow: auto; | 	} | ||||||
|  | 
 | ||||||
|  | 	> .actions { | ||||||
|  | 		padding: 24px 32px; | ||||||
|  | 		border-top: solid 0.5px var(--divider); | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  | @ -1,12 +1,12 @@ | ||||||
| <template> | <template> | ||||||
| <div class="ieepwinx _section"> | <div class="ieepwinx _section"> | ||||||
| 	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> | 	<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton> | ||||||
| 
 | 
 | ||||||
| 	<div class="_content"> | 	<div class="_content"> | ||||||
| 		<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/> | 		<MkPagination :pagination="pagination" #default="{items}" ref="list"> | ||||||
| 
 | 			<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`"> | ||||||
| 		<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list"> | 				<div class="name">{{ antenna.name }}</div> | ||||||
| 			<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/> | 			</MkA> | ||||||
| 		</MkPagination> | 		</MkPagination> | ||||||
| 	</div> | 	</div> | ||||||
| </div> | </div> | ||||||
|  | @ -16,14 +16,12 @@ | ||||||
| import { defineComponent } from 'vue'; | import { defineComponent } from 'vue'; | ||||||
| import MkPagination from '@client/components/ui/pagination.vue'; | import MkPagination from '@client/components/ui/pagination.vue'; | ||||||
| import MkButton from '@client/components/ui/button.vue'; | import MkButton from '@client/components/ui/button.vue'; | ||||||
| import XAntenna from './index.antenna.vue'; |  | ||||||
| import * as symbols from '@client/symbols'; | import * as symbols from '@client/symbols'; | ||||||
| 
 | 
 | ||||||
| export default defineComponent({ | export default defineComponent({ | ||||||
| 	components: { | 	components: { | ||||||
| 		MkPagination, | 		MkPagination, | ||||||
| 		MkButton, | 		MkButton, | ||||||
| 		XAntenna, |  | ||||||
| 	}, | 	}, | ||||||
| 
 | 
 | ||||||
| 	data() { | 	data() { | ||||||
|  | @ -40,43 +38,34 @@ export default defineComponent({ | ||||||
| 				endpoint: 'antennas/list', | 				endpoint: 'antennas/list', | ||||||
| 				limit: 10, | 				limit: 10, | ||||||
| 			}, | 			}, | ||||||
| 			draft: null, |  | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 
 |  | ||||||
| 	methods: { |  | ||||||
| 		create() { |  | ||||||
| 			this.draft = { |  | ||||||
| 				name: '', |  | ||||||
| 				src: 'all', |  | ||||||
| 				userListId: null, |  | ||||||
| 				userGroupId: null, |  | ||||||
| 				users: [], |  | ||||||
| 				keywords: [], |  | ||||||
| 				excludeKeywords: [], |  | ||||||
| 				withReplies: false, |  | ||||||
| 				caseSensitive: false, |  | ||||||
| 				withFile: false, |  | ||||||
| 				notify: false |  | ||||||
| 			}; |  | ||||||
| 		}, |  | ||||||
| 
 |  | ||||||
| 		onAntennaCreated() { |  | ||||||
| 			this.$refs.list.reload(); |  | ||||||
| 			this.draft = null; |  | ||||||
| 		}, |  | ||||||
| 
 |  | ||||||
| 		onAntennaDeleted() { |  | ||||||
| 			this.$refs.list.reload(); |  | ||||||
| 		}, |  | ||||||
| 	} |  | ||||||
| }); | }); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
| .ieepwinx { | .ieepwinx { | ||||||
|  | 	padding: 16px; | ||||||
|  | 
 | ||||||
| 	> .add { | 	> .add { | ||||||
| 		margin: 0 auto 16px auto; | 		margin: 0 auto 16px auto; | ||||||
| 	} | 	} | ||||||
|  | 
 | ||||||
|  | 	.ljoevbzj { | ||||||
|  | 		display: block; | ||||||
|  | 		padding: 16px; | ||||||
|  | 		margin-bottom: 8px; | ||||||
|  | 		border: solid 1px var(--divider); | ||||||
|  | 		border-radius: 6px; | ||||||
|  | 
 | ||||||
|  | 		&:hover { | ||||||
|  | 			border: solid 1px var(--accent); | ||||||
|  | 			text-decoration: none; | ||||||
|  | 		} | ||||||
|  | 
 | ||||||
|  | 		> .name { | ||||||
|  | 			font-weight: bold; | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
|  | @ -255,6 +255,7 @@ hr { | ||||||
| 	margin: var(--margin) 0; | 	margin: var(--margin) 0; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | // TODO: 廃止 | ||||||
| ._card { | ._card { | ||||||
| 	@extend ._panel; | 	@extend ._panel; | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -47,7 +47,7 @@ | ||||||
| 		infoBg: '#e5f5ff', | 		infoBg: '#e5f5ff', | ||||||
| 		infoFg: '#72818a', | 		infoFg: '#72818a', | ||||||
| 		infoWarnBg: '#fff0db', | 		infoWarnBg: '#fff0db', | ||||||
| 		infoWarnFg: '#573c08', | 		infoWarnFg: '#8f6e31', | ||||||
| 		cwBg: '#b1b9c1', | 		cwBg: '#b1b9c1', | ||||||
| 		cwFg: '#fff', | 		cwFg: '#fff', | ||||||
| 		cwHoverBg: '#bbc4ce', | 		cwHoverBg: '#bbc4ce', | ||||||
|  |  | ||||||
|  | @ -38,7 +38,7 @@ | ||||||
| 		messageBg: '@bg', | 		messageBg: '@bg', | ||||||
| 		navActive: '@accent', | 		navActive: '@accent', | ||||||
| 		infoWarnBg: '#fff0db', | 		infoWarnBg: '#fff0db', | ||||||
| 		infoWarnFg: '#573c08', | 		infoWarnFg: '#8f6e31', | ||||||
| 		navHoverFg: ':darken<17<@fg', | 		navHoverFg: ':darken<17<@fg', | ||||||
| 		dateLabelFg: '@fg', | 		dateLabelFg: '@fg', | ||||||
| 		inputBorder: 'rgba(0, 0, 0, 0.1)', | 		inputBorder: 'rgba(0, 0, 0, 0.1)', | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue