diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 659c2aca2..5dc466857 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -30,6 +30,7 @@ import Switch from './switch.vue'; import Othello from './othello.vue'; import welcomeTimeline from './welcome-timeline.vue'; import uiInput from './material/input.vue'; +import uiButton from './material/button.vue'; Vue.component('mk-analog-clock', analogClock); Vue.component('mk-menu', menu); @@ -61,3 +62,4 @@ Vue.component('mk-switch', Switch); Vue.component('mk-othello', Othello); Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('ui-input', uiInput); +Vue.component('ui-button', uiButton); diff --git a/src/client/app/common/views/components/material/button.vue b/src/client/app/common/views/components/material/button.vue new file mode 100644 index 000000000..0c768cf4c --- /dev/null +++ b/src/client/app/common/views/components/material/button.vue @@ -0,0 +1,39 @@ +<template> +<div class="ui-button"> + <button> + <slot></slot> + </button> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: { + type: { + type: String, + required: false + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +.ui-button + > button + display block + width 100% + padding 0 + color $theme-color-foreground + font-weight bold + font-size 16px + line-height 44px + background $theme-color + border none + border-radius 6px + outline none + box-shadow none + +</style> diff --git a/src/client/app/common/views/components/material/input.vue b/src/client/app/common/views/components/material/input.vue index 42ff0bb4b..fe6435490 100644 --- a/src/client/app/common/views/components/material/input.vue +++ b/src/client/app/common/views/components/material/input.vue @@ -24,7 +24,7 @@ export default Vue.extend({ } }, mounted() { - this.$refs.label.style.left = this.$refs.prefix.offsetWidth + 'px'; + this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px'; }, methods: { focus() { @@ -38,39 +38,18 @@ export default Vue.extend({ @import '~const.styl' .ui-input - padding-bottom 16px + margin-bottom 32px > .input display flex margin-top 16px - - &:before - content '' - display block - position absolute - bottom 0 - left 0 - right 0 - height 1px - background rgba(#000, 0.42) - - &:after - content '' - display block - position absolute - bottom 0 - left 0 - right 0 - height 2px - background $theme-color - opacity 0 - transform scaleX(0.12) - transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) - will-change border opacity transform + padding 6px 12px + background #f5f5f5 + border-radius 6px > .label position absolute - top 0 + top 6px left 0 pointer-events none transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) @@ -85,6 +64,8 @@ export default Vue.extend({ flex 1 width 100% padding 0 + font inherit + font-weight bold font-size 16px line-height 32px background transparent @@ -110,9 +91,7 @@ export default Vue.extend({ &.focused > .input - &:after - opacity 1 - transform scaleX(1) + background #eee > .label color $theme-color @@ -121,7 +100,7 @@ export default Vue.extend({ &.filled > .input > .label - top -16px + top -20px left 0 !important font-size 12px line-height 20px diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index a6f435943..8ee078d62 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -2,13 +2,11 @@ * Mobile Client */ -import Vue from 'vue'; import VueRouter from 'vue-router'; // Style import './style.styl'; import '../../element.scss'; -import '../../md.scss'; import init from '../init'; diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue index ceb1abb9a..07891fd56 100644 --- a/src/client/app/mobile/views/pages/welcome.vue +++ b/src/client/app/mobile/views/pages/welcome.vue @@ -1,27 +1,23 @@ <template> <div class="welcome"> <div> - <h1><b>Misskey</b>へようこそ</h1> - <p>Twitter風ミニブログSNS、Misskeyへようこそ。共有したいことを投稿したり、タイムラインでみんなの投稿を読むこともできます。<br><a href="/signup">アカウントを作成する</a></p> + <img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey"> <div class="form"> - <p>%fa:lock% ログイン</p> + <form @submit.prevent="onSubmit"> + <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"> + <span>ユーザー名</span> + <span slot="prefix">@</span> + <span slot="suffix">@{{ host }}</span> + </ui-input> + <ui-input v-model="password" type="password" placeholder="パスワード" required> + <span>パスワード</span> + <span slot="prefix">%fa:lock%</span> + </ui-input> + <ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/> + <ui-button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</ui-button> + </form> <div> - <form @submit.prevent="onSubmit"> - <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"> - <span>ユーザー名</span> - <span slot="prefix">@</span> - <span slot="suffix">@{{ host }}</span> - </ui-input> - <ui-input v-model="password" type="password" placeholder="パスワード" required> - <span>パスワード</span> - <span slot="prefix">%fa:lock%</span> - </ui-input> - <ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/> - <button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button> - </form> - <div> - <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a> - </div> + <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a> </div> </div> <div class="tl"> @@ -92,81 +88,44 @@ export default Vue.extend({ <style lang="stylus" scoped> .welcome - background linear-gradient(to bottom, #1e1d65, #bd6659) + background #fff > div padding 16px margin 0 auto max-width 500px - h1 - margin 0 - padding 8px - font-size 1.5em - font-weight normal - color #cacac3 - - & + p - margin 0 0 16px 0 - padding 0 8px 0 8px - color #949fa9 + > img + display block + max-width 200px + margin 0 auto .form margin-bottom 16px - background #fff - border solid 1px rgba(#000, 0.2) - border-radius 8px - overflow hidden - > p - margin 0 - padding 12px 20px - color #555 - background #f5f5f5 - border-bottom solid 1px #ddd + > form + padding 16px - > div - - > form - padding 16px - border-bottom solid 1px #ddd - - input - display block - padding 12px - margin 0 0 16px 0 - width 100% - font-size 1em - color rgba(#000, 0.7) - background #fff - outline none - border solid 1px #ddd - border-radius 4px - - 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) - - > div - padding 16px + 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 background #fff