github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-24 07:27:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix table and cards layout scroll to top if page changes (#8826)

Browse Source 
* Fix table and cards layout scroll to top if page changes

Fixes #8767

* Update cards.vue

* Update tabular.vue

Co-authored-by: Oreille <33065839+Oreilles@users.noreply.github.com>
This commit is contained in:
Nicola Krumschmidt
2021-10-15 16:55:54 +02:00
committed by GitHub
parent 8396eee95f
commit 70861db1db
6 changed files with 83 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/src/layouts/cards/cards.vue
View File

@@ -75,7 +75,7 @@
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, watch, PropType, ref } from 'vue';
import { defineComponent, watch, PropType, ref, inject, Ref } from 'vue';
import Card from './components/card.vue';
import CardsHeader from './components/header.vue';
@@ -214,10 +214,17 @@ export default defineComponent({
const sizeWritable = useSync(props, 'size', emit);
const sortWritable = useSync(props, 'sort', emit);
const mainElement = inject<Ref<Element | undefined>>('main-element');
const layoutElement = ref<HTMLElement>();
const { width } = useElementSize(layoutElement);
watch(
() => props.page,
() => mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' })
);
watch(width, () => {
emit('update:width', width.value);
});

11
app/src/layouts/cards/index.ts
View File

@@ -4,7 +4,7 @@ import CardsOptions from './options.vue';
import CardsActions from './actions.vue';
import { useI18n } from 'vue-i18n';
import { toRefs, inject, computed, ref, watch } from 'vue';
import { toRefs, computed, ref } from 'vue';
import { useCollection } from '@directus/shared/composables';
import { useItems } from '@directus/shared/composables';
import { getFieldsFromTemplate } from '@directus/shared/utils';
@@ -31,8 +31,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
const relationsStore = useRelationsStore();
const mainElement = inject('main-element', ref<Element | null>(null));
const selection = useSync(props, 'selection', emit);
const layoutOptions = useSync(props, 'layoutOptions', emit);
const layoutQuery = useSync(props, 'layoutQuery', emit);
@@ -175,13 +173,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : []));
const sort = syncRefProperty(layoutQuery, 'sort', defaultSort.value);
watch(
() => page.value,
() => {
mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' });
}
);
const fields = computed<string[]>(() => {
if (!primaryKeyField.value || !props.collection) return [];
const fields = [primaryKeyField.value.field];

11
app/src/layouts/tabular/index.ts
View File

@@ -4,7 +4,7 @@ import TabularOptions from './options.vue';
import TabularActions from './actions.vue';
import { useI18n } from 'vue-i18n';
import { ref, computed, inject, watch, toRefs } from 'vue';
import { ref, computed, watch, toRefs } from 'vue';
import { HeaderRaw, Item } from '@/components/v-table/types';
import { Field } from '@directus/shared/types';
@@ -34,8 +34,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
const router = useRouter();
const mainElement = inject('main-element', ref<Element | null>(null));
const selection = useSync(props, 'selection', emit);
const layoutOptions = useSync(props, 'layoutOptions', emit);
const layoutQuery = useSync(props, 'layoutQuery', emit);
@@ -160,13 +158,6 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
return adjustFieldsForDisplays(fields.value, props.collection);
});
watch(
() => page.value,
() => {
mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' });
}
);
return { sort, limit, page, fields, fieldsWithRelational };
}

9
app/src/layouts/tabular/tabular.vue
View File

@@ -81,7 +81,7 @@
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { ComponentPublicInstance, defineComponent, PropType, ref } from 'vue';
import { ComponentPublicInstance, defineComponent, PropType, ref, inject, Ref, watch } from 'vue';
import { useSync } from '@directus/shared/composables';
import useShortcut from '@/composables/use-shortcut';
import { Field, Item, Collection, Filter } from '@directus/shared/types';
@@ -199,8 +199,15 @@ export default defineComponent({
const tableHeadersWritable = useSync(props, 'tableHeaders', emit);
const limitWritable = useSync(props, 'limit', emit);
const mainElement = inject<Ref<Element | undefined>>('main-element');
const table = ref<ComponentPublicInstance>();
watch(
() => props.page,
() => mainElement.value?.scrollTo({ top: 0, behavior: 'smooth' })
);
useShortcut(
'meta+a',
() => {

4
app/src/views/private/components/docs-wrapper/docs-wrapper.vue
View File

@@ -17,7 +17,7 @@ export default defineComponent({
setup(props, { emit }) {
const route = useRoute();
const mainElement = inject<Ref<Element>>('main-element');
const mainElement = inject<Ref<Element | undefined>>('main-element');
const pageClass = computed(() => props.frontmatter?.pageClass);
@@ -31,7 +31,7 @@ export default defineComponent({
);
onMounted(() => {
if (route.hash && mainElement) {
if (route.hash && mainElement?.value) {
const linkedEl = document.querySelector(route.hash) as HTMLElement;
if (linkedEl) {

126
package-lock.json generated
View File

@@ -57,19 +57,19 @@
},
"api": {
"name": "directus",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "GPL-3.0-only",
"dependencies": {
"@directus/app": "9.0.0-rc.96",
"@directus/drive": "9.0.0-rc.96",
"@directus/drive-azure": "9.0.0-rc.96",
"@directus/drive-gcs": "9.0.0-rc.96",
"@directus/drive-s3": "9.0.0-rc.96",
"@directus/extensions-sdk": "9.0.0-rc.96",
"@directus/format-title": "9.0.0-rc.96",
"@directus/schema": "9.0.0-rc.96",
"@directus/shared": "9.0.0-rc.96",
"@directus/specs": "9.0.0-rc.96",
"@directus/app": "9.0.0-rc.97",
"@directus/drive": "9.0.0-rc.97",
"@directus/drive-azure": "9.0.0-rc.97",
"@directus/drive-gcs": "9.0.0-rc.97",
"@directus/drive-s3": "9.0.0-rc.97",
"@directus/extensions-sdk": "9.0.0-rc.97",
"@directus/format-title": "9.0.0-rc.97",
"@directus/schema": "9.0.0-rc.97",
"@directus/shared": "9.0.0-rc.97",
"@directus/specs": "9.0.0-rc.97",
"@godaddy/terminus": "^4.9.0",
"@rollup/plugin-alias": "^3.1.2",
"@rollup/plugin-virtual": "^2.0.3",
@@ -316,12 +316,12 @@
},
"app": {
"name": "@directus/app",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"devDependencies": {
"@directus/docs": "9.0.0-rc.96",
"@directus/extensions-sdk": "9.0.0-rc.96",
"@directus/format-title": "9.0.0-rc.96",
"@directus/shared": "9.0.0-rc.96",
"@directus/docs": "9.0.0-rc.97",
"@directus/extensions-sdk": "9.0.0-rc.97",
"@directus/format-title": "9.0.0-rc.97",
"@directus/shared": "9.0.0-rc.97",
"@fullcalendar/core": "5.9.0",
"@fullcalendar/daygrid": "5.9.0",
"@fullcalendar/interaction": "5.9.0",
@@ -452,7 +452,7 @@
},
"docs": {
"name": "@directus/docs",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "ISC",
"devDependencies": {
"directory-tree": "3.0.0",
@@ -47629,11 +47629,11 @@
},
"packages/cli": {
"name": "@directus/cli",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "MIT",
"dependencies": {
"@directus/format-title": "9.0.0-rc.96",
"@directus/sdk": "9.0.0-rc.96",
"@directus/format-title": "9.0.0-rc.97",
"@directus/sdk": "9.0.0-rc.97",
"@types/yargs": "^17.0.0",
"app-module-path": "^2.2.0",
"chalk": "^4.1.0",
@@ -47842,11 +47842,11 @@
}
},
"packages/create-directus-extension": {
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "GPL-3.0-only",
"dependencies": {
"@directus/extensions-sdk": "9.0.0-rc.96",
"@directus/shared": "9.0.0-rc.96",
"@directus/extensions-sdk": "9.0.0-rc.97",
"@directus/shared": "9.0.0-rc.97",
"inquirer": "^8.1.2"
},
"bin": {
@@ -47892,7 +47892,7 @@
"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
},
"packages/create-directus-project": {
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "GPL-3.0-only",
"dependencies": {
"chalk": "^4.1.1",
@@ -47930,7 +47930,7 @@
},
"packages/drive": {
"name": "@directus/drive",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "MIT",
"dependencies": {
"fs-extra": "^10.0.0",
@@ -47949,11 +47949,11 @@
},
"packages/drive-azure": {
"name": "@directus/drive-azure",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "MIT",
"dependencies": {
"@azure/storage-blob": "^12.6.0",
"@directus/drive": "9.0.0-rc.96",
"@directus/drive": "9.0.0-rc.97",
"normalize-path": "^3.0.0"
},
"devDependencies": {
@@ -47985,10 +47985,10 @@
},
"packages/drive-gcs": {
"name": "@directus/drive-gcs",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "MIT",
"dependencies": {
"@directus/drive": "9.0.0-rc.96",
"@directus/drive": "9.0.0-rc.97",
"@google-cloud/storage": "^5.8.5",
"lodash": "4.17.21",
"normalize-path": "^3.0.0"
@@ -48008,10 +48008,10 @@
},
"packages/drive-s3": {
"name": "@directus/drive-s3",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "MIT",
"dependencies": {
"@directus/drive": "9.0.0-rc.96",
"@directus/drive": "9.0.0-rc.97",
"aws-sdk": "^2.928.0",
"normalize-path": "^3.0.0"
},
@@ -48058,9 +48058,9 @@
},
"packages/extensions-sdk": {
"name": "@directus/extensions-sdk",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"dependencies": {
"@directus/shared": "9.0.0-rc.96",
"@directus/shared": "9.0.0-rc.97",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.0.0",
@@ -48112,7 +48112,7 @@
},
"packages/format-title": {
"name": "@directus/format-title",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "MIT",
"devDependencies": {
"@rollup/plugin-commonjs": "21.0.0",
@@ -48131,10 +48131,10 @@
},
"packages/gatsby-source-directus": {
"name": "@directus/gatsby-source-directus",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "MIT",
"dependencies": {
"@directus/sdk": "9.0.0-rc.96",
"@directus/sdk": "9.0.0-rc.97",
"chalk": "4.1.2",
"gatsby-source-filesystem": "3.14.0",
"gatsby-source-graphql": "3.14.0",
@@ -48149,7 +48149,7 @@
},
"packages/schema": {
"name": "@directus/schema",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "GPL-3.0",
"dependencies": {
"knex-schema-inspector": "1.6.2",
@@ -48162,7 +48162,7 @@
},
"packages/sdk": {
"name": "@directus/sdk",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "MIT",
"dependencies": {
"axios": "^0.23.0"
@@ -48191,7 +48191,7 @@
},
"packages/shared": {
"name": "@directus/shared",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"dependencies": {
"axios": "*",
"date-fns": "2.24.0",
@@ -48253,7 +48253,7 @@
},
"packages/specs": {
"name": "@directus/specs",
"version": "9.0.0-rc.96",
"version": "9.0.0-rc.97",
"license": "GPL-3.0",
"dependencies": {
"openapi3-ts": "^2.0.1"
@@ -50133,10 +50133,10 @@
"@directus/app": {
"version": "file:app",
"requires": {
"@directus/docs": "9.0.0-rc.96",
"@directus/extensions-sdk": "9.0.0-rc.96",
"@directus/format-title": "9.0.0-rc.96",
"@directus/shared": "9.0.0-rc.96",
"@directus/docs": "9.0.0-rc.97",
"@directus/extensions-sdk": "9.0.0-rc.97",
"@directus/format-title": "9.0.0-rc.97",
"@directus/shared": "9.0.0-rc.97",
"@fullcalendar/core": "5.9.0",
"@fullcalendar/daygrid": "5.9.0",
"@fullcalendar/interaction": "5.9.0",
@@ -50245,8 +50245,8 @@
"@directus/cli": {
"version": "file:packages/cli",
"requires": {
"@directus/format-title": "9.0.0-rc.96",
"@directus/sdk": "9.0.0-rc.96",
"@directus/format-title": "9.0.0-rc.97",
"@directus/sdk": "9.0.0-rc.97",
"@types/figlet": "1.5.4",
"@types/fs-extra": "9.0.13",
"@types/jest": "27.0.2",
@@ -50540,7 +50540,7 @@
"version": "file:packages/drive-azure",
"requires": {
"@azure/storage-blob": "^12.6.0",
"@directus/drive": "9.0.0-rc.96",
"@directus/drive": "9.0.0-rc.97",
"@types/fs-extra": "9.0.13",
"@types/jest": "27.0.2",
"@types/node": "15.12.2",
@@ -50570,7 +50570,7 @@
"@directus/drive-gcs": {
"version": "file:packages/drive-gcs",
"requires": {
"@directus/drive": "9.0.0-rc.96",
"@directus/drive": "9.0.0-rc.97",
"@google-cloud/storage": "^5.8.5",
"@lukeed/uuid": "2.0.0",
"@types/fs-extra": "9.0.13",
@@ -50589,7 +50589,7 @@
"@directus/drive-s3": {
"version": "file:packages/drive-s3",
"requires": {
"@directus/drive": "9.0.0-rc.96",
"@directus/drive": "9.0.0-rc.97",
"@lukeed/uuid": "2.0.0",
"@types/fs-extra": "9.0.13",
"@types/jest": "27.0.2",
@@ -50621,7 +50621,7 @@
"@directus/extensions-sdk": {
"version": "file:packages/extensions-sdk",
"requires": {
"@directus/shared": "9.0.0-rc.96",
"@directus/shared": "9.0.0-rc.97",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.0.0",
@@ -50676,7 +50676,7 @@
"@directus/gatsby-source-directus": {
"version": "file:packages/gatsby-source-directus",
"requires": {
"@directus/sdk": "9.0.0-rc.96",
"@directus/sdk": "9.0.0-rc.97",
"chalk": "4.1.2",
"gatsby-source-filesystem": "3.14.0",
"gatsby-source-graphql": "3.14.0",
@@ -60280,8 +60280,8 @@
"create-directus-extension": {
"version": "file:packages/create-directus-extension",
"requires": {
"@directus/extensions-sdk": "9.0.0-rc.96",
"@directus/shared": "9.0.0-rc.96",
"@directus/extensions-sdk": "9.0.0-rc.97",
"@directus/shared": "9.0.0-rc.97",
"inquirer": "^8.1.2"
},
"dependencies": {
@@ -61372,16 +61372,16 @@
"directus": {
"version": "file:api",
"requires": {
"@directus/app": "9.0.0-rc.96",
"@directus/drive": "9.0.0-rc.96",
"@directus/drive-azure": "9.0.0-rc.96",
"@directus/drive-gcs": "9.0.0-rc.96",
"@directus/drive-s3": "9.0.0-rc.96",
"@directus/extensions-sdk": "9.0.0-rc.96",
"@directus/format-title": "9.0.0-rc.96",
"@directus/schema": "9.0.0-rc.96",
"@directus/shared": "9.0.0-rc.96",
"@directus/specs": "9.0.0-rc.96",
"@directus/app": "9.0.0-rc.97",
"@directus/drive": "9.0.0-rc.97",
"@directus/drive-azure": "9.0.0-rc.97",
"@directus/drive-gcs": "9.0.0-rc.97",
"@directus/drive-s3": "9.0.0-rc.97",
"@directus/extensions-sdk": "9.0.0-rc.97",
"@directus/format-title": "9.0.0-rc.97",
"@directus/schema": "9.0.0-rc.97",
"@directus/shared": "9.0.0-rc.97",
"@directus/specs": "9.0.0-rc.97",
"@godaddy/terminus": "^4.9.0",
"@keyv/redis": "^2.1.2",
"@rollup/plugin-alias": "^3.1.2",