diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/interactions/interactions.js | 25 | ||||
| -rw-r--r-- | src/components/interactions/interactions.vue | 25 | ||||
| -rw-r--r-- | src/components/mentions/mentions.vue | 2 | ||||
| -rw-r--r-- | src/components/nav_panel/nav_panel.vue | 2 | ||||
| -rw-r--r-- | src/components/notifications/notifications.js | 8 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 4 | ||||
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.js | 13 |
7 files changed, 70 insertions, 9 deletions
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js new file mode 100644 index 00000000..4c56a931 --- /dev/null +++ b/src/components/interactions/interactions.js @@ -0,0 +1,25 @@ +import Notifications from '../notifications/notifications.vue' + +const tabModeDict = { + mentions: ['mention'], + 'likes+repeats': ['repeat', 'like'], + follows: ['follow'] +} + +const Interactions = { + data () { + return { + filterMode: tabModeDict['mentions'] + } + }, + methods: { + onModeSwitch(index, dataset) { + this.filterMode = tabModeDict[dataset.filter] + } + }, + components: { + Notifications + } +} + +export default Interactions diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue new file mode 100644 index 00000000..751e5d40 --- /dev/null +++ b/src/components/interactions/interactions.vue @@ -0,0 +1,25 @@ +<template> + <div class="panel panel-default"> + <div class="panel-heading"> + <div class="title"> + Interactions + </div> + </div> + <tab-switcher + ref="tabSwitcher" + :onSwitch="onModeSwitch" + > + <span data-tab-dummy data-filter="mentions" :label="$t('MENTIONS')"/> + <span data-tab-dummy data-filter="likes+repeats" :label="$t('LIKES AND REPEATS')"/> + <span data-tab-dummy data-filter="follows" :label="$t('FOLLOWS')"/> + </tab-switcher> + <Notifications + ref="notifications" + :noHeading="true" + :minimalMode="true" + :filterMode="filterMode" + /> + </div> +</template> + +<script src="./interactions.js"></script> diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue index bba06da6..6b4e96e0 100644 --- a/src/components/mentions/mentions.vue +++ b/src/components/mentions/mentions.vue @@ -1,5 +1,5 @@ <template> - <Timeline :title="$t('nav.mentions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/> + <Timeline :title="$t('nav.interactions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/> </template> <script src="./mentions.js"></script> diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 7a7212fb..05097c45 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -9,7 +9,7 @@ </li> <li v-if='currentUser'> <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> - {{ $t("nav.mentions") }} + {{ $t("nav.interactions") }} </router-link> </li> <li v-if='currentUser'> diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 5b13b98e..acc31986 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -8,7 +8,7 @@ import { const Notifications = { props: [ - 'noHeading' + 'noHeading', 'minimalMode', 'filterMode' ], data () { return { @@ -16,6 +16,9 @@ const Notifications = { } }, computed: { + mainClass () { + return this.minimalMode ? '' : 'panel panel-default' + }, notifications () { return notificationsFromStore(this.$store) }, @@ -26,7 +29,8 @@ const Notifications = { return unseenNotificationsFromStore(this.$store) }, visibleNotifications () { - return visibleNotificationsFromStore(this.$store) + console.log(this.filterMode) + return visibleNotificationsFromStore(this.$store, this.filterMode) }, unseenCount () { return this.unseenNotifications.length diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 88775be1..3c3ae191 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,6 +1,6 @@ <template> <div class="notifications"> - <div class="panel panel-default"> + <div :class="mainClass"> <div v-if="!noHeading" class="panel-heading"> <div class="title"> {{$t('notifications.notifications')}} @@ -12,7 +12,7 @@ <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button> </div> <div class="panel-body"> - <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !notification.seen}'> + <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !minimalMode && !notification.seen}'> <div class="notification-overlay"></div> <notification :notification="notification"></notification> </div> diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 423df258..c949b458 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -4,15 +4,18 @@ import './tab_switcher.scss' export default Vue.component('tab-switcher', { name: 'TabSwitcher', - props: ['renderOnlyFocused'], + props: ['renderOnlyFocused', 'onSwitch'], data () { return { active: this.$slots.default.findIndex(_ => _.tag) } }, methods: { - activateTab (index) { + activateTab (index, dataset) { return () => { + if (typeof this.onSwitch === 'function') { + this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset) + } this.active = index } } @@ -37,7 +40,11 @@ export default Vue.component('tab-switcher', { return ( <div class={ classesWrapper.join(' ')}> - <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> + <button + disabled={slot.data.attrs.disabled} + onClick={this.activateTab(index)} + class={classesTab.join(' ')}> + {slot.data.attrs.label}</button> </div> ) }) |