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,5 +1,7 @@
<mk-home data-customize={ opts.customize }> <mk-home data-customize={ opts.customize }>
<div class="customize" if={ opts.customize }> <div class="customize" if={ opts.customize }>
<a href="/"><i class="fa fa-check"></i>完了</a>
<div>
<div class="adder"> <div class="adder">
<p>ウィジェットを追加:</p> <p>ウィジェットを追加:</p>
<select ref="widgetSelector"> <select ref="widgetSelector">
@ -24,12 +26,11 @@
<option value="tips">ヒント</option> <option value="tips">ヒント</option>
</select> </select>
<button onclick={ addWidget }>追加</button> <button onclick={ addWidget }>追加</button>
<br>
<p>Tip: 一部のウィジェットは、<strong><strong></strong>クリック</strong>することで表示を変更することができます。</p>
</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,22 +61,50 @@
display none display none
> .customize > .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 display flex
margin 0 auto margin 0 auto
max-width 1200px - 32px max-width 1200px - 32px
background #fff
border-radius 0 0 16px 16px
border solid 1px #ddd
border-top none
> div > div
width 50% width 50%
&.adder &.adder
padding 16px
> p > p
display inline display inline
line-height 48px
&.trash &.trash
border-left solid 1px #ddd border-left solid 1px #ddd
@ -88,6 +118,7 @@
top 0 top 0
left 0 left 0
width 100% width 100%
line-height 48px
margin 0 margin 0
text-align center text-align center
pointer-events none pointer-events none
@ -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