* checkbox inactive styling

* fix options

* fix translation

* dropdown placeholder default

* cleanup text input options

* roles layout setup

* add placeholder option to dropdown

* add translations

* info on global settings

* elipses after placeholders

* update to bytes for better formatting control

* clean up mime type displays

* new template formatting

* WIP info and help sidebar

* add support for svgs

* user popover styling

* have un-styled logo spinner feel centered

* consistent missing avatar colors

* fix asset url

* add info drawers

* initial help drawer

* WIP add help components to all pages

* Remove non-existing trim

* Fix file interface deselect

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
Ben Haynes
2020-05-22 18:19:33 -04:00
committed by GitHub
parent 2bf4ce9af7
commit ebd78f86fc
43 changed files with 605 additions and 224 deletions

View File

@@ -6,8 +6,6 @@
</v-button>
</template>
<template #drawer><portal-target name="drawer" /></template>
<template #navigation>
<activity-navigation />
</template>
@@ -20,6 +18,19 @@
:view-query.sync="viewQuery"
:detail-route="'/{{project}}/activity/{{primaryKey}}'"
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div class="format-markdown" v-html="marked($t('page_help_activity_browse'))" />
</drawer-detail>
<portal-target name="drawer" />
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -30,6 +41,7 @@ import useProjectsStore from '@/stores/projects';
import { i18n } from '@/lang';
import { LayoutComponent } from '@/layouts/types';
import useCollectionPreset from '@/composables/use-collection-preset';
import marked from 'marked';
type Item = {
[field: string]: any;
@@ -51,6 +63,7 @@ export default defineComponent({
layout,
viewOptions,
viewQuery,
marked,
};
function useBreadcrumb() {

View File

@@ -20,6 +20,18 @@
:initial-values="item"
:primary-key="primaryKey"
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div class="format-markdown" v-html="marked($t('page_help_activity_detail'))" />
</drawer-detail>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -30,6 +42,7 @@ import ActivityNavigation from '../../components/navigation/';
import { i18n } from '@/lang';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import marked from 'marked';
type Values = {
[field: string]: any;
@@ -57,6 +70,7 @@ export default defineComponent({
loading,
error,
breadcrumb,
marked,
};
function useBreadcrumb() {

View File

@@ -38,11 +38,6 @@
</bookmark-edit>
</template>
<template #drawer>
<layout-drawer-detail @input="viewType = $event" :value="viewType" />
<portal-target name="drawer" />
</template>
<template #actions:prepend>
<portal-target name="actions:prepend" />
</template>
@@ -112,6 +107,26 @@
:filters.sync="filters"
:search-query.sync="searchQuery"
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
Page Info Here...
</drawer-detail>
<layout-drawer-detail @input="viewType = $event" :value="viewType" />
<portal-target name="drawer" />
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="
marked(
$t('page_help_collections_browse', {
collection: currentCollection.name,
})
)
"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -132,6 +147,7 @@ import SearchInput from '@/views/private/components/search-input';
import BookmarkAdd from '@/views/private/components/bookmark-add';
import BookmarkEdit from '@/views/private/components/bookmark-edit';
import router from '@/router';
import marked from 'marked';
const redirectIfNeeded: NavigationGuard = async (to, from, next) => {
const collectionsStore = useCollectionsStore();
@@ -250,6 +266,7 @@ export default defineComponent({
editingBookmark,
editBookmark,
breadcrumb,
marked,
};
function useBreadcrumb() {

View File

@@ -143,6 +143,9 @@
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div class="format-markdown" v-html="marked($t('page_help_collections_detail'))" />
</drawer-detail>
<revisions-drawer-detail
v-if="isBatch === false && isNew === false"
:collection="collection"
@@ -155,6 +158,12 @@
:collection="collection"
:primary-key="primaryKey"
/>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -171,6 +180,7 @@ import CommentsDrawerDetail from '@/views/private/components/comments-drawer-det
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import i18n from '@/lang';
import marked from 'marked';
type Values = {
[field: string]: any;
@@ -275,6 +285,7 @@ export default defineComponent({
breadcrumb,
title,
revisionsDrawerDetail,
marked,
refresh,
};

View File

@@ -32,6 +32,21 @@
{{ $t('no_collections_copy') }}
</template>
</v-info>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -43,6 +58,7 @@ import useNavigation, { NavItem } from '../../composables/use-navigation';
import router from '@/router';
import useUserStore from '@/stores/user';
import useProjectsStore from '@/stores/projects';
import marked from 'marked';
export default defineComponent({
name: 'collections-overview',
@@ -80,7 +96,14 @@ export default defineComponent({
return `/${projectsStore.state.currentProjectKey}/settings/data-model`;
});
return { tableHeaders, navItems, navigateToCollection, isAdmin, dataModelLink };
return {
tableHeaders,
navItems,
navigateToCollection,
isAdmin,
dataModelLink,
marked,
};
function navigateToCollection(navItem: NavItem) {
router.push(navItem.to);

View File

@@ -6,11 +6,6 @@
</v-button>
</template>
<template #drawer>
<layout-drawer-detail @input="viewType = $event" :value="viewType" />
<portal-target name="drawer" />
</template>
<template #actions:prepend>
<portal-target name="actions:prepend" />
</template>
@@ -67,6 +62,20 @@
@update:filters="filters = $event"
:detail-route="'/{{project}}/files/{{primaryKey}}'"
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div class="format-markdown" v-html="marked($t('page_help_files_browse'))" />
</drawer-detail>
<layout-drawer-detail @input="viewType = $event" :value="viewType" />
<portal-target name="drawer" />
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -82,6 +91,7 @@ import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail'
import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
import AddFolder from '../../components/add-folder';
import SearchInput from '@/views/private/components/search-input';
import marked from 'marked';
type Item = {
[field: string]: any;
@@ -164,6 +174,7 @@ export default defineComponent({
currentFolder,
filtersWithFolderAndType,
searchQuery,
marked,
};
function useBatchDelete() {

View File

@@ -1,5 +1,5 @@
<template>
<drawer-detail icon="info_outline" :title="$t('file_details')">
<drawer-detail icon="info_outline" :title="$t('file_details')" close>
<dl>
<div v-if="type">
<dt>{{ $t('type') }}</dt>
@@ -32,7 +32,7 @@
<script lang="ts">
import { defineComponent, computed, ref } from '@vue/composition-api';
import readableMimeType from '@/utils/readable-mime-type';
import prettyBytes from 'pretty-bytes';
import bytes from 'bytes';
import i18n from '@/lang';
import localizedFormat from '@/utils/localized-format';
@@ -68,7 +68,7 @@ export default defineComponent({
const size = computed(() => {
if (!props.filesize) return null;
return prettyBytes(props.filesize, { locale: i18n.locale.split('-')[0] });
return bytes(props.filesize, { decimalPlaces: 2, unitSeparator: ' ' }); // { locale: i18n.locale.split('-')[0] }
});
const creationDate = ref<string>(null);

View File

@@ -115,6 +115,12 @@
collection="directus_files"
:primary-key="primaryKey"
/>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -136,6 +142,7 @@ import FileLightbox from '@/views/private/components/file-lightbox';
import useFieldsStore from '@/stores/fields';
import { Field } from '@/stores/fields/types';
import FileInfoDrawerDetail from './components/file-info-drawer-detail.vue';
import marked from 'marked';
type Values = {
[field: string]: any;
@@ -220,6 +227,7 @@ export default defineComponent({
previewActive,
revisionsDrawerDetail,
formFields,
marked,
};
function changeCacheBuster() {

View File

@@ -35,16 +35,16 @@ export default defineComponent({
name: i18n.t('settings_permissions'),
to: `/${currentProjectKey.value}/settings/roles`,
},
{
icon: 'send',
name: i18n.t('settings_webhooks'),
to: `/${currentProjectKey.value}/settings/webhooks`,
},
{
icon: 'bookmark',
name: i18n.t('settings_presets'),
to: `/${currentProjectKey.value}/settings/presets`,
},
{
icon: 'send',
name: i18n.t('settings_webhooks'),
to: `/${currentProjectKey.value}/settings/webhooks`,
},
];
return { navItems };

View File

@@ -16,10 +16,6 @@
<settings-navigation />
</template>
<template #drawer>
<collections-filter v-model="activeTypes" />
</template>
<div class="padding-box">
<v-info
type="warning"
@@ -86,6 +82,22 @@
</div>
<new-collection v-model="addNewActive" />
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_settings_datamodel_collections'))"
/>
</drawer-detail>
<collections-filter v-model="activeTypes" />
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -102,6 +114,7 @@ import router from '@/router';
import { sortBy } from 'lodash';
import CollectionOptions from './components/collection-options';
import CollectionsFilter from './components/collections-filter';
import marked from 'marked';
export default defineComponent({
components: { SettingsNavigation, NewCollection, CollectionOptions, CollectionsFilter },
@@ -142,6 +155,7 @@ export default defineComponent({
items,
openCollection,
activeTypes,
marked,
};
function useItems() {

View File

@@ -67,6 +67,21 @@
v-model="edits"
/>
</div>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_settings_datamodel_fields'))"
/>
</drawer-detail>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -79,6 +94,7 @@ import useProjectsStore from '@/stores/projects';
import useItem from '@/composables/use-item';
import router from '@/router';
import useCollectionsStore from '@/stores/collections';
import marked from 'marked';
export default defineComponent({
components: { SettingsNavigation, FieldsManagement },
@@ -131,6 +147,7 @@ export default defineComponent({
deleteAndQuit,
saveAndQuit,
hasEdits,
marked,
};
async function deleteAndQuit() {

View File

@@ -24,6 +24,18 @@
:primary-key="1"
/>
</div>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div class="format-markdown" v-html="marked($t('page_help_settings_global'))" />
</drawer-detail>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -32,6 +44,7 @@ import { defineComponent, ref, computed } from '@vue/composition-api';
import SettingsNavigation from '../../components/navigation/';
import useCollection from '@/composables/use-collection';
import useSettingsStore from '@/stores/settings';
import marked from 'marked';
export default defineComponent({
components: { SettingsNavigation },
@@ -49,7 +62,7 @@ export default defineComponent({
const saving = ref(false);
return { fields, initialValues, edits, noEdits, saving, save };
return { fields, initialValues, edits, noEdits, saving, save, marked };
async function save() {
if (edits.value === null) return;

View File

@@ -85,6 +85,21 @@
</template>
</v-table>
</div>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_settings_presets_browse'))"
/>
</drawer-detail>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -100,6 +115,7 @@ import layouts from '@/layouts';
import { TranslateResult } from 'vue-i18n';
import router from '@/router';
import ValueNull from '@/views/private/components/value-null';
import marked from 'marked';
type PresetRaw = {
id: number;
@@ -146,6 +162,7 @@ export default defineComponent({
confirmDelete,
deleting,
deleteSelection,
marked,
};
function useLinks() {

View File

@@ -43,12 +43,6 @@
</v-button>
</template>
<template #drawer>
<div class="layout-drawer">
<portal-target name="drawer" />
</div>
</template>
<div class="preset-detail">
<v-form
:fields="fields"
@@ -71,6 +65,24 @@
/>
</div>
</div>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_settings_presets_detail'))"
/>
</drawer-detail>
<div class="layout-drawer">
<portal-target name="drawer" />
</div>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -85,6 +97,7 @@ import useCollectionsStore from '@/stores/collections';
import layouts from '@/layouts';
import router from '@/router';
import useCollectionPresetsStore from '@/stores/collection-presets';
import marked from 'marked';
type User = {
id: number;
@@ -154,6 +167,7 @@ export default defineComponent({
deleting,
deleteAndQuit,
confirmDelete,
marked,
};
function useSave() {

View File

@@ -6,8 +6,6 @@
</v-button>
</template>
<template #drawer><portal-target name="drawer" /></template>
<template #actions>
<v-dialog v-model="confirmDelete">
<template #activator="{ on }">
@@ -58,6 +56,22 @@
:view-query.sync="viewQuery"
:detail-route="'/{{project}}/settings/roles/{{primaryKey}}'"
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_settings_roles_browse'))"
/>
</drawer-detail>
<portal-target name="drawer" />
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -69,6 +83,7 @@ import { i18n } from '@/lang';
import api from '@/api';
import { LayoutComponent } from '@/layouts/types';
import useCollectionPreset from '@/composables/use-collection-preset';
import marked from 'marked';
type Item = {
[field: string]: any;
@@ -84,11 +99,30 @@ export default defineComponent({
const selection = ref<Item[]>([]);
const { viewOptions, viewQuery } = useCollectionPreset(ref('directus_roles'));
const { viewType, viewOptions, viewQuery } = useCollectionPreset(ref('directus_roles'));
const { addNewLink, batchLink } = useLinks();
const { confirmDelete, deleting, batchDelete } = useBatchDelete();
const { breadcrumb } = useBreadcrumb();
if (viewType.value === null) {
viewType.value = 'tabular';
}
if (viewOptions.value === null && viewType.value === 'tabular') {
viewOptions.value = {
widths: {
name: 160,
users: 160,
},
};
}
if (viewQuery.value === null && viewType.value === 'tabular') {
viewQuery.value = {
fields: ['name', 'users', 'description'],
};
}
return {
addNewLink,
batchLink,
@@ -100,6 +134,7 @@ export default defineComponent({
layout,
viewOptions,
viewQuery,
marked,
};
function useBatchDelete() {

View File

@@ -83,11 +83,23 @@
</div>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_settings_roles_detail'))"
/>
</drawer-detail>
<revisions-drawer-detail
v-if="isNew === false"
collection="directus_roles"
:primary-key="primaryKey"
/>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -101,6 +113,7 @@ import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-d
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import PermissionsManagement from './components/permissions-management';
import marked from 'marked';
import useUserStore from '@/stores/user';
type Values = {
@@ -158,6 +171,7 @@ export default defineComponent({
saveAsCopyAndNavigate,
isBatch,
currentProjectKey,
marked,
};
/**

View File

@@ -6,8 +6,6 @@
</v-button>
</template>
<template #drawer><portal-target name="drawer" /></template>
<template #actions>
<v-dialog v-model="confirmDelete">
<template #activator="{ on }">
@@ -58,6 +56,22 @@
:view-query.sync="viewQuery"
:detail-route="'/{{project}}/settings/webhooks/{{primaryKey}}'"
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_settings_webhooks_browse'))"
/>
</drawer-detail>
<portal-target name="drawer" />
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -69,6 +83,7 @@ import { i18n } from '@/lang';
import api from '@/api';
import { LayoutComponent } from '@/layouts/types';
import useCollectionPreset from '@/composables/use-collection-preset';
import marked from 'marked';
type Item = {
[field: string]: any;
@@ -118,6 +133,7 @@ export default defineComponent({
layout,
viewOptions,
viewQuery,
marked,
};
function useBatchDelete() {

View File

@@ -74,11 +74,23 @@
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div
class="format-markdown"
v-html="marked($t('page_help_settings_webhooks_detail'))"
/>
</drawer-detail>
<revisions-drawer-detail
v-if="isNew === false"
collection="directus_webhooks"
:primary-key="primaryKey"
/>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -91,6 +103,7 @@ import router from '@/router';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import marked from 'marked';
type Values = {
[field: string]: any;
@@ -145,6 +158,7 @@ export default defineComponent({
saveAsCopyAndNavigate,
isBatch,
currentProjectKey,
marked,
};
async function saveAndQuit() {

View File

@@ -6,11 +6,6 @@
</v-button>
</template>
<template #drawer>
<layout-drawer-detail @input="viewType = $event" :value="viewType" />
<portal-target name="drawer" />
</template>
<template #actions:prepend>
<portal-target name="actions:prepend" />
</template>
@@ -65,6 +60,20 @@
:search-query="searchQuery"
@update:filters="filters = $event"
/>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
<div class="format-markdown" v-html="marked($t('page_help_users_browse'))" />
</drawer-detail>
<layout-drawer-detail @input="viewType = $event" :value="viewType" />
<portal-target name="drawer" />
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -79,6 +88,7 @@ import useCollectionPreset from '@/composables/use-collection-preset';
import FilterDrawerDetail from '@/views/private/components/filter-drawer-detail';
import LayoutDrawerDetail from '@/views/private/components/layout-drawer-detail';
import SearchInput from '@/views/private/components/search-input';
import marked from 'marked';
type Item = {
[field: string]: any;
@@ -162,6 +172,7 @@ export default defineComponent({
viewQuery,
viewType,
searchQuery,
marked,
};
function useBatchDelete() {

View File

@@ -98,6 +98,9 @@
</div>
<template #drawer>
<drawer-detail icon="info_outline" :title="$t('information')" close>
[TK]
</drawer-detail>
<revisions-drawer-detail
v-if="isBatch === false && isNew === false"
collection="directus_users"
@@ -109,6 +112,12 @@
collection="directus_users"
:primary-key="primaryKey"
/>
<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
<div
class="format-markdown"
v-html="marked($t('page_help_collections_overview'))"
/>
</drawer-detail>
</template>
</private-view>
</template>
@@ -123,6 +132,7 @@ import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-d
import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import marked from 'marked';
import api from '@/api';
type Values = {
@@ -196,6 +206,7 @@ export default defineComponent({
saveAsCopyAndNavigate,
isBatch,
revisionsDrawerDetail,
marked,
previewLoading,
avatarSrc,
roleName,