Fix/improve custom views dialog styling (#3248)

* style: fix custom view dialog title * style: fix expansion list item and buttons layout * docs: add changelog entry * Fix direction of custom config description and overlapping of remove button * refactor: remove overwritten max-height ref #3248 * refactor: make prettier happy ref #3248 --------- Co-authored-by: Hall-Ma <maria.hallmann@student.htw-berlin.de> Co-authored-by: shaman-apprentice <torsten.knauf@gmx.de>
MaibornWolff · Mar 17, 2023 · e0e4288 · e0e4288
1 parent 43e2a0c
commit e0e4288
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 -   Improve the layout of the metric chooser panel [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
 -   Change the primary color to match the color of the CodeCharta logo [#3226](https://github.com/MaibornWolff/codecharta/pull/3226)
 -   Improve the docs for suspicious metrics and risk profile feature [#3238](https://github.com/MaibornWolff/codecharta/pull/3238)
+-   Improve Custom Views Dialog [#3238](https://github.com/MaibornWolff/codecharta/pull/3248)
 
 ### Fixed 🐞
 

diff --git a/...List/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.html b/...List/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.html
@@ -7,15 +7,20 @@
 	<p class="config-name" title="{{ customConfigItem.name }}">
 		<b>{{ customConfigItem.name }}</b>
 	</p>
-	<p class="config-metric"><i class="fa fa-arrows-alt"></i> {{ customConfigItem.metrics.areaMetric }}</p>
-	<p class="config-metric"><i class="fa fa-arrows-v"></i> {{ customConfigItem.metrics.heightMetric }}</p>
-	<p class="config-metric"><i class="fa fa-paint-brush"></i> {{ customConfigItem.metrics.colorMetric }}</p>
-	<p class="config-metric" *ngIf="customConfigItem.metrics.edgeMetric">
-		<i class="fa fa-exchange"></i> {{ customConfigItem.metrics.edgeMetric }}
-	</p>
-	<div class="color-schema-container">
-		<div class="color-swatch-container" *ngFor="let mapColor of customConfigItem | customConfigColorSchemaBySelectionMode">
-			<span class="color-swatch" [style.background-color]="customConfigItem.isApplicable ? mapColor : 'rgb(204, 204, 204)'"></span>
+	<div class="config-metric-list">
+		<p class="config-metric"><i class="fa fa-arrows-alt"></i> {{ customConfigItem.metrics.areaMetric }}</p>
+		<p class="config-metric"><i class="fa fa-arrows-v"></i> {{ customConfigItem.metrics.heightMetric }}</p>
+		<p class="config-metric"><i class="fa fa-paint-brush"></i> {{ customConfigItem.metrics.colorMetric }}</p>
+		<p class="config-metric" *ngIf="customConfigItem.metrics.edgeMetric">
+			<i class="fa fa-exchange"></i> {{ customConfigItem.metrics.edgeMetric }}
+		</p>
+		<div class="color-schema-container">
+			<div class="color-swatch-container" *ngFor="let mapColor of customConfigItem | customConfigColorSchemaBySelectionMode">
+				<span
+					class="color-swatch"
+					[style.background-color]="customConfigItem.isApplicable ? mapColor : 'rgb(204, 204, 204)'"
+				></span>
+			</div>
 		</div>
 	</div>
 </button>
diff --git a/...List/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.scss b/...List/customConfigItemGroup/customConfigDescription/applyCustomConfigButton.component.scss
@@ -4,16 +4,18 @@ cc-apply-custom-config-button {
 
 	button {
 		flex-direction: row;
-		flex-wrap: wrap;
-		align-items: center;
-		display: flex;
-		flex: 1;
-		gap: 10px;
+		width: 100%;
 
 		&:disabled {
 			cursor: default;
 		}
 
+		.config-metric-list {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 10px;
+		}
+
 		p {
 			white-space: nowrap;
 			text-overflow: ellipsis;
@@ -23,11 +25,12 @@ cc-apply-custom-config-button {
 			text-align: left;
 
 			&.config-name {
-				flex: 0 0 22em;
+				flex: 1 1 auto;
+				width: 100%;
 			}
 
 			&.config-metric {
-				flex: 0 0 8em;
+				flex: 0 0 9em;
 			}
 		}
 

diff --git a/...customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.html b/...customConfigs/customConfigList/customConfigItemGroup/customConfigItemGroup.component.html
@@ -15,11 +15,9 @@
 	<mat-list *ngFor="let customConfig of customConfigItemGroup.value.customConfigItems">
 		<mat-list-item title="{{ customConfig | customConfig2ApplicableMessage }}">
 			<cc-apply-custom-config-button [customConfigItem]="customConfig"></cc-apply-custom-config-button>
-			<div>
-				<button class="remove-button" title="Remove Custom View" (click)="removeCustomConfig(customConfig.id)">
-					<i class="fa fa-trash"></i>
-				</button>
-			</div>
+			<button class="remove-button" title="Remove Custom View" (click)="removeCustomConfig(customConfig.id)">
+				<i class="fa fa-trash"></i>
+			</button>
 		</mat-list-item>
 	</mat-list>
 </mat-expansion-panel>
diff --git a/...lization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.html b/...lization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.html
@@ -1,18 +1,19 @@
-<mat-dialog-content class="content" *ngIf="customConfigService.customConfigItemGroups$ | async; let dropDownCustomConfigItemGroups">
+<mat-toolbar color="primary"
+	>Custom Views
 	<div class="row">
-		<div class="title">
-			<h3>Custom Views</h3>
-		</div>
 		<div class="action-buttons">
 			<cc-upload-custom-config-button></cc-upload-custom-config-button>
 			<cc-download-custom-configs-button></cc-download-custom-configs-button>
 			<cc-add-custom-config-button class="custom-configs-button-in-custom-views"></cc-add-custom-config-button>
-		</div>
-	</div>
-	<div class="custom-config-documentation-hint">
-		Custom Views allow you to save and upload your individual configurations for certain maps. Find out more about Custom Views in the
+		</div></div
+></mat-toolbar>
+
+<mat-dialog-content class="content" *ngIf="customConfigService.customConfigItemGroups$ | async; let dropDownCustomConfigItemGroups">
+	<p class="custom-config-documentation-hint">
+		Custom Views allow you to save and upload your individual configurations for certain maps. <br />
+		Find out more about Custom Views in the
 		<a href="https://maibornwolff.github.io/codecharta/docs/custom-view/" target="_blank" rel="noopener noreferrer">documentation</a>.
-	</div>
+	</p>
 	<mat-divider></mat-divider>
 	<div
 		class="no-custom-configs-box"

diff --git a/...lization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.scss b/...lization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.scss
@@ -1,33 +1,34 @@
 @use "../../../../material/theme";
 
-.cc-custom-config-list .mat-mdc-dialog-container {
-	padding: 5px 16px;
-	max-height: 90vh;
-
-	.mat-mdc-dialog-content.content {
-		max-height: 100%;
-		margin: 0;
-		padding: 0;
+.cc-custom-config-list {
+	.mat-mdc-dialog-content {
+		padding: 16px;
+		max-height: 90vh;
 	}
 
 	.row {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		margin-left: auto;
 	}
 
 	.custom-config-documentation-hint {
 		margin: 10px 0 20px 0;
+		font-size: 1.4em;
+		line-height: 1.4em;
+		color: black;
 	}
 
 	.action-buttons button {
 		margin: 0 3px;
 		min-width: 12%;
 		height: 48px;
-		width: 65px;
+		width: 48px;
+		border-radius: 100%;
 		line-height: 48px;
-		background-color: theme.$cc-primary-color;
-		color: #ffffff;
+		background-color: #ffffff;
+		color: theme.$cc-primary-color;
 
 		&:disabled,
 		&[disabled] {
@@ -75,11 +76,16 @@
 		}
 
 		.mdc-list-item__content {
-			display: flex;
-			justify-content: space-between;
+			width: 100%;
 			border-bottom: 1px solid #000000;
 			padding: 0 5px;
 
+			.mdc-list-item__primary-text {
+				display: flex;
+				width: inherit;
+				align-items: center;
+			}
+
 			&:hover {
 				background-color: rgba(0, 0, 0, 0.04);
 			}
@@ -90,7 +96,6 @@
 				&.remove-button {
 					font-size: 16px;
 					padding: 8px 10px;
-					margin: 0;
 
 					&:hover {
 						background-color: rgba(0, 0, 0, 0.05);