graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-10 01:53:08 +02:00
Code Issues Projects Releases Packages 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('shouldOmitHeaderTitle', true);
provide('shouldHeaderThin', true); provide('shouldHeaderThin', true);
provide('forceSpacerMin', true); provide('forceSpacerMin', true);
provide('shouldBackButton', false);
const contextmenu = $computed(() => ([{ const contextmenu = $computed(() => ([{
icon: 'ph-eject ph-bold ph-lg', 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"> <div v-if="!thin_ && narrow && props.displayMyAvatar && $i" class="_button" :class="$style.buttonsLeft" @click="openAccountMenu">
<MkAvatar :class="$style.avatar" :user="$i"/> <MkAvatar :class="$style.avatar" :user="$i"/>
</div> </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"> <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="!hideTitle" :class="$style.titleContainer" @click="top">
<div v-if="metadata.avatar" :class="$style.titleAvatarContainer"> <div v-if="metadata.avatar" :class="$style.titleAvatarContainer">
<MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/> <MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
@ -48,6 +57,7 @@ import { scrollToTop } from '@/scripts/scroll.js';
import { globalEvents } from '@/events.js'; import { globalEvents } from '@/events.js';
import { injectPageMetadata } from '@/scripts/page-metadata.js'; import { injectPageMetadata } from '@/scripts/page-metadata.js';
import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
import { instance } from '@/instance.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
tabs?: Tab[]; tabs?: Tab[];
@ -60,6 +70,7 @@ const props = withDefaults(defineProps<{
}[]; }[];
thin?: boolean; thin?: boolean;
displayMyAvatar?: boolean; displayMyAvatar?: boolean;
displayBackButton?: boolean;
}>(), { }>(), {
tabs: () => ([] as Tab[]), tabs: () => ([] as Tab[]),
}); });
@ -68,6 +79,8 @@ const emit = defineEmits<{
(ev: 'update:tab', key: string); (ev: 'update:tab', key: string);
}>(); }>();
const displayBackButton = props.displayBackButton && history.state.key !== 'index' && history.length > 1 && inject('shouldBackButton', true);
const metadata = injectPageMetadata(); const metadata = injectPageMetadata();
const hideTitle = inject('shouldOmitHeaderTitle', false); const hideTitle = inject('shouldOmitHeaderTitle', false);
@ -102,6 +115,10 @@ function onTabClick(): void {
top(); top();
} }
function goBack(): void {
window.history.back();
}
const calcBg = () => { const calcBg = () => {
const rawBg = 'var(--bg)'; const rawBg = 'var(--bg)';
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg); 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> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :displayBackButton="true" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800"> <MkSpacer :contentMax="800">
<div> <div>
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in"> <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> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :displayBackButton="true" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in"> <Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="page" :key="page.id" class="xcukqgmh"> <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> <template>
<MkStickyContainer> <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>
<div v-if="user"> <div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/> <XHome v-if="tab === 'home'" :user="user"/>