Feature/2489/subtitle for custom view modal (#3085)

* Add description to Custom Views modal #2489

* Add link to documentation #2489

* Update visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.html

Co-authored-by: Cedrik Bormann <26900540+ce-bo@users.noreply.github.com>

* Update visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.scss

Co-authored-by: Cedrik Bormann <26900540+ce-bo@users.noreply.github.com>

* Add description to add custom config dialog #2489

* Add documentation #2489

* Update visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.scss

Co-authored-by: Maria Hallmann <72517530+Hall-Ma@users.noreply.github.com>

* Change CHANGELOG.md #2489

Co-authored-by: Cedrik Bormann <26900540+ce-bo@users.noreply.github.com>
Co-authored-by: Maria Hallmann <72517530+Hall-Ma@users.noreply.github.com>

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ### Added 🚀
 
+-   Add description and documentation to Custom View modal [#3085](https://github.com/MaibornWolff/codecharta/pull/3085)
 -   Add a new button that links the height metric to the color metric so that the colour metric is automatically set to
     the selected height metric [#3058](https://github.com/MaibornWolff/codecharta/pull/3058)
     , [#3086](https://github.com/MaibornWolff/codecharta/pull/3086) <br/>

gh-pages/_data/navigation.yml

@@ -72,6 +72,8 @@ docs:
             url: /docs/user-controls/
           - title: "Timeline"
             url: /docs/timeline/
+          - title: "Custom View"
+            url: /docs/custom-view/
 
     - title: Reference
       children:

gh-pages/_docs/06-04-custom-view.md

@@ -0,0 +1,10 @@
+---
+permalink: /docs/custom-views/
+title: "Custom View"
+---
+
+Custom Views allow you to save and upload your individual configurations for certain maps. To save new configurations there is a "shortcut-button". In order to be able to access more settings, there is another button next to the "shortcut-button" with the following functions:
+
+-   **Upload Custom Views**: Provides the possibility to upload previously downloaded Custom Views.
+-   **Download Custom View(s)**: If a Custom View has been created, this function offers the possibility to export the created Custom Views based on the assigned maps in order to share the configuration file.
+-   **Add Custom View**: For adding Custom Views. After a Custom View is added, the configurations are saved in the browser. Then, you can reapply it to restore all the settings that are saved in the Custom View.

visualization/app/codeCharta/ui/customConfigs/addCustomConfigButton/addCustomConfigDialog/addCustomConfigDialog.component.html

@@ -5,8 +5,9 @@ <h2>Add Custom View</h2>
 <mat-dialog-content>
 	<div class="dialog-content">
 		<mat-form-field>
-			<label>View Name</label>
+			<label>Save individual configurations for your map.</label>
 			<input matInput class="custom-config-input" [formControl]="customConfigName" required />
+			<mat-hint align="start">View Name</mat-hint>
 			<mat-error *ngIf="customConfigName.invalid">{{ getErrorMessage() }}</mat-error>
 		</mat-form-field>
 	</div>

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.html

@@ -9,12 +9,16 @@ <h3>Custom Views</h3>
 			<cc-add-custom-config-button class="custom-configs-button-in-custom-views"></cc-add-custom-config-button>
 		</div>
 	</div>
+	<div class="description">
+		Custom Views allow you to save and upload your individual configurations for certain maps. 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>
 	<mat-divider></mat-divider>
 	<div
 		class="no-custom-configs-box"
 		*ngIf="dropDownCustomConfigItemGroups.applicableItems.size === 0 && dropDownCustomConfigItemGroups.nonApplicableItems.size === 0"
 	>
-		<span>It is time to add your first Custom View!</span>
+		It is time to add your first Custom View!
 	</div>
 	<mat-accordion class="custom-config-container" [multi]="true">
 		<cc-custom-config-item-group

visualization/app/codeCharta/ui/customConfigs/customConfigList/customConfigList.component.scss

@@ -16,6 +16,10 @@
 		align-items: center;
 	}
 
+	.description {
+		margin: 5px 0;
+	}
+
 	.action-buttons button {
 		margin: 0 3px;
 		min-width: 12%;
@@ -38,7 +42,8 @@
 	}
 
 	.no-custom-configs-box {
-		padding: 16px;
+		text-align: center;
+		padding: 50px 0;
 	}
 
 	cc-custom-config-item-group {
@@ -106,7 +111,7 @@
 	.mat-accordion.custom-config-container {
 		.mat-expansion-panel:first-of-type,
 		.mat-expansion-panel:last-of-type {
-			border-radius: 0px;
+			border-radius: 0;
 		}
 	}