feat: ✨ Better tabs for mobile
This commit is contained in:
parent
60fb59c878
commit
9b3ad73576
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "calckey",
|
||||
"version": "12.118.1-calc.2-beta.2-rc.9",
|
||||
"version": "12.118.1-calc.2-beta.2-rc.10",
|
||||
"codename": "aqua",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
@ -14,16 +14,17 @@
|
|||
<div v-if="!narrow && metadata.subtitle" class="subtitle">
|
||||
{{ metadata.subtitle }}
|
||||
</div>
|
||||
<div v-if="narrow && hasTabs" class="subtitle activeTab">
|
||||
<!-- <div v-if="narrow && hasTabs" class="subtitle activeTab">
|
||||
{{ tabs.find(tab => tab.key === props.tab)?.title }}
|
||||
<i class="chevron fas fa-chevron-down"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!narrow || hideTitle" class="tabs">
|
||||
<div v-if="hideTitle" class="tabs"> <!-- v-if="!narrow || hideTitle" -->
|
||||
<!-- eslint-disable-next-line vue/require-v-for-key -->
|
||||
<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
|
||||
<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
|
||||
<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
|
||||
<span v-if="!tab.iconOnly && !narrow" class="title">{{ tab.title }}</span>
|
||||
</button>
|
||||
<div ref="tabHighlightEl" class="highlight"></div>
|
||||
</div>
|
||||
|
|
|
@ -115,6 +115,7 @@ const headerActions = $computed(() => []);
|
|||
let theTabs = [{
|
||||
key: 'overview',
|
||||
title: i18n.ts.overview,
|
||||
icon: 'fas fa-sitemap',
|
||||
}, {
|
||||
key: 'emojis',
|
||||
title: i18n.ts.customEmojis,
|
||||
|
|
|
@ -77,6 +77,7 @@ const headerTabs = $computed(() => [{
|
|||
title: i18n.ts.users,
|
||||
}, {
|
||||
key: 'search',
|
||||
icon: 'fas fa-magnifying-glass',
|
||||
title: i18n.ts.search,
|
||||
}]);
|
||||
|
||||
|
|
|
@ -93,17 +93,23 @@ const headerActions = $computed(() => [tab === 'all' ? {
|
|||
const headerTabs = $computed(() => [{
|
||||
key: 'all',
|
||||
title: i18n.ts.all,
|
||||
icon: 'fas fa-bell',
|
||||
iconOnly: true,
|
||||
}, {
|
||||
key: 'unread',
|
||||
title: i18n.ts.unread,
|
||||
icon: 'fas fa-exclamation',
|
||||
iconOnly: true,
|
||||
}, {
|
||||
key: 'mentions',
|
||||
title: i18n.ts.mentions,
|
||||
icon: 'fas fa-at',
|
||||
iconOnly: true,
|
||||
}, {
|
||||
key: 'directNotes',
|
||||
title: i18n.ts.directNotes,
|
||||
icon: 'fas fa-envelope',
|
||||
iconOnly: true,
|
||||
}]);
|
||||
|
||||
definePageMetadata(computed(() => ({
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
{{ i18n.ts.makeReactionsPublic }}
|
||||
<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
|
||||
</FormSwitch>
|
||||
|
||||
|
||||
<FormSelect v-model="ffVisibility" class="_formBlock" @update:modelValue="save()">
|
||||
<template #label>{{ i18n.ts.ffVisibility }}</template>
|
||||
<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
|
||||
|
@ -15,7 +15,7 @@
|
|||
<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
|
||||
<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
|
||||
</FormSelect>
|
||||
|
||||
|
||||
<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:modelValue="save()">
|
||||
{{ i18n.ts.hideOnlineStatus }}
|
||||
<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
|
||||
|
|
Loading…
Reference in New Issue