Tweaks (#659)

* user component styling

* badge alignment

* selected checkbox label color

* add commit node custom icon

* fix translation key

* cleaner badge centering

* clean up last comment spacing

* style cleanup, badges for revision/comment count

* button styling

* fix tags styling

this supercedes the fix by jacob

* divider icon positioning

* correct help text

* remove docs module

* updated help text and other tweaks

* WIP: add heading and subheading to all modals

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

src/components/v-divider/v-divider.vue

@@ -61,7 +61,8 @@ body {
 		color: var(--v-divider-label-color);
 
 		.v-icon {
-			margin-right: 4px;
+			margin-right: 8px;
+			transform: translateY(-1px);
 		}
 	}
 

src/components/v-modal/v-modal.vue

@@ -25,6 +25,10 @@
 					<slot name="sidebar" />
 				</nav>
 				<main ref="mainEl" class="main">
+					<div v-if="heading" class="heading">
+						<div class="type-title">{{ heading }}</div>
+						<div class="subheading">{{ subheading }}</div>
+					</div>
 					<slot />
 				</main>
 			</div>
@@ -70,6 +74,14 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		heading: {
+			type: String,
+			required: null,
+		},
+		subheading: {
+			type: String,
+			default: null,
+		},
 	},
 	setup(props, { emit }) {
 		const sidebarActive = ref(false);
@@ -189,6 +201,15 @@ body {
 			padding: 8px 16px;
 			overflow: auto;
 
+			.heading {
+				margin-bottom: 48px;
+
+				.subheading {
+					margin-top: 4px;
+					color: var(--foreground-subdued);
+				}
+			}
+
 			@include breakpoint(medium) {
 				padding: 32px;
 			}

src/interfaces/tags/tags.vue

@@ -179,14 +179,15 @@ export default defineComponent({
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: flex-start;
-	padding: 14px 0px;
+	padding: 4px 0px 0px;
 
 	span.tag-container {
 		display: contents;
 	}
 
 	.tag {
-		margin: 4px;
+		margin-top: 8px;
+		margin-right: 8px;
 	}
 
 	.presets {

src/lang/en-US/index.json

@@ -1,6 +1,7 @@
 {
 	"edit_field": "Edit Field",
 	"item_revision": "Item Revision",
+		"item_revision_updates_made": "Here are the differences in the raw field values...",
 	"duplicate_field": "Duplicate Field",
 	"half_width": "Half Width",
 	"full_width": "Full Width",
@@ -86,6 +87,7 @@
 	"revision_delta_soft_deleted": "Soft Deleted",
 	"revision_delta_deleted": "Deleted",
 	"revision_delta_reverted": "Reverted",
+	"revision_delta_other": "Revision",
 	"revision_delta_by": "{date} by {user}",
 	"private_user": "Private User",
 	"revision_unknown": "Created Outside System",
@@ -589,22 +591,24 @@
 	"discard_changes": "Discard Changes",
 	"keep_editing": "Keep Editing",
 
-	"page_help_collections_overview": "Provides a listing of all collections you have access to.",
-	"page_help_collections_browse": "**Item Browse Page** — Customize the layout, filters, and sorting to tailor your view of items within this {collection} collection.<br><br>You can also save bookmarks of these different configurations to quickly switch between them.<br><br><a href='https://docs.directus.io/guides/user-guide.html#items' target='_blank'>Learn More</a>",
-	"page_help_collections_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_activity_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_activity_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_files_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_global": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_datamodel_collections": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_datamodel_fields": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_roles_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_roles_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_presets_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_presets_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_webhooks_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_settings_webhooks_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
-	"page_help_users_browse": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
+	"page_help_collections_overview": "**Collections Overview** — Lists of all collections you have access to.",
+	"page_help_collections_browse": "**Browse Items** — Lists all {collection} items you have access to. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.<br><br><a href='https://docs.directus.io/guides/user-guide.html#items' target='_blank'>Learn More</a>",
+	"page_help_collections_detail": "**Item Detail** — A form for viewing and managing this item. This sidebar also contains a full history of revisions, and embedded comments.",
+	"page_help_activity_browse": "**Browse Activity** — A comprehensive listing of all your user's system and content activity.",
+	"page_help_activity_detail": "**Activity Detail** — Shows accountability info, revision data, and the update message for this activity record.",
+	"page_help_files_browse": "**File Library** — Lists all file assets uploaded to this project. Customize layout, filters, and sorting to tailor your view, and even save bookmarks of these different configurations for quick access.",
+	"page_help_files_detail": "**File Detail** — A form for managing file metadata, editing the original asset, and updating access settings.",
+	"page_help_settings_global": "**Global Settings** — Your project's global configuration options.",
+	"page_help_settings_datamodel_collections": "**Data Model: Collections** — Lists all collections available. This includes visible, hidden, and system collections, as well as unmanaged database tables that can be added.",
+	"page_help_settings_datamodel_fields": "**Data Model: Collection** — A form for managing this collection and its fields.",
+	"page_help_settings_roles_browse": "**Browse Roles** — Lists the Admin, Public and custom User Roles.",
+	"page_help_settings_roles_detail": "**Role Detail** — Manage a role's permissions and other settings.",
+	"page_help_settings_presets_browse": "**Browse Presets** — Lists all presets in the project, including: user, role, and global bookmarks, as well as default views.",
+	"page_help_settings_presets_detail": "**Preset Detail** — A form for managing bookmarks and default collection presets.",
+	"page_help_settings_webhooks_browse": "**Browse Webhooks** — Lists all webhooks within the project.",
+	"page_help_settings_webhooks_detail": "**Webhook Detail** — A form for creating and managing project webhooks.",
+	"page_help_users_browse": "**User Directory** — Lists all system users within this project.",
+	"page_help_users_detail": "**User Detail** — Manage your account information, or view the details of other users.",
 
   "about_directus": "About Directus",
   "activity_log": "Activity Log",

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

@@ -158,7 +158,7 @@
 				: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'))" />
+				<div class="format-markdown" v-html="marked($t('page_help_collections_detail'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

src/modules/docs/index.ts

@@ -1,8 +0,0 @@
-import { defineModule } from '@/modules/define';
-
-export default defineModule(({ i18n }) => ({
-	id: 'docs',
-	name: i18n.t('help_and_docs'),
-	icon: 'help',
-	link: 'https://docs.directus.io',
-}));

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

@@ -70,7 +70,7 @@
 			<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'))" />
+				<div class="format-markdown" v-html="marked($t('page_help_files_browse'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -111,7 +111,7 @@
 				: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'))" />
+				<div class="format-markdown" v-html="marked($t('page_help_files_detail'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

src/modules/index.ts

@@ -2,9 +2,14 @@ import CollectionsModule from './collections/';
 import FilesModule from './files/';
 import UsersModule from './users/';
 import ActivityModule from './activity/';
-import DocsModule from './docs/';
 import SettingsModule from './settings/';
 
-export const modules = [ActivityModule, CollectionsModule, UsersModule, FilesModule, DocsModule, SettingsModule];
+export const modules = [
+	ActivityModule,
+	CollectionsModule,
+	UsersModule,
+	FilesModule,
+	SettingsModule,
+];
 
 export default modules;

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

@@ -79,7 +79,10 @@
 			</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'))" />
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_datamodel_collections'))"
+				/>
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -61,7 +61,10 @@
 				<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'))" />
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_datamodel_fields'))"
+				/>
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -81,7 +81,10 @@
 				<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'))" />
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_presets_browse'))"
+				/>
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -68,7 +68,10 @@
 				<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'))" />
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_presets_detail'))"
+				/>
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -57,7 +57,10 @@
 			</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'))" />
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_webhooks_browse'))"
+				/>
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -61,7 +61,10 @@
 			</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'))" />
+				<div
+					class="format-markdown"
+					v-html="marked($t('page_help_settings_webhooks_detail'))"
+				/>
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -68,7 +68,7 @@
 			<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'))" />
+				<div class="format-markdown" v-html="marked($t('page_help_users_browse'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

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

@@ -96,7 +96,7 @@
 
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				[TK]
+				<div class="format-markdown" v-html="marked($t('page_help_users_detail'))" />
 			</drawer-detail>
 			<revisions-drawer-detail
 				v-if="isBatch === false && isNew === false"
@@ -110,7 +110,7 @@
 				: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'))" />
+				<div class="format-markdown" v-html="marked($t('page_help_users_detail'))" />
 			</drawer-detail>
 		</template>
 	</private-view>

src/views/private/components/revisions-drawer-detail/revisions-modal.vue

@@ -1,6 +1,11 @@
 <template>
 	<div>
-		<v-modal v-model="_active" :title="$t('item_revision')">
+		<v-modal
+			v-model="_active"
+			:title="$t('item_revision')"
+			heading="Dynamic Based on Pane"
+			subheading="Dynamic Based on Pane"
+		>
 			<template #subtitle>
 				<revisions-modal-picker :revisions="revisions" :current.sync="_current" />
 			</template>