github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

add border on low contrast

Browse Source
This commit is contained in:
Nitwel
2020-09-10 19:15:30 +02:00
committed by rijkvanzanten
parent 6fedc3abda
commit b86baa7833
5 changed files with 52 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/package-lock.json generated
View File

@@ -3042,11 +3042,32 @@
"@types/tern": "*"
}
},
"@types/color": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.1.tgz",
"integrity": "sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA==",
"requires": {
"@types/color-convert": "*"
}
},
"@types/color-convert": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-1.9.0.tgz",
"integrity": "sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg==",
"requires": {
"@types/color-name": "*"
}
},
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
"integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
},
"@types/color-string": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@types/color-string/-/color-string-1.5.0.tgz",
"integrity": "sha512-17/8LWbkfvoKgfnnBvKbUnPTzPtzBlSELf5FPvVt9dRTQW88igOYZZ78us9dmbY1301VtTBEnuPTKspvmtGDxA=="
},
"@types/connect": {
"version": "3.4.33",
"resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
@@ -8533,7 +8554,6 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
"integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
"dev": true,
"requires": {
"color-convert": "^1.9.1",
"color-string": "^1.5.2"
@@ -8543,7 +8563,6 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": {
"color-name": "1.1.3"
}
@@ -8551,8 +8570,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
}
}
},
@@ -8573,7 +8591,6 @@
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
"integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
"dev": true,
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
@@ -23099,7 +23116,6 @@
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"dev": true,
"requires": {
"is-arrayish": "^0.3.1"
},
@@ -23107,8 +23123,7 @@
"is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
"dev": true
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
}
}
},

4
app/package.json
View File

@@ -35,6 +35,8 @@
"@sindresorhus/slugify": "^1.0.0",
"@tinymce/tinymce-vue": "^3.2.2",
"@types/codemirror": "^0.0.97",
"@types/color": "^3.0.1",
"@types/color-string": "^1.5.0",
"@types/debug": "^4.1.5",
"@types/htmlhint": "^0.9.1",
"@types/js-yaml": "^3.12.5",
@@ -45,6 +47,8 @@
"base-64": "^0.1.0",
"bytes": "^3.1.0",
"codemirror": "^5.56.0",
"color": "^3.1.2",
"color-string": "^1.5.3",
"cropperjs": "^1.5.7",
"csslint": "^1.0.5",
"date-fns": "^2.14.0",

27
app/src/displays/color/color.vue
View File

@@ -1,14 +1,15 @@
<template>
<div class="color-dot">
<value-null v-if="value === null" />
<div class="dot" :style="{'background-color':styles}"></div>
<div class="dot" :style="styles"></div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, PropType } from '@vue/composition-api';
import formatTitle from '@directus/format-title';
import { isHex } from '@/utils/color'
import Color from 'color';
import colorString from 'color-string';
export default defineComponent({
props: {
@@ -19,21 +20,33 @@ export default defineComponent({
defaultColor: {
type: String,
default: '#B0BEC5',
validator: (value: string) => isHex(value),
validator: (value: string) => colorString.get.rgb(value) !== null,
},
},
setup(props) {
const displayValue = computed(() => {
return props.value;
});
const styles = computed(() => {
if(isHex(props.value)) return props.value
else return props.defaultColor
const style: Record<string, any> = { 'background-color': props.defaultColor };
if (Color(props.value) !== undefined) style['background-color'] = props.value;
const pageColorString = getComputedStyle(document.body).getPropertyValue('--background-page');
const pageColorRGB = colorString.get.rgb(pageColorString) || colorString.get.rgb('#FFF');
const colorRGB = colorString.get.rgb(props.value) || colorString.get.rgb(props.defaultColor);
if (pageColorRGB == null || colorRGB == null) return {};
if (Color.rgb(...colorRGB.slice(0.3)).contrast(Color.rgb(...pageColorRGB.slice(0, 3))) < 3)
style['border'] = '1px solid var(--background-inverted)';
return style;
});
return { displayValue, styles, isHex };
return { displayValue, styles };
},
});
</script>

7
app/src/displays/color/index.ts
View File

@@ -3,14 +3,15 @@ import DisplayColor from './color.vue';
export default defineDisplay(({ i18n }) => ({
id: 'color',
name: i18n.t('color'),
name: i18n.t('displays.color.color'),
description: i18n.t('displays.color.description'),
types: ['string'],
icon: 'flag',
handler: DisplayColor,
options: [
{
field: 'defaultColor',
name: i18n.t('default_color'),
name: i18n.t('displays.color.default_color'),
type: 'string',
meta: {
interface: 'color',
@@ -19,6 +20,6 @@ export default defineDisplay(({ i18n }) => ({
schema: {
default_value: '#B0BEC5',
},
}
},
],
}));

2
app/src/styles/themes/_dark.scss
View File

@@ -16,7 +16,7 @@
--background-highlight: #F9FAFB; // ADJUST
--background-page: #263238;
--background-page-rgb: 38, 50, 56;
--background-inverted: #fff;
--background-inverted: #FFF;
--overlay-color: rgba(19, 24, 26, 0.9);