mirror of
https://github.com/frappe/books.git
synced 2024-12-22 19:09:01 +00:00
fix(ui/ux): move back button to the left
- add forward button
This commit is contained in:
parent
70d2efa81d
commit
5f32c45736
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<a
|
||||
ref="backlink"
|
||||
class="
|
||||
cursor-pointer
|
||||
font-semibold
|
||||
flex
|
||||
items-center
|
||||
bg-gray-200
|
||||
text-gray-700
|
||||
px-3
|
||||
rounded-md
|
||||
"
|
||||
@click="$router.back()"
|
||||
>
|
||||
<feather-icon name="chevron-left" class="w-4 h-4" />
|
||||
</a>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { shortcutsKey } from 'src/utils/injectionKeys';
|
||||
import { ref, inject } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const COMPONENT_NAME = 'BackLink';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
backlink: ref<HTMLAnchorElement | null>(null),
|
||||
shortcuts: inject(shortcutsKey),
|
||||
};
|
||||
},
|
||||
activated() {
|
||||
this.shortcuts?.shift.set(COMPONENT_NAME, ['Backspace'], () => {
|
||||
this.backlink?.click();
|
||||
});
|
||||
},
|
||||
deactivated() {
|
||||
this.shortcuts?.delete(COMPONENT_NAME);
|
||||
},
|
||||
});
|
||||
</script>
|
@ -14,7 +14,7 @@
|
||||
<slot name="header" />
|
||||
</PageHeader>
|
||||
|
||||
<!-- Invoice Form -->
|
||||
<!-- Common Form -->
|
||||
<div
|
||||
class="
|
||||
border
|
||||
|
@ -13,23 +13,32 @@
|
||||
:class="spacerClass"
|
||||
/>
|
||||
</Transition>
|
||||
<h1
|
||||
class="text-xl font-semibold select-none whitespace-nowrap"
|
||||
v-if="title"
|
||||
|
||||
<div
|
||||
class="flex items-center window-no-drag gap-4 me-auto"
|
||||
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
|
||||
>
|
||||
{{ title }}
|
||||
</h1>
|
||||
<div class="flex items-stretch window-no-drag gap-2">
|
||||
<slot name="left" />
|
||||
<!-- Nav Group -->
|
||||
<PageHeaderNavGroup />
|
||||
<h1
|
||||
class="text-xl font-semibold select-none whitespace-nowrap"
|
||||
v-if="title"
|
||||
>
|
||||
{{ title }}
|
||||
</h1>
|
||||
|
||||
<!-- Left Slot -->
|
||||
<div class="flex items-stretch window-no-drag gap-4">
|
||||
<slot name="left" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right (regular) Slot -->
|
||||
<div
|
||||
class="flex items-stretch window-no-drag gap-2 ms-auto"
|
||||
:class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
|
||||
>
|
||||
<slot />
|
||||
<div class="border-e" v-if="showBorder" />
|
||||
<BackLink v-if="backLink" class="window-no-drag rtl-rotate-180" />
|
||||
<SearchBar v-if="!hideSearch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -37,18 +46,15 @@
|
||||
import { languageDirectionKey } from 'src/utils/injectionKeys';
|
||||
import { showSidebar } from 'src/utils/refs';
|
||||
import { defineComponent, inject, Transition } from 'vue';
|
||||
import BackLink from './BackLink.vue';
|
||||
import SearchBar from './SearchBar.vue';
|
||||
import PageHeaderNavGroup from './PageHeaderNavGroup.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
title: { type: String, default: '' },
|
||||
backLink: { type: Boolean, default: true },
|
||||
hideSearch: { type: Boolean, default: false },
|
||||
border: { type: Boolean, default: true },
|
||||
searchborder: { type: Boolean, default: true },
|
||||
},
|
||||
components: { BackLink, SearchBar, Transition },
|
||||
components: { Transition, PageHeaderNavGroup },
|
||||
setup() {
|
||||
return { showSidebar, languageDirection: inject(languageDirectionKey) };
|
||||
},
|
||||
|
70
src/components/PageHeaderNavGroup.vue
Normal file
70
src/components/PageHeaderNavGroup.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<SearchBar />
|
||||
<!-- Back Button -->
|
||||
<a
|
||||
ref="backlink"
|
||||
class="nav-link border-l border-r border-white"
|
||||
:class="
|
||||
historyState.back ? 'text-gray-700 cursor-pointer' : 'text-gray-400'
|
||||
"
|
||||
@click="$router.back()"
|
||||
>
|
||||
<feather-icon name="chevron-left" class="w-4 h-4" />
|
||||
</a>
|
||||
<!-- Forward Button -->
|
||||
<a
|
||||
class="nav-link rounded-md rounded-l-none"
|
||||
:class="
|
||||
historyState.forward ? 'text-gray-700 cursor-pointer' : 'text-gray-400'
|
||||
"
|
||||
@click="$router.forward()"
|
||||
>
|
||||
<feather-icon name="chevron-right" class="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { shortcutsKey } from 'src/utils/injectionKeys';
|
||||
import { ref, inject } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import SearchBar from './SearchBar.vue';
|
||||
import { historyState } from 'src/utils/refs';
|
||||
|
||||
const COMPONENT_NAME = 'PageHeaderNavGroup';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return {
|
||||
historyState,
|
||||
backlink: ref<HTMLAnchorElement | null>(null),
|
||||
shortcuts: inject(shortcutsKey),
|
||||
};
|
||||
},
|
||||
activated() {
|
||||
this.shortcuts?.shift.set(COMPONENT_NAME, ['Backspace'], () => {
|
||||
this.backlink?.click();
|
||||
});
|
||||
// @ts-ignore
|
||||
window.ng = this;
|
||||
},
|
||||
deactivated() {
|
||||
this.shortcuts?.delete(COMPONENT_NAME);
|
||||
},
|
||||
components: { SearchBar },
|
||||
computed: {
|
||||
hasBack() {
|
||||
return !!history.back;
|
||||
},
|
||||
hasForward() {
|
||||
return !!history.forward;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-link {
|
||||
@apply flex items-center bg-gray-200 px-3;
|
||||
}
|
||||
</style>
|
@ -1,12 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Search Bar Button -->
|
||||
<Button @click="open" class="px-2" :padding="false">
|
||||
<feather-icon name="search" class="w-4 h-4 me-1 text-gray-800" />
|
||||
<p>{{ t`Search` }}</p>
|
||||
<div class="text-gray-500 px-1 ms-4 text-sm whitespace-nowrap">
|
||||
{{ modKeyText('k') }}
|
||||
</div>
|
||||
<Button @click="open" class="px-3 py-2 rounded-r-none" :padding="false">
|
||||
<feather-icon name="search" class="w-4 h-4 text-gray-700" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -292,14 +288,6 @@ export default defineComponent({
|
||||
this.shortcuts!.pmod.set(COMPONENT_NAME, [shortcut], callback);
|
||||
}
|
||||
},
|
||||
modKeyText(key: string): string {
|
||||
key = key.toUpperCase();
|
||||
if (this.platform === 'Mac') {
|
||||
return `⌘ ${key}`;
|
||||
}
|
||||
|
||||
return `Ctrl ${key}`;
|
||||
},
|
||||
open(): void {
|
||||
this.openModal = true;
|
||||
this.searcher?.updateKeywords();
|
||||
|
@ -9,7 +9,9 @@ import QuickEditForm from 'src/pages/QuickEditForm.vue';
|
||||
import Report from 'src/pages/Report.vue';
|
||||
import Settings from 'src/pages/Settings/Settings.vue';
|
||||
import TemplateBuilder from 'src/pages/TemplateBuilder/TemplateBuilder.vue';
|
||||
import { reactive } from 'vue';
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
|
||||
import { historyState } from './utils/refs';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
@ -112,4 +114,10 @@ const routes: RouteRecordRaw[] = [
|
||||
];
|
||||
|
||||
const router = createRouter({ routes, history: createWebHistory() });
|
||||
|
||||
router.afterEach(() => {
|
||||
historyState.forward = !!history.state.forward;
|
||||
historyState.back = !!history.state.back;
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
@ -1,5 +1,9 @@
|
||||
import { ref } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
export const showSidebar = ref(true);
|
||||
export const docsPathRef = ref<string>('');
|
||||
export const systemLanguageRef = ref<string>('');
|
||||
export const historyState = reactive({
|
||||
forward: !!history.state.forward,
|
||||
back: !!history.state.back,
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user