wip
This commit is contained in:
		| @@ -1,66 +1,4 @@ | ||||
|  | ||||
| <mk-profile-setting> | ||||
| 	<label class="avatar ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/> | ||||
| 		<button class="ui" @click="avatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button> | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.name%</p> | ||||
| 		<input ref="accountName" type="text" value={ I.name } class="ui"/> | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.location%</p> | ||||
| 		<input ref="accountLocation" type="text" value={ I.profile.location } class="ui"/> | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.description%</p> | ||||
| 		<textarea ref="accountDescription" class="ui">{ I.description }</textarea> | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.birthday%</p> | ||||
| 		<input ref="accountBirthday" type="date" value={ I.profile.birthday } class="ui"/> | ||||
| 	</label> | ||||
| 	<button class="ui primary" @click="updateAccount">%i18n:desktop.tags.mk-profile-setting.save%</button> | ||||
| 	<style lang="stylus" scoped> | ||||
| 		:scope | ||||
| 			display block | ||||
|  | ||||
| 			> .avatar | ||||
| 				> img | ||||
| 					display inline-block | ||||
| 					vertical-align top | ||||
| 					width 64px | ||||
| 					height 64px | ||||
| 					border-radius 4px | ||||
|  | ||||
| 				> button | ||||
| 					margin-left 8px | ||||
|  | ||||
| 	</style> | ||||
| 	<script lang="typescript"> | ||||
| 		import updateAvatar from '../scripts/update-avatar'; | ||||
| 		import notify from '../scripts/notify'; | ||||
|  | ||||
| 		this.mixin('i'); | ||||
| 		this.mixin('api'); | ||||
|  | ||||
| 		this.avatar = () => { | ||||
| 			updateAvatar(this.I); | ||||
| 		}; | ||||
|  | ||||
| 		this.updateAccount = () => { | ||||
| 			this.api('i/update', { | ||||
| 				name: this.$refs.accountName.value, | ||||
| 				location: this.$refs.accountLocation.value || null, | ||||
| 				description: this.$refs.accountDescription.value || null, | ||||
| 				birthday: this.$refs.accountBirthday.value || null | ||||
| 			}).then(() => { | ||||
| 				notify('プロフィールを更新しました'); | ||||
| 			}); | ||||
| 		}; | ||||
| 	</script> | ||||
| </mk-profile-setting> | ||||
|  | ||||
| <mk-api-info> | ||||
| 	<p>Token: <code>{ I.token }</code></p> | ||||
| 	<p>%i18n:desktop.tags.mk-api-info.intro%</p> | ||||
|   | ||||
							
								
								
									
										73
									
								
								src/web/app/desktop/views/components/profile-setting.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										73
									
								
								src/web/app/desktop/views/components/profile-setting.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,73 @@ | ||||
| <template> | ||||
| <div class="mk-profile-setting"> | ||||
| 	<label class="avatar ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.avatar%</p><img class="avatar" :src="`${$root.$data.os.i.avatar_url}?thumbnail&size=64`" alt="avatar"/> | ||||
| 		<button class="ui" @click="updateAvatar">%i18n:desktop.tags.mk-profile-setting.choice-avatar%</button> | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.name%</p> | ||||
| 		<input v-model="name" type="text" class="ui"/> | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.location%</p> | ||||
| 		<input v-model="location" type="text" class="ui"/> | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.description%</p> | ||||
| 		<textarea v-model="description" class="ui"></textarea> | ||||
| 	</label> | ||||
| 	<label class="ui from group"> | ||||
| 		<p>%i18n:desktop.tags.mk-profile-setting.birthday%</p> | ||||
| 		<input v-model="birthday" type="date" class="ui"/> | ||||
| 	</label> | ||||
| 	<button class="ui primary" @click="save">%i18n:desktop.tags.mk-profile-setting.save%</button> | ||||
| </div> | ||||
| </template> | ||||
|  | ||||
| <script lang="ts"> | ||||
| import Vue from 'vue'; | ||||
| import updateAvatar from '../../scripts/update-avatar'; | ||||
| import notify from '../../scripts/notify'; | ||||
|  | ||||
| export default Vue.extend({ | ||||
| 	data() { | ||||
| 		return { | ||||
| 			name: this.$root.$data.os.i.name, | ||||
| 			location: this.$root.$data.os.i.location, | ||||
| 			description: this.$root.$data.os.i.description, | ||||
| 			birthday: this.$root.$data.os.i.birthday, | ||||
| 		}; | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		updateAvatar() { | ||||
| 			updateAvatar(this.$root.$data.os.i); | ||||
| 		}, | ||||
| 		save() { | ||||
| 			this.$root.$data.os.api('i/update', { | ||||
| 				name: this.name, | ||||
| 				location: this.location || null, | ||||
| 				description: this.description || null, | ||||
| 				birthday: this.birthday || null | ||||
| 			}).then(() => { | ||||
| 				notify('プロフィールを更新しました'); | ||||
| 			}); | ||||
| 		} | ||||
| 	} | ||||
| }); | ||||
| </script> | ||||
|  | ||||
| <style lang="stylus" scoped> | ||||
| .mk-profile-setting | ||||
| 	> .avatar | ||||
| 		> img | ||||
| 			display inline-block | ||||
| 			vertical-align top | ||||
| 			width 64px | ||||
| 			height 64px | ||||
| 			border-radius 4px | ||||
|  | ||||
| 		> button | ||||
| 			margin-left 8px | ||||
|  | ||||
| </style> | ||||
|  | ||||
		Reference in New Issue
	
	Block a user
	 こぴなたみぽ
					こぴなたみぽ