Various style tweaks (#427)

* nav list sizing

* less contrast on table load progress

* new data model icon

* fixes all users nav

rijk SAID he fixed… but that’s ok ;)

* lighter module active color

* decrease badge size

* text changes

* new sidebar drawer component styling

* space out filters a bit more

* add auto-save warning to fields setup

* new tabular option icons

* new filter styling

needs formatting and translations for field name tooltips

* form field group styling

WIP — just styling, and needs translations

* don’t let line height be overridden

* interface icons

* button hovers

* divider interface WIP

* lighter highlight

we can try this out — might remove later

* no divider tests

* Fix divider interface

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

src/components/v-button/v-button.vue

@@ -143,9 +143,12 @@ export default defineComponent({
 	--v-button-color-activated: var(--white);
 	--v-button-color-disabled: var(--foreground-subdued);
 	--v-button-background-color: var(--primary);
+	--v-button-background-color-hover: var(--primary-125);
 	--v-button-background-color-activated: var(--primary);
 	--v-button-background-color-disabled: var(--background-normal);
 	--v-button-font-size: 16px;
+	--v-button-font-weight: 500;
+	--v-button-line-height: 22px;
 	--v-button-min-width: 140px;
 
 	display: inline-flex;
@@ -174,8 +177,9 @@ export default defineComponent({
 		height: var(--v-button-height);
 		padding: 0 19px;
 		color: var(--v-button-color);
-		font-weight: 500;
+		font-weight: var(--v-button-font-weight);
 		font-size: var(--v-button-font-size);
+		line-height: var(--v-button-line-height);
 		text-decoration: none;
 		background-color: var(--v-button-background-color);
 		border: var(--border-width) solid var(--v-button-background-color);
@@ -184,6 +188,11 @@ export default defineComponent({
 		transition: var(--fast) var(--transition);
 		transition-property: background-color border;
 
+		&:hover {
+			background-color: var(--v-button-background-color-hover);
+			border-color: var(--v-button-background-color-hover);
+		}
+
 		&.align-left {
 			justify-content: flex-start;
 		}
@@ -224,6 +233,11 @@ export default defineComponent({
 
 			background-color: transparent;
 
+			&:hover {
+				color: var(--v-button-background-color-hover);
+				border-color: var(--v-button-background-color-hover);
+			}
+
 			&.secondary {
 				--v-button-color: var(--foreground-subdued);
 			}
@@ -236,6 +250,7 @@ export default defineComponent({
 		&.x-small {
 			--v-button-height: 28px;
 			--v-button-font-size: 12px;
+			--v-button-font-weight: 600;
 
 			min-width: 60px;
 			padding: 0 12px;
@@ -306,6 +321,9 @@ export default defineComponent({
 		&.activated {
 			--v-button-color: var(--v-button-color-activated) !important;
 			--v-button-background-color: var(--v-button-background-color-activated) !important;
+			--v-button-background-color-hover: var(
+				--v-button-background-color-activated
+			) !important;
 		}
 
 		&.tile {

src/components/v-list/v-list.vue

@@ -72,6 +72,7 @@ export default defineComponent({
 	padding: var(--v-list-padding);
 	overflow: auto;
 	color: var(--v-list-color);
+	line-height: 22px;
 	border-radius: var(--border-radius);
 
 	&.nav {

src/interfaces/divider/divider.story.ts

@@ -0,0 +1,28 @@
+import { withKnobs, color } from '@storybook/addon-knobs';
+import markdown from './readme.md';
+import withPadding from '../../../.storybook/decorators/with-padding';
+import { defineComponent } from '@vue/composition-api';
+import VDivider from '@/components/v-divider';
+
+export default {
+	title: 'Interfaces / Divider',
+	decorators: [withKnobs, withPadding],
+	parameters: {
+		notes: markdown,
+	},
+};
+
+export const basic = () =>
+	defineComponent({
+		components: {
+			VDivider,
+		},
+		props: {
+			color: {
+				default: color('Color', '#d6dfe2'),
+			},
+		},
+		template: `
+			<interface-divider :color="color" />
+		`,
+	});

src/interfaces/divider/divider.vue

@@ -0,0 +1,21 @@
+<template>
+	<v-divider
+		full-width
+		:style="{
+			'--v-divider-color': color,
+		}"
+	/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+	props: {
+		color: {
+			type: String,
+			default: null,
+		},
+	},
+});
+</script>

src/interfaces/divider/index.ts

@@ -0,0 +1,17 @@
+import InterfaceDivider from './divider.vue';
+import { defineInterface } from '@/interfaces/define';
+
+export default defineInterface(({ i18n }) => ({
+	id: 'divider',
+	name: i18n.t('divider'),
+	icon: 'remove',
+	component: InterfaceDivider,
+	options: [
+		{
+			field: 'color',
+			name: i18n.t('color'),
+			width: 'half',
+			interface: 'text-input',
+		},
+	],
+}));

src/interfaces/divider/readme.md

@@ -0,0 +1 @@
+# Divider

src/interfaces/index.ts

@@ -1,5 +1,6 @@
 import InterfaceTextInput from './text-input/';
 import InterfaceTextarea from './textarea/';
+import InterfaceDivider from './divider/';
 import InterfaceNumeric from './numeric/';
 import InterfaceSlider from './slider/';
 
@@ -8,5 +9,7 @@ export const interfaces = [
 	InterfaceTextarea,
 	InterfaceNumeric,
 	InterfaceSlider,
+	InterfaceDivider,
 ];
+
 export default interfaces;

src/interfaces/text-input/index.ts

@@ -4,7 +4,7 @@ import { defineInterface } from '@/interfaces/define';
 export default defineInterface(({ i18n }) => ({
 	id: 'text-input',
 	name: i18n.t('interfaces.text-input.text-input'),
-	icon: 'box',
+	icon: 'text_fields',
 	component: InterfaceTextInput,
 	options: [
 		{

src/interfaces/textarea/index.ts

@@ -4,7 +4,7 @@ import { defineInterface } from '@/interfaces/define';
 export default defineInterface(({ i18n }) => ({
 	id: 'textarea',
 	name: i18n.t('interfaces.textarea.textarea'),
-	icon: 'box',
+	icon: 'text_fields',
 	component: InterfaceTextarea,
 	options: [
 		{

src/lang/en-US/index.json

@@ -210,6 +210,8 @@
 	"sans_serif": "Sans Serif",
 	"serif": "Serif",
 	"monospace": "Monospace",
+	"divider": "Divider",
+	"color": "Color",
 
 	"filter": "Filter",
 	"advanced_filter": "Advanced Filter",

src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue

@@ -4,6 +4,8 @@
 			collection.managed === false && collection.collection.startsWith('directus_') === false
 		"
 		x-small
+		outlined
+		class="manage"
 		@click="toggleManaged(true)"
 		:loading="savingManaged"
 	>
@@ -119,6 +121,11 @@ export default defineComponent({
 	--v-button-background-color: var(--danger);
 }
 
+.v-button.manage {
+	--v-button-background-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-125);
+}
+
 .ctx-toggle {
 	--v-icon-color: var(--foreground-subdued);
 

src/styles/themes/_light.scss

@@ -12,6 +12,7 @@
 	--background-normal: #ECEFF1;
 	--background-normal-alt: #DDE3E6;
 	--background-subdued: #F5F7F8;
+	--background-highlight: #F9FAFB;
 	--background-page: #FFF;
 	--background-inverted: #263238;
 

src/views/private/components/module-bar/module-bar.vue

@@ -82,6 +82,7 @@ export default defineComponent({
 		--v-button-color: var(--module-icon);
 		--v-button-color-activated: var(--module-icon-alt);
 		--v-button-background-color: var(--module-background);
+		--v-button-background-color-hover: var(--module-background);
 		--v-button-background-color-activated: var(--module-background-alt);
 	}
 }