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/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}`);