From a2517d1a1db5ba9ddd47e59f9ca74b9e64bcf968 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Mon, 25 Feb 2019 20:08:56 +0900 Subject: [PATCH] :art: --- .../app/common/views/components/dialog.vue | 31 +++++++++------- .../app/common/views/components/signin.vue | 6 ++-- src/client/app/mobile/views/pages/welcome.vue | 36 ++++++------------- 3 files changed, 32 insertions(+), 41 deletions(-) diff --git a/src/client/app/common/views/components/dialog.vue b/src/client/app/common/views/components/dialog.vue index a0b3baf161..2dbe848d7c 100644 --- a/src/client/app/common/views/components/dialog.vue +++ b/src/client/app/common/views/components/dialog.vue @@ -2,18 +2,23 @@ <div class="felqjxyj" :class="{ splash }"> <div class="bg" ref="bg" @click="onBgClick"></div> <div class="main" ref="main"> - <div class="icon" v-if="!input && !select && !user" :class="type"><fa :icon="icon"/></div> - <header v-if="title" v-html="title"></header> - <div class="body" v-if="text" v-html="text"></div> - <ui-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></ui-input> - <ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></ui-input> - <ui-select v-if="select" v-model="selectedValue"> - <option v-for="item in select.items" :value="item.value">{{ item.text }}</option> - </ui-select> - <ui-horizon-group no-grow class="buttons fit-bottom" v-if="!splash"> - <ui-button @click="ok" primary :autofocus="!input && !select && !user">OK</ui-button> - <ui-button @click="cancel" v-if="showCancelButton || input || select || user">Cancel</ui-button> - </ui-horizon-group> + <template v-if="type == 'signin'"> + <mk-signin/> + </template> + <template v-else> + <div class="icon" v-if="!input && !select && !user" :class="type"><fa :icon="icon"/></div> + <header v-if="title" v-html="title"></header> + <div class="body" v-if="text" v-html="text"></div> + <ui-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></ui-input> + <ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></ui-input> + <ui-select v-if="select" v-model="selectedValue"> + <option v-for="item in select.items" :value="item.value">{{ item.text }}</option> + </ui-select> + <ui-horizon-group no-grow class="buttons fit-bottom" v-if="!splash"> + <ui-button @click="ok" primary :autofocus="!input && !select && !user">{{ $t('@.ok') }}</ui-button> + <ui-button @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('@.cancel') }}</ui-button> + </ui-horizon-group> + </template> </div> </div> </template> @@ -23,8 +28,10 @@ import Vue from 'vue'; import anime from 'animejs'; import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons'; import parseAcct from "../../../../../misc/acct/parse"; +import i18n from '../../../i18n'; export default Vue.extend({ + i18n: i18n(), props: { type: { type: String, diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue index 2905bb1da1..e7513a501b 100644 --- a/src/client/app/common/views/components/signin.vue +++ b/src/client/app/common/views/components/signin.vue @@ -1,16 +1,16 @@ <template> <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit"> <div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div> - <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange" styl="fill"> + <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange"> <span>{{ $t('username') }}</span> <template #prefix>@</template> <template #suffix>@{{ host }}</template> </ui-input> - <ui-input v-model="password" type="password" :with-password-toggle="true" required styl="fill"> + <ui-input v-model="password" type="password" :with-password-toggle="true" required> <span>{{ $t('password') }}</span> <template #prefix><fa icon="lock"/></template> </ui-input> - <ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill"> + <ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required> <span>{{ $t('@.2fa') }}</span> <template #prefix><fa icon="gavel"/></template> </ui-input> diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue index cf5ac5f072..1f1847d728 100644 --- a/src/client/app/mobile/views/pages/welcome.vue +++ b/src/client/app/mobile/views/pages/welcome.vue @@ -10,8 +10,8 @@ <p v-html="description || this.$t('@.about')"></p> <router-link class="signup" to="/signup">{{ $t('signup') }}</router-link> </div> - <div class="login"> - <mk-signin :with-avatar="false"/> + <div class="signin"> + <a href="/signin" @click.prevent="signin()">{{ $t('signin') }}</a> </div> <div class="tl"> <mk-welcome-timeline/> @@ -120,6 +120,13 @@ export default Vue.extend({ const files = concat(notes.map((n: any): any[] => n.files)); this.photos = files.filter(f => image.includes(f.type)).slice(0, 6); }); + }, + methods: { + signin() { + this.$root.dialog({ + type: 'signin' + }); + } } }); </script> @@ -185,32 +192,9 @@ export default Vue.extend({ > .signup font-weight bold - > .login + > .signin margin 16px 0 - > form - - button - display block - width 100% - padding 10px - margin 0 - color #333 - font-size 1em - text-align center - text-decoration none - text-shadow 0 1px 0 rgba(255, 255, 255, 0.9) - background-image linear-gradient(#fafafa, #eaeaea) - border 1px solid #ddd - border-bottom-color #cecece - border-radius 4px - - &:active - background-color #767676 - background-image none - border-color #444 - box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2) - > .tl margin 16px 0