[Client] Improve usability & Refactoring
This commit is contained in:
		| @@ -6,11 +6,11 @@ | ||||
| 			<ui-horizon-group inputs> | ||||
| 				<ui-input v-model="name"> | ||||
| 					<span>%i18n:@add-emoji.name%</span> | ||||
| 					<span slot="text">%i18n:@add-emoji.name-desc%</span> | ||||
| 					<span slot="desc">%i18n:@add-emoji.name-desc%</span> | ||||
| 				</ui-input> | ||||
| 				<ui-input v-model="aliases"> | ||||
| 					<span>%i18n:@add-emoji.aliases%</span> | ||||
| 					<span slot="text">%i18n:@add-emoji.aliases-desc%</span> | ||||
| 					<span slot="desc">%i18n:@add-emoji.aliases-desc%</span> | ||||
| 				</ui-input> | ||||
| 			</ui-horizon-group> | ||||
| 			<ui-input v-model="url"> | ||||
|   | ||||
| @@ -13,8 +13,8 @@ | ||||
| 		<section class="fit-bottom"> | ||||
| 			<header><fa icon="cloud"/> %i18n:@drive-config%</header> | ||||
| 			<ui-switch v-model="cacheRemoteFiles">%i18n:@cache-remote-files%<span slot="desc">%i18n:@cache-remote-files-desc%</span></ui-switch> | ||||
| 			<ui-input v-model="localDriveCapacityMb">%i18n:@local-drive-capacity-mb%<span slot="text">%i18n:@mb%</span><span slot="suffix">MB</span></ui-input> | ||||
| 			<ui-input v-model="remoteDriveCapacityMb" :disabled="!cacheRemoteFiles">%i18n:@remote-drive-capacity-mb%<span slot="text">%i18n:@mb%</span><span slot="suffix">MB</span></ui-input> | ||||
| 			<ui-input v-model="localDriveCapacityMb">%i18n:@local-drive-capacity-mb%<span slot="desc">%i18n:@mb%</span><span slot="suffix">MB</span></ui-input> | ||||
| 			<ui-input v-model="remoteDriveCapacityMb" :disabled="!cacheRemoteFiles">%i18n:@remote-drive-capacity-mb%<span slot="desc">%i18n:@mb%</span><span slot="suffix">MB</span></ui-input> | ||||
| 		</section> | ||||
| 		<section> | ||||
| 			<ui-button @click="updateMeta">%i18n:@save%</ui-button> | ||||
|   | ||||
| @@ -19,6 +19,7 @@ | ||||
| 		</ui-input> | ||||
| 		<ui-textarea v-model="body"> | ||||
| 			<span>%i18n:@console.parameter% (JSON or JSON5)</span> | ||||
| 			<span slot="desc">%i18n:@console.credential-info%</span> | ||||
| 		</ui-textarea> | ||||
| 		<ui-button @click="send" :disabled="sending"> | ||||
| 			<template v-if="sending">%i18n:@console.sending%</template> | ||||
|   | ||||
| @@ -31,13 +31,13 @@ | ||||
| 			<ui-input type="file" @change="onAvatarChange"> | ||||
| 				<span>%i18n:@avatar%</span> | ||||
| 				<span slot="icon"><fa icon="image"/></span> | ||||
| 				<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span> | ||||
| 				<span slot="desc" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span> | ||||
| 			</ui-input> | ||||
|  | ||||
| 			<ui-input type="file" @change="onBannerChange"> | ||||
| 				<span>%i18n:@banner%</span> | ||||
| 				<span slot="icon"><fa icon="image"/></span> | ||||
| 				<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span> | ||||
| 				<span slot="desc" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span> | ||||
| 			</ui-input> | ||||
|  | ||||
| 			<ui-button @click="save(true)">%i18n:@save%</ui-button> | ||||
|   | ||||
| @@ -4,35 +4,35 @@ | ||||
| 		<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill"> | ||||
| 			<span>%i18n:@invitation-code%</span> | ||||
| 			<span slot="prefix"><fa icon="id-card-alt"/></span> | ||||
| 			<p slot="text" v-html="'%i18n:@invitation-info%'.replace('{}', meta.maintainer.url)"></p> | ||||
| 			<p slot="desc" v-html="'%i18n:@invitation-info%'.replace('{}', meta.maintainer.url)"></p> | ||||
| 		</ui-input> | ||||
| 		<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill"> | ||||
| 			<span>%i18n:@username%</span> | ||||
| 			<span slot="prefix">@</span> | ||||
| 			<span slot="suffix">@{{ host }}</span> | ||||
| 			<p slot="text" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner .pulse" fixed-width/> %i18n:@checking%</p> | ||||
| 			<p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@available%</p> | ||||
| 			<p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@unavailable%</p> | ||||
| 			<p slot="text" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@error%</p> | ||||
| 			<p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@invalid-format%</p> | ||||
| 			<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-short%</p> | ||||
| 			<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-long%</p> | ||||
| 			<p slot="desc" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner .pulse" fixed-width/> %i18n:@checking%</p> | ||||
| 			<p slot="desc" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@available%</p> | ||||
| 			<p slot="desc" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@unavailable%</p> | ||||
| 			<p slot="desc" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@error%</p> | ||||
| 			<p slot="desc" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@invalid-format%</p> | ||||
| 			<p slot="desc" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-short%</p> | ||||
| 			<p slot="desc" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-long%</p> | ||||
| 		</ui-input> | ||||
| 		<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill"> | ||||
| 			<span>%i18n:@password%</span> | ||||
| 			<span slot="prefix"><fa icon="lock"/></span> | ||||
| 			<div slot="text"> | ||||
| 				<p slot="text" v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@weak-password%</p> | ||||
| 				<p slot="text" v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@normal-password%</p> | ||||
| 				<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@strong-password%</p> | ||||
| 			<div slot="desc"> | ||||
| 				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@weak-password%</p> | ||||
| 				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@normal-password%</p> | ||||
| 				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@strong-password%</p> | ||||
| 			</div> | ||||
| 		</ui-input> | ||||
| 		<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill"> | ||||
| 			<span>%i18n:@password% (%i18n:@retype%)</span> | ||||
| 			<span slot="prefix"><fa icon="lock"/></span> | ||||
| 			<div slot="text"> | ||||
| 				<p slot="text" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@password-matched%</p> | ||||
| 				<p slot="text" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@password-not-matched%</p> | ||||
| 			<div slot="desc"> | ||||
| 				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@password-matched%</p> | ||||
| 				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@password-not-matched%</p> | ||||
| 			</div> | ||||
| 		</ui-input> | ||||
| 		<div v-if="meta.recaptchaSitekey != null" class="g-recaptcha" :data-sitekey="meta.recaptchaSitekey" style="margin: 16px 0;"></div> | ||||
|   | ||||
| @@ -33,7 +33,7 @@ | ||||
| 		</template> | ||||
| 		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div> | ||||
| 	</div> | ||||
| 	<div class="text"><slot name="text"></slot></div> | ||||
| 	<div class="desc"><slot name="desc"></slot></div> | ||||
| </div> | ||||
| </template> | ||||
|  | ||||
| @@ -321,7 +321,7 @@ root(fill) | ||||
| 			if fill | ||||
| 				padding-right 12px | ||||
|  | ||||
| 	> .text | ||||
| 	> .desc | ||||
| 		margin 6px 0 | ||||
| 		font-size 13px | ||||
|  | ||||
|   | ||||
| @@ -13,7 +13,7 @@ | ||||
| 			@blur="focused = false" | ||||
| 		></textarea> | ||||
| 	</div> | ||||
| 	<div class="text"><slot name="text"></slot></div> | ||||
| 	<div class="desc"><slot name="desc"></slot></div> | ||||
| </div> | ||||
| </template> | ||||
|  | ||||
| @@ -139,7 +139,7 @@ root(fill) | ||||
| 			outline none | ||||
| 			box-shadow none | ||||
|  | ||||
| 	> .text | ||||
| 	> .desc | ||||
| 		margin 6px 0 | ||||
| 		font-size 13px | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo