fixup! feat(editors): redesign editors

nextcloud · Jan 22, 2024 · 0ca10aa · 0ca10aa
1 parent 399fa98
commit 0ca10aa
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/src/components/Editor/Attachments/AttachmentsList.vue b/src/components/Editor/Attachments/AttachmentsList.vue
@@ -16,7 +16,7 @@
 				</div>
 			</div>
 
-			<NcActions>
+			<NcActions v-if="!isReadOnly">
 				<template #icon>
 					<Plus :size="20" />
 				</template>
@@ -35,17 +35,19 @@
 			</NcActions>
 		</div>
 		<div v-if="attachments.length > 0">
-			<ul class="attachments-list-item">
+			<ul class="attachments-list">
 				<NcListItem v-for="attachment in attachments"
 					:key="attachment.path"
+					class="attachments-list-item"
 					:force-display-actions="true"
 					:title="getBaseName(attachment.fileName)"
 					@click="openFile(attachment.uri)">
 					<template #icon>
 						<img :src="getPreview(attachment)" class="attachment-icon">
 					</template>
 					<template #actions>
-						<NcActionButton @click="deleteAttachmentFromEvent(attachment)">
+						<NcActionButton v-if="!isReadOnly"
+							@click="deleteAttachmentFromEvent(attachment)">
 							<template #icon>
 								<Close :size="20" />
 							</template>
@@ -222,12 +224,32 @@ export default {
 
 		.attachments-summary-inner-label {
 			padding: 0 7px;
+			font-weight: bold;
 		}
 	}
 }
 
-.attachments-list-item {
+.attachments-list {
 	margin: 0 -8px;
+
+	.attachments-list-item {
+		// Reduce height to 44px
+		:deep(.list-item) {
+			padding: 0 8px;
+		}
+		:deep(.list-item-content__wrapper) {
+			height: 44px;
+		}
+
+		:deep(.list-item-content) {
+			// Align text with other properties
+			padding-left: 18px;
+		}
+
+		:deep(.line-one__title) {
+			font-weight: unset;
+		}
+	}
 }
 
 #attachments .empty-content {
@@ -244,8 +266,8 @@ export default {
 	}
 }
 .attachment-icon {
-	width: 40px;
-    height: auto;
+	width: 24px;
+	height: 24px;
 	border-radius: var(--border-radius);
 }
 </style>
diff --git a/src/components/Editor/CalendarPickerHeader.vue b/src/components/Editor/CalendarPickerHeader.vue
@@ -86,7 +86,7 @@ export default {
 	align-self: flex-start;
 	margin-bottom: 5px;
 
-	:disabled, :deep(:disabled) {
+	&:disabled, :deep(:disabled) {
 		opacity: 1 !important;
 		filter: unset !important;
 	}

diff --git a/src/components/Editor/InvitationResponseButtons.vue b/src/components/Editor/InvitationResponseButtons.vue
@@ -167,6 +167,7 @@ export default {
 	display: flex;
 	width: 100%;
 	gap: 5px;
+	margin-bottom: 12px;
 
 	&__button {
 		flex: 1 auto;