🎨
This commit is contained in:
syuilo
parent
e686e44d4d
commit
b9ad38d56c
7 changed files with 274 additions and 214 deletions
|
|
@ -342,6 +342,7 @@ desktop:
|
|||
next: "Next post"
|
||||
|
||||
mk-settings:
|
||||
profile: "Profile"
|
||||
security: "Security"
|
||||
password: "Password"
|
||||
2fa: "Two-factor authentication"
|
||||
|
|
|
|||
|
|
@ -342,6 +342,7 @@ desktop:
|
|||
next: "次の投稿"
|
||||
|
||||
mk-settings:
|
||||
profile: "プロフィール"
|
||||
security: "セキュリティ"
|
||||
password: "パスワード"
|
||||
2fa: "二段階認証"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
119
src/web/app/desktop/ui.styl
Normal file
119
src/web/app/desktop/ui.styl
Normal file
|
|
@ -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)
|
||||
Loading…
Add table
Add a link
Reference in a new issue