Skip to content
Snippets Groups Projects
Commit 3be0538c authored by syuilo's avatar syuilo
Browse files

✌️

parent 78b9bef0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
CHANGELOG.md
+ 2
− 0
View file @ 3be0538c
......@@ -6,6 +6,8 @@ unreleased
----------
* 通信の最適化
* これで例えばサーバー情報ウィジェットを5000兆個設置しても利用するコネクションは一つだけになりウィジェットを1つ設置したときと(ネットワーク的な)負荷は変わらなくなる
* デザインの調整
* ユーザビリティの向上
3040 (2017/11/12)
-----------------
......
src/web/app/desktop/tags/home.tag
+ 101
− 60
View file @ 3be0538c
<mk-home data-customize={ opts.customize }>
<div class="customize" if={ opts.customize }>
<div class="adder">
<p>ウィジェットを追加:</p>
<select ref="widgetSelector">
<option value="profile">プロフィール</option>
<option value="calendar">カレンダー</option>
<option value="timemachine">カレンダー(タイムマシン)</option>
<option value="activity">アクティビティ</option>
<option value="rss-reader">RSSリーダー</option>
<option value="trends">トレンド</option>
<option value="photo-stream">フォトストリーム</option>
<option value="slideshow">スライドショー</option>
<option value="version">バージョン</option>
<option value="broadcast">ブロードキャスト</option>
<option value="notifications">通知</option>
<option value="user-recommendation">おすすめユーザー</option>
<option value="recommended-polls">投票</option>
<option value="post-form">投稿フォーム</option>
<option value="channel">チャンネル</option>
<option value="server">サーバー情報</option>
<option value="donation">寄付のお願い</option>
<option value="nav">ナビゲーション</option>
<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>
<a href="/"><i class="fa fa-check"></i>完了</a>
<div>
<div class="adder">
<p>ウィジェットを追加:</p>
<select ref="widgetSelector">
<option value="profile">プロフィール</option>
<option value="calendar">カレンダー</option>
<option value="timemachine">カレンダー(タイムマシン)</option>
<option value="activity">アクティビティ</option>
<option value="rss-reader">RSSリーダー</option>
<option value="trends">トレンド</option>
<option value="photo-stream">フォトストリーム</option>
<option value="slideshow">スライドショー</option>
<option value="version">バージョン</option>
<option value="broadcast">ブロードキャスト</option>
<option value="notifications">通知</option>
<option value="user-recommendation">おすすめユーザー</option>
<option value="recommended-polls">投票</option>
<option value="post-form">投稿フォーム</option>
<option value="channel">チャンネル</option>
<option value="server">サーバー情報</option>
<option value="donation">寄付のお願い</option>
<option value="nav">ナビゲーション</option>
<option value="tips">ヒント</option>
</select>
<button onclick={ addWidget }>追加</button>
</div>
<div class="trash">
<div ref="trash"></div>
<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
margin 0 auto
max-width 1200px - 32px
background #fff
border-radius 0 0 16px 16px
border solid 1px #ddd
border-top none
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
width 50%
&.adder
padding 16px
> p
display inline
&.trash
border-left solid 1px #ddd
> div
width 100%
height 100%
> p
position absolute
top 0
left 0
width 100%
margin 0
text-align center
pointer-events none
display flex
margin 0 auto
max-width 1200px - 32px
> div
width 50%
&.adder
> p
display inline
line-height 48px
&.trash
border-left solid 1px #ddd
> div
width 100%
height 100%
> p
position absolute
top 0
left 0
width 100%
line-height 48px
margin 0
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
− 3
View file @ 3be0538c
<mk-home-customize-page>
<mk-ui ref="ui" page="timeline">
<mk-home ref="home" mode={ parent.opts.mode } customize={ true }/>
</mk-ui>
<mk-home ref="home" mode="timeline" customize={ true }/>
<style>
:scope
display block
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment