From b9ad38d56c5d1d05aff694bd05b08b26391dcb56 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Dec 2017 20:23:58 +0900
Subject: [PATCH] :art:
---
locales/en.yml | 1 +
locales/ja.yml | 1 +
src/web/app/common/tags/authorized-apps.tag | 4 +-
src/web/app/common/tags/signin-history.tag | 120 ++++++++-----
src/web/app/desktop/style.styl | 65 +------
src/web/app/desktop/tags/settings.tag | 178 ++++++++------------
src/web/app/desktop/ui.styl | 119 +++++++++++++
7 files changed, 274 insertions(+), 214 deletions(-)
create mode 100644 src/web/app/desktop/ui.styl
diff --git a/locales/en.yml b/locales/en.yml
index 020fc39497..16f68ab632 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -342,6 +342,7 @@ desktop:
next: "Next post"
mk-settings:
+ profile: "Profile"
security: "Security"
password: "Password"
2fa: "Two-factor authentication"
diff --git a/locales/ja.yml b/locales/ja.yml
index c5996c76b3..f50e50a5ce 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -342,6 +342,7 @@ desktop:
next: "次の投稿"
mk-settings:
+ profile: "プロフィール"
security: "セキュリティ"
password: "パスワード"
2fa: "二段階認証"
diff --git a/src/web/app/common/tags/authorized-apps.tag b/src/web/app/common/tags/authorized-apps.tag
index 0078a18636..3f3714332e 100644
--- a/src/web/app/common/tags/authorized-apps.tag
+++ b/src/web/app/common/tags/authorized-apps.tag
@@ -1,5 +1,7 @@
<mk-authorized-apps>
- <p class="none" if={ !fetching && apps.length == 0 }>%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+ <div class="none ui info" if={ !fetching && apps.length == 0 }>
+ <p>%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+ </div>
<div class="apps" if={ apps.length != 0 }>
<div each={ app in apps }>
<p><b>{ app.name }</b></p>
diff --git a/src/web/app/common/tags/signin-history.tag b/src/web/app/common/tags/signin-history.tag
index 03afd72326..cdd58c4c67 100644
--- a/src/web/app/common/tags/signin-history.tag
+++ b/src/web/app/common/tags/signin-history.tag
@@ -1,55 +1,11 @@
<mk-signin-history>
<div class="records" if={ history.length != 0 }>
- <div each={ history }>
- <mk-time time={ created_at }/>
- <header>
- <virtual if={ success }>%fa:check%</virtual>
- <virtual if={ !success }>%fa:times%</virtual>
- <span class="ip">{ ip }</span>
- </header>
- <pre><code>{ JSON.stringify(headers, null, ' ') }</code></pre>
- </div>
+ <mk-signin-record each={ rec in history } rec={ rec }/>
</div>
<style>
:scope
display block
- > .records
- > div
- padding 16px 0 0 0
- border-bottom solid 1px #eee
-
- > header
-
- > [data-fa]
- margin-right 8px
-
- &.check
- color #0fda82
-
- &.times
- color #ff3100
-
- > .ip
- display inline-block
- color #444
- background #f8f8f8
-
- > mk-time
- position absolute
- top 16px
- right 0
- color #777
-
- > pre
- overflow auto
- max-height 100px
-
- > code
- white-space pre-wrap
- word-break break-all
- color #4a535a
-
</style>
<script>
this.mixin('i');
@@ -84,3 +40,77 @@
};
</script>
</mk-signin-history>
+
+<mk-signin-record>
+ <header onclick={ toggle }>
+ <virtual if={ rec.success }>%fa:check%</virtual>
+ <virtual if={ !rec.success }>%fa:times%</virtual>
+ <span class="ip">{ rec.ip }</span>
+ <mk-time time={ rec.created_at }/>
+ </header>
+ <pre ref="headers" class="json" show={ show }>{ JSON.stringify(rec.headers, null, 2) }</pre>
+
+ <style>
+ :scope
+ display block
+ border-bottom solid 1px #eee
+
+ > header
+ display flex
+ padding 8px 0
+ line-height 32px
+ cursor pointer
+
+ > [data-fa]
+ margin-right 8px
+ text-align left
+
+ &.check
+ color #0fda82
+
+ &.times
+ color #ff3100
+
+ > .ip
+ display inline-block
+ text-align left
+ padding 8px
+ line-height 16px
+ font-family monospace
+ font-size 14px
+ color #444
+ background #f8f8f8
+ border-radius 4px
+
+ > mk-time
+ margin-left auto
+ text-align right
+ color #777
+
+ > pre
+ overflow auto
+ margin 0 0 16px 0
+ max-height 100px
+ white-space pre-wrap
+ word-break break-all
+ color #4a535a
+
+ </style>
+
+ <script>
+ import hljs from 'highlight.js';
+
+ this.rec = this.opts.rec;
+ this.show = false;
+
+ this.on('mount', () => {
+ hljs.highlightBlock(this.refs.headers);
+ });
+
+ this.toggle = () => {
+ this.update({
+ show: !this.show
+ });
+ };
+ </script>
+</mk-signin-record>
diff --git a/src/web/app/desktop/style.styl b/src/web/app/desktop/style.styl
index d99e5df2b4..c893e2ed67 100644
--- a/src/web/app/desktop/style.styl
+++ b/src/web/app/desktop/style.styl
@@ -2,6 +2,8 @@
@import "../reset"
@import "../../../../node_modules/cropperjs/dist/cropper.css"
+@import "./ui"
+
*::input-placeholder
color #D8CBC5
@@ -47,66 +49,3 @@ html
#wait
right auto
left 15px
-
-button
- font-family sans-serif
-
- *
- pointer-events none
-
- &.style-normal
- &.style-primary
- display block
- cursor pointer
- padding 0 16px
- margin 0
- min-width 100px
- height 40px
- font-size 1em
- outline none
- border-radius 4px
-
- &:focus
- &:after
- content ""
- pointer-events none
- position absolute
- top -5px
- right -5px
- bottom -5px
- left -5px
- border 2px solid rgba($theme-color, 0.3)
- border-radius 8px
-
- &:disabled
- opacity 0.7
- cursor default
-
- &.style-normal
- color #888
- background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
- border solid 1px #e2e2e2
-
- &:hover
- background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
- border-color #dcdcdc
-
- &:active
- background #ececec
- border-color #dcdcdc
-
- &.style-primary
- color $theme-color-foreground
- background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
- border solid 1px lighten($theme-color, 15%)
-
- &:not(:disabled)
- font-weight bold
-
- &:hover:not(:disabled)
- background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
- border-color $theme-color
-
- &:active:not(:disabled)
- background $theme-color
- border-color $theme-color
diff --git a/src/web/app/desktop/tags/settings.tag b/src/web/app/desktop/tags/settings.tag
index 2c38f13523..f44cef8503 100644
--- a/src/web/app/desktop/tags/settings.tag
+++ b/src/web/app/desktop/tags/settings.tag
@@ -1,47 +1,23 @@
<mk-settings>
<div class="nav">
- <p class={ active: page == 'account' } onmousedown={ setPage.bind(null, 'account') }>%fa:user .fw%アカウント</p>
+ <p class={ active: page == 'profile' } onmousedown={ setPage.bind(null, 'profile') }>%fa:user .fw%%i18n:desktop.tags.mk-settings.profile%</p>
<p class={ active: page == 'web' } onmousedown={ setPage.bind(null, 'web') }>%fa:desktop .fw%Web</p>
<p class={ active: page == 'notification' } onmousedown={ setPage.bind(null, 'notification') }>%fa:R bell .fw%通知</p>
<p class={ active: page == 'drive' } onmousedown={ setPage.bind(null, 'drive') }>%fa:cloud .fw%ドライブ</p>
<p class={ active: page == 'apps' } onmousedown={ setPage.bind(null, 'apps') }>%fa:puzzle-piece .fw%アプリ</p>
<p class={ active: page == 'twitter' } onmousedown={ setPage.bind(null, 'twitter') }>%fa:B twitter .fw%Twitter</p>
- <p class={ active: page == 'signin' } onmousedown={ setPage.bind(null, 'signin') }>%fa:sign-in-alt .fw%ログイン履歴</p>
<p class={ active: page == 'security' } onmousedown={ setPage.bind(null, 'security') }>%fa:unlock-alt .fw%%i18n:desktop.tags.mk-settings.security%</p>
<p class={ active: page == 'api' } onmousedown={ setPage.bind(null, 'api') }>%fa:key .fw%API</p>
</div>
<div class="pages">
- <section class="account" show={ page == 'account' }>
- <h1>アカウント</h1>
- <label class="avatar">
- <p>アバター</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
- <button class="style-normal" onclick={ avatar }>画像を選択</button>
- </label>
- <label>
- <p>名前</p>
- <input ref="accountName" type="text" value={ I.name }/>
- </label>
- <label>
- <p>場所</p>
- <input ref="accountLocation" type="text" value={ I.profile.location }/>
- </label>
- <label>
- <p>自己紹介</p>
- <textarea ref="accountDescription">{ I.description }</textarea>
- </label>
- <label>
- <p>誕生日</p>
- <input ref="accountBirthday" type="date" value={ I.profile.birthday }/>
- </label>
- <button class="style-primary" onclick={ updateAccount }>保存</button>
+ <section class="profile" show={ page == 'profile' }>
+ <h1>%i18n:desktop.tags.mk-settings.profile%</h1>
+ <mk-profile-setting/>
</section>
<section class="web" show={ page == 'web' }>
<h1>デザイン</h1>
- <a href="/i/customize-home">ホームをカスタマイズ</a>
- </section>
-
- <section class="web" show={ page == 'web' }>
+ <a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a>
</section>
<section class="apps" show={ page == 'apps' }>
@@ -54,11 +30,6 @@
<mk-twitter-setting/>
</section>
- <section class="signin" show={ page == 'signin' }>
- <h1>ログイン履歴</h1>
- <mk-signin-history/>
- </section>
-
<section class="password" show={ page == 'security' }>
<h1>%i18n:desktop.tags.mk-settings.password%</h1>
<mk-password-setting/>
@@ -69,6 +40,11 @@
<mk-2fa-setting/>
</section>
+ <section class="signin" show={ page == 'security' }>
+ <h1>サインイン履歴</h1>
+ <mk-signin-history/>
+ </section>
+
<section class="api" show={ page == 'api' }>
<h1>API</h1>
<mk-api-info/>
@@ -80,25 +56,6 @@
width 100%
height 100%
- input:not([type])
- input[type='text']
- input[type='password']
- input[type='email']
- input[type='date']
- textarea
- padding 8px
- width 100%
- font-size 16px
- color #55595c
- border solid 1px #dadada
- border-radius 4px
-
- &:hover
- border-color #aeaeae
-
- &:focus
- border-color #aeaeae
-
> .nav
flex 0 0 200px
width 100%
@@ -133,64 +90,80 @@
overflow auto
> section
- padding 32px
-
- // & + section
- // margin-top 16px
+ margin 32px
h1
display block
- margin 0
+ margin 0 0 1em 0
padding 0 0 8px 0
font-size 1em
color #555
border-bottom solid 1px #eee
- label
- display block
- margin 16px 0
+ label.checkbox
+ > input
+ position absolute
+ top 0
+ left 0
- &:after
- content ""
- display block
- clear both
+ &:checked + p
+ color $theme-color
> p
- margin 0 0 8px 0
+ width calc(100% - 32px)
+ margin 0 0 0 32px
font-weight bold
- color #373a3c
- &.checkbox
- > input
- position absolute
- top 0
- left 0
+ &:last-child
+ font-weight normal
+ color #999
- &:checked + p
- color $theme-color
+ </style>
+ <script>
+ this.page = 'profile';
- > p
- width calc(100% - 32px)
- margin 0 0 0 32px
- font-weight bold
+ this.setPage = page => {
+ this.page = page;
+ };
+ </script>
+</mk-settings>
- &:last-child
- font-weight normal
- color #999
+<mk-profile-setting>
+ <label class="avatar ui from group">
+ <p>アバター</p><img class="avatar" src={ I.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+ <button class="ui" onclick={ avatar }>画像を選択</button>
+ </label>
+ <label class="ui from group">
+ <p>名前</p>
+ <input ref="accountName" type="text" value={ I.name } class="ui"/>
+ </label>
+ <label class="ui from group">
+ <p>場所</p>
+ <input ref="accountLocation" type="text" value={ I.profile.location } class="ui"/>
+ </label>
+ <label class="ui from group">
+ <p>自己紹介</p>
+ <textarea ref="accountDescription" class="ui">{ I.description }</textarea>
+ </label>
+ <label class="ui from group">
+ <p>誕生日</p>
+ <input ref="accountBirthday" type="date" value={ I.profile.birthday } class="ui"/>
+ </label>
+ <button class="ui primary" onclick={ updateAccount }>保存</button>
+ <style>
+ :scope
+ display block
- &.account
- > .general
- > .avatar
- > img
- display block
- float left
- width 64px
- height 64px
- border-radius 4px
+ > .avatar
+ > img
+ display inline-block
+ vertical-align top
+ width 64px
+ height 64px
+ border-radius 4px
- > button
- float left
- margin-left 8px
+ > button
+ margin-left 8px
</style>
<script>
@@ -200,12 +173,6 @@
this.mixin('i');
this.mixin('api');
- this.page = 'account';
-
- this.setPage = page => {
- this.page = page;
- };
-
this.avatar = () => {
updateAvatar(this.I);
};
@@ -221,7 +188,7 @@
});
};
</script>
-</mk-settings>
+</mk-profile-setting>
<mk-api-info>
<p>Token:<code>{ I.token }</code></p>
@@ -254,7 +221,7 @@
</mk-api-info>
<mk-password-setting>
- <button onclick={ reset }>%i18n:desktop.tags.mk-password-setting.reset%</button>
+ <button onclick={ reset } class="ui primary">%i18n:desktop.tags.mk-password-setting.reset%</button>
<style>
:scope
display block
@@ -293,17 +260,18 @@
<mk-2fa-setting>
<p>%i18n:desktop.tags.mk-2fa-setting.intro%</p>
- <p>%i18n:desktop.tags.mk-2fa-setting.caution%</p>
- <p><button onclick={ register }>%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+ <div class="ui info warn"><p>%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
+ <p if={ !data }><button onclick={ register } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
<div if={ data }>
<ol>
<li>%i18n:desktop.tags.mk-2fa-setting.authenticator% <a href="https://support.google.com/accounts/answer/1066447" target="_blank">%i18n:desktop.tags.mk-2fa-setting.howtoinstall%</a></li>
<li>%i18n:desktop.tags.mk-2fa-setting.scan%<br><img src={ data.qr }></li>
<li>%i18n:desktop.tags.mk-2fa-setting.done%<br>
- <input type="number" ref="token"><button onclick={ submit }>%i18n:desktop.tags.mk-2fa-setting.submit%</button>
+ <input type="number" ref="token" class="ui">
+ <button onclick={ submit } class="ui primary">%i18n:desktop.tags.mk-2fa-setting.submit%</button>
</li>
- <li>%i18n:desktop.tags.mk-2fa-setting.info%</li>
</ol>
+ <div class="ui info"><p>%i18n:desktop.tags.mk-2fa-setting.info%</p></div>
</div>
<style>
:scope
diff --git a/src/web/app/desktop/ui.styl b/src/web/app/desktop/ui.styl
new file mode 100644
index 0000000000..a98bfb4196
--- /dev/null
+++ b/src/web/app/desktop/ui.styl
@@ -0,0 +1,119 @@
+@import "../app"
+
+button
+ font-family sans-serif
+
+ *
+ pointer-events none
+
+button.ui
+.button.ui
+ display inline-block
+ cursor pointer
+ padding 0 14px
+ margin 0
+ min-width 100px
+ line-height 38px
+ font-size 14px
+ color #888
+ text-decoration none
+ background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+ border solid 1px #e2e2e2
+ border-radius 4px
+ outline none
+
+ &:focus
+ &:after
+ content ""
+ pointer-events none
+ position absolute
+ top -5px
+ right -5px
+ bottom -5px
+ left -5px
+ border 2px solid rgba($theme-color, 0.3)
+ border-radius 8px
+
+ &:disabled
+ opacity 0.7
+ cursor default
+
+ &:hover
+ background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+ border-color #dcdcdc
+
+ &:active
+ background #ececec
+ border-color #dcdcdc
+
+ &.primary
+ color $theme-color-foreground
+ background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+ border solid 1px lighten($theme-color, 15%)
+
+ &:not(:disabled)
+ font-weight bold
+
+ &:hover:not(:disabled)
+ background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+ border-color $theme-color
+
+ &:active:not(:disabled)
+ background $theme-color
+ border-color $theme-color
+
+input:not([type]).ui
+input[type='text'].ui
+input[type='password'].ui
+input[type='email'].ui
+input[type='date'].ui
+input[type='number'].ui
+textarea.ui
+ display block
+ padding 10px
+ width 100%
+ height 40px
+ font-family sans-serif
+ font-size 16px
+ color #55595c
+ border solid 1px #dadada
+ border-radius 4px
+
+ &:hover
+ border-color #b0b0b0
+
+ &:focus
+ border-color $theme-color
+
+textarea.ui
+ min-width 100%
+ max-width 100%
+ min-height 64px
+
+.ui.info
+ display block
+ margin 1em 0
+ padding 0 1em
+ font-size 90%
+ color rgba(#000, 0.87)
+ background #f8f8f9
+ border solid 1px rgba(34, 36, 38, 0.22)
+ border-radius 4px
+
+ > p
+ opacity 0.8
+
+ &.warn
+ color #573a08
+ background #FFFAF3
+ border-color #C9BA9B
+
+.ui.from.group
+ display block
+ margin 16px 0
+
+ > p:first-child
+ margin 0 0 6px 0
+ font-size 90%
+ font-weight bold
+ color rgba(#373a3c, 0.9)