github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-23 06:28:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

Various style updates (#7972)

Browse Source 
* fix card selection dot always being on

* new mapbox styles

* updated styles for field notes

* update bookmark icon

* increase currrent user avatar opactiy

* Clean up info notes

* divider style updates

* divider rule styling

* notice styling

* update revision drawer pane order

* tighten up revision drawer list

* notice copy updates

* revision spacing

* revision date divider styling

* shorter revision date in drawer dropdown

* add no value to revision diffs

* v-detail icons

* revisions styling

* fix sort icon hover

* adjust global and private vertical form spacing

* reduce navigation and v-list sizing

* slightly reduce module and info sidebar size
This commit is contained in:
Ben Haynes
2021-09-10 15:01:58 -04:00
committed by GitHub
parent ff2d6aaa07
commit 28868e60f8
30 changed files with 120 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/v-avatar/v-avatar.vue
View File

@@ -65,7 +65,7 @@ body {
}
.large {
--v-avatar-size: 64px;
--v-avatar-size: 60px;
}
.x-large {

2
app/src/components/v-button/v-button.vue
View File

@@ -314,7 +314,7 @@ export default defineComponent({
}
.x-large {
--v-button-height: 64px;
--v-button-height: 60px;
--v-button-font-size: 18px;
--v-button-min-width: 180px;

2
app/src/components/v-detail/v-detail.vue
View File

@@ -2,7 +2,7 @@
<div class="v-detail" :class="{ disabled }">
<slot name="activator" v-bind="{ active: internalActive, enable, disable, toggle }">
<v-divider @click="internalActive = !internalActive">
<v-icon v-if="!disabled" :name="internalActive ? 'unfold_less' : 'unfold_more'" small />
<v-icon v-if="!disabled" :name="internalActive ? 'expand_more' : 'chevron_right'" small />
<slot name="title">{{ label }}</slot>
</v-divider>
</slot>

7
app/src/components/v-form/form-field.vue
View File

@@ -50,7 +50,7 @@
</v-card>
</v-dialog>
<small v-if="field.meta && field.meta.note" v-md="field.meta.note" class="note" />
<small v-if="field.meta && field.meta.note" v-md="field.meta.note" class="type-note" />
<small v-if="validationError" class="validation-error">
{{ validationMessage }}
@@ -217,12 +217,11 @@ export default defineComponent({
position: relative;
}
.note {
.type-note {
position: relative;
display: block;
max-width: 520px;
margin-top: 4px;
color: var(--foreground-subdued);
font-style: italic;
}
.invalid {

1
app/src/components/v-info/v-info.vue
View File

@@ -79,6 +79,7 @@ export default defineComponent({
.content {
max-width: 300px;
color: var(--foreground-subdued);
line-height: 22px;
&:not(:last-child) {
margin-bottom: 24px;

4
app/src/components/v-list/v-list-item.vue
View File

@@ -130,11 +130,11 @@ export default defineComponent({
body {
--v-list-item-padding-large: 0 8px;
--v-list-item-padding: 0 8px 0 calc(8px + var(--v-list-item-indent, 0px));
--v-list-item-margin-large: 4px 0;
--v-list-item-margin-large: 2px 0;
--v-list-item-margin: 2px 0;
--v-list-item-min-width: none;
--v-list-item-max-width: none;
--v-list-item-min-height-large: 40px;
--v-list-item-min-height-large: 36px;
--v-list-item-min-height: 32px;
--v-list-item-max-height: auto;
--v-list-item-border-radius: var(--border-radius);

5
app/src/components/v-notice/v-notice.vue
View File

@@ -64,6 +64,7 @@ body {
min-height: var(--input-height);
padding: 12px 16px;
color: var(--v-notice-color);
line-height: 22px;
background-color: var(--v-notice-background-color);
border-radius: var(--border-radius);
}
@@ -72,6 +73,10 @@ body {
--v-icon-color: var(--v-notice-icon-color);
}
.v-icon.left {
margin-right: 16px;
}
.info {
--v-notice-icon-color: var(--primary);
--v-notice-background-color: var(--background-normal);

4
app/src/interfaces/presentation-divider/presentation-divider.vue
View File

@@ -3,6 +3,7 @@
:class="{ margin: icon || title }"
:style="{
'--v-divider-label-color': color,
'--v-divider-color': 'var(--border-subdued)',
}"
large
:inline-title="inlineTitle"
@@ -39,6 +40,7 @@ export default defineComponent({
<style lang="scss" scoped>
.margin {
margin-top: 20px;
margin-top: 40px;
margin-bottom: -10px;
}
</style>

9
app/src/lang/translations/en-US.yaml
View File

@@ -150,9 +150,9 @@ fields_for_role: 'Fields the {role} Role can {action}.'
validation_for_role: 'Field {action} rules the {role} Role must obey.'
presets_for_role: 'Field value defaults for the {role} Role.'
presentation_and_aliases: Presentation & Aliases
revision_post_update: Here is what this item looked like after the update...
changes_made: These are the specific changes that were made...
no_relational_data: Keep in mind that this does not include relational data.
revision_post_update: Here is what this item looked like after the update.
changes_made: Below are the specific changes made in this revision.
no_relational_data: Keep in mind that relational data is not included here.
hide_field_on_detail: Hide Field on Detail
show_field_on_detail: Show Field on Detail
delete_field: Delete Field
@@ -391,7 +391,7 @@ no_files_copy: There are no files here.
user_count: 'No Users | One User | {count} Users'
no_users_copy: There are no users in this role yet.
webhooks_count: 'No Webhooks | One Webhook | {count} Webhooks'
no_webhooks_copy: There are no webhooks yet.
no_webhooks_copy: No webhooks have been configured yet. Get started by creating one below.
all_items: All Items
any: Any
csv: CSV
@@ -992,6 +992,7 @@ field_options:
actions_delete: Delete
actions_login: Login
no_fields_in_collection: 'There are no fields in "{collection}" yet'
no_value: No value
do_nothing: Do Nothing
generate_and_save_uuid: Generate and Save UUID
save_current_user_id: Save Current User ID

34
app/src/layouts/cards/components/card.vue
View File

@@ -1,12 +1,12 @@
<template>
<div
class="card"
:class="{ loading, readonly, selected: item && modelValue.includes(item[itemKey]) }"
:class="{ loading, readonly, selected: item && modelValue.includes(item[itemKey]), 'select-mode': selectMode }"
@click="handleClick"
>
<v-icon class="selector" :name="selectionIcon" @click.stop="toggleSelection" />
<div class="header">
<div class="selection-indicator" :class="{ 'select-mode': selectMode }"></div>
<div class="selection-fade"></div>
<v-skeleton-loader v-if="loading" />
<template v-else>
<p v-if="type || imgError" class="type type-title">{{ type }}</p>
@@ -223,7 +223,7 @@ export default defineComponent({
height: 100%;
}
.selection-indicator {
.selection-fade {
position: absolute;
top: 0;
left: 0;
@@ -242,10 +242,6 @@ export default defineComponent({
background-image: linear-gradient(-180deg, rgba(38, 50, 56, 0.1) 10%, rgba(38, 50, 56, 0));
content: '';
}
&.select-mode {
opacity: 1;
}
}
}
@@ -272,11 +268,23 @@ export default defineComponent({
left: 0px;
z-index: 3;
margin: 4px;
opacity: 0.5;
opacity: 0;
transition: opacity var(--fast) var(--transition), color var(--fast) var(--transition);
&:hover {
opacity: 1;
opacity: 1 !important;
}
}
&.select-mode {
.selector {
opacity: 0.5;
}
.header {
.selection-fade {
opacity: 1;
}
}
}
@@ -294,16 +302,20 @@ export default defineComponent({
.header {
border-width: 12px;
.selection-fade {
opacity: 1;
}
}
}
&:hover {
.selector {
opacity: 1;
opacity: 0.5;
}
.header {
.selection-indicator {
.selection-fade {
opacity: 1;
}
}

3
app/src/layouts/cards/components/header.vue
View File

@@ -204,8 +204,7 @@ export default defineComponent({
}
&:hover {
--v-icon-color: var(--foreground-normal);
color: var(--foreground-normal);
cursor: pointer;
}
}

2
app/src/modules/collections/components/navigation-bookmark.vue
View File

@@ -1,6 +1,6 @@
<template>
<v-list-item :to="bookmark.to" query class="bookmark" @contextmenu.prevent.stop="activateContextMenu">
<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
<v-list-item-icon><v-icon name="bookmark_outline" /></v-list-item-icon>
<v-list-item-content>
<v-text-overflow :text="bookmark.bookmark" />
</v-list-item-content>

4
app/src/styles/_type-styles.scss
View File

@@ -18,3 +18,7 @@
.type-text {
@include type-text;
}
.type-note {
@include type-note;
}

2
app/src/styles/_variables.scss
View File

@@ -19,5 +19,5 @@
--form-column-width: 300px;
--form-column-max-width: 380px;
--form-horizontal-gap: 32px;
--form-vertical-gap: 48px;
--form-vertical-gap: 40px;
}

9
app/src/styles/mixins/type-styles.scss
View File

@@ -28,3 +28,12 @@
font-style: normal;
line-height: 22px;
}
@mixin type-note {
color: var(--foreground-subdued);
font-weight: 500;
font-size: 13px;
font-family: var(--family-sans-serif);
font-style: italic;
line-height: 18px;
}

4
app/src/utils/geometry/basemap.ts
View File

@@ -104,11 +104,11 @@ function getDefaultMapboxBasemap(): BasemapSource {
const defaultMapboxBasemap: BasemapSource = {
name: 'Mapbox',
type: 'style',
url: 'mapbox://styles/mapbox/light-v10',
url: 'mapbox://styles/directus/cktaiz31c509n18nrxj63zdy6',
};
if (getTheme() === 'dark') {
defaultMapboxBasemap.url = 'mapbox://styles/mapbox/dark-v10';
defaultMapboxBasemap.url = 'mapbox://styles/directus/cktaixyhk2joh17lrb5i8zs22';
}
return defaultMapboxBasemap;

4
app/src/views/private/components/header-bar/header-bar.vue
View File

@@ -96,9 +96,9 @@ export default defineComponent({
align-items: center;
justify-content: flex-start;
width: 100%;
height: 65px;
height: 61px;
margin: 0;
padding: 0 12px;
padding: 0 10px;
background-color: var(--background-page);
box-shadow: 0;
transition: box-shadow var(--medium) var(--transition), margin var(--fast) var(--transition);

2
app/src/views/private/components/module-bar-avatar/module-bar-avatar.vue
View File

@@ -85,7 +85,7 @@ export default defineComponent({
overflow: visible;
.avatar-image {
opacity: 0.5;
opacity: 0.8;
transition: opacity var(--fast) var(--transition);
}

12
app/src/views/private/components/module-bar-logo/module-bar-logo.vue
View File

@@ -80,16 +80,16 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
width: 60px;
height: 60px;
padding: 12px;
background-color: var(--brand);
.v-progress-linear {
position: absolute;
right: 12px;
right: 10px;
bottom: 5px;
left: 12px;
left: 10px;
width: 40px;
}
@@ -102,8 +102,8 @@ export default defineComponent({
.logo {
position: absolute;
top: 20px;
left: 12px;
top: 18px;
left: 10px;
width: 40px;
height: 32px;
margin: 0 auto;

2
app/src/views/private/components/module-bar/module-bar.vue
View File

@@ -103,7 +103,7 @@ body {
.module-bar {
display: flex;
flex-direction: column;
width: 64px;
width: 60px;
height: 100%;
background-color: var(--module-background);

2
app/src/views/private/components/project-info/project-info.vue
View File

@@ -28,7 +28,7 @@ export default defineComponent({
display: flex;
align-items: center;
width: 100%;
height: 64px;
height: 60px;
padding: 0 20px;
color: var(--foreground-normal-alt);
text-align: left;

4
app/src/views/private/components/revisions-drawer-detail/revision-item.vue
View File

@@ -77,7 +77,7 @@ export default defineComponent({
<style lang="scss" scoped>
.revision-item {
position: relative;
margin-bottom: 16px;
margin-bottom: 12px;
margin-left: 16px;
.header {
@@ -126,7 +126,7 @@ export default defineComponent({
top: -4px;
left: -24px;
z-index: 1;
width: calc(100% + 28px);
width: calc(100% + 32px);
height: calc(100% + 10px);
background-color: var(--background-normal-alt);
border-radius: var(--border-radius);

11
app/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
View File

@@ -238,15 +238,20 @@ export default defineComponent({
}
.v-divider {
--v-divider-color: var(--background-normal-alt);
position: sticky;
top: 0;
z-index: 3;
margin-top: 8px;
margin-bottom: 8px;
margin-right: -8px;
margin-bottom: 6px;
margin-left: -8px;
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
padding-left: 8px;
background-color: var(--background-normal);
box-shadow: 0 0 4px 2px var(--background-normal);
box-shadow: 0 0 2px 2px var(--background-normal);
&:first-of-type {
margin-top: 0;

2
app/src/views/private/components/revisions-drawer-detail/revisions-drawer-picker.vue
View File

@@ -85,7 +85,7 @@ export default defineComponent({
return { internalCurrent, options, selectedOption };
async function getFormattedDate(revision: Revision) {
const date = await localizedFormat(new Date(revision!.activity.timestamp), String(t('date-fns_date')));
const date = await localizedFormat(new Date(revision!.activity.timestamp), String(t('date-fns_date_short')));
const time = await localizedFormat(new Date(revision!.activity.timestamp), String(t('date-fns_time')));
return `${date} (${time})`;

22
app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates-change.vue
View File

@@ -3,13 +3,17 @@
<v-icon :name="added ? 'add' : 'remove'" />
<div class="delta">
<span v-for="(part, index) in changesFiltered" :key="index" :class="{ changed: part.added || part.removed }">
{{ part.value }}
<template v-if="part.value">{{ part.value }}</template>
<template v-else>
<span class="no-value">{{ t('no_value') }}</span>
</template>
</span>
</div>
</div>
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, PropType, computed } from 'vue';
type Change = {
@@ -35,6 +39,7 @@ export default defineComponent({
},
},
setup(props) {
const { t } = useI18n();
const changesFiltered = computed(() => {
return props.changes.filter((change) => {
if (props.added === true) {
@@ -50,7 +55,7 @@ export default defineComponent({
return props.changes.length === 2; // before/after
});
return { changesFiltered, wholeThing };
return { t, changesFiltered, wholeThing };
},
});
</script>
@@ -59,13 +64,13 @@ export default defineComponent({
.change-line {
position: relative;
width: 100%;
padding: 8px 12px 8px 52px;
padding: 8px 12px 8px 40px;
border-radius: var(--border-radius);
.v-icon {
position: absolute;
top: 6px;
left: 12px;
top: 8px;
left: 8px;
}
}
@@ -79,6 +84,7 @@ export default defineComponent({
.added {
color: var(--success);
background-color: var(--success-alt);
border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
.changed {
background-color: var(--success-25);
@@ -88,12 +94,18 @@ export default defineComponent({
.deleted {
color: var(--danger);
background-color: var(--danger-alt);
border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
.changed {
background-color: var(--danger-25);
}
}
.no-value {
font-style: italic;
opacity: 0.25;
}
.no-highlight .changed {
background-color: transparent;
}

2
app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
View File

@@ -110,7 +110,7 @@ export default defineComponent({
}
.change-line {
margin-bottom: 4px;
margin-bottom: 0px;
}
.v-notice {

12
app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
View File

@@ -20,12 +20,12 @@
</template>
<div class="content">
<revisions-drawer-preview v-if="currentTab[0] === 'revision_preview'" :revision="currentRevision" />
<revisions-drawer-updates
v-if="currentTab[0] === 'updates_made'"
:revision="currentRevision"
:revisions="revisions"
/>
<revisions-drawer-preview v-if="currentTab[0] === 'revision_preview'" :revision="currentRevision" />
</div>
<template #actions>
@@ -73,7 +73,7 @@ export default defineComponent({
const internalActive = useSync(props, 'active', emit);
const internalCurrent = useSync(props, 'current', emit);
const currentTab = ref(['revision_preview']);
const currentTab = ref(['updates_made']);
const currentRevision = computed(() => {
return props.revisions.find((revision) => revision.id === props.current);
@@ -87,14 +87,14 @@ export default defineComponent({
});
const tabs = [
{
text: t('revision_preview'),
value: 'revision_preview',
},
{
text: t('updates_made'),
value: 'updates_made',
},
{
text: t('revision_preview'),
value: 'revision_preview',
},
];
return { t, internalActive, internalCurrent, currentRevision, currentTab, tabs, revert };

4
app/src/views/private/components/sidebar-button/sidebar-button.vue
View File

@@ -48,7 +48,7 @@ export default defineComponent({
position: relative;
flex-shrink: 0;
width: 100%;
height: 64px;
height: 60px;
color: var(--foreground-normal-alt);
background-color: var(--background-normal-alt);
@@ -56,7 +56,7 @@ export default defineComponent({
display: flex;
align-items: center;
justify-content: center;
width: 64px;
width: 60px;
height: 100%;
}

8
app/src/views/private/components/sidebar-detail/sidebar-detail.vue
View File

@@ -86,7 +86,7 @@ body {
flex-shrink: 0;
justify-content: space-between;
width: 100%;
height: 64px;
height: 60px;
color: var(--sidebar-detail-color);
background-color: var(--background-normal-alt);
@@ -96,7 +96,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
width: 60px;
height: 100%;
}
@@ -118,8 +118,8 @@ body {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
width: 60px;
height: 60px;
color: var(--foreground-normal);
cursor: pointer;
transition: opacity var(--fast) var(--transition), color var(--fast) var(--transition);

11
app/src/views/private/private-view.vue
View File

@@ -206,7 +206,6 @@ export default defineComponent({
--border-radius: 6px;
--input-height: 60px;
--input-padding: 16px; // (60 - 4 - 24) / 2
--form-vertical-gap: 52px;
position: relative;
flex-grow: 1;
@@ -238,7 +237,7 @@ export default defineComponent({
top: 0;
right: 0;
z-index: 30;
width: 284px;
width: 280px;
height: 100%;
overflow: hidden;
background-color: var(--background-normal);
@@ -256,23 +255,23 @@ export default defineComponent({
.flex-container {
display: flex;
flex-direction: column;
width: 284px;
width: 280px;
height: 100%;
}
@media (min-width: 960px) {
transform: translateX(calc(100% - 64px));
transform: translateX(calc(100% - 60px));
}
@media (min-width: 1260px) {
position: relative;
flex-basis: 64px;
flex-basis: 60px;
flex-shrink: 0;
transform: none;
transition: flex-basis var(--slow) var(--transition);
&.is-open {
flex-basis: 284px;
flex-basis: 280px;
transform: none;
}
}