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> | <mk-api-info> | ||||||
| 	<p>Token: <code>{ I.token }</code></p> | 	<p>Token: <code>{ I.token }</code></p> | ||||||
| 	<p>%i18n:desktop.tags.mk-api-info.intro%</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
	 こぴなたみぽ
					こぴなたみぽ