Small tweaks, large benefits (#404)

* Add 160px bottom padding to all pages

* Force header column to have 24px min width

* Allow resizing of last column in v-table

* Fix table row unwanted spacing + offset 2px

* Add divider to end of drawer detail

* Add down chevron on project chooser hover

* Add support for color accented modules

* Use yellow header icon in settings

* Add link to collections module browse icon

* Dont show all items selected on load v-table

* Add prepend / append slot to v-checkbox

* Add drag handles to field setup settings in tabular

* Fix loading state in table

* Show all resize handles on hover

* Lose breadcrumb in collections module, show singleton title

* Wrap activity icon, render textarea full width

* Dont render comments section on batch

* Allow input to shrink for slots

* Fix cursor on v-selects

* Prevent input usage when they have click events

* Fix margin on divider in fields-management

* Fix drag handles on field selects

* Fix button / divider spacing

* Remove support for divider inset

* Fix test warning

* Fix table-row test

* Fix codesmell

* Fix missing scope attr

src/views/private/components/activity-drawer-detail/activity-drawer-detail.vue

@@ -5,6 +5,7 @@
 				:placeholder="$t('leave_comment')"
 				v-model="newCommentContent"
 				expand-on-focus
+				full-width
 			>
 				<template #append>
 					<v-button
@@ -25,19 +26,21 @@
 					<v-avatar small>
 						<v-icon name="person_outline" />
 					</v-avatar>
-					<div class="name">
-						<template v-if="act.action_by && act.action_by">
-							{{ act.action_by.first_name }} {{ act.action_by.last_name }}
-						</template>
-						<template v-else-if="act.action.by && action.action_by">
-							{{ $t('private_user') }}
-						</template>
-						<template v-else>
-							{{ $t('external') }}
-						</template>
-					</div>
-					<div class="date" v-tooltip.start="new Date(act.action_on)">
-						{{ act.date_relative }}
+					<div class="header-content">
+						<div class="name">
+							<template v-if="act.action_by && act.action_by">
+								{{ act.action_by.first_name }} {{ act.action_by.last_name }}
+							</template>
+							<template v-else-if="act.action.by && action.action_by">
+								{{ $t('private_user') }}
+							</template>
+							<template v-else>
+								{{ $t('external') }}
+							</template>
+						</div>
+						<div class="date" v-tooltip.start="new Date(act.action_on)">
+							{{ act.date_relative }}
+						</div>
 					</div>
 				</div>
 
@@ -152,7 +155,10 @@ export default defineComponent({
 							...record,
 							date_relative: await localizedFormatDistance(
 								new Date(record.action_on),
-								new Date()
+								new Date(),
+								{
+									addSuffix: true,
+								}
 							),
 						});
 					}
@@ -237,6 +243,11 @@ export default defineComponent({
 		}
 	}
 
+	.name,
+	.date {
+		line-height: 1.25;
+	}
+
 	.name {
 		margin-right: 8px;
 	}

src/views/private/components/drawer-detail/drawer-detail.test.ts

@@ -3,12 +3,14 @@ import VueCompositionAPI, { ref } from '@vue/composition-api';
 import DrawerDetail from './drawer-detail.vue';
 import * as GroupableComposition from '@/compositions/groupable/groupable';
 import VIcon from '@/components/v-icon';
+import VDivider from '@/components/v-divider';
 import TransitionExpand from '@/components/transition/expand';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);
 localVue.component('v-icon', VIcon);
 localVue.component('transition-expand', TransitionExpand);
+localVue.component('v-divider', VDivider);
 
 describe('Drawer Detail', () => {
 	it('Uses the useGroupable composition', () => {

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

@@ -13,6 +13,7 @@
 				<div class="content">
 					<slot />
 				</div>
+				<v-divider />
 			</div>
 		</transition-expand>
 	</div>
@@ -88,4 +89,10 @@ export default defineComponent({
 		padding: 20px;
 	}
 }
+
+.v-divider {
+	--v-divider-color: var(--border-normal);
+
+	margin: 0 20px;
+}
 </style>

src/views/private/components/module-bar/module-bar.vue

@@ -10,6 +10,13 @@
 				:to="module.to"
 				:href="module.href"
 				tile
+				:style="
+					module.color
+						? {
+								'--v-button-background-color-activated': module.color,
+						  }
+						: null
+				"
 			>
 				<v-icon :name="module.icon" />
 			</v-button>

src/views/private/components/project-chooser/project-chooser.vue

@@ -1,8 +1,9 @@
 <template>
-	<div class="project-chooser">
+	<div class="project-chooser" :class="{ active }">
 		<button class="toggle" :disabled="projects.length === 1" @click="active = !active">
 			<latency-indicator />
-			{{ currentProject.name }}
+			<span class="name">{{ currentProject.name }}</span>
+			<v-icon class="icon" name="expand_more" />
 		</button>
 		<transition-expand>
 			<div v-if="active" class="options-wrapper">
@@ -85,6 +86,24 @@ export default defineComponent({
 		.latency-indicator {
 			margin-right: 12px;
 		}
+
+		.name {
+			flex-grow: 1;
+		}
+
+		.icon {
+			color: var(--foreground-subdued);
+			opacity: 0;
+			transition: opacity var(--fast) var(--transition);
+		}
+
+		&:hover .icon {
+			opacity: 1;
+		}
+	}
+
+	&.active .toggle .icon {
+		opacity: 1;
 	}
 
 	.options-wrapper {

src/views/private/private-view.vue

@@ -244,7 +244,7 @@ export default defineComponent({
 	}
 
 	@include breakpoint(small) {
-		--content-padding: 32px;
+		--content-padding: 32px 32px 160px 32px;
 	}
 }
 </style>