github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-01 14:04:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update interface previews (#10611)

Browse Source 
* update interface previews

* add treeview preview
This commit is contained in:
Azri Kahar
2021-12-25 09:24:18 +08:00
committed by GitHub
parent 0677d9ad45
commit d8f9f339ba
30 changed files with 164 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/interfaces/boolean/index.ts
View File

@@ -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,
});

11
app/src/interfaces/boolean/preview.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--primary)" opacity=".25"/>
<mask id="a" maskUnits="userSpaceOnUse" x="26" y="40" width="26" height="16" fill="#000">
<path fill="#fff" d="M26 40h26v16H26z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43 53.917V54h-8v-.083a6 6 0 1 1 0-11.834V42h8v.083a6 6 0 1 1 0 11.834Z"/>
</mask>
<path d="m43 53.917.33-1.972-2.33-.391v2.363h2ZM43 54v2h2v-2h-2Zm-8 0h-2v2h2v-2Zm0-.083h2v-2.363l-2.33.39.33 1.973Zm0-11.834-.33 1.972 2.33.391v-2.363h-2ZM35 42v-2h-2v2h2Zm8 0h2v-2h-2v2Zm0 .083h-2v2.363l2.33-.39-.33-1.973Zm-2 11.834V54h4v-.083h-4ZM43 52h-8v4h8v-4Zm-6 2v-.083h-4V54h4Zm-2.33-2.055A4.04 4.04 0 0 1 34 52v4c.452 0 .897-.038 1.33-.11l-.66-3.945ZM34 52a4 4 0 0 1-4-4h-4a8 8 0 0 0 8 8v-4Zm-4-4a4 4 0 0 1 4-4v-4a8 8 0 0 0-8 8h4Zm4-4c.23 0 .453.02.67.055l.66-3.944A8.044 8.044 0 0 0 34 40v4Zm3-1.917V42h-4v.083h4ZM35 44h8v-4h-8v4Zm6-2v.083h4V42h-4Zm2.33 2.055A4.04 4.04 0 0 1 44 44v-4c-.452 0-.897.038-1.33.11l.66 3.945ZM44 44a4 4 0 0 1 4 4h4a8 8 0 0 0-8-8v4Zm4 4a4 4 0 0 1-4 4v4a8 8 0 0 0 8-8h-4Zm-4 4c-.23 0-.453-.02-.67-.055l-.66 3.944c.433.073.878.111 1.33.111v-4Z" fill="var(--primary)" mask="url(#a)"/>
<circle cx="34" cy="48" r="4" fill="var(--primary)"/>
<rect x="62" y="45" width="30" height="6" rx="2" fill="var(--primary)"/>
<rect x="96" y="45" width="20" height="6" rx="2" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
app/src/interfaces/file-image/index.ts
View File

@@ -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,
});

7
app/src/interfaces/file-image/preview.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--background-page)" class="glow"/>
<rect x="19" y="14" width="118" height="68" rx="5" stroke="var(--primary)" stroke-width="2"/>
<rect x="24" y="19" width="108" height="58" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="m125.294 69-35-29-25.213 20.891L52 49 30 69h95.294Z" fill="var(--primary)"/>
<path d="M50 35a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 571 B

2
app/src/interfaces/file/index.ts
View File

@@ -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,
});

10
app/src/interfaces/file/preview.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="13" width="120" height="70" rx="6" fill="var(--background-page)" class="glow"/>
<rect x="19" y="14" width="118" height="68" rx="5" stroke="var(--primary)" stroke-width="2"/>
<rect x="24" y="19" width="108" height="58" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<mask id="b" fill="#fff">
<path fill-rule="evenodd" clip-rule="evenodd" d="M87.666 26.586A2 2 0 0 0 86.252 26H63a2 2 0 0 0-2 2v40a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V34.748a2 2 0 0 0-.586-1.414l-6.748-6.748ZM68 52a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-2Zm2-12a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H70Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M87.666 26.586A2 2 0 0 0 86.252 26H63a2 2 0 0 0-2 2v40a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V34.748a2 2 0 0 0-.586-1.414l-6.748-6.748ZM68 52a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-2Zm2-12a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H70Z" fill="var(--primary)"/>
<path d="M87.666 26.586 86.252 28l1.414-1.414Zm6.748 6.748 1.414-1.414-1.414 1.414ZM86.252 28l2.828-2.828A4 4 0 0 0 86.252 24v4ZM63 28h23.252v-4H63v4Zm0 0v-4a4 4 0 0 0-4 4h4Zm0 40V28h-4v40h4Zm0 0h-4a4 4 0 0 0 4 4v-4Zm30 0H63v4h30v-4Zm0 0v4a4 4 0 0 0 4-4h-4Zm0-33.252V68h4V34.748h-4Zm0 0h4a4 4 0 0 0-1.172-2.828L93 34.748ZM86.252 28 93 34.748l2.828-2.828-6.748-6.748L86.252 28ZM70 48a4 4 0 0 0-4 4h4v-4Zm6 0h-6v4h6v-4Zm4 4a4 4 0 0 0-4-4v4h4Zm0 2v-2h-4v2h4Zm-4 4a4 4 0 0 0 4-4h-4v4Zm-6 0h6v-4h-6v4Zm-4-4a4 4 0 0 0 4 4v-4h-4Zm0-2v2h4v-2h-4Zm4-10v-4a4 4 0 0 0-4 4h4Zm0 2v-2h-4v2h4Zm0 0h-4a4 4 0 0 0 4 4v-4Zm16 0H70v4h16v-4Zm0 0v4a4 4 0 0 0 4-4h-4Zm0-2v2h4v-2h-4Zm0 0h4a4 4 0 0 0-4-4v4Zm-16 0h16v-4H70v4Z" fill="var(--primary)" mask="url(#b)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

2
app/src/interfaces/group-accordion/index.ts
View File

@@ -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,
});

15
app/src/interfaces/group-accordion/preview.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg width="156" height="96" viewBox="0 0 156 96" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="15" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect x="28" y="15" width="30" height="6" rx="2" fill="var(--primary)"/>
<rect opacity="0.25" x="18" y="27" width="120" height="2" rx="1" fill="var(--primary)"/>
<rect x="18" y="41" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect x="28" y="41" width="50" height="6" rx="2" fill="var(--primary)"/>
<rect opacity="0.25" x="18" y="53" width="120" height="2" rx="1" fill="var(--primary)"/>
<rect x="18" y="67" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect x="28" y="67" width="40" height="6" rx="2" fill="var(--primary)"/>
<rect opacity="0.25" x="18" y="79" width="120" height="2" rx="1" fill="var(--primary)"/>
<path d="M130.82 14.6602L130 15.4805L132.652 18.1602L130 20.8398L130.82 21.6602L134.32 18.1602L130.82 14.6602Z" fill="var(--primary)"/>
<path d="M130.82 41L130 41.8203L132.652 44.5L130 47.1797L130.82 48L134.32 44.5L130.82 41Z" fill="var(--primary)"/>
<path d="M130.82 67L130 67.8203L132.652 70.5L130 73.1797L130.82 74L134.32 70.5L130.82 67Z" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
app/src/interfaces/group-detail/index.ts
View File

@@ -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,
});

6
app/src/interfaces/group-detail/preview.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="41" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect x="28" y="41" width="50" height="6" rx="2" fill="var(--primary)"/>
<rect opacity=".25" x="18" y="53" width="120" height="2" rx="1" fill="var(--primary)"/>
<path d="m130.82 41-.82.82 2.652 2.68L130 47.18l.82.82 3.5-3.5-3.5-3.5Z" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 422 B

2
app/src/interfaces/group-raw/index.ts
View File

@@ -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,
});

10
app/src/interfaces/group-raw/preview.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="19" y="14" width="118" height="68" rx="6" fill="var(--background-page)"/>
<rect x="19" y="14" width="118" height="68" rx="6" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 6"/>
<rect opacity=".25" x="29" y="24" width="98" height="20" rx="5" fill="var(--background-page)" stroke="var(--primary)" stroke-width="2"/>
<rect x="38" y="31" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="92" y="31" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect opacity=".25" x="29" y="52" width="98" height="20" rx="5" fill="var(--background-page)" stroke="var(--primary)" stroke-width="2"/>
<rect x="38" y="59" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="62" y="59" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 957 B

13
app/src/interfaces/input-hash/preview.svg
View File

@@ -1,6 +1,11 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--background-page)" class="glow" />
<rect x="19" y="36" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2" />
<rect x="28" y="45" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
<rect x="82" y="45" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity=".25" />
<rect x="18" y="35" width="120" height="26" rx="6" fill="var(--background-page)"/>
<rect x="19" y="36" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2"/>
<rect x="28" y="45" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="38" y="45" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="48" y="45" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="58" y="45" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="68" y="45" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="78" y="45" width="6" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<path d="M125.5 45.676h-.574V44.5A2.93 2.93 0 0 0 122 41.574a2.93 2.93 0 0 0-2.926 2.926v1.176h-.574c-.629 0-1.176.52-1.176 1.148v5.852c0 .629.547 1.148 1.176 1.148h7c.629 0 1.176-.52 1.176-1.148v-5.852c0-.629-.547-1.148-1.176-1.148Zm-5.25-1.176c0-.957.793-1.75 1.75-1.75s1.75.793 1.75 1.75v1.176h-3.5V44.5Zm5.25 8.176h-7v-5.852h7v5.852Zm-3.5-1.75c.629 0 1.176-.547 1.176-1.176 0-.629-.547-1.176-1.176-1.176-.629 0-1.176.547-1.176 1.176 0 .629.547 1.176 1.176 1.176Z" fill="var(--primary)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 466 B

After

Width:  |  Height:  |  Size: 1.3 KiB

2
app/src/interfaces/list-o2m-tree-view/index.ts
View File

@@ -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,
});

10
app/src/interfaces/list-o2m-tree-view/preview.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="60.34" y="36" width="40" height="6" rx="2" fill="var(--primary)"/>
<rect x="104.34" y="36" width="20" height="6" rx="2" fill="var(--primary)"/>
<rect x="104.34" y="18" width="10" height="6" rx="2" fill="var(--primary)"/>
<rect x="60.34" y="72" width="60" height="6" rx="2" fill="var(--primary)"/>
<rect x="50.34" y="54" width="20" height="6" rx="2" fill="var(--primary)"/>
<rect x="74.34" y="54" width="40" height="6" rx="2" fill="var(--primary)"/>
<rect x="50.59" y="18.25" width="50" height="6" rx="2" fill="var(--primary)"/>
<path d="m39 20.16-.82-.82-2.68 2.652-2.68-2.652-.82.82 3.5 3.5 3.5-3.5ZM44.16 36l-.82.82 2.652 2.68-2.652 2.68.82.82 3.5-3.5-3.5-3.5ZM39 56.16l-.82-.82-2.68 2.652-2.68-2.652-.82.82 3.5 3.5 3.5-3.5ZM44.16 72l-.82.82 2.652 2.68-2.652 2.68.82.82 3.5-3.5-3.5-3.5Z" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 915 B

2
app/src/interfaces/map/index.ts
View File

@@ -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,
});

2
app/src/interfaces/presentation-divider/index.ts
View File

@@ -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,
});

5
app/src/interfaces/presentation-divider/preview.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="41" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect x="28" y="41" width="50" height="6" rx="2" fill="var(--primary)"/>
<rect opacity=".25" x="18" y="53" width="120" height="2" rx="1" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 323 B

2
app/src/interfaces/presentation-links/index.ts
View File

@@ -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,
});

5
app/src/interfaces/presentation-links/preview.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="28" y="35" width="100" height="26" rx="6" fill="var(--primary)"/>
<rect opacity=".5" x="65" y="45" width="40" height="6" rx="2" fill="#fff"/>
<rect opacity=".5" x="51" y="45" width="10" height="6" rx="2" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 317 B

2
app/src/interfaces/select-color/index.ts
View File

@@ -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,
});

2
app/src/interfaces/select-icon/index.ts
View File

@@ -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,
});

2
app/src/interfaces/select-multiple-checkbox-tree/index.ts
View File

@@ -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<Field>[] = [
{
@@ -122,4 +123,5 @@ export default defineInterface({
},
],
recommendedDisplays: ['labels'],
preview: PreviewSVG,
});

10
app/src/interfaces/select-multiple-checkbox-tree/preview.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="58.25" y="36" width="70" height="6" rx="2" fill="var(--primary)"/>
<path d="M47.324 33.75h-8.148c-.657 0-1.176.52-1.176 1.176v8.148c0 .657.52 1.176 1.176 1.176h8.148c.657 0 1.176-.52 1.176-1.176v-8.148c0-.657-.52-1.176-1.176-1.176Zm0 9.324h-8.148v-8.148h8.148v8.148Zm-.574-5.824-.82-.82-3.856 3.828-1.504-1.504-.82.848 2.324 2.324 4.676-4.676Z" fill="var(--primary)"/>
<rect x="58.25" y="72" width="50" height="6" rx="2" fill="var(--primary)"/>
<path d="M47.324 69.75h-8.148c-.657 0-1.176.52-1.176 1.176v8.148c0 .657.52 1.176 1.176 1.176h8.148c.657 0 1.176-.52 1.176-1.176v-8.148c0-.657-.52-1.176-1.176-1.176Zm0 9.324h-8.148v-8.148h8.148v8.148Zm-.574-5.824-.82-.82-3.856 3.828-1.504-1.504-.82.848 2.324 2.324 4.676-4.676Z" fill="var(--primary)"/>
<rect x="48.25" y="54" width="60" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<path d="M37.324 52.926v8.148h-8.148v-8.148h8.148Zm0-1.176h-8.148c-.656 0-1.176.52-1.176 1.176v8.148c0 .657.52 1.176 1.176 1.176h8.148c.657 0 1.176-.52 1.176-1.176v-8.148c0-.657-.52-1.176-1.176-1.176Z" fill="var(--primary)" fill-opacity=".25"/>
<rect x="48.5" y="18.25" width="50" height="6" rx="2" fill="var(--primary)"/>
<path d="M37.574 16h-8.148c-.656 0-1.176.52-1.176 1.176v8.148c0 .656.52 1.176 1.176 1.176h8.148c.657 0 1.176-.52 1.176-1.176v-8.148c0-.656-.52-1.176-1.176-1.176Zm0 9.324h-8.148v-8.148h8.148v8.148ZM37 19.5l-.82-.82-3.856 3.828-1.504-1.504-.82.848 2.324 2.324L37 19.5Z" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
app/src/interfaces/slider/index.ts
View File

@@ -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,
});

10
app/src/interfaces/slider/preview.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity=".25" x="103" y="52" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect opacity=".25" x="19" y="52" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect opacity=".25" x="131" y="52" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect opacity=".25" x="47" y="52" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect opacity=".25" x="75" y="52" width="6" height="6" rx="2" fill="var(--primary)"/>
<rect opacity=".25" x="18" y="42" width="120" height="2" rx="1" fill="var(--primary)"/>
<rect x="18" y="42" width="81" height="2" rx="1" fill="var(--primary)"/>
<circle cx="106" cy="43" r="5" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 740 B

2
app/src/interfaces/tags/index.ts
View File

@@ -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,
});

13
app/src/interfaces/tags/preview.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="23" width="120" height="26" rx="6" fill="var(--background-page)" class="glow"/>
<rect x="19" y="24" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2"/>
<rect x="28" y="33" width="30" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="18" y="57" width="30" height="6" rx="2" fill="var(--primary)"/>
<rect x="66" y="57" width="40" height="6" rx="2" fill="var(--primary)"/>
<rect x="42" y="67" width="30" height="6" rx="2" fill="var(--primary)"/>
<rect x="52" y="57" width="10" height="6" rx="2" fill="var(--primary)"/>
<rect x="110" y="57" width="20" height="6" rx="2" fill="var(--primary)"/>
<rect x="76" y="67" width="10" height="6" rx="2" fill="var(--primary)"/>
<rect x="90" y="67" width="20" height="6" rx="2" fill="var(--primary)"/>
<rect x="18" y="67" width="20" height="6" rx="2" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 962 B

2
app/src/interfaces/translations/index.ts
View File

@@ -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,
});

11
app/src/interfaces/translations/preview.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="156" height="96" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="18" y="18" width="120" height="26" rx="6" fill="var(--background-page)" class="glow"/>
<rect x="19" y="19" width="118" height="24" rx="5" stroke="var(--primary)" stroke-width="2"/>
<rect x="28" y="28" width="50" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="82" y="28" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect opacity=".25" x="19" y="53" width="118" height="24" rx="5" fill="var(--background-page)" stroke="var(--primary)" stroke-width="2"/>
<rect x="28" y="62" width="20" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<rect x="52" y="62" width="40" height="6" rx="2" fill="var(--primary)" fill-opacity=".25"/>
<path d="m124.52 32.777-1.504-1.449.027-.027a9.996 9.996 0 0 0 2.16-3.801h1.723v-1.176h-4.102v-1.148h-1.148v1.148h-4.102V27.5h6.535c-.41 1.121-1.011 2.188-1.859 3.117a9.14 9.14 0 0 1-1.34-1.941h-1.176a10.89 10.89 0 0 0 1.75 2.652l-2.98 2.926.82.82 2.926-2.898 1.805 1.804.465-1.203Zm3.281-2.953h-1.176l-2.625 7h1.176l.656-1.75h2.762l.656 1.75h1.176l-2.625-7Zm-1.531 4.102.929-2.543.957 2.543h-1.886Z" fill="var(--primary)"/>
<path opacity=".25" d="m124.52 66.777-1.504-1.449.027-.027a9.996 9.996 0 0 0 2.16-3.801h1.723v-1.176h-4.102v-1.148h-1.148v1.148h-4.102V61.5h6.535c-.41 1.121-1.011 2.188-1.859 3.117a9.14 9.14 0 0 1-1.34-1.941h-1.176a10.89 10.89 0 0 0 1.75 2.652l-2.98 2.926.82.82 2.926-2.898 1.805 1.805.465-1.204Zm3.281-2.953h-1.176l-2.625 7h1.176l.656-1.75h2.762l.656 1.75h1.176l-2.625-7Zm-1.531 4.102.929-2.543.957 2.543h-1.886Z" fill="var(--primary)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB