From d8f9f339ba7103285b0c08d9684e504cc7d3d1e3 Mon Sep 17 00:00:00 2001 From: Azri Kahar <42867097+azrikahar@users.noreply.github.com> Date: Sat, 25 Dec 2021 09:24:18 +0800 Subject: [PATCH] Update interface previews (#10611) * update interface previews * add treeview preview --- app/src/interfaces/boolean/index.ts | 2 ++ app/src/interfaces/boolean/preview.svg | 11 +++++++++++ app/src/interfaces/file-image/index.ts | 2 ++ app/src/interfaces/file-image/preview.svg | 7 +++++++ app/src/interfaces/file/index.ts | 2 ++ app/src/interfaces/file/preview.svg | 10 ++++++++++ app/src/interfaces/group-accordion/index.ts | 2 ++ app/src/interfaces/group-accordion/preview.svg | 15 +++++++++++++++ app/src/interfaces/group-detail/index.ts | 2 ++ app/src/interfaces/group-detail/preview.svg | 6 ++++++ app/src/interfaces/group-raw/index.ts | 2 ++ app/src/interfaces/group-raw/preview.svg | 10 ++++++++++ app/src/interfaces/input-hash/preview.svg | 13 +++++++++---- app/src/interfaces/list-o2m-tree-view/index.ts | 2 ++ app/src/interfaces/list-o2m-tree-view/preview.svg | 10 ++++++++++ app/src/interfaces/map/index.ts | 2 ++ app/src/interfaces/presentation-divider/index.ts | 2 ++ .../interfaces/presentation-divider/preview.svg | 5 +++++ app/src/interfaces/presentation-links/index.ts | 2 ++ app/src/interfaces/presentation-links/preview.svg | 5 +++++ app/src/interfaces/select-color/index.ts | 2 ++ app/src/interfaces/select-icon/index.ts | 2 ++ .../select-multiple-checkbox-tree/index.ts | 2 ++ .../select-multiple-checkbox-tree/preview.svg | 10 ++++++++++ app/src/interfaces/slider/index.ts | 2 ++ app/src/interfaces/slider/preview.svg | 10 ++++++++++ app/src/interfaces/tags/index.ts | 2 ++ app/src/interfaces/tags/preview.svg | 13 +++++++++++++ app/src/interfaces/translations/index.ts | 2 ++ app/src/interfaces/translations/preview.svg | 11 +++++++++++ 30 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 app/src/interfaces/boolean/preview.svg create mode 100644 app/src/interfaces/file-image/preview.svg create mode 100644 app/src/interfaces/file/preview.svg create mode 100644 app/src/interfaces/group-accordion/preview.svg create mode 100644 app/src/interfaces/group-detail/preview.svg create mode 100644 app/src/interfaces/group-raw/preview.svg create mode 100644 app/src/interfaces/list-o2m-tree-view/preview.svg create mode 100644 app/src/interfaces/presentation-divider/preview.svg create mode 100644 app/src/interfaces/presentation-links/preview.svg create mode 100644 app/src/interfaces/select-multiple-checkbox-tree/preview.svg create mode 100644 app/src/interfaces/slider/preview.svg create mode 100644 app/src/interfaces/tags/preview.svg create mode 100644 app/src/interfaces/translations/preview.svg diff --git a/app/src/interfaces/boolean/index.ts b/app/src/interfaces/boolean/index.ts index a532e1e97d..8105a569c1 100644 --- a/app/src/interfaces/boolean/index.ts +++ b/app/src/interfaces/boolean/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceBoolean from './boolean.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'boolean', @@ -69,4 +70,5 @@ export default defineInterface({ }, }, ], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/boolean/preview.svg b/app/src/interfaces/boolean/preview.svg new file mode 100644 index 0000000000..9b6073a93a --- /dev/null +++ b/app/src/interfaces/boolean/preview.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/src/interfaces/file-image/index.ts b/app/src/interfaces/file-image/index.ts index a1aa5f618a..79e0e9aa4a 100644 --- a/app/src/interfaces/file-image/index.ts +++ b/app/src/interfaces/file-image/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceFileImage from './file-image.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'file-image', @@ -42,4 +43,5 @@ export default defineInterface({ }, ], recommendedDisplays: ['image'], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/file-image/preview.svg b/app/src/interfaces/file-image/preview.svg new file mode 100644 index 0000000000..0a92603a5d --- /dev/null +++ b/app/src/interfaces/file-image/preview.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/src/interfaces/file/index.ts b/app/src/interfaces/file/index.ts index 3610eb8d55..2834584a7a 100644 --- a/app/src/interfaces/file/index.ts +++ b/app/src/interfaces/file/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceFile from './file.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'file', @@ -27,4 +28,5 @@ export default defineInterface({ }, ], recommendedDisplays: ['file'], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/file/preview.svg b/app/src/interfaces/file/preview.svg new file mode 100644 index 0000000000..528106e00d --- /dev/null +++ b/app/src/interfaces/file/preview.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/src/interfaces/group-accordion/index.ts b/app/src/interfaces/group-accordion/index.ts index e158905343..531bfe59c6 100644 --- a/app/src/interfaces/group-accordion/index.ts +++ b/app/src/interfaces/group-accordion/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceGroupDivider from './group-accordion.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'group-accordion', @@ -78,4 +79,5 @@ export default defineInterface({ }, }, ], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/group-accordion/preview.svg b/app/src/interfaces/group-accordion/preview.svg new file mode 100644 index 0000000000..b33b1b127f --- /dev/null +++ b/app/src/interfaces/group-accordion/preview.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + diff --git a/app/src/interfaces/group-detail/index.ts b/app/src/interfaces/group-detail/index.ts index cf97cb57e6..8c6f04c35a 100644 --- a/app/src/interfaces/group-detail/index.ts +++ b/app/src/interfaces/group-detail/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceGroupDetail from './group-detail.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'group-detail', @@ -54,4 +55,5 @@ export default defineInterface({ }, }, ], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/group-detail/preview.svg b/app/src/interfaces/group-detail/preview.svg new file mode 100644 index 0000000000..52a2bd6231 --- /dev/null +++ b/app/src/interfaces/group-detail/preview.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/src/interfaces/group-raw/index.ts b/app/src/interfaces/group-raw/index.ts index 4e1f3874e2..a631dfd820 100644 --- a/app/src/interfaces/group-raw/index.ts +++ b/app/src/interfaces/group-raw/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceGroupRaw from './group-raw.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'group-raw', @@ -11,4 +12,5 @@ export default defineInterface({ group: 'group', types: ['alias'], options: [], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/group-raw/preview.svg b/app/src/interfaces/group-raw/preview.svg new file mode 100644 index 0000000000..1a90634de7 --- /dev/null +++ b/app/src/interfaces/group-raw/preview.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/src/interfaces/input-hash/preview.svg b/app/src/interfaces/input-hash/preview.svg index ca7ea9ea99..ef11f49e63 100644 --- a/app/src/interfaces/input-hash/preview.svg +++ b/app/src/interfaces/input-hash/preview.svg @@ -1,6 +1,11 @@ - - - - + + + + + + + + + diff --git a/app/src/interfaces/list-o2m-tree-view/index.ts b/app/src/interfaces/list-o2m-tree-view/index.ts index 6cf4e2e4b1..7aff3b5843 100644 --- a/app/src/interfaces/list-o2m-tree-view/index.ts +++ b/app/src/interfaces/list-o2m-tree-view/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceListO2MTreeView from './list-o2m-tree-view.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'list-o2m-tree-view', @@ -77,4 +78,5 @@ export default defineInterface({ }, ]; }, + preview: PreviewSVG, }); diff --git a/app/src/interfaces/list-o2m-tree-view/preview.svg b/app/src/interfaces/list-o2m-tree-view/preview.svg new file mode 100644 index 0000000000..e289dfbf59 --- /dev/null +++ b/app/src/interfaces/list-o2m-tree-view/preview.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/src/interfaces/map/index.ts b/app/src/interfaces/map/index.ts index 86e09583ec..f7bcfd41ac 100644 --- a/app/src/interfaces/map/index.ts +++ b/app/src/interfaces/map/index.ts @@ -1,6 +1,7 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceMap from './map.vue'; import Options from './options.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'map', @@ -24,4 +25,5 @@ export default defineInterface({ group: 'selection', options: Options, recommendedDisplays: [], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/presentation-divider/index.ts b/app/src/interfaces/presentation-divider/index.ts index cd1804b6e5..f45f9aa5a0 100644 --- a/app/src/interfaces/presentation-divider/index.ts +++ b/app/src/interfaces/presentation-divider/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfacePresentationDivider from './presentation-divider.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'presentation-divider', @@ -74,4 +75,5 @@ export default defineInterface({ }, }, ], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/presentation-divider/preview.svg b/app/src/interfaces/presentation-divider/preview.svg new file mode 100644 index 0000000000..4877cdf2fd --- /dev/null +++ b/app/src/interfaces/presentation-divider/preview.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/src/interfaces/presentation-links/index.ts b/app/src/interfaces/presentation-links/index.ts index 738bda12bd..ed3e3f8cb5 100644 --- a/app/src/interfaces/presentation-links/index.ts +++ b/app/src/interfaces/presentation-links/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfacePresentationLinks from './presentation-links.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'presentation-links', @@ -84,4 +85,5 @@ export default defineInterface({ }, }, ], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/presentation-links/preview.svg b/app/src/interfaces/presentation-links/preview.svg new file mode 100644 index 0000000000..7270a1b0fe --- /dev/null +++ b/app/src/interfaces/presentation-links/preview.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/src/interfaces/select-color/index.ts b/app/src/interfaces/select-color/index.ts index 8482ac33c0..46a7000f0d 100644 --- a/app/src/interfaces/select-color/index.ts +++ b/app/src/interfaces/select-color/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceColor from './select-color.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'select-color', @@ -48,4 +49,5 @@ export default defineInterface({ }, }, ], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/select-icon/index.ts b/app/src/interfaces/select-icon/index.ts index 560276727c..66a61d6423 100644 --- a/app/src/interfaces/select-icon/index.ts +++ b/app/src/interfaces/select-icon/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceSelectIcon from './select-icon.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'select-icon', @@ -11,4 +12,5 @@ export default defineInterface({ group: 'selection', options: [], recommendedDisplays: ['icon'], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/select-multiple-checkbox-tree/index.ts b/app/src/interfaces/select-multiple-checkbox-tree/index.ts index a267519a42..df0861ab2e 100644 --- a/app/src/interfaces/select-multiple-checkbox-tree/index.ts +++ b/app/src/interfaces/select-multiple-checkbox-tree/index.ts @@ -1,6 +1,7 @@ import { defineInterface } from '@directus/shared/utils'; import { DeepPartial, Field } from '@directus/shared/types'; import InterfaceSelectMultipleCheckboxesTree from './select-multiple-checkbox-tree.vue'; +import PreviewSVG from './preview.svg?raw'; const repeaterFields: DeepPartial[] = [ { @@ -122,4 +123,5 @@ export default defineInterface({ }, ], recommendedDisplays: ['labels'], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/select-multiple-checkbox-tree/preview.svg b/app/src/interfaces/select-multiple-checkbox-tree/preview.svg new file mode 100644 index 0000000000..f6bb34d2d2 --- /dev/null +++ b/app/src/interfaces/select-multiple-checkbox-tree/preview.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/src/interfaces/slider/index.ts b/app/src/interfaces/slider/index.ts index 114004c91f..db5db141f9 100644 --- a/app/src/interfaces/slider/index.ts +++ b/app/src/interfaces/slider/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceSlider from './slider.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'slider', @@ -47,4 +48,5 @@ export default defineInterface({ }, }, ], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/slider/preview.svg b/app/src/interfaces/slider/preview.svg new file mode 100644 index 0000000000..e9e51ca295 --- /dev/null +++ b/app/src/interfaces/slider/preview.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/src/interfaces/tags/index.ts b/app/src/interfaces/tags/index.ts index a4ade6dc17..c524826da7 100644 --- a/app/src/interfaces/tags/index.ts +++ b/app/src/interfaces/tags/index.ts @@ -1,5 +1,6 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceTags from './tags.vue'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'tags', @@ -115,4 +116,5 @@ export default defineInterface({ }, ], recommendedDisplays: ['labels'], + preview: PreviewSVG, }); diff --git a/app/src/interfaces/tags/preview.svg b/app/src/interfaces/tags/preview.svg new file mode 100644 index 0000000000..7e76c34718 --- /dev/null +++ b/app/src/interfaces/tags/preview.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/src/interfaces/translations/index.ts b/app/src/interfaces/translations/index.ts index 279bb7b11b..6f89d11f71 100644 --- a/app/src/interfaces/translations/index.ts +++ b/app/src/interfaces/translations/index.ts @@ -1,6 +1,7 @@ import { defineInterface } from '@directus/shared/utils'; import InterfaceTranslations from './translations.vue'; import { useFieldsStore } from '@/stores'; +import PreviewSVG from './preview.svg?raw'; export default defineInterface({ id: 'translations', @@ -39,4 +40,5 @@ export default defineInterface({ }, ]; }, + preview: PreviewSVG, }); diff --git a/app/src/interfaces/translations/preview.svg b/app/src/interfaces/translations/preview.svg new file mode 100644 index 0000000000..5d21875b19 --- /dev/null +++ b/app/src/interfaces/translations/preview.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +