✌️

CHANGELOG.md

@@ -6,6 +6,8 @@ unreleased
 ----------
 * 通信の最適化
   * これで例えばサーバー情報ウィジェットを5000兆個設置しても利用するコネクションは一つだけになりウィジェットを1つ設置したときと(ネットワーク的な)負荷は変わらなくなる
+* デザインの調整
+* ユーザビリティの向上
 
 3040 (2017/11/12)
 -----------------

src/web/app/desktop/tags/home.tag

@@ -1,5 +1,7 @@
 <mk-home data-customize={ opts.customize }>
 	<div class="customize" if={ opts.customize }>
+		<a href="/"><i class="fa fa-check"></i>完了</a>
+		<div>
 			<div class="adder">
 				<p>ウィジェットを追加:</p>
 				<select ref="widgetSelector">
@@ -24,12 +26,11 @@
 					<option value="tips">ヒント</option>
 				</select>
 				<button onclick={ addWidget }>追加</button>
-			<br>
-			<p>Tip: 一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>
 			</div>
 			<div class="trash">
 				<div ref="trash"></div>
-			<p><b>ゴミ箱</b><br>(ここにウィジェットをドロップすると削除できます)</p>
+				<p>ゴミ箱</p>
+			</div>
 		</div>
 	</div>
 	<div class="main">
@@ -46,6 +47,7 @@
 			display block
 
 			&[data-customize]
+				padding-top 48px
 				background-image url('/assets/desktop/grid.svg')
 
 				> .main > main > *:not(.maintop)
@@ -59,22 +61,50 @@
 					display none
 
 			> .customize
+				position fixed
+				z-index 1000
+				top 0
+				left 0
+				width 100%
+				height 48px
+				background #f7f7f7
+				box-shadow 0 1px 1px rgba(0, 0, 0, 0.075)
+
+				> a
+					display block
+					position absolute
+					z-index 1001
+					top 0
+					right 0
+					padding 0 16px
+					line-height 48px
+					text-decoration none
+					color $theme-color-foreground
+					background $theme-color
+					transition background 0.1s ease
+
+					&:hover
+						background lighten($theme-color, 10%)
+
+					&:active
+						background darken($theme-color, 10%)
+						transition background 0s ease
+
+					> i
+						margin-right 8px
+
+				> div
 					display flex
 					margin 0 auto
 					max-width 1200px - 32px
-				background #fff
-				border-radius 0 0 16px 16px
-				border solid 1px #ddd
-				border-top none
 
 					> div
 						width 50%
 
 						&.adder
-						padding 16px
-
 							> p
 								display inline
+								line-height 48px
 
 						&.trash
 							border-left solid 1px #ddd
@@ -88,6 +118,7 @@
 								top 0
 								left 0
 								width 100%
+								line-height 48px
 								margin 0
 								text-align center
 								pointer-events none
@@ -152,6 +183,7 @@
 	<script>
 		import uuid from 'uuid';
 		import Sortable from 'sortablejs';
+		import dialog from '../scripts/dialog';
 
 		this.mixin('i');
 		this.mixin('api');
@@ -174,6 +206,15 @@
 			});
 
 			if (this.opts.customize) {
+				dialog('<i class="fa fa-info-circle"></i>カスタマイズのヒント',
+					'<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' +
+					'<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' +
+					'<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' +
+					'<p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>',
+				[{
+					text: 'Got it!'
+				}]);
+
 				const sortableOption = {
 					group: 'kyoppie',
 					animation: 150,

src/web/app/desktop/tags/pages/home-customize.tag

@@ -1,7 +1,5 @@
 <mk-home-customize-page>
-	<mk-ui ref="ui" page="timeline">
+	<mk-home ref="home" mode="timeline" customize={ true }/>
-		<mk-home ref="home" mode={ parent.opts.mode } customize={ true }/>
-	</mk-ui>
 	<style>
 		:scope
 			display block