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/views/private/components/drawer-detail/drawer-detail.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="drawer-detail">
+	<div class="drawer-detail" :class="{ open: drawerOpen }">
 		<button class="toggle" @click="toggle" :class="{ open: active }">
 			<div class="icon">
 				<v-badge bordered :value="badge" :disabled="!badge">
@@ -9,6 +9,9 @@
 			<div class="title" v-show="drawerOpen">
 				{{ title }}
 			</div>
+			<div v-if="close" class="close" @click.stop="drawerOpen = !drawerOpen">
+				<v-icon name="close" />
+			</div>
 		</button>
 		<transition-expand class="scroll-container">
 			<div v-show="active">
@@ -39,6 +42,10 @@ export default defineComponent({
 			type: [String, Number],
 			default: null,
 		},
+		close: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const { active, toggle } = useGroupable(props.title, 'drawer-detail');
@@ -70,16 +77,42 @@ body {
 		height: 64px;
 		color: var(--foreground-normal);
 		background-color: var(--background-normal-alt);
+
+		.icon {
+			--v-icon-color: var(--drawer-detail-icon-color);
+
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 64px;
+			height: 100%;
+		}
+
+		.close {
+			position: absolute;
+			top: 0;
+			right: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 64px;
+			height: 64px;
+			color: var(--foreground-subdued);
+			opacity: 0;
+			transition: opacity var(--fast) var(--transition), color var(--fast) var(--transition);
+			pointer-events: none;
+
+			&:hover {
+				color: var(--foreground-normal);
+			}
+		}
 	}
 
-	.icon {
-		--v-icon-color: var(--drawer-detail-icon-color);
-
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 64px;
-		height: 100%;
+	&.open {
+		.toggle .close {
+			opacity: 1;
+			pointer-events: auto;
+		}
 	}
 
 	.title {
@@ -98,6 +131,13 @@ body {
 
 	.content {
 		padding: 16px;
+		::v-deep {
+			.format-markdown {
+				a {
+					color: var(--primary);
+				}
+			}
+		}
 	}
 }
 </style>

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

@@ -67,7 +67,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .module-bar-logo {
 	--v-progress-circular-color: var(--white);
-	--v-progress-circular-background-color: transparent;
+	--v-progress-circular-background-color: rgba(255, 255, 255, 0.25);
 
 	position: relative;
 	display: flex;

src/views/private/components/render-display/render-display.vue

@@ -1,7 +1,7 @@
 <template>
 	<value-null v-if="value === null || value === undefined" />
-	<span v-else-if="displayInfo === null" class="no-wrap">{{ value }}</span>
-	<span v-else-if="typeof displayInfo.handler === 'function'" class="no-wrap">
+	<span v-else-if="displayInfo === null" class="display">{{ value }}</span>
+	<span v-else-if="typeof displayInfo.handler === 'function'" class="display">
 		{{ displayInfo.handler(value, options, { type }) }}
 	</span>
 	<component
@@ -68,10 +68,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/mixins/no-wrap.scss';
-
-.no-wrap {
+.display {
 	line-height: 22px;
-	@include no-wrap;
 }
 </style>

src/views/private/components/render-template/render-template.vue

@@ -12,7 +12,7 @@
 				:type="part.type"
 				v-bind="part.options"
 			/>
-			<span :key="index" v-else>{{ part + ' ' }}</span>
+			<span :key="index" v-else>{{ part }}</span>
 		</template>
 	</div>
 </template>
@@ -86,7 +86,7 @@ export default defineComponent({
 						type: field.type,
 					};
 				})
-				.map((p) => (typeof p === 'string' ? p.trim() : p))
+				.map((p) => p)
 				.filter((p) => p)
 		);
 
@@ -99,16 +99,31 @@ export default defineComponent({
 @import '@/styles/mixins/no-wrap';
 
 .render-template {
-	display: flex;
-	align-items: center;
+	position: relative;
 	max-width: 100%;
 	height: 100%;
+	padding-right: 8px;
 
 	& > * {
-		margin-right: 6px;
-
-		@include no-wrap;
+		vertical-align: middle;
 	}
+
+	&::after {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: 8px;
+		background: linear-gradient(
+			90deg,
+			rgba(var(--background-page-rgb), 0) 0%,
+			rgba(var(--background-page-rgb), 1) 100%
+		);
+		content: '';
+		pointer-events: none;
+	}
+
+	@include no-wrap;
 }
 
 .subdued {

src/views/private/components/user-popover/user-popover.vue

@@ -121,17 +121,28 @@ export default defineComponent({
 
 .user-box {
 	display: flex;
+	min-width: 300px;
 	height: 80px;
-	margin: 10px 6px;
+	margin: 8px 4px;
 
 	.v-avatar {
 		margin-right: 16px;
 	}
 
 	.status-role {
+		text-transform: capitalize;
+		&.invited {
+			color: var(--primary);
+		}
 		&.active {
 			color: var(--success);
 		}
+		&.suspended {
+			color: var(--warning);
+		}
+		&.deleted {
+			color: var(--danger);
+		}
 	}
 
 	.email {
@@ -153,7 +164,7 @@ export default defineComponent({
 	display: flex;
 	align-items: center;
 	height: 80px;
-	margin: 10px 6px;
+	margin: 8px 4px;
 
 	.avatar {
 		width: 80px;

src/views/private/private-view.vue

@@ -40,14 +40,6 @@
 			:class="{ 'is-open': drawerOpen }"
 			@click="drawerOpen = true"
 		>
-			<drawer-button
-				class="drawer-toggle"
-				@click.stop="drawerOpen = !drawerOpen"
-				:icon="drawerOpen ? 'chevron_right' : 'chevron_left'"
-			>
-				{{ $t('collapse_sidebar') }}
-			</drawer-button>
-
 			<drawer-detail-group :drawer-open="drawerOpen">
 				<slot name="drawer" />
 			</drawer-detail-group>