[clean] Remove unnecessary buttons from header
This commit is contained in:
parent
5847875586
commit
7a76ccc956
|
@ -45,7 +45,7 @@
|
||||||
"profile": "Profile",
|
"profile": "Profile",
|
||||||
"show_profile": "Show profile",
|
"show_profile": "Show profile",
|
||||||
"edit_profile": "Edit profile",
|
"edit_profile": "Edit profile",
|
||||||
"settings": "Settings",
|
"settings": "Account Settings",
|
||||||
"collapse": "Collapse",
|
"collapse": "Collapse",
|
||||||
"expand": "Expand",
|
"expand": "Expand",
|
||||||
"home": "Home",
|
"home": "Home",
|
||||||
|
|
|
@ -8,38 +8,16 @@
|
||||||
<el-button v-show="reloadable()" link class="action" :title="$t('header_menu.reload')" @click="reload">
|
<el-button v-show="reloadable()" link class="action" :title="$t('header_menu.reload')" @click="reload">
|
||||||
<font-awesome-icon icon="rotate" />
|
<font-awesome-icon icon="rotate" />
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-popover v-if="TLOption()" placement="left-start" width="180" popper-class="theme-popover" trigger="click">
|
|
||||||
<div>
|
|
||||||
<el-form role="form" label-position="left" label-width="125px" size="default">
|
|
||||||
<el-form-item for="show-reblogs" :label="$t('header_menu.option.show_reblogs')">
|
|
||||||
<el-checkbox id="show-reblogs" v-model="showReblogs"></el-checkbox>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item for="show-replies" :label="$t('header_menu.option.show_replies')">
|
|
||||||
<el-checkbox id="show-replies" v-model="showReplies"></el-checkbox>
|
|
||||||
</el-form-item>
|
|
||||||
<el-button type="primary" @click="applyTLOption">{{ $t('header_menu.option.apply') }}</el-button>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<template #reference>
|
|
||||||
<el-button link class="action" :title="$t('header_menu.option.title')">
|
|
||||||
<font-awesome-icon icon="sliders" />
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-popover>
|
|
||||||
<el-button class="action" link :title="$t('header_menu.settings')" @click="settings">
|
|
||||||
<font-awesome-icon icon="gear" />
|
|
||||||
</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref, computed, onMounted, watch } from 'vue'
|
import { defineComponent, computed, onMounted, watch } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { useI18next } from 'vue3-i18next'
|
import { useI18next } from 'vue3-i18next'
|
||||||
import { useStore } from '@/store'
|
import { useStore } from '@/store'
|
||||||
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
|
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
|
||||||
import { MUTATION_TYPES as HOME_MUTATION } from '@/store/TimelineSpace/Contents/Home'
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'header-menu',
|
name: 'header-menu',
|
||||||
|
@ -47,26 +25,19 @@ export default defineComponent({
|
||||||
const space = 'TimelineSpace/HeaderMenu'
|
const space = 'TimelineSpace/HeaderMenu'
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
|
||||||
const i18n = useI18next()
|
const i18n = useI18next()
|
||||||
|
|
||||||
const showReblogs = ref<boolean>(true)
|
|
||||||
const showReplies = ref<boolean>(true)
|
|
||||||
|
|
||||||
const title = computed(() => store.state.TimelineSpace.HeaderMenu.title)
|
const title = computed(() => store.state.TimelineSpace.HeaderMenu.title)
|
||||||
const loading = computed(() => store.state.TimelineSpace.HeaderMenu.loading)
|
const loading = computed(() => store.state.TimelineSpace.HeaderMenu.loading)
|
||||||
const id = computed(() => route.params.id)
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
channelName()
|
channelName()
|
||||||
loadTLOption()
|
|
||||||
store.dispatch(`${space}/${ACTION_TYPES.SETUP_LOADING}`)
|
store.dispatch(`${space}/${ACTION_TYPES.SETUP_LOADING}`)
|
||||||
})
|
})
|
||||||
watch(
|
watch(
|
||||||
() => route.name,
|
() => route.name,
|
||||||
() => {
|
() => {
|
||||||
channelName()
|
channelName()
|
||||||
loadTLOption()
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
const channelName = () => {
|
const channelName = () => {
|
||||||
|
@ -143,49 +114,12 @@ export default defineComponent({
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const loadTLOption = () => {
|
|
||||||
switch (route.name) {
|
|
||||||
case 'home':
|
|
||||||
showReblogs.value = store.state.TimelineSpace.Contents.Home.showReblogs
|
|
||||||
showReplies.value = store.state.TimelineSpace.Contents.Home.showReplies
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const applyTLOption = () => {
|
|
||||||
switch (route.name) {
|
|
||||||
case 'home':
|
|
||||||
store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REBLOGS}`, showReblogs.value)
|
|
||||||
store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REPLIES}`, showReplies.value)
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const TLOption = () => {
|
|
||||||
switch (route.name) {
|
|
||||||
case 'home':
|
|
||||||
return true
|
|
||||||
default:
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const settings = () => {
|
|
||||||
const url = `/${id.value}/settings`
|
|
||||||
router.push(url)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title,
|
title,
|
||||||
loading,
|
loading,
|
||||||
reloadable,
|
reloadable,
|
||||||
reload,
|
reload
|
||||||
TLOption,
|
|
||||||
showReblogs,
|
|
||||||
showReplies,
|
|
||||||
applyTLOption,
|
|
||||||
settings
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue