[clean] Remove unnecessary buttons from header

This commit is contained in:
AkiraFukushima 2023-02-07 01:23:24 +09:00
parent 5847875586
commit 7a76ccc956
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
2 changed files with 4 additions and 70 deletions

View File

@ -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",

View File

@ -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
} }
} }
}) })