feat(editors): redesign editors

Signed-off-by: Richard Steinmetz <[email protected]>

css/app-sidebar.scss

@@ -37,13 +37,14 @@
 		}
 	}
 
-	/** Hide the submit button for the title, because it does not trigger a save */
-	.app-sidebar-header__desc {
-		.app-sidebar-header__maintitle-form {
-			button {
-				display: none;
-			}
-		}
+	// We use our custom header layout for the sidebar editor
+	.app-sidebar-header__info {
+		display: none !important;
+	}
+
+	.app-sidebar-header__description {
+		// Close button should be aligned with calendar picker (header)
+		padding-top: 5px;
 	}
 
 	.editor-invitee-list-empty-message,
@@ -237,27 +238,37 @@
 		}
 
 		&__time-pickers {
+			flex-wrap: wrap;
 			justify-content: space-between;
+			gap: 5px;
 
 			.mx-datepicker {
-				width: 49%;
+				flex: 1 auto;
 
 				.mx-input-append {
 					background-color: transparent !important;
 				}
 			}
 
 			&--readonly {
+				justify-content: start;
+
 				.property-title-time-picker-read-only-wrapper {
 					display: flex;
 					align-items: center;
-					width: 50%;
-					margin: 3px 3px 3px 0;
 					padding: 8px 7px;
 					background-color: var(--color-main-background);
 					color: var(--color-main-text);
 					outline: none;
 
+					&--start-date {
+						padding-right: 0;
+					}
+
+					&--end-date {
+						padding-left: 0;
+					}
+
 					&__icon {
 						margin-left: 8px;
 						height: 16px;
@@ -277,24 +288,16 @@
 			}
 		}
 
-		@media screen and (max-width: 1500px) {
-			&__time-pickers {
-				display: block;
-			}
-
-			.mx-datepicker {
-				width: 100%;
-			}
+		&__all-day {
+			padding-left: 3px;
+			margin-top: 5px;
 
-			.property-title-time-picker-read-only-wrapper {
-				width: 100%;
+			// Reduce the height just a little bit (from 44px) to save some space
+			.checkbox-radio-switch__label {
+				min-height: 32px;
 			}
 		}
 
-		&__all-day {
-			justify-content: flex-start;
-		}
-
 		.datetime-picker-inline-icon {
 			margin-top: 17px;
 			opacity: .3;
@@ -423,7 +426,6 @@
 		&__summary {
 			display: flex;
 			align-items: center;
-			margin-bottom: 5px;
 
 			&__icon {
 				width: 34px;
@@ -434,7 +436,7 @@
 
 			&__content {
 				flex: 1 auto;
-				padding: 0 7px;
+				padding: 8px 7px;
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
@@ -560,7 +562,6 @@
 		display: flex;
 		width: 100%;
 		align-items: flex-start;
-		margin-bottom: 5px;
 
 		&__icon,
 		&__info {
@@ -608,7 +609,6 @@
 				div {
 					width: calc(100% - 8px); /* for typical (thin) scrollbar size */
 					white-space: pre-line;
-					margin: 3px 3px 3px 0;
 					padding: 8px 7px;
 					background-color: var(--color-main-background);
 					color: var(--color-main-text);
@@ -617,26 +617,31 @@
 					word-break: break-word; /* allows breaking on long URLs */
 					max-height: 30vh;
 				}
-
-				a.linkified {
-					text-decoration: underline;
-
-					&::after {
-						content: ' ↗';
-					}
-				}
 			}
 
 			&--readonly-calendar-picker {
-
 				div.calendar-picker-option {
-					margin: 3px 3px 3px 0;
 					padding: 8px 7px;
 				}
 			}
 		}
 	}
 
+	.property-text,
+	.property-select,
+	.property-color,
+	.property-select-multiple,
+	.property-title,
+	.property-repeat,
+	.resource-capacity,
+	.resource-room-type {
+		margin-bottom: 5px;
+
+		&--readonly {
+			margin-bottom: 0;
+		}
+	}
+
 	.property-select,
 	.property-select-multiple {
 		.multiselect {
@@ -645,21 +650,38 @@
 	}
 
 	.property-color {
-
 		&__input {
 			display: flex;
+			gap: 5px;
+			margin-bottom: 5px;
+
+			&--readonly {
+				// Align with other (text based) fields
+				margin: 3px 0 3px 7px;
+			}
 		}
 
 		&__color-preview {
-			border-radius: var(--border-radius);
-			height: 34px !important;
-			width: 34px !important;
-			margin: 0;
+			$size: 44px;
+			width: $size !important;
+			height: $size !important;
+			border-radius: $size;
 		}
 	}
 
 	.property-text {
+		&__icon {
+			align-self: flex-start;
+			padding-top: 4px;
+		}
+
 		&__input {
+			&--readonly {
+				// Reduce line height but still keep first row aligned to the icon
+				line-height: 1;
+				padding-top: calc(var(--default-line-height) / 2 - 0.5lh);
+			}
+
 			textarea {
 				resize: none;
 			}
@@ -692,27 +714,24 @@
 	}
 
 	.property-title {
-		&__input,
-		&__input input {
-			font-size: 20px;
+		input {
+			font-weight: bold;
 		}
 	}
 
-	.resource-room-type {
-		margin-bottom: 5px;
+	// Normalize gaps between all properties. We use outer margins between each row so a padding
+	// around inputs (from core) is not required.
+	.property-title,
+	.property-title-time-picker {
+		input {
+			margin: 0;
+		}
 	}
 
-	.illustration-header {
-		max-height: 150px;
-		height: 150px;
-		width: 100%;
+	.resource-room-type {
+		margin-bottom: 5px;
 	}
 
-	.illustration-header svg {
-		width: 100%;
-		height: 150px;
-		padding: 8px 8px 0 8px;
-	}
 }
 
 .timezone-popover-wrapper {
@@ -739,29 +758,23 @@
 		text-align: left;
 		max-width: 480px;
 		width: 480px;
-		padding: 5px 8px;
+		padding: 5px 10px 10px 10px;
 
 		.empty-content {
 			margin-top: 0 !important;
 			padding: 50px 0;
 		}
 
-		.illustration-header {
-			height: 100px;
-			overflow: hidden;
-			margin-bottom: 5px;
-			background-color: var(--color-background-dark);
-			// There is probably a more elegant solution for this
-			margin: -5px 0 5px -8px;
-			width: 496px;
-			border-top-left-radius: var(--border-radius);
-			border-top-right-radius: var(--border-radius);
-		}
-
 		.property-title-time-picker {
 			margin-bottom: 12px;
 		}
 
+		.event-popover__invitees {
+			.avatar-participation-status__text {
+				bottom: 22px;
+			}
+		}
+
 		.event-popover__buttons {
 			margin-top: 8px;
 		}
@@ -851,5 +864,10 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-top: 20px;
+
+	// Only apply the margin if at least one button is being rendered
+	&:not(:empty) {
+		margin-top: 20px;
+	}
 }
+

css/props-linkify-links.scss

@@ -8,7 +8,6 @@
 	cursor: text;
 	width: 100% !important;
 	box-sizing: border-box;
-	margin-top: 1px !important;
 	padding: 12px;
 	white-space: pre-line;
 	overflow: auto;
@@ -19,7 +18,14 @@
 	max-height: 16em;
 	max-height: calc(100vh - 500px);
 
-	a.linkified::after {
-		content: ' ↗';
+	a.linkified {
+		text-decoration: underline;
+
+		// Prevent misalignment when a linkified line starts with a link, e.g. in the location field
+		margin: 0;
+
+		&::after {
+			content: ' ↗';
+		}
 	}
 }