Tweaks (#615)

* checkbox inactive styling

* fix options

* fix translation

* dropdown placeholder default

* cleanup text input options

* roles layout setup

* add placeholder option to dropdown

* add translations

* info on global settings

* elipses after placeholders

* update to bytes for better formatting control

* clean up mime type displays

* new template formatting

* WIP info and help sidebar

* add support for svgs

* user popover styling

* have un-styled logo spinner feel centered

* consistent missing avatar colors

* fix asset url

* add info drawers

* initial help drawer

* WIP add help components to all pages

* Remove non-existing trim

* Fix file interface deselect

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

src/interfaces/dropdown/dropdown.vue

@@ -20,6 +20,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from '@vue/composition-api';
+import i18n from '@/lang';
 
 type Option = {
 	text: string;
@@ -50,7 +51,7 @@ export default defineComponent({
 		},
 		placeholder: {
 			type: String,
-			default: null,
+			default: i18n.t('select_an_item'),
 		},
 		allowOther: {
 			type: Boolean,

src/interfaces/dropdown/index.ts

@@ -34,5 +34,11 @@ export default defineInterface(({ i18n }) => ({
 			width: 'half',
 			interface: 'icon',
 		},
+		{
+			field: 'placeholder',
+			name: i18n.t('placeholder'),
+			width: 'half',
+			interface: 'text-input',
+		},
 	],
 }));

src/interfaces/file/file.vue

@@ -13,7 +13,13 @@
 						:value="file && file.title"
 					>
 						<template #prepend>
-							<div class="preview" :class="{ 'has-file': file }">
+							<div
+								class="preview"
+								:class="{
+									'has-file': file,
+									'is-svg': file && file.type.includes('svg'),
+								}"
+							>
 								<img
 									v-if="imageThumbnail"
 									:src="imageThumbnail"
@@ -127,6 +133,7 @@ type FileInfo = {
 	title: string;
 	type: string;
 	data: {
+		asset_url: string;
 		thumbnails?: {
 			key: string;
 			url: string;
@@ -160,6 +167,7 @@ export default defineComponent({
 
 		const imageThumbnail = computed(() => {
 			if (file.value === null) return null;
+			if (file.value.type.includes('svg')) return file.value.data.asset_url;
 			if (file.value.type.includes('image') === false) return null;
 			return file.value.data.thumbnails?.find((thumb) => thumb.key === 'directus-small-crop')
 				?.url;
@@ -291,9 +299,24 @@ export default defineComponent({
 	background-color: var(--background-normal);
 	border-radius: var(--border-radius);
 
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
 	&.has-file {
 		background-color: var(--primary-alt);
 	}
+
+	&.is-svg {
+		padding: 4px;
+		background-color: var(--background-normal);
+
+		img {
+			object-fit: contain;
+		}
+	}
 }
 
 .extension {

src/interfaces/image/image.vue

@@ -6,7 +6,11 @@
 			{{ $t('disabled') }}
 		</v-notice>
 
-		<div class="image-preview" v-else-if="image" :class="{ isSVG: image.type.includes('svg') }">
+		<div
+			class="image-preview"
+			v-else-if="image"
+			:class="{ 'is-svg': image.type.includes('svg') }"
+		>
 			<img :src="src" alt="" role="presentation" />
 
 			<div class="shadow" />
@@ -217,9 +221,9 @@ img {
 	object-fit: cover;
 }
 
-.isSVG {
+.is-svg {
 	padding: 32px;
-	background-color: var(--background-subdued);
+	background-color: var(--background-normal);
 
 	img {
 		object-fit: contain;

src/interfaces/text-input/index.ts

@@ -3,7 +3,7 @@ import { defineInterface } from '@/interfaces/define';
 
 export default defineInterface(({ i18n }) => ({
 	id: 'text-input',
-	name: i18n.t('interfaces.text-input.text-input'),
+	name: i18n.t('text_input'),
 	icon: 'text_fields',
 	component: InterfaceTextInput,
 	options: [
@@ -25,22 +25,17 @@ export default defineInterface(({ i18n }) => ({
 			width: 'half',
 			interface: 'icon',
 		},
-		{
-			field: 'trim',
-			name: 'Trim',
-			width: 'half',
-			interface: 'toggle',
-		},
 		{
 			field: 'font',
 			name: 'Font',
 			width: 'half',
-			interface: 'select-one-dropdown',
+			interface: 'dropdown',
+			default: 'sans-serif',
 			options: {
-				items: [
-					{ itemText: 'Sans', itemValue: 'sans-serif' },
-					{ itemText: 'Mono', itemValue: 'monospace' },
-					{ itemText: 'Serif', itemValue: 'serif' },
+				choices: [
+					{ text: 'Sans Serif', value: 'sans-serif' },
+					{ text: 'Monospace', value: 'monospace' },
+					{ text: 'Serif', value: 'serif' },
 				],
 			},
 		},

src/interfaces/text-input/text-input.vue

@@ -3,7 +3,6 @@
 		:value="value"
 		:placeholder="placeholder"
 		:disabled="disabled"
-		:trim="trim"
 		:type="masked ? 'password' : 'text'"
 		:class="font"
 		:maxlength="length"