This commit is contained in:
syuilo 2017-11-13 04:34:30 +09:00
parent 78b9bef0a4
commit 3be0538c75
3 changed files with 99 additions and 58 deletions

View File

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

View File

@ -1,35 +1,36 @@
<mk-home data-customize={ opts.customize }> <mk-home data-customize={ opts.customize }>
<div class="customize" if={ 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> </div>
<div class="main"> <div class="main">
@ -46,6 +47,7 @@
display block display block
&[data-customize] &[data-customize]
padding-top 48px
background-image url('/assets/desktop/grid.svg') background-image url('/assets/desktop/grid.svg')
> .main > main > *:not(.maintop) > .main > main > *:not(.maintop)
@ -59,38 +61,67 @@
display none display none
> .customize > .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 > 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 > .main
display flex display flex
@ -152,6 +183,7 @@
<script> <script>
import uuid from 'uuid'; import uuid from 'uuid';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import dialog from '../scripts/dialog';
this.mixin('i'); this.mixin('i');
this.mixin('api'); this.mixin('api');
@ -174,6 +206,15 @@
}); });
if (this.opts.customize) { 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 = { const sortableOption = {
group: 'kyoppie', group: 'kyoppie',
animation: 150, animation: 150,

View File

@ -1,7 +1,5 @@
<mk-home-customize-page> <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> <style>
:scope :scope
display block display block