fix: BridgePart.vue header restyle

Signed-off-by: Maksim Sukharev <[email protected]>

src/components/ConversationSettings/Matterbridge/BridgePart.vue

@@ -4,40 +4,37 @@
 -->
 
 <template>
-	<div class="part"
-		:class="{ readonly: !editing }">
-		<h3>
-			<img class="icon-service"
-				:src="type.iconUrl">
-			<span>
+	<li class="part" :class="{ readonly: !editing }">
+		<div class="part__header">
+			<img class="part__icon" :src="type.iconUrl" :alt="type.name">
+			<h4 class="part__heading">
 				{{ type.name }}
-			</span>
-			<NcActions :container="container"
-				:force-menu="false">
-				<NcActionButton v-if="editable"
-					:icon="editing ? 'icon-checkmark' : 'icon-rename'"
-					@click="onEditClick">
-					{{ editing ? t('spreed', 'Save'): t('spreed', 'Edit') }}
-				</NcActionButton>
-			</NcActions>
+			</h4>
 			<NcActions class="actions"
 				:container="container"
-				:force-menu="true"
+				:inline="editable ? 1 : 0"
 				placement="bottom">
-				<NcActionLink icon="icon-info"
-					target="_blank"
-					:href="type.infoTarget"
-					close-after-click>
+				<NcActionButton v-if="editable" close-after-click @click="$emit('edit-clicked')">
+					<template #icon>
+						<IconCheck v-if="editing" :size="20" />
+						<IconPencil v-else :size="20" />
+					</template>
+					{{ editing ? t('spreed', 'Save'): t('spreed', 'Edit') }}
+				</NcActionButton>
+				<NcActionLink :href="type.infoTarget" target="_blank" close-after-click>
+					<template #icon>
+						<IconInformation :size="20" />
+					</template>
 					{{ t('spreed', 'More information') }}
 				</NcActionLink>
-				<NcActionButton v-if="editable"
-					icon="icon-delete"
-					:close-after-click="true"
-					@click="$emit('delete-part')">
+				<NcActionButton v-if="editable" close-after-click @click="$emit('delete-part')">
+					<template #icon>
+						<IconDelete :size="20" />
+					</template>
 					{{ t('spreed', 'Delete') }}
 				</NcActionButton>
 			</NcActions>
-		</h3>
+		</div>
 		<div v-for="(field, key) in displayedFields"
 			:key="key"
 			class="field">
@@ -71,10 +68,15 @@
 			</div>
 			<!-- eslint-enable -->
 		</div>
-	</div>
+	</li>
 </template>
 
 <script>
+import IconCheck from 'vue-material-design-icons/Check.vue'
+import IconDelete from 'vue-material-design-icons/Delete.vue'
+import IconInformation from 'vue-material-design-icons/Information.vue'
+import IconPencil from 'vue-material-design-icons/Pencil.vue'
+
 import { t } from '@nextcloud/l10n'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -84,14 +86,15 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 export default {
 	name: 'BridgePart',
 	components: {
-		NcActions,
+		IconCheck,
+		IconDelete,
+		IconInformation,
+		IconPencil,
 		NcActionButton,
 		NcActionLink,
+		NcActions,
 	},
 
-	mixins: [
-	],
-
 	props: {
 		num: {
 			type: Number,
@@ -160,9 +163,7 @@ export default {
 			classes[this.type.fields[name].icon] = true
 			return classes
 		},
-		onEditClick() {
-			this.$emit('edit-clicked')
-		},
+
 		// focus on main field when entering edition mode and when created
 		focusMainField() {
 			if (this.editing && this.$refs[this.type.mainField] && this.$refs[this.type.mainField].length > 0) {
@@ -176,25 +177,22 @@ export default {
 
 <style lang="scss" scoped>
 .part {
-	padding-top: 10px;
-}
-
-h3 {
-	display: flex;
-	align-items: flex-end;
-	margin-bottom: 0;
+	&__header {
+		display: flex;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline));
+		//width: 100%;
+	}
 
-	> span {
+	&__heading {
 		flex-grow: 1;
-		padding-top: 12px;
+		margin: 0;
 	}
 
-	.icon-service {
+	&__icon {
 		flex-grow: 0;
-		padding: 0 !important;
-		margin: 14px 10px 0 14px;
-		width: 16px;
-		height: 16px;
+		width: var(--clickable-area-small);
+		height: var(--clickable-area-small);
 		filter: var(--background-invert-if-dark);
 	}
 }

src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue

@@ -65,16 +65,16 @@
 				</div>
 			</div>
 			<ul>
-				<li v-for="(part, i) in parts" :key="part.type + i">
-					<BridgePart :num="i+1"
-						:part="part"
-						:type="matterbridgeTypes[part.type]"
-						:editing="part.editing"
-						:editable="!enabled"
-						container=".matterbridge-settings"
-						@edit-clicked="onEditClicked(i)"
-						@delete-part="onDelete(i)" />
-				</li>
+				<BridgePart v-for="(part, i) in parts"
+					:key="part.type + i"
+					:num="i+1"
+					:part="part"
+					:type="matterbridgeTypes[part.type]"
+					:editing="part.editing"
+					:editable="!enabled"
+					container=".matterbridge-settings"
+					@edit-clicked="onEditClicked(i)"
+					@delete-part="onDelete(i)" />
 			</ul>
 		</div>
 	</div>
@@ -314,6 +314,8 @@ export default {
 	}
 
 	.basic-settings {
+		margin-bottom: calc(4 * var(--default-grid-baseline));
+
 		.action {
 			list-style: none;
 		}
@@ -354,7 +356,9 @@ export default {
 	}
 
 	ul {
-		margin-bottom: 64px;
+		display: flex;
+		flex-direction: column;
+		gap: calc(4 * var(--default-grid-baseline));
 	}
 }