✌️

CHANGELOG.md

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

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

@@ -1,35 +1,36 @@
 <mk-home data-customize={ opts.customize }>
 	<div class="customize" if={ opts.customize }>
-		<div class="adder">
+		<a href="/"><i class="fa fa-check"></i>完了</a>
-			<p>ウィジェットを追加:</p>
+		<div>
-			<select ref="widgetSelector">
+			<div class="adder">
-				<option value="profile">プロフィール</option>
+				<p>ウィジェットを追加:</p>
-				<option value="calendar">カレンダー</option>
+				<select ref="widgetSelector">
-				<option value="timemachine">カレンダー(タイムマシン)</option>
+					<option value="profile">プロフィール</option>
-				<option value="activity">アクティビティ</option>
+					<option value="calendar">カレンダー</option>
-				<option value="rss-reader">RSSリーダー</option>
+					<option value="timemachine">カレンダー(タイムマシン)</option>
-				<option value="trends">トレンド</option>
+					<option value="activity">アクティビティ</option>
-				<option value="photo-stream">フォトストリーム</option>
+					<option value="rss-reader">RSSリーダー</option>
-				<option value="slideshow">スライドショー</option>
+					<option value="trends">トレンド</option>
-				<option value="version">バージョン</option>
+					<option value="photo-stream">フォトストリーム</option>
-				<option value="broadcast">ブロードキャスト</option>
+					<option value="slideshow">スライドショー</option>
-				<option value="notifications">通知</option>
+					<option value="version">バージョン</option>
-				<option value="user-recommendation">おすすめユーザー</option>
+					<option value="broadcast">ブロードキャスト</option>
-				<option value="recommended-polls">投票</option>
+					<option value="notifications">通知</option>
-				<option value="post-form">投稿フォーム</option>
+					<option value="user-recommendation">おすすめユーザー</option>
-				<option value="channel">チャンネル</option>
+					<option value="recommended-polls">投票</option>
-				<option value="server">サーバー情報</option>
+					<option value="post-form">投稿フォーム</option>
-				<option value="donation">寄付のお願い</option>
+					<option value="channel">チャンネル</option>
-				<option value="nav">ナビゲーション</option>
+					<option value="server">サーバー情報</option>
-				<option value="tips">ヒント</option>
+					<option value="donation">寄付のお願い</option>
-			</select>
+					<option value="nav">ナビゲーション</option>
-			<button onclick={ addWidget }>追加</button>
+					<option value="tips">ヒント</option>
-			<br>
+				</select>
-			<p>Tip: 一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>
+				<button onclick={ addWidget }>追加</button>
-		</div>
+			</div>
-		<div class="trash">
+			<div class="trash">
-			<div ref="trash"></div>
+				<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,38 +61,67 @@
 					display none
 
 			> .customize
-				display flex
+				position fixed
-				margin 0 auto
+				z-index 1000
-				max-width 1200px - 32px
+				top 0
-				background #fff
+				left 0
-				border-radius 0 0 16px 16px
+				width 100%
-				border solid 1px #ddd
+				height 48px
-				border-top none
+				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
-					width 50%
+					display flex
+					margin 0 auto
+					max-width 1200px - 32px
 
-					&.adder
+					> div
-						padding 16px
+						width 50%
 
-						> p
+						&.adder
-							display inline
+							> p
+								display inline
+								line-height 48px
 
-					&.trash
+						&.trash
-						border-left solid 1px #ddd
+							border-left solid 1px #ddd
 
-						> div
+							> div
-							width 100%
+								width 100%
-							height 100%
+								height 100%
 
-						> p
+							> p
-							position absolute
+								position absolute
-							top 0
+								top 0
-							left 0
+								left 0
-							width 100%
+								width 100%
-							margin 0
+								line-height 48px
-							text-align center
+								margin 0
-							pointer-events none
+								text-align center
+								pointer-events none
 
 			> .main
 				display flex
@@ -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