Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨

Browse Source
This commit is contained in:
syuilo 2017-12-09 20:23:58 +09:00
parent e686e44d4d
commit b9ad38d56c
7 changed files with 274 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en.yml
View File

@ -342,6 +342,7 @@ desktop:
next: "Next post"
mk-settings:
profile: "Profile"
security: "Security"
password: "Password"
2fa: "Two-factor authentication"

1
locales/ja.yml
View File

@ -342,6 +342,7 @@ desktop:
next: "次の投稿"
mk-settings:
profile: "プロフィール"
security: "セキュリティ"
password: "パスワード"
2fa: "二段階認証"

4
src/web/app/common/tags/authorized-apps.tag
View File

@ -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>

120
src/web/app/common/tags/signin-history.tag
View File

@ -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>

65
src/web/app/desktop/style.styl
View File

@ -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

178
src/web/app/desktop/tags/settings.tag
View File

@ -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
View 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)