paricafe/src/client/app/mobile/views/pages/home.vue

262 lines
6.4 KiB
Vue
Raw Normal View History

2018-02-15 02:50:19 -06:00
<template>
2018-02-23 11:46:09 -06:00
<mk-ui>
2018-04-26 00:01:41 -05:00
<span slot="header" @click="showNav = true">
2018-09-19 00:18:34 -05:00
<span :class="$style.title">
2018-05-25 06:44:06 -05:00
<span v-if="src == 'home'">%fa:home%%i18n:@home%</span>
<span v-if="src == 'local'">%fa:R comments%%i18n:@local%</span>
2018-07-10 23:43:09 -05:00
<span v-if="src == 'hybrid'">%fa:share-alt%%i18n:@hybrid%</span>
2018-05-25 06:44:06 -05:00
<span v-if="src == 'global'">%fa:globe%%i18n:@global%</span>
<span v-if="src == 'mentions'">%fa:at%%i18n:@mentions%</span>
<span v-if="src == 'messages'">%fa:envelope R%%i18n:@messages%</span>
2018-05-26 10:18:44 -05:00
<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
<span v-if="src == 'tag'">%fa:hashtag%{{ tagTl.title }}</span>
2018-04-26 00:01:41 -05:00
</span>
2018-02-23 11:46:09 -06:00
<span style="margin-left:8px">
2018-04-26 00:01:41 -05:00
<template v-if="!showNav">%fa:angle-down%</template>
2018-02-23 11:46:09 -06:00
<template v-else>%fa:angle-up%</template>
</span>
2018-09-19 00:18:34 -05:00
<i :class="$style.badge" v-if="$store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i>
2018-02-23 11:46:09 -06:00
</span>
2018-04-26 00:01:41 -05:00
2018-02-23 11:46:09 -06:00
<template slot="func">
2018-04-26 00:01:41 -05:00
<button @click="fn">%fa:pencil-alt%</button>
2018-02-23 11:46:09 -06:00
</template>
2018-04-26 00:01:41 -05:00
2018-05-23 15:28:46 -05:00
<main :data-darkmode="$store.state.device.darkmode">
2018-04-26 00:01:41 -05:00
<div class="nav" v-if="showNav">
<div class="bg" @click="showNav = false"></div>
<div class="pointer"></div>
2018-04-26 00:01:41 -05:00
<div class="body">
2018-04-26 00:38:37 -05:00
<div>
2018-05-25 06:44:06 -05:00
<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% %i18n:@home%</span>
2018-09-11 12:48:19 -05:00
<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
2018-05-25 06:44:06 -05:00
<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
<div class="hr"></div>
2018-09-19 00:18:34 -05:00
<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></span>
<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></span>
2018-04-26 00:38:37 -05:00
<template v-if="lists">
2018-09-17 23:12:41 -05:00
<div class="hr" v-if="lists.length > 0"></div>
2018-05-26 10:18:44 -05:00
<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
2018-04-26 00:38:37 -05:00
</template>
<div class="hr" v-if="$store.state.settings.tagTimelines && $store.state.settings.tagTimelines.length > 0"></div>
<span v-for="tl in $store.state.settings.tagTimelines" :data-active="src == 'tag' && tagTl == tl" @click="src = 'tag'; tagTl = tl" :key="tl.id">%fa:hashtag% {{ tl.title }}</span>
2018-04-26 00:38:37 -05:00
</div>
2018-04-26 00:01:41 -05:00
</div>
2018-02-23 11:46:09 -06:00
</div>
2018-04-26 00:01:41 -05:00
<div class="tl">
2018-05-26 10:18:44 -05:00
<x-tl v-if="src == 'home'" ref="tl" key="home" src="home"/>
2018-04-26 00:01:41 -05:00
<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
2018-07-10 23:43:09 -05:00
<x-tl v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
2018-04-26 00:01:41 -05:00
<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
<x-tl v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
<x-tl v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
<x-tl v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
2018-05-26 10:18:44 -05:00
<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
2018-02-23 11:46:09 -06:00
</div>
</main>
2018-02-15 02:50:19 -06:00
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
import Progress from '../../../common/scripts/loading';
2018-04-26 00:01:41 -05:00
import XTl from './home.timeline.vue';
2018-02-15 02:50:19 -06:00
export default Vue.extend({
2018-02-23 11:46:09 -06:00
components: {
2018-04-26 00:01:41 -05:00
XTl
2018-02-23 11:46:09 -06:00
},
2018-04-26 00:01:41 -05:00
2018-02-15 02:50:19 -06:00
data() {
return {
2018-04-26 00:01:41 -05:00
src: 'home',
list: null,
2018-04-26 00:38:37 -05:00
lists: null,
tagTl: null,
2018-09-11 12:48:19 -05:00
showNav: false,
enableLocalTimeline: false
2018-02-15 02:50:19 -06:00
};
},
2018-02-23 12:03:26 -06:00
2018-04-26 00:38:37 -05:00
watch: {
src() {
this.showNav = false;
2018-05-26 12:56:54 -05:00
this.saveSrc();
2018-05-26 10:18:44 -05:00
},
list(x) {
2018-05-26 10:18:44 -05:00
this.showNav = false;
2018-05-26 12:56:54 -05:00
this.saveSrc();
if (x != null) this.tagTl = null;
},
tagTl(x) {
this.showNav = false;
this.saveSrc();
if (x != null) this.list = null;
2018-04-26 00:38:37 -05:00
},
showNav(v) {
if (v && this.lists === null) {
(this as any).api('users/lists/list').then(lists => {
this.lists = lists;
});
}
}
},
created() {
2018-09-11 12:48:19 -05:00
(this as any).os.getMeta().then(meta => {
this.enableLocalTimeline = !meta.disableLocalTimeline;
});
2018-05-26 10:18:44 -05:00
if (this.$store.state.device.tl) {
this.src = this.$store.state.device.tl.src;
if (this.src == 'list') {
this.list = this.$store.state.device.tl.arg;
} else if (this.src == 'tag') {
this.tagTl = this.$store.state.device.tl.arg;
2018-05-26 10:18:44 -05:00
}
2018-05-26 23:49:09 -05:00
} else if (this.$store.state.i.followingCount == 0) {
2018-07-13 21:58:21 -05:00
this.src = 'hybrid';
}
},
2018-02-15 02:50:19 -06:00
mounted() {
2018-08-19 07:07:18 -05:00
document.title = (this as any).os.instanceName;
2018-02-15 02:50:19 -06:00
Progress.start();
2018-05-26 10:18:44 -05:00
(this.$refs.tl as any).$once('loaded', () => {
Progress.done();
});
2018-02-15 02:50:19 -06:00
},
2018-04-26 00:01:41 -05:00
2018-02-15 02:50:19 -06:00
methods: {
fn() {
2018-09-01 06:47:49 -05:00
(this as any).apis.post();
2018-02-15 02:50:19 -06:00
},
2018-04-26 00:01:41 -05:00
2018-05-26 12:56:54 -05:00
saveSrc() {
this.$store.commit('device/setTl', {
src: this.src,
arg: this.src == 'list' ? this.list : this.tagTl
2018-05-26 12:56:54 -05:00
});
},
2018-02-23 11:46:09 -06:00
warp() {
2018-02-15 02:50:19 -06:00
}
}
});
</script>
2018-02-23 11:46:09 -06:00
<style lang="stylus" scoped>
2018-09-26 06:19:35 -05:00
2018-04-26 00:38:37 -05:00
2018-04-27 20:59:37 -05:00
root(isDark)
2018-04-26 00:01:41 -05:00
> .nav
> .pointer
position fixed
z-index 10002
top 56px
left 0
right 0
$size = 16px
&:after
content ""
display block
position absolute
top -($size * 2)
left s('calc(50% - %s)', $size)
border-top solid $size transparent
border-left solid $size transparent
border-right solid $size transparent
border-bottom solid $size isDark ? #272f3a : #fff
2018-04-26 00:01:41 -05:00
> .bg
position fixed
z-index 10000
top 0
left 0
width 100%
height 100%
background rgba(#000, 0.5)
> .body
position fixed
z-index 10001
2018-04-26 00:38:37 -05:00
top 56px
2018-04-26 00:01:41 -05:00
left 0
2018-04-26 00:38:37 -05:00
right 0
width 300px
max-height calc(100% - 70px)
2018-04-26 00:38:37 -05:00
margin 0 auto
overflow auto
-webkit-overflow-scrolling touch
2018-04-27 20:59:37 -05:00
background isDark ? #272f3a : #fff
2018-04-26 00:01:41 -05:00
border-radius 8px
2018-04-28 18:51:17 -05:00
box-shadow 0 0 16px rgba(#000, 0.1)
2018-04-26 00:38:37 -05:00
> div
padding 8px 0
> .hr
margin 8px 0
border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
> *:not(.hr)
2018-04-26 00:38:37 -05:00
display block
padding 8px 16px
2018-04-27 20:59:37 -05:00
color isDark ? #cdd0d8 : #666
2018-04-26 00:38:37 -05:00
&[data-active]
2018-09-26 06:19:35 -05:00
color var(--primaryForeground)
background var(--primary)
2018-04-26 00:38:37 -05:00
&:not([data-active]):hover
2018-04-27 20:59:37 -05:00
background isDark ? #353e4a : #eee
2018-02-23 11:46:09 -06:00
2018-09-19 00:18:34 -05:00
> .badge
margin-left 6px
font-size 10px
2018-09-26 06:19:35 -05:00
color var(--primary)
2018-09-19 00:18:34 -05:00
2018-02-23 11:46:09 -06:00
> .tl
2018-04-27 07:06:28 -05:00
max-width 680px
2018-02-23 11:46:09 -06:00
margin 0 auto
2018-04-26 00:01:41 -05:00
padding 8px
2018-02-23 11:46:09 -06:00
2018-02-23 12:30:13 -06:00
@media (min-width 500px)
2018-04-26 00:01:41 -05:00
padding 16px
2018-02-23 11:46:09 -06:00
2018-04-27 07:06:28 -05:00
@media (min-width 600px)
padding 32px
2018-04-27 20:59:37 -05:00
main[data-darkmode]
root(true)
main:not([data-darkmode])
root(false)
2018-02-23 11:46:09 -06:00
</style>
2018-09-19 00:18:34 -05:00
<style lang="stylus" module>
2018-09-26 06:19:35 -05:00
2018-09-19 00:18:34 -05:00
.title
i
margin-right 4px
.badge
margin-left 6px
font-size 10px
2018-09-26 06:19:35 -05:00
color var(--primary)
2018-09-19 00:18:34 -05:00
vertical-align middle
</style>