feat: Better tabs for mobile

This commit is contained in:
ThatOneCalculator 2022-09-07 15:09:23 -07:00
parent 60fb59c878
commit 9b3ad73576
6 changed files with 16 additions and 7 deletions

View File

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

View File

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

View File

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

View File

@ -77,6 +77,7 @@ const headerTabs = $computed(() => [{
title: i18n.ts.users,
}, {
key: 'search',
icon: 'fas fa-magnifying-glass',
title: i18n.ts.search,
}]);

View File

@ -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(() => ({

View File

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