Various style tweaks (#555)

* icon width

* updated pagination style

* file preview zoom

WIP — shouldn’t show up on MODAL preview

* overlay/modal close button styling

* duplicate key

* bookmark styling

* card fade

also adds an rgb value for the page background variable

* style per page dropdown

* cards per page dropdown color

* inset non-dense notifications within sidebar

* reduce border radius for xs avatars

* hide non-expanded prepend/append

* reduce sidebar padding

this gives content a bit more room

* WIP: split and update comments and revisions

work in progress

* fix collections module name

* fix file library title

* consistent border on disabled

* fix title/breadcrumb positioning

* breadcrumb fixes

* add “open” button to image interface

WIP — this needs the actual logic, and we might want to remove a button

* hide presets delete until selection

* image shadow and subtext color

* Remove breadcrumb calculation

* increase contrast for image subtitle

* fix textarea hover style

* Update src/modules/collections/index.ts

* Fix typing of translateresult to format

* Add undefined check to collection name

* Put v-if on dialog instead of button

* Remove breadcrumb logic

* Remove breadcrumb calculation

* Rename shadow to collapsed in header bar

* fix rating star display going over table header

* show collection breadcrumb for bookmarks

WIP — needs the formatted collection title

* shorter error to avoid wrapping

* remove periods

* Fix standard font-size of divider label, use large in interface

* Add extra date format strings

* Structure comments, support date headers

* Add ability to delete comments

* Add edited on status badge

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

src/modules/activity/routes/browse/browse.vue

@@ -1,7 +1,7 @@
 <template>
-	<private-view :title="$t('activity')">
+	<private-view :title="$t('activity_log')">
 		<template #title-outer:prepend>
-			<v-button rounded disabled icon secondary>
+			<v-button class="header-icon" rounded icon secondary disabled>
 				<v-icon name="notifications" />
 			</v-button>
 		</template>
@@ -82,6 +82,12 @@ export default defineComponent({
 	--v-button-background-color-hover: var(--warning-150);
 }
 
+.header-icon.secondary {
+	--v-button-background-color: var(--background-normal);
+	--v-button-color-disabled: var(--foreground-normal);
+	--v-button-color-activated: var(--foreground-normal);
+}
+
 .layout {
 	--layout-offset-top: 64px;
 }

src/modules/activity/routes/detail/detail.vue

@@ -1,7 +1,7 @@
 <template>
-	<private-view :title="$t('editing', { collection: $t('activity') })">
+	<private-view title="Updated: Item Display Template">
 		<template #title-outer:prepend>
-			<v-button rounded icon secondary exact :to="breadcrumb[0].to">
+			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
@@ -62,7 +62,7 @@ export default defineComponent({
 		function useBreadcrumb() {
 			const breadcrumb = computed(() => [
 				{
-					name: i18n.t('activity'),
+					name: i18n.t('activity_log'),
 					to: `/${currentProjectKey.value}/activity/`,
 				},
 			]);
@@ -79,6 +79,12 @@ export default defineComponent({
 	--v-button-background-color-hover: var(--danger-dark);
 }
 
+.header-icon.secondary {
+	--v-button-background-color: var(--background-normal);
+	--v-button-color-disabled: var(--foreground-normal);
+	--v-button-color-activated: var(--foreground-normal);
+}
+
 .v-form {
 	padding: var(--content-padding);
 }

src/modules/collections/index.ts

@@ -6,7 +6,7 @@ import CollectionsItemNotFound from './routes/not-found';
 
 export default defineModule(({ i18n }) => ({
 	id: 'collections',
-	name: i18n.tc('collection', 2),
+	name: i18n.t('collections'),
 	icon: 'box',
 	routes: [
 		{

src/modules/collections/routes/browse/browse.vue

@@ -7,6 +7,10 @@
 			</v-button>
 		</template>
 
+		<template v-if="bookmark" #headline>
+			<v-breadcrumb :items="breadcrumb" />
+		</template>
+
 		<template #title-outer:append>
 			<bookmark-add
 				v-if="!bookmark"
@@ -192,6 +196,7 @@ export default defineComponent({
 		const { selection } = useSelection();
 		const { info: currentCollection, primaryKeyField } = useCollection(collection);
 		const { addNewLink, batchLink, collectionsLink, currentCollectionLink } = useLinks();
+		const { breadcrumb } = useBreadcrumb();
 		const {
 			viewType,
 			viewOptions,
@@ -243,12 +248,24 @@ export default defineComponent({
 			bookmarkName,
 			editingBookmark,
 			editBookmark,
+			breadcrumb,
 		};
 
+		function useBreadcrumb() {
+			const breadcrumb = computed(() => [
+				{
+					name: props.collection,
+					to: `/${projectsStore.state.currentProjectKey}/collections/${props.collection}`,
+				},
+			]);
+
+			return { breadcrumb };
+		}
+
 		function useSelection() {
 			const selection = ref<Item[]>([]);
 
-			// Whenever the collection changes we're working on, we have to clear the selection
+			// Whenever the collection we're working on changes, we have to clear the selection
 			watch(
 				() => props.collection,
 				() => (selection.value = [])
@@ -387,5 +404,18 @@ export default defineComponent({
 .bookmark-add .toggle,
 .bookmark-edit .toggle {
 	margin-left: 8px;
+	transition: color var(--fast) var(--transition);
+}
+
+.bookmark-add {
+	color: var(--foreground-subdued);
+
+	&:hover {
+		color: var(--foreground-normal);
+	}
+}
+
+.bookmark-edit {
+	color: var(--primary);
 }
 </style>

src/modules/collections/routes/detail/detail.vue

@@ -44,6 +44,10 @@
 			</v-button>
 		</template>
 
+		<template #headline>
+			<v-breadcrumb :items="breadcrumb" />
+		</template>
+
 		<template #actions>
 			<v-dialog v-if="!isNew" v-model="confirmDelete">
 				<template #activator="{ on }">
@@ -143,7 +147,12 @@
 		/>
 
 		<template #drawer>
-			<activity-drawer-detail
+			<revisions-drawer-detail
+				v-if="isBatch === false && isNew === false"
+				:collection="collection"
+				:primary-key="primaryKey"
+			/>
+			<comments-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				:collection="collection"
 				:primary-key="primaryKey"
@@ -159,7 +168,8 @@ import CollectionsNavigation from '../../components/navigation/';
 import router from '@/router';
 import CollectionsNotFound from '../not-found/';
 import useCollection from '@/composables/use-collection';
-import ActivityDrawerDetail from '@/views/private/components/activity-drawer-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
+import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 
@@ -169,7 +179,13 @@ type Values = {
 
 export default defineComponent({
 	name: 'collections-detail',
-	components: { CollectionsNavigation, CollectionsNotFound, ActivityDrawerDetail, SaveOptions },
+	components: {
+		CollectionsNavigation,
+		CollectionsNotFound,
+		RevisionsDrawerDetail,
+		CommentsDrawerDetail,
+		SaveOptions,
+	},
 	props: {
 		collection: {
 			type: String,
@@ -184,6 +200,7 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const { collection, primaryKey } = toRefs(props);
+		const { breadcrumb } = useBreadcrumb();
 
 		const { info: collectionInfo, softDeleteStatus, primaryKeyField } = useCollection(
 			collection
@@ -242,8 +259,20 @@ export default defineComponent({
 			isBatch,
 			softDeleteStatus,
 			templateValues,
+			breadcrumb,
 		};
 
+		function useBreadcrumb() {
+			const breadcrumb = computed(() => [
+				{
+					name: collectionInfo.value?.name,
+					to: `/${currentProjectKey.value}/collections/${props.collection}`,
+				},
+			]);
+
+			return { breadcrumb };
+		}
+
 		async function saveAndQuit() {
 			await save();
 			router.push(`/${currentProjectKey.value}/collections/${props.collection}`);

src/modules/files/routes/browse/browse.vue

@@ -1,5 +1,5 @@
 <template>
-	<private-view :title="$t('files')">
+	<private-view :title="$t('file_library')">
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
 				<v-icon name="folder" />

src/modules/files/routes/detail/detail.vue

@@ -1,5 +1,5 @@
 <template>
-	<private-view :title="loading ? $t('loading') : $t('editing_file', { title: item.title })">
+	<private-view :title="loading ? $t('loading') : item.title">
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
 				<v-icon name="arrow_back" />
@@ -103,7 +103,7 @@
 		</div>
 
 		<template #drawer>
-			<activity-drawer-detail
+			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_files"
 				:primary-key="primaryKey"
@@ -118,7 +118,7 @@ import useProjectsStore from '@/stores/projects';
 import FilesNavigation from '../../components/navigation/';
 import { i18n } from '@/lang';
 import router from '@/router';
-import ActivityDrawerDetail from '@/views/private/components/activity-drawer-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import FilePreview from '@/views/private/components/file-preview';
@@ -134,7 +134,7 @@ export default defineComponent({
 	name: 'files-detail',
 	components: {
 		FilesNavigation,
-		ActivityDrawerDetail,
+		RevisionsDrawerDetail,
 		SaveOptions,
 		FilePreview,
 		ImageEditor,
@@ -206,7 +206,7 @@ export default defineComponent({
 		function useBreadcrumb() {
 			const breadcrumb = computed(() => [
 				{
-					name: i18n.t('files'),
+					name: i18n.t('file_library'),
 					to: `/${currentProjectKey.value}/files/`,
 				},
 			]);

src/modules/settings/routes/data-model/fields/fields.vue

@@ -6,10 +6,6 @@
 			</v-button>
 		</template>
 
-		<template #headline>
-			<v-breadcrumb :items="breadcrumb" />
-		</template>
-
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
@@ -80,7 +76,6 @@ import SettingsNavigation from '../../../components/navigation/';
 import useCollection from '@/composables/use-collection/';
 import FieldsManagement from './components/fields-management';
 import useProjectsStore from '@/stores/projects';
-import { i18n } from '@/lang';
 import useItem from '@/composables/use-item';
 import router from '@/router';
 import useCollectionsStore from '@/stores/collections';
@@ -100,15 +95,6 @@ export default defineComponent({
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const collectionsStore = useCollectionsStore();
 
-		const breadcrumb = computed(() => {
-			return [
-				{
-					name: i18n.t('settings_data_model'),
-					to: `/${projectsStore.state.currentProjectKey}/settings/data-model`,
-				},
-			];
-		});
-
 		const {
 			isNew,
 			edits,
@@ -130,7 +116,6 @@ export default defineComponent({
 		return {
 			collectionInfo,
 			fields,
-			breadcrumb,
 			confirmDelete,
 			isNew,
 			edits,

src/modules/settings/routes/presets/browse/browse.vue

@@ -7,15 +7,9 @@
 		</template>
 
 		<template #actions>
-			<v-dialog v-model="confirmDelete">
+			<v-dialog v-model="confirmDelete" v-if="selection.length > 0">
 				<template #activator="{ on }">
-					<v-button
-						rounded
-						icon
-						class="action-delete"
-						@click="on"
-						:disabled="selection.length === 0"
-					>
+					<v-button rounded icon class="action-delete" @click="on">
 						<v-icon name="delete" />
 					</v-button>
 				</template>

src/modules/settings/routes/roles/detail/detail.vue

@@ -1,15 +1,17 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('roles') })">
 		<template #title-outer:prepend>
-			<v-button class="header-icon" rounded icon exact :to="breadcrumb[0].to">
+			<v-button
+				class="header-icon"
+				rounded
+				icon
+				exact
+				:to="`/${currentProjectKey}/settings/roles/`"
+			>
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
 
-		<template #headline>
-			<v-breadcrumb :items="breadcrumb" />
-		</template>
-
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
@@ -80,7 +82,7 @@
 		</div>
 
 		<template #drawer>
-			<activity-drawer-detail
+			<revisions-drawer-detail
 				v-if="isNew === false"
 				collection="directus_roles"
 				:primary-key="primaryKey"
@@ -93,9 +95,8 @@
 import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
 import useProjectsStore from '@/stores/projects';
 import SettingsNavigation from '../../../components/navigation/';
-import { i18n } from '@/lang';
 import router from '@/router';
-import ActivityDrawerDetail from '@/views/private/components/activity-drawer-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import PermissionsManagement from './components/permissions-management';
@@ -106,7 +107,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'roles-detail',
-	components: { SettingsNavigation, ActivityDrawerDetail, SaveOptions, PermissionsManagement },
+	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions, PermissionsManagement },
 	props: {
 		primaryKey: {
 			type: String,
@@ -117,7 +118,6 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const { primaryKey } = toRefs(props);
-		const { breadcrumb } = useBreadcrumb();
 
 		const {
 			isNew,
@@ -142,7 +142,6 @@ export default defineComponent({
 			loading,
 			error,
 			isNew,
-			breadcrumb,
 			edits,
 			hasEdits,
 			saving,
@@ -154,19 +153,9 @@ export default defineComponent({
 			saveAndAddNew,
 			saveAsCopyAndNavigate,
 			isBatch,
+			currentProjectKey,
 		};
 
-		function useBreadcrumb() {
-			const breadcrumb = computed(() => [
-				{
-					name: i18n.t('roles'),
-					to: `/${currentProjectKey.value}/settings/roles/`,
-				},
-			]);
-
-			return { breadcrumb };
-		}
-
 		async function saveAndQuit() {
 			await save();
 			router.push(`/${currentProjectKey.value}/settings/roles`);

src/modules/settings/routes/webhooks/detail/detail.vue

@@ -1,15 +1,17 @@
 <template>
 	<private-view :title="$t('editing', { collection: $t('webhooks') })">
 		<template #title-outer:prepend>
-			<v-button class="header-icon" rounded icon exact :to="breadcrumb[0].to">
+			<v-button
+				class="header-icon"
+				rounded
+				icon
+				exact
+				:to="`/${currentProjectKey}/settings/webhooks/`"
+			>
 				<v-icon name="arrow_back" />
 			</v-button>
 		</template>
 
-		<template #headline>
-			<v-breadcrumb :items="breadcrumb" />
-		</template>
-
 		<template #actions>
 			<v-dialog v-model="confirmDelete">
 				<template #activator="{ on }">
@@ -72,7 +74,7 @@
 		/>
 
 		<template #drawer>
-			<activity-drawer-detail
+			<revisions-drawer-detail
 				v-if="isNew === false"
 				collection="directus_webhooks"
 				:primary-key="primaryKey"
@@ -85,9 +87,8 @@
 import { defineComponent, computed, toRefs, ref } from '@vue/composition-api';
 import useProjectsStore from '@/stores/projects';
 import SettingsNavigation from '../../../components/navigation/';
-import { i18n } from '@/lang';
 import router from '@/router';
-import ActivityDrawerDetail from '@/views/private/components/activity-drawer-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 
@@ -97,7 +98,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'webhooks-detail',
-	components: { SettingsNavigation, ActivityDrawerDetail, SaveOptions },
+	components: { SettingsNavigation, RevisionsDrawerDetail, SaveOptions },
 	props: {
 		primaryKey: {
 			type: String,
@@ -108,7 +109,6 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const { primaryKey } = toRefs(props);
-		const { breadcrumb } = useBreadcrumb();
 
 		const {
 			isNew,
@@ -133,7 +133,6 @@ export default defineComponent({
 			loading,
 			error,
 			isNew,
-			breadcrumb,
 			edits,
 			hasEdits,
 			saving,
@@ -145,19 +144,9 @@ export default defineComponent({
 			saveAndAddNew,
 			saveAsCopyAndNavigate,
 			isBatch,
+			currentProjectKey,
 		};
 
-		function useBreadcrumb() {
-			const breadcrumb = computed(() => [
-				{
-					name: i18n.t('webhooks'),
-					to: `/${currentProjectKey.value}/settings/webhooks/`,
-				},
-			]);
-
-			return { breadcrumb };
-		}
-
 		async function saveAndQuit() {
 			await save();
 			router.push(`/${currentProjectKey.value}/settings/webhooks`);

src/modules/users/routes/browse/browse.vue

@@ -1,5 +1,5 @@
 <template>
-	<private-view :title="$t('users')">
+	<private-view :title="$t('user_directory')">
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded disabled icon secondary>
 				<v-icon name="people" />

src/modules/users/routes/detail/detail.vue

@@ -1,5 +1,5 @@
 <template>
-	<private-view :title="$t('editing', { collection: $t('users') })">
+	<private-view :title="loading ? $t('loading') : item.first_name + ' ' + item.last_name">
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon secondary exact :to="breadcrumb[0].to">
 				<v-icon name="arrow_back" />
@@ -72,7 +72,7 @@
 		/>
 
 		<template #drawer>
-			<activity-drawer-detail
+			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
 				collection="directus_users"
 				:primary-key="primaryKey"
@@ -87,7 +87,7 @@ import useProjectsStore from '@/stores/projects';
 import UsersNavigation from '../../components/navigation/';
 import { i18n } from '@/lang';
 import router from '@/router';
-import ActivityDrawerDetail from '@/views/private/components/activity-drawer-detail';
+import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 
@@ -97,7 +97,7 @@ type Values = {
 
 export default defineComponent({
 	name: 'users-detail',
-	components: { UsersNavigation, ActivityDrawerDetail, SaveOptions },
+	components: { UsersNavigation, RevisionsDrawerDetail, SaveOptions },
 	props: {
 		primaryKey: {
 			type: String,
@@ -150,7 +150,7 @@ export default defineComponent({
 		function useBreadcrumb() {
 			const breadcrumb = computed(() => [
 				{
-					name: i18n.t('users'),
+					name: i18n.t('user_directory'),
 					to: `/${currentProjectKey.value}/users/`,
 				},
 			]);