amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: back button in header

Browse Source 
Closes transfem-org/Sharkey#196
This commit is contained in:
Mar0xy 2023-12-03 19:09:15 +01:00
parent ec5facd09a
commit 1bb258b16a
No known key found for this signature in database
GPG Key ID: 56569BBE47D2C828
5 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/src/components/MkPageWindow.vue
View File

@ -99,6 +99,7 @@ provideMetadataReceiver((info) => {
provide('shouldOmitHeaderTitle', true);
provide('shouldHeaderThin', true);
provide('forceSpacerMin', true);
provide('shouldBackButton', false);
const contextmenu = $computed(() => ([{
icon: 'ph-eject ph-bold ph-lg',

19
packages/frontend/src/components/global/MkPageHeader.vue
View File

@ -9,9 +9,18 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!thin_ && narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
<MkAvatar :class="$style.avatar" :user="$i"/>
</div>
<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft"/>
<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft">
<button v-if="displayBackButton" class="_button" :class="$style.button" @click.stop="goBack()" @touchstart="preventDrag">
<i class="ph-caret-left ph-bold ph-lg"></i>
</button>
</div>
<template v-if="metadata">
<div v-if="displayBackButton && !narrow" :class="$style.buttonsLeft">
<button class="_button" :class="$style.button" @click.stop="goBack()" @touchstart="preventDrag">
<i class="ph-caret-left ph-bold ph-lg"></i>
</button>
</div>
<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
<div v-if="metadata.avatar" :class="$style.titleAvatarContainer">
<MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
@ -48,6 +57,7 @@ import { scrollToTop } from '@/scripts/scroll.js';
import { globalEvents } from '@/events.js';
import { injectPageMetadata } from '@/scripts/page-metadata.js';
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
import { instance } from '@/instance.js';
const props = withDefaults(defineProps<{
tabs?: Tab[];
@ -60,6 +70,7 @@ const props = withDefaults(defineProps<{
}[];
thin?: boolean;
displayMyAvatar?: boolean;
displayBackButton?: boolean;
}>(), {
tabs: () => ([] as Tab[]),
});
@ -68,6 +79,8 @@ const emit = defineEmits<{
(ev: 'update:tab', key: string);
}>();
const displayBackButton = props.displayBackButton && history.state.key !== 'index' && history.length > 1 && inject('shouldBackButton', true);
const metadata = injectPageMetadata();
const hideTitle = inject('shouldOmitHeaderTitle', false);
@ -102,6 +115,10 @@ function onTabClick(): void {
top();
}
function goBack(): void {
window.history.back();
}
const calcBg = () => {
const rawBg = 'var(--bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);

2
packages/frontend/src/pages/note.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<template #header><MkPageHeader :actions="headerActions" :displayBackButton="true" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800">
<div>
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">

2
packages/frontend/src/pages/page.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<template #header><MkPageHeader :actions="headerActions" :displayBackButton="true" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700">
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="page" :key="page.id" class="xcukqgmh">

2
packages/frontend/src/pages/user/index.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<template #header><MkPageHeader v-model:tab="tab" :displayBackButton="true" :actions="headerActions" :tabs="headerTabs"/></template>
<div>
<div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/>