161sh/iceshrimp-161sh
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/iceshrimp-161sh.git synced 2024-11-25 13:39:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

[Client] Improve usability & Refactoring

Browse Source
This commit is contained in:
syuilo 2018-11-06 15:08:22 +09:00
parent 0f65a6a077
commit 072da4b123
8 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/ja-JP.yml
View File

@ -947,6 +947,7 @@ common/views/components/api-settings.vue:
title: 'APIコンソール' title: 'APIコンソール'
endpoint: 'エンドポイント' endpoint: 'エンドポイント'
parameter: 'パラメータ' parameter: 'パラメータ'
credential-info: "「i」パラメータは自動で付与されます。"
send: '送信' send: '送信'
sending: '応答待ち' sending: '応答待ち'
response: '結果' response: '結果'

4
src/client/app/admin/views/emoji.vue
View File

@ -6,11 +6,11 @@
<ui-horizon-group inputs> <ui-horizon-group inputs>
<ui-input v-model="name"> <ui-input v-model="name">
<span>%i18n:@add-emoji.name%</span> <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>
<ui-input v-model="aliases"> <ui-input v-model="aliases">
<span>%i18n:@add-emoji.aliases%</span> <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-input>
</ui-horizon-group> </ui-horizon-group>
<ui-input v-model="url"> <ui-input v-model="url">

4
src/client/app/admin/views/instance.vue
View File

@ -13,8 +13,8 @@
<section class="fit-bottom"> <section class="fit-bottom">
<header><fa icon="cloud"/> %i18n:@drive-config%</header> <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-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="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="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="desc">%i18n:@mb%</span><span slot="suffix">MB</span></ui-input>
</section> </section>
<section> <section>
<ui-button @click="updateMeta">%i18n:@save%</ui-button> <ui-button @click="updateMeta">%i18n:@save%</ui-button>

1
src/client/app/common/views/components/api-settings.vue
View File

@ -19,6 +19,7 @@
</ui-input> </ui-input>
<ui-textarea v-model="body"> <ui-textarea v-model="body">
<span>%i18n:@console.parameter% (JSON or JSON5)</span> <span>%i18n:@console.parameter% (JSON or JSON5)</span>
<span slot="desc">%i18n:@console.credential-info%</span>
</ui-textarea> </ui-textarea>
<ui-button @click="send" :disabled="sending"> <ui-button @click="send" :disabled="sending">
<template v-if="sending">%i18n:@console.sending%</template> <template v-if="sending">%i18n:@console.sending%</template>

4
src/client/app/common/views/components/profile-editor.vue
View File

@ -31,13 +31,13 @@
<ui-input type="file" @change="onAvatarChange"> <ui-input type="file" @change="onAvatarChange">
<span>%i18n:@avatar%</span> <span>%i18n:@avatar%</span>
<span slot="icon"><fa icon="image"/></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>
<ui-input type="file" @change="onBannerChange"> <ui-input type="file" @change="onBannerChange">
<span>%i18n:@banner%</span> <span>%i18n:@banner%</span>
<span slot="icon"><fa icon="image"/></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-input>
<ui-button @click="save(true)">%i18n:@save%</ui-button> <ui-button @click="save(true)">%i18n:@save%</ui-button>

30
src/client/app/common/views/components/signup.vue
View File

@ -4,35 +4,35 @@
<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill"> <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>%i18n:@invitation-code%</span>
<span slot="prefix"><fa icon="id-card-alt"/></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>
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill"> <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>%i18n:@username%</span>
<span slot="prefix">@</span> <span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</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="desc" 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="desc" 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="desc" 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="desc" 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="desc" 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="desc" 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 == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-long%</p>
</ui-input> </ui-input>
<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill"> <ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill">
<span>%i18n:@password%</span> <span>%i18n:@password%</span>
<span slot="prefix"><fa icon="lock"/></span> <span slot="prefix"><fa icon="lock"/></span>
<div slot="text"> <div slot="desc">
<p slot="text" v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@weak-password%</p> <p 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 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> <p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@strong-password%</p>
</div> </div>
</ui-input> </ui-input>
<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill"> <ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill">
<span>%i18n:@password% (%i18n:@retype%)</span> <span>%i18n:@password% (%i18n:@retype%)</span>
<span slot="prefix"><fa icon="lock"/></span> <span slot="prefix"><fa icon="lock"/></span>
<div slot="text"> <div slot="desc">
<p slot="text" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@password-matched%</p> <p 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> <p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@password-not-matched%</p>
</div> </div>
</ui-input> </ui-input>
<div v-if="meta.recaptchaSitekey != null" class="g-recaptcha" :data-sitekey="meta.recaptchaSitekey" style="margin: 16px 0;"></div> <div v-if="meta.recaptchaSitekey != null" class="g-recaptcha" :data-sitekey="meta.recaptchaSitekey" style="margin: 16px 0;"></div>

4
src/client/app/common/views/components/ui/input.vue
View File

@ -33,7 +33,7 @@
</template> </template>
<div class="suffix" ref="suffix"><slot name="suffix"></slot></div> <div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
</div> </div>
<div class="text"><slot name="text"></slot></div> <div class="desc"><slot name="desc"></slot></div>
</div> </div>
</template> </template>
@ -321,7 +321,7 @@ root(fill)
if fill if fill
padding-right 12px padding-right 12px
> .text > .desc
margin 6px 0 margin 6px 0
font-size 13px font-size 13px

4
src/client/app/common/views/components/ui/textarea.vue
View File

@ -13,7 +13,7 @@
@blur="focused = false" @blur="focused = false"
></textarea> ></textarea>
</div> </div>
<div class="text"><slot name="text"></slot></div> <div class="desc"><slot name="desc"></slot></div>
</div> </div>
</template> </template>
@ -139,7 +139,7 @@ root(fill)
outline none outline none
box-shadow none box-shadow none
> .text > .desc
margin 6px 0 margin 6px 0
font-size 13px font-size 13px