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

Various style tweaks (#423)

Browse Source 
* 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
This commit is contained in:
Ben Haynes
2020-04-16 16:20:23 -04:00
committed by GitHub
parent adc3461de5
commit ce9c374876
11 changed files with 84 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/v-badge/v-badge.vue
View File

@@ -63,10 +63,10 @@ export default defineComponent({
}
&.dot {
--v-badge-size: 12px;
--v-badge-size: 8px;
&.bordered {
--v-badge-size: 16px;
--v-badge-size: 12px;
}
}

4
src/lang/en-US/index.json
View File

@@ -7,7 +7,7 @@
"hide_field_on_detail": "Hide Field on Detail",
"show_field_on_detail": "Show Field on Detail",
"delete_field": "Delete Field",
"fields_and_layout": "Fields and Layout",
"fields_and_layout": "Fields & Layout",
"field_create_success": "Field '{field}' created",
"field_update_success": "Field '{field}' updated",
"field_delete_success": "Field '{field}' deleted",
@@ -429,7 +429,7 @@
"field_width_full": "Full Width",
"field_width_fill": "Fill the Page",
"field_width_note": "The width of this field within the form layout. Half-widths wrap based on other fields and their sort order.",
"fields_are_saved_instantly": "Changes to fields are saved instantly",
"fields_are_saved_instantly": "Saves Automatically",
"fieldtypes": {
"alias": "Fields that do not save data or do not have corresponding database columns",
"array": "Standard array format in API response",

4
src/layouts/tabular/tabular.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="layout-tabular">
<portal to="drawer">
<drawer-detail icon="table_chart" :title="$t('layouts.tabular.fields')">
<drawer-detail icon="menu_open" :title="$t('layouts.tabular.fields')">
<draggable v-model="activeFields" handle=".drag-handle">
<v-checkbox
v-for="field in activeFields"
@@ -28,7 +28,7 @@
/>
</drawer-detail>
<drawer-detail icon="line_weight" :title="$t('layouts.tabular.spacing')">
<drawer-detail icon="format_line_spacing" :title="$t('layouts.tabular.spacing')">
<v-select
full-width
v-model="tableSpacing"

17
src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue
View File

@@ -253,10 +253,25 @@ export default defineComponent({
.visible,
.hidden {
display: grid;
grid-gap: 20px 32px;
grid-gap: 12px 12px;
grid-template-columns: 1fr 1fr;
}
.visible {
position: relative;
padding: 36px 12px 12px 12px;
background-color: var(--background-subdued);
border-radius: var(--border-radius);
&::before {
position: absolute;
top: 8px;
left: 12px;
color: var(--foreground-subdued);
content: 'Main Form';
}
}
.list-move {
transition: transform 0.5s;
}

9
src/modules/settings/routes/data-model/fields/fields.vue
View File

@@ -15,7 +15,10 @@
</template>
<div class="fields">
<h2 class="title type-label">{{ $t('fields_and_layout') }}</h2>
<h2 class="title type-label">
{{ $t('fields_and_layout') }}
<span class="instant-save">{{ $t('fields_are_saved_instantly') }}</span>
</h2>
<fields-management :collection="collection" />
</div>
</private-view>
@@ -59,6 +62,10 @@ export default defineComponent({
<style lang="scss" scoped>
.title {
margin-bottom: 12px;
.instant-save {
color: var(--warning);
}
}
.fields {

2
src/modules/users/components/navigation/navigation.vue
View File

@@ -1,6 +1,6 @@
<template>
<v-list nav>
<v-list-item to="/my-project/users/all">
<v-list-item :to="`/${project}/users/all`">
<v-list-item-icon><v-icon name="people" /></v-list-item-icon>
<v-list-item-content>{{ $t('all_users') }}</v-list-item-content>
</v-list-item>

2
src/styles/_variables.scss
View File

@@ -3,7 +3,7 @@
--white: #fff;
--black: #090C0D;
--module-background: #13181A;
--module-background-alt: #000;
--module-background-alt: #343C40;
--module-icon: #607D8B;
--module-icon-alt: #FFF;
--transition: cubic-bezier(0.4, 0, 0.2, 1);

6
src/views/private/components/drawer-button/drawer-button.vue
View File

@@ -47,11 +47,7 @@ export default defineComponent({
width: 100%;
height: 64px;
color: var(--foreground-normal);
transition: background-color var(--fast) var(--transition);
&:hover {
background-color: var(--background-normal-alt);
}
background-color: var(--background-normal-alt);
.icon {
display: flex;

13
src/views/private/components/drawer-detail/drawer-detail.vue
View File

@@ -17,7 +17,6 @@
</div>
</div>
</transition-expand>
<v-divider v-if="active" />
</div>
</template>
@@ -58,14 +57,14 @@ export default defineComponent({
width: 100%;
height: 64px;
color: var(--foreground-normal);
transition: background-color var(--fast) var(--transition);
background-color: var(--background-normal-alt);
&:not(.open):hover {
background-color: var(--background-normal-alt);
// Show arrow
}
&.open {
background-color: var(--background-normal-alt);
// Invert arrow
}
}
@@ -95,10 +94,4 @@ export default defineComponent({
padding: 20px;
}
}
.v-divider {
--v-divider-color: var(--border-normal);
flex-grow: 0;
}
</style>

86
src/views/private/components/filter-drawer-detail/field-filter.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="field-filter">
<div class="header">
<div class="name" v-tooltip="filter.field.split('.').join('\n')">
<div class="name" v-tooltip="filter.field.split('.').join(' → ')">
<span v-if="filter.field.includes('.')" class="relational-indicator">•</span>
{{ name }}
</div>
@@ -101,53 +101,61 @@ export default defineComponent({
display: flex;
align-items: center;
margin-bottom: 4px;
}
.name,
.operator {
.name,
.operator {
overflow: hidden;
white-space: nowrap;
}
.name {
position: relative;
margin-right: 8px;
overflow: visible;
text-overflow: ellipsis;
.relational-indicator {
position: absolute;
top: -1px;
left: -10px;
color: var(--foreground-subdued);
}
}
.operator {
display: flex;
align-items: center;
color: var(--primary);
cursor: pointer;
span {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
}
.name {
position: relative;
margin-right: 8px;
overflow: visible;
text-overflow: ellipsis;
.relational-indicator {
position: absolute;
left: -12px;
color: var(--primary);
}
}
}
.operator {
display: flex;
align-items: center;
color: var(--primary);
cursor: pointer;
.spacer {
flex-grow: 1;
}
span {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.remove {
--v-icon-color: var(--foreground-subdued);
flex-grow: 0;
flex-shrink: 0;
opacity: 0;
&:hover {
--v-icon-color: var(--danger);
}
}
.spacer {
flex-grow: 1;
}
.remove {
--v-icon-color: var(--foreground-subdued);
flex-grow: 0;
flex-shrink: 0;
&:hover {
--v-icon-color: var(--danger);
}
&:hover {
.header .remove {
opacity: 1;
}
}
}

2
src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue
View File

@@ -174,6 +174,6 @@ export default defineComponent({
}
.field-filter {
margin-bottom: 12px;
margin-bottom: 20px;
}
</style>