github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make headers sticky again (#17850)

Browse Source 
Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
This commit is contained in:
Nitwel
2023-04-07 12:29:41 +02:00
committed by GitHub
parent 99e6c7f8fd
commit 88a401ca20
15 changed files with 125 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/src/modules/activity/routes/collection.vue
View File

@@ -11,7 +11,11 @@
show-select="none"
collection="directus_activity"
>
<private-view :title="t('activity_feed')">
<private-view
:title="t('activity_feed')"
:small-header="currentLayout?.smallHeader"
:header-shadow="currentLayout?.headerShadow"
>
<template #title-outer:prepend>
<v-button class="header-icon" rounded disabled icon secondary>
<v-icon name="access_time" />
@@ -30,7 +34,7 @@
<activity-navigation v-model:filter="roleFilter" />
</template>
<component :is="`layout-${layout}`" v-bind="layoutState" class="layout">
<component :is="`layout-${layout}`" v-bind="layoutState">
<template #no-results>
<v-info :title="t('no_results')" icon="search" center>
{{ t('no_results_copy') }}
@@ -60,15 +64,16 @@
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, computed, ref } from 'vue';
import ActivityNavigation from '../components/navigation.vue';
import { useExtension } from '@/composables/use-extension';
import { usePreset } from '@/composables/use-preset';
import { useLayout } from '@directus/composables';
import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
import SearchInput from '@/views/private/components/search-input.vue';
import { useLayout } from '@directus/composables';
import { Filter } from '@directus/types';
import { mergeFilters } from '@directus/utils';
import { computed, defineComponent, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ActivityNavigation from '../components/navigation.vue';
export default defineComponent({
name: 'ActivityCollection',
@@ -87,6 +92,8 @@ export default defineComponent({
const { layoutWrapper } = useLayout(layout);
const currentLayout = useExtension('layout', layout);
const roleFilter = ref<Filter | null>(null);
return {
@@ -100,6 +107,7 @@ export default defineComponent({
filter,
roleFilter,
mergeFilters,
currentLayout,
};
function useBreadcrumb() {

7
app/src/modules/content/routes/collection.vue
View File

@@ -19,6 +19,7 @@
v-else
:title="bookmark ? bookmarkTitle : currentCollection.name"
:small-header="currentLayout?.smallHeader"
:header-shadow="currentLayout?.headerShadow"
>
<template #title-outer:prepend>
<v-button class="header-icon" :class="{ archive }" rounded icon secondary disabled>
@@ -202,7 +203,7 @@
</template>
</v-info>
<component :is="`layout-${layout || 'tabular'}`" v-else class="layout" v-bind="layoutState">
<component :is="`layout-${layout || 'tabular'}`" v-else v-bind="layoutState">
<template #no-results>
<v-info :title="t('no_results')" icon="search" center>
{{ t('no_results_copy') }}
@@ -686,10 +687,6 @@ export default defineComponent({
--v-button-color-disabled: var(--foreground-normal);
}
.layout {
--layout-offset-top: 64px;
}
.bookmark-controls {
.add,
.save,

52
app/src/modules/files/routes/collection.vue
View File

@@ -13,7 +13,12 @@
collection="directus_files"
:reset-preset="resetPreset"
>
<private-view :title="title" :class="{ dragging }">
<private-view
:title="title"
:class="{ dragging }"
:small-header="currentLayout?.smallHeader"
:header-shadow="currentLayout?.headerShadow"
>
<template v-if="breadcrumb" #headline>
<v-breadcrumb :items="breadcrumb" />
</template>
@@ -114,7 +119,7 @@
<files-navigation :current-folder="folder" />
</template>
<component :is="`layout-${layout}`" class="layout" v-bind="layoutState">
<component :is="`layout-${layout}`" v-bind="layoutState">
<template #no-results>
<v-info v-if="!filter && !search" :title="t('file_count', 0)" icon="folder" center>
{{ t('no_files_copy') }}
@@ -185,29 +190,30 @@
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, computed, ref, PropType, onMounted, onUnmounted, nextTick } from 'vue';
import FilesNavigation from '../components/navigation.vue';
import api from '@/api';
import { usePreset } from '@/composables/use-preset';
import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
import AddFolder from '../components/add-folder.vue';
import SearchInput from '@/views/private/components/search-input.vue';
import FolderPicker from '@/views/private/components/folder-picker.vue';
import emitter, { Events } from '@/events';
import { useRouter, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
import { useNotificationsStore } from '@/stores/notifications';
import { useUserStore } from '@/stores/user';
import { usePermissionsStore } from '@/stores/permissions';
import { subDays } from 'date-fns';
import { useFolders, Folder } from '@/composables/use-folders';
import { useEventListener } from '@/composables/use-event-listener';
import { useLayout } from '@directus/composables';
import { uploadFiles } from '@/utils/upload-files';
import { useExtension } from '@/composables/use-extension';
import { Folder, useFolders } from '@/composables/use-folders';
import { usePreset } from '@/composables/use-preset';
import emitter, { Events } from '@/events';
import { useNotificationsStore } from '@/stores/notifications';
import { usePermissionsStore } from '@/stores/permissions';
import { useUserStore } from '@/stores/user';
import { unexpectedError } from '@/utils/unexpected-error';
import { uploadFiles } from '@/utils/upload-files';
import DrawerBatch from '@/views/private/components/drawer-batch.vue';
import FolderPicker from '@/views/private/components/folder-picker.vue';
import LayoutSidebarDetail from '@/views/private/components/layout-sidebar-detail.vue';
import SearchInput from '@/views/private/components/search-input.vue';
import { useLayout } from '@directus/composables';
import { Filter } from '@directus/types';
import { mergeFilters } from '@directus/utils';
import { subDays } from 'date-fns';
import { PropType, computed, defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router';
import AddFolder from '../components/add-folder.vue';
import FilesNavigation from '../components/navigation.vue';
type Item = {
[field: string]: any;
@@ -249,6 +255,8 @@ export default defineComponent({
const { layout, layoutOptions, layoutQuery, filter, search, resetPreset } = usePreset(ref('directus_files'));
const currentLayout = useExtension('layout', layout);
const { confirmDelete, deleting, batchDelete, error: deleteError, batchEditActive } = useBatch();
const { breadcrumb, title } = useBreadcrumb();
@@ -357,6 +365,7 @@ export default defineComponent({
batchEditActive,
filter,
mergeFilters,
currentLayout,
};
function useBatch() {
@@ -668,11 +677,6 @@ export default defineComponent({
.header-icon {
--v-button-color-disabled: var(--foreground-normal);
}
.layout {
--layout-offset-top: 64px;
}
.drop-border {
position: fixed;
z-index: 500;

12
app/src/modules/settings/routes/presets/collection/collection.vue
View File

@@ -13,7 +13,11 @@
:collection="collection"
:clear-filters="clearFilters"
>
<private-view :title="t('settings_presets')" :small-header="currentLayout?.smallHeader">
<private-view
:title="t('settings_presets')"
:small-header="currentLayout?.smallHeader"
:header-shadow="currentLayout?.headerShadow"
>
<template #headline>
<v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" />
</template>
@@ -87,7 +91,7 @@
<settings-navigation />
</template>
<component :is="`layout-${layout || 'tabular'}`" class="layout" v-bind="layoutState">
<component :is="`layout-${layout || 'tabular'}`" v-bind="layoutState">
<template #no-results>
<v-info :title="t('no_presets')" icon="bookmark" center>
{{ t('no_presets_copy') }}
@@ -317,8 +321,4 @@ export default defineComponent({
--v-button-background-color-hover: var(--danger) !important;
--v-button-color-hover: var(--white) !important;
}
.layout {
--layout-offset-top: 64px;
}
</style>

9
app/src/modules/settings/routes/presets/item.vue
View File

@@ -9,7 +9,11 @@
:collection="values.collection"
readonly
>
<private-view :title="t('editing_preset')">
<private-view
:title="t('editing_preset')"
:small-header="currentLayout?.smallHeader"
:header-shadow="currentLayout?.headerShadow"
>
<template #headline>
<v-breadcrumb :items="[{ name: t('settings_presets'), to: '/settings/presets' }]" />
</template>
@@ -145,6 +149,7 @@ import { useShortcut } from '@/composables/use-shortcut';
import { useEditsGuard } from '@/composables/use-edits-guard';
import { isEqual } from 'lodash';
import { useExtensions } from '@/extensions';
import { useExtension } from '@/composables/use-extension';
type FormattedPreset = {
id: number;
@@ -195,6 +200,8 @@ const layoutFilter = computed<any>({
const layout = computed(() => values.value.layout);
const currentLayout = useExtension('layout', layout);
const { layoutWrapper } = useLayout(layout);
useShortcut('meta+s', () => {

12
app/src/modules/settings/routes/webhooks/collection.vue
View File

@@ -10,7 +10,11 @@
:search="search"
collection="directus_webhooks"
>
<private-view :title="t('webhooks')">
<private-view
:title="t('webhooks')"
:small-header="currentLayout?.smallHeader"
:header-shadow="currentLayout?.headerShadow"
>
<template #headline><v-breadcrumb :items="[{ name: t('settings'), to: '/settings' }]" /></template>
<template #title-outer:prepend>
@@ -56,7 +60,7 @@
</v-button>
</template>
<component :is="`layout-${layout}`" class="layout" v-bind="layoutState">
<component :is="`layout-${layout}`" v-bind="layoutState">
<template #no-results>
<v-info :title="t('no_results')" icon="search" center>
{{ t('no_results_copy') }}
@@ -100,6 +104,7 @@ import { usePreset } from '@/composables/use-preset';
import { useLayout } from '@directus/composables';
import api from '@/api';
import SearchInput from '@/views/private/components/search-input.vue';
import { useExtension } from '@/composables/use-extension';
type Item = {
[field: string]: any;
@@ -120,6 +125,8 @@ export default defineComponent({
const { layoutWrapper } = useLayout(layout);
const currentLayout = useExtension('layout', layout);
return {
t,
addNewLink,
@@ -136,6 +143,7 @@ export default defineComponent({
layout,
search,
clearFilters,
currentLayout,
};
async function refresh() {

15
app/src/modules/users/routes/collection.vue
View File

@@ -13,7 +13,11 @@
collection="directus_users"
:reset-preset="resetPreset"
>
<private-view :title="title">
<private-view
:title="title"
:small-header="currentLayout?.smallHeader"
:header-shadow="currentLayout?.headerShadow"
>
<template v-if="breadcrumb" #headline>
<v-breadcrumb :items="breadcrumb" />
</template>
@@ -100,7 +104,7 @@
<users-invite v-if="canInviteUsers" v-model="userInviteModalActive" @update:model-value="refresh" />
<component :is="`layout-${layout}`" class="layout" v-bind="layoutState">
<component :is="`layout-${layout}`" v-bind="layoutState">
<template #no-results>
<v-info v-if="!filter && !search" :title="t('user_count', 0)" icon="people_alt" center>
{{ t('no_users_copy') }}
@@ -181,6 +185,7 @@ import { Role } from '@directus/types';
import { mergeFilters } from '@directus/utils';
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
import useNavigation from '../composables/use-navigation';
import { useExtension } from '@/composables/use-extension';
type Item = {
[field: string]: any;
@@ -208,6 +213,8 @@ const selection = ref<Item[]>([]);
const { layout, layoutOptions, layoutQuery, filter, search, resetPreset } = usePreset(ref('directus_users'));
const { addNewLink } = useLinks();
const currentLayout = useExtension('layout', layout);
const { confirmDelete, deleting, batchDelete, batchEditActive } = useBatch();
const { breadcrumb, title } = useBreadcrumb();
@@ -369,8 +376,4 @@ function usePermissions() {
.header-icon {
--v-button-color-disabled: var(--foreground-normal);
}
.layout {
--layout-offset-top: 64px;
}
</style>