🎨

locales/en.yml

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

locales/ja.yml

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

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>

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-signin-record each={ rec in history } rec={ rec }/>
-			<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>
 	</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>

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

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' }>
+		<section class="profile" show={ page == 'profile' }>
-			<h1>アカウント</h1>
+			<h1>%i18n:desktop.tags.mk-settings.profile%</h1>
-			<label class="avatar">
+			<mk-profile-setting/>
-				<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>
 
 		<section class="web" show={ page == 'web' }>
 			<h1>デザイン</h1>
-			<a href="/i/customize-home">ホームをカスタマイズ</a>
+			<a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a>
-		</section>
-
-		<section class="web" show={ page == 'web' }>
 		</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
+					margin 32px
-
-					//	& + section
-					//		margin-top 16px
 
 					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
+					label.checkbox
-						display block
+						> input
-						margin 16px 0
+							position absolute
+							top 0
+							left 0
 
-						&:after
+							&:checked + p
-							content ""
+								color $theme-color
-							display block
-							clear both
 
 						> p
-							margin 0 0 8px 0
+							width calc(100% - 32px)
+							margin 0 0 0 32px
 							font-weight bold
-							color #373a3c
 
-						&.checkbox
+							&:last-child
-							> input
+								font-weight normal
-								position absolute
+								color #999
-								top 0
-								left 0
 
-								&:checked + p
+	</style>
-									color $theme-color
+	<script>
+		this.page = 'profile';
 
-							> p
+		this.setPage = page => {
-								width calc(100% - 32px)
+			this.page = page;
-								margin 0 0 0 32px
+		};
-								font-weight bold
+	</script>
+</mk-settings>
 
-								&:last-child
+<mk-profile-setting>
-									font-weight normal
+	<label class="avatar ui from group">
-									color #999
+		<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
+			> .avatar
-						> .general
+				> img
-							> .avatar
+					display inline-block
-								> img
+					vertical-align top
-									display block
+					width 64px
-									float left
+					height 64px
-									width 64px
+					border-radius 4px
-									height 64px
-									border-radius 4px
 
-								> button
+				> button
-									float left
+					margin-left 8px
-									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>
+	<div class="ui info warn"><p>%i18n:desktop.tags.mk-2fa-setting.caution%</p></div>
-	<p><button onclick={ register }>%i18n:desktop.tags.mk-2fa-setting.register%</button></p>
+	<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

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)