Merge pull request #12810 from nextcloud/fix/noid/design-adjust-v3

fix(design): adjustments for Nextcloud 30 - v3

package.json

@@ -38,7 +38,7 @@
     "@nextcloud/paths": "^2.2.1",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/upload": "^1.4.2",
-    "@nextcloud/vue": "^8.15.0",
+    "@nextcloud/vue": "^8.15.1",
     "@vueuse/components": "^10.11.0",
     "crypto-js": "^4.2.0",
     "debounce": "^2.1.0",

src/components/ConversationIcon.vue

@@ -129,7 +129,7 @@ export default {
 
 		size: {
 			type: Number,
-			default: AVATAR.SIZE.DEFAULT,
+			default: AVATAR.SIZE.TWO_LINES,
 		},
 	},
 

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -329,15 +329,6 @@ export default {
 }
 
 .conversation {
-	// Overwrite NcListItem styles to reduce a component height
-	padding: 0 !important;
-	margin: var(--default-grid-baseline);
-	width: calc(100% - var(--default-grid-baseline) * 2);
-
-	:deep(.list-item) {
-		padding-block: var(--default-grid-baseline);
-	}
-
 	// Overwrite ConversationIcon styles to blend a type icon with NcListItem
 	& :deep(.list-item:hover .conversation-icon__type) {
 		background-color: var(--color-background-hover);

src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue

@@ -29,9 +29,9 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 /* Consider:
  * 48 = 2 * var(--default-line-height) - 2 lines of text
  * 8 = 2 * var(--default-grid-baseline) - item padding
- * 4 = var(--default-grid-baseline) - item margin (collapsed)
+ * 8 = 2 * var(--default-grid-baseline) - focus offset
  */
-const CONVERSATION_ITEM_SIZE = 60
+const CONVERSATION_ITEM_SIZE = 64
 
 export default {
 	name: 'ConversationsListVirtual',

src/components/LeftSidebar/LeftSidebar.vue

@@ -180,7 +180,7 @@
 					data-nav-id="conversation_create_new"
 					@click="createConversation(searchText)">
 					<template #icon>
-						<ChatPlus :size="44" />
+						<ChatPlus :size="AVATAR.SIZE.TWO_LINES" />
 					</template>
 					<template #subname>
 						{{ t('spreed', 'New group conversation') }}
@@ -206,7 +206,7 @@
 						:name="item.label"
 						@click="createAndJoinConversation(item)">
 						<template #icon>
-							<AvatarWrapper v-bind="iconData(item)" />
+							<AvatarWrapper v-bind="iconData(item)" :size="AVATAR.SIZE.TWO_LINES" />
 						</template>
 						<template #subname>
 							{{ t('spreed', 'New private conversation') }}
@@ -259,7 +259,7 @@
 							:name="item.label"
 							@click="createAndJoinConversation(item)">
 							<template #icon>
-								<AvatarWrapper v-bind="iconData(item)" />
+								<AvatarWrapper v-bind="iconData(item)" :size="AVATAR.SIZE.TWO_LINES" />
 							</template>
 							<template #subname>
 								{{ t('spreed', 'New group conversation') }}
@@ -336,7 +336,7 @@ import SearchBox from '../UIShared/SearchBox.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
-import { ATTENDEE, CONVERSATION } from '../../constants.js'
+import { ATTENDEE, AVATAR, CONVERSATION } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import {
@@ -410,6 +410,7 @@ export default {
 		const isMobile = useIsMobile()
 
 		return {
+			AVATAR,
 			initializeNavigation,
 			resetNavigation,
 			leftSidebar,
@@ -1005,14 +1006,16 @@ export default {
 <style lang="scss" scoped>
 .scroller {
 	height: 100%;
-	padding-left: calc(var(--default-grid-baseline) * 2);
+	padding-left: var(--default-grid-baseline);
 	overflow-y: scroll !important; // reserve a place for scrollbar
 }
 
 .new-conversation {
 	position: relative;
 	display: flex;
 	padding: calc(var(--default-grid-baseline) * 2);
+	padding-right: var(--default-grid-baseline);
+	overflow-y: scroll !important; // reserve a place for scrollbar
 	align-items: center;
 	border-bottom: 1px solid transparent;
 
@@ -1023,13 +1026,13 @@ export default {
 	.filters {
 		position: absolute;
 		top: calc(var(--default-grid-baseline) * 2);
-		right: calc(var(--default-grid-baseline) * 3 + var(--default-clickable-area));
+		right: calc(var(--default-grid-baseline) * 2 + var(--default-clickable-area));
 	}
 
 	.actions {
 		position: absolute;
 		top: calc(var(--default-grid-baseline) * 2);
-		right: calc(var(--default-grid-baseline) * 2);
+		right: calc(var(--default-grid-baseline) * 1);
 	}
 }
 

src/components/MediaSettings/MediaDevicesSelector.vue

@@ -5,14 +5,10 @@
 
 <template>
 	<div class="media-devices-selector">
-		<div class="media-devices-selector__icon">
-			<Microphone v-if="deviceIcon === 'microphone'"
-				title=""
-				:size="16" />
-			<VideoIcon v-if="deviceIcon === 'camera'"
-				title=""
-				:size="16" />
-		</div>
+		<component :is="deviceIcon"
+			class="media-devices-selector__icon"
+			title=""
+			:size="16" />
 
 		<NcSelect v-model="deviceSelectedOption"
 			:input-id="deviceSelectorId"
@@ -23,7 +19,7 @@
 			:placeholder="deviceSelectorPlaceholder"
 			:disabled="!enabled || !deviceOptionsAvailable" />
 
-		<NcButton type="tertiary-no-background"
+		<NcButton type="tertiary"
 			:title="t('spreed', 'Refresh devices list')"
 			:aria-lebel="t('spreed', 'Refresh devices list')"
 			@click="$emit('refresh')">
@@ -89,15 +85,11 @@ export default {
 		},
 
 		deviceIcon() {
-			if (this.kind === 'audioinput') {
-				return 'microphone'
-			}
-
-			if (this.kind === 'videoinput') {
-				return 'camera'
+			switch (this.kind) {
+			case 'audioinput': return Microphone
+			case 'videoinput': return VideoIcon
+			default: return null
 			}
-
-			return null
 		},
 
 		deviceOptionsAvailable() {
@@ -203,15 +195,15 @@ export default {
 <style lang="scss" scoped>
 .media-devices-selector {
 	display: flex;
-	margin: 16px 0;
+	gap: var(--default-grid-baseline);
+	margin: calc(3 * var(--default-grid-baseline)) 0;
+
 	&__icon {
 		display: flex;
-		justify-content: flex-start;
+		justify-content: center;
 		align-items: center;
-		width: 36px;
-	}
-	&__heading {
-		font-weight: bold;
+		width: var(--default-clickable-area);
+		flex-shrink: 0;
 	}
 
 	:deep(.v-select.select) {

src/components/MediaSettings/MediaDevicesSpeakerTest.vue

@@ -5,9 +5,7 @@
 
 <template>
 	<div class="media-devices-checker">
-		<div class="media-devices-checker__icon">
-			<VolumeHighIcon :size="16" />
-		</div>
+		<VolumeHighIcon class="media-devices-checker__icon" :size="16" />
 		<NcButton type="secondary" @click="playTestSound">
 			{{ buttonLabel }}
 		</NcButton>
@@ -82,13 +80,15 @@ export default {
 <style lang="scss" scoped>
 .media-devices-checker {
 	display: flex;
-	margin: 16px 0;
+	gap: var(--default-grid-baseline);
+	margin: calc(3 * var(--default-grid-baseline)) 0;
 
 	&__icon {
 		display: flex;
-		justify-content: flex-start;
+		justify-content: center;
 		align-items: center;
-		width: 36px;
+		width: var(--default-clickable-area);
+		flex-shrink: 0;
 	}
 
 	.equalizer {

src/components/MediaSettings/VideoBackgroundEditor.vue

@@ -288,7 +288,7 @@ export default {
 	&__element {
 		border: none;
 		margin: 0 !important;
-		border-radius: calc(var(--border-radius-large) * 1.5);
+		border-radius: var(--border-radius-element, calc(var(--border-radius-large) * 1.5));
 		height: calc(var(--default-grid-baseline) * 16);
 		display: flex;
 		flex-direction: column;

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -588,6 +588,7 @@ export default {
 	.image-container {
 		position: relative;
 		display: inline-block;
+		width: 100%;
 		height: 100%;
 
 		&.playable {

src/components/MessagesList/MessagesList.vue

@@ -1286,7 +1286,7 @@ export default {
 		left: 50%;
 		color: var(--color-text-maxcontrast);
 		background-color: var(--color-background-dark);
-		border-radius: var(--border-radius-pill);
+		border-radius: var(--border-radius-element, var(--border-radius-pill));
 	}
 
 	&:last-child {

src/components/NewMessage/NewMessagePollEditor.vue

@@ -28,7 +28,7 @@
 					:value.sync="pollOptions[index]"
 					:label="t('spreed', 'Answer {option}', {option: index + 1})" />
 				<NcButton v-if="pollOptions.length > 2"
-					type="tertiary-no-background"
+					type="tertiary"
 					:aria-label="t('spreed', 'Delete poll option')"
 					@click="deleteOption(index)">
 					<template #icon>
@@ -38,7 +38,7 @@
 			</div>
 
 			<!-- Add options -->
-			<NcButton class="poll-editor__add-more" type="tertiary-no-background" @click="addOption">
+			<NcButton class="poll-editor__add-more" type="tertiary" @click="addOption">
 				<template #icon>
 					<Plus />
 				</template>
@@ -181,7 +181,8 @@ export default {
 
 	&__option {
 		display: flex;
-		align-items: center;
+		align-items: flex-end;
+		gap: var(--default-grid-baseline);
 		width: 100%;
 		margin-bottom: calc(var(--default-grid-baseline) * 2);
 	}

src/components/RightSidebar/BreakoutRooms/BreakoutRoomItem.vue

@@ -9,7 +9,7 @@
 		@mouseenter="elementHoveredOrFocused = true"
 		@mouseleave="elementHoveredOrFocused = false">
 		<div class="breakout-room-item__wrapper">
-			<NcButton type="tertiary-no-background"
+			<NcButton type="tertiary"
 				:aria-label="toggleParticipantsListLabel"
 				@focus="elementHoveredOrFocused = true"
 				@blur="elementHoveredOrFocused = false"

src/constants.js

@@ -274,6 +274,7 @@ export const AVATAR = {
 		EXTRA_SMALL: 22,
 		SMALL: 32,
 		DEFAULT: 44,
+		TWO_LINES: 48, // 2 * var(--default-line-height)
 		MEDIUM: 64,
 		LARGE: 128,
 		EXTRA_LARGE: 180,