graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 01:43:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

[Client] Add activity home widget

Browse source
This commit is contained in:
syuilo 2017-06-08 02:47:14 +09:00
parent 7f3ff239dd
commit 580c451731
5 changed files with 91 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
locales/en.yml
View file

@ -243,6 +243,9 @@ desktop:
title: "Notifications"
settings: "Notification settings"
mk-activity-home-widget:
title: "Activity"
mk-user-recommendation-home-widget:
title: "Recommended users"
refresh: "Show others"

3
locales/ja.yml
View file

@ -243,6 +243,9 @@ desktop:
title: "通知"
settings: "通知の設定"
mk-activity-home-widget:
title: "アクティビティ"
mk-user-recommendation-home-widget:
title: "おすすめユーザー"
refresh: "他を見る"

83
src/web/app/desktop/tags/home-widgets/activity.tag Normal file
View file

@ -0,0 +1,83 @@
<mk-activity-home-widget>
<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-home-widget.title%</p>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
<svg if={ !initializing } ref="canvas" viewBox="0 0 21 7" preserveAspectRatio="none">
<rect each={ data } width="1" height="1"
riot-x={ x } riot-y={ date.weekday }
fill={ color }></rect>
</svg>
<style>
:scope
display block
background #fff
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i
margin-right 4px
> .initializing
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
> svg
display block
padding 10px
width 100%
> rect
transform-origin center
transform scale(0.8)
</style>
<script>
this.mixin('i');
this.mixin('api');
this.initializing = true;
this.on('mount', () => {
this.api('aggregation/users/activity', {
user_id: this.I.id,
limit: 20 * 7
}).then(data => {
data.forEach(d => d.total = d.posts + d.replies + d.reposts);
this.peak = Math.max.apply(null, data.map(d => d.total)) / 2;
let x = 0;
data.reverse().forEach(d => {
d.x = x;
d.v = d.total / this.peak;
d.color = d.v > 0.75
? '#195061'
: d.v > 0.5
? '#238f9a'
: d.v > 0.25
? '#6fc5c9'
: d.v > 0
? '#8be4dc'
: '#eee';
d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
if (d.date.weekday == 6) x++;
});
this.update({
initializing: false,
data
});
});
});
</script>
</mk-activity-home-widget>

1
src/web/app/desktop/tags/home.tag
View file

@ -66,6 +66,7 @@
left: [
'profile',
'calendar',
'activity',
'rss-reader',
'trends',
'photo-stream',

1
src/web/app/desktop/tags/index.js
View file

@ -44,6 +44,7 @@ require('./home-widgets/broadcast.tag');
require('./home-widgets/version.tag');
require('./home-widgets/recommended-polls.tag');
require('./home-widgets/trends.tag');
require('./home-widgets/activity.tag');
require('./timeline.tag');
require('./messaging/window.tag');
require('./messaging/room-window.tag');