github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-15 16:05:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add new translations interface (#7727)

Browse Source 
* added v-select and button to start sidebyside view

* v-chip next to field name on translations

* v-chip color changed

* add baisc logic

* finish inner workings of translation interface

* finish design

* clean up code

* remove unused prop

* small tweaks

* finish translation interface

* fix lang icon

* tweak styling

* Use v-model over separate bind+event

* Tweak margin definition

* Add class to field-name to prevent span confusion

* Rename classes to match var names

* Add limit -1, remove commented code

* Tweak toggle tooltip wording

* Add hover state to v-icons

* Use self-closing elements

* Remove unused imports

* Rename newVal->sideBySideEnabled

* Use filter + length instead of reducer

* Fix param typo

* Move dividers into main translations component

* Base initial language on fetched languages array

* Move styling to language-select, simplify component

* Don't rely on deep styling

* Tweak interactive state of chip

* Use existing form-grid for side-by-side layoutin

* Only fetch preview values when we dont have them yet

* Improve stability of edited status

* Fix hover state of v-icon

Co-authored-by: Nitwel <nitwel@arcor.de>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Jay Cammarano
2021-09-15 13:03:08 -04:00
committed by GitHub
parent b536905406
commit e243a33cd9
14 changed files with 732 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/src/components/v-progress/linear/v-progress-linear.vue
View File

@@ -1,14 +1,18 @@
<template>
<div
class="v-progress-linear"
:class="{
absolute,
bottom,
fixed,
indeterminate,
rounded,
top,
}"
:class="[
{
absolute,
bottom,
fixed,
indeterminate,
rounded,
top,
colorful,
},
color,
]"
@animationiteration="$emit('animationiteration')"
>
<div
@@ -22,7 +26,7 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { computed, defineComponent } from 'vue';
export default defineComponent({
props: {
@@ -54,8 +58,21 @@ export default defineComponent({
type: Number,
default: 0,
},
colorful: {
type: Boolean,
default: false,
},
},
emits: ['animationiteration'],
setup(props) {
const color = computed(() => {
if (props.value <= 33) return 'danger';
if (props.value <= 66) return 'warning';
return 'success';
});
return { color };
},
});
</script>
@@ -116,6 +133,20 @@ body {
&.top {
top: 0;
}
&.colorful {
&.danger .inner {
background-color: var(--danger);
}
&.warning .inner {
background-color: var(--warning);
}
&.success .inner {
background-color: var(--success);
}
}
}
@keyframes indeterminate {