From 6cb4cf2232add101769b0460d82bf838e02252e7 Mon Sep 17 00:00:00 2001 From: Ben Haynes Date: Mon, 20 Apr 2020 14:36:59 -0400 Subject: [PATCH] Various style tweaks (#427) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- src/components/v-button/v-button.vue | 20 ++++++++++++- src/components/v-list/v-list.vue | 1 + src/interfaces/divider/divider.story.ts | 28 +++++++++++++++++++ src/interfaces/divider/divider.vue | 21 ++++++++++++++ src/interfaces/divider/index.ts | 17 +++++++++++ src/interfaces/divider/readme.md | 1 + src/interfaces/index.ts | 3 ++ src/interfaces/text-input/index.ts | 2 +- src/interfaces/textarea/index.ts | 2 +- src/lang/en-US/index.json | 2 ++ .../collection-options/collection-options.vue | 7 +++++ src/styles/themes/_light.scss | 1 + .../components/module-bar/module-bar.vue | 1 + 13 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 src/interfaces/divider/divider.story.ts create mode 100644 src/interfaces/divider/divider.vue create mode 100644 src/interfaces/divider/index.ts create mode 100644 src/interfaces/divider/readme.md diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue index 1b0c623f27..dca5d23dfd 100644 --- a/src/components/v-button/v-button.vue +++ b/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 { diff --git a/src/components/v-list/v-list.vue b/src/components/v-list/v-list.vue index e799213841..e702e9cba4 100644 --- a/src/components/v-list/v-list.vue +++ b/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 { diff --git a/src/interfaces/divider/divider.story.ts b/src/interfaces/divider/divider.story.ts new file mode 100644 index 0000000000..009af77a06 --- /dev/null +++ b/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: ` + + `, + }); diff --git a/src/interfaces/divider/divider.vue b/src/interfaces/divider/divider.vue new file mode 100644 index 0000000000..6b198455ef --- /dev/null +++ b/src/interfaces/divider/divider.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/interfaces/divider/index.ts b/src/interfaces/divider/index.ts new file mode 100644 index 0000000000..80208d56f0 --- /dev/null +++ b/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', + }, + ], +})); diff --git a/src/interfaces/divider/readme.md b/src/interfaces/divider/readme.md new file mode 100644 index 0000000000..d5116f5460 --- /dev/null +++ b/src/interfaces/divider/readme.md @@ -0,0 +1 @@ +# Divider diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts index f9203e65e0..e28af214da 100644 --- a/src/interfaces/index.ts +++ b/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; diff --git a/src/interfaces/text-input/index.ts b/src/interfaces/text-input/index.ts index fc8a476662..a3ad292ac3 100644 --- a/src/interfaces/text-input/index.ts +++ b/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: [ { diff --git a/src/interfaces/textarea/index.ts b/src/interfaces/textarea/index.ts index 0ae0c61509..a822c4d285 100644 --- a/src/interfaces/textarea/index.ts +++ b/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: [ { diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json index 2e3545e80d..fb5a6cf6d8 100644 --- a/src/lang/en-US/index.json +++ b/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", diff --git a/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue b/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue index 3ee55921dd..52354214e6 100644 --- a/src/modules/settings/routes/data-model/collections/components/collection-options/collection-options.vue +++ b/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); diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss index e9a1462b3e..e04f1c863f 100644 --- a/src/styles/themes/_light.scss +++ b/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; diff --git a/src/views/private/components/module-bar/module-bar.vue b/src/views/private/components/module-bar/module-bar.vue index 6728810e27..baa074b098 100644 --- a/src/views/private/components/module-bar/module-bar.vue +++ b/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); } }