Tweaks (#615)

* 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>

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

@@ -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() {

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

@@ -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,
 		};
 

src/modules/collections/routes/overview/overview.vue

@@ -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);