Use icon tag instead of font awesome icon (#2537)

* WIP: Use icon tag instead of font awesome icon #2508 * WIP: Use icon tag instead of font awesome icon #2508 * WIP: move search bar 1px to right #2508 * resolve change requests #2508 * Fix focus searchbar #2508 * Fix metric chooser test #2508 * Add Entry to Changelog #2508 * remove unnecessary div tag, fix edge chooser test #2508 * add search-bar class name to area metric chooser #2508
MaibornWolff · Dec 7, 2021 · 0d8509f · 0d8509f
1 parent de739c7
commit 0d8509f
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 ### Fixed 🐞
 
 -   Fix delta values of secondary metrics not shown in delta mode within attribute side bar [#2539](https://github.com/MaibornWolff/codecharta/issues/2539).
+-   Use icon tag instead of font awesome icon [#2537](https://github.com/MaibornWolff/codecharta/pull/2537).
 
 ### Chore 👨‍💻 👩‍💻
 

diff --git a/visualization/app/codeCharta/ui/edgeChooser/edgeChooser.component.html b/visualization/app/codeCharta/ui/edgeChooser/edgeChooser.component.html
@@ -13,13 +13,14 @@
 		md-container-class="ribbonBarDropdown"
 		ng-disabled="$ctrl.noEdgesAvailable()"
 	>
-		<md-select-header>
+		<md-select-header class="search-bar">
+			<i class="fa fa-search search-icon"></i>
 			<input
 				id="edge-metric-selector"
 				class="metric-search"
 				ng-model="$ctrl._viewModel.searchTerm"
 				type="text"
-				placeholder="&#xF002; Metric (highest value)"
+				placeholder="Metric (highest value)"
 				ng-keydown="$event.stopPropagation()"
 				ng-change="$ctrl.filterMetricData()"
 			/>

diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.area.component.html b/visualization/app/codeCharta/ui/metricChooser/metricChooser.area.component.html
@@ -9,13 +9,14 @@
 		md-on-open="$ctrl.focusInputField('area-metric')"
 		md-container-class="ribbonBarDropdown"
 	>
-		<md-select-header>
+		<md-select-header class="search-bar">
+			<i class="fa fa-search search-icon"></i>
 			<input
 				id="area-metric-selector"
 				class="metric-search area-metric"
 				ng-model="$ctrl._viewModel.searchTerm"
 				type="text"
-				placeholder="&#xF002; Metric (highest value)"
+				placeholder="Metric (highest value)"
 				ng-keydown="$event.stopPropagation()"
 				ng-change="$ctrl.filterMetricData()"
 			/>

diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.color.component.html b/visualization/app/codeCharta/ui/metricChooser/metricChooser.color.component.html
@@ -9,13 +9,14 @@
 		md-on-open="$ctrl.focusInputField('color-metric')"
 		md-container-class="ribbonBarDropdown"
 	>
-		<md-select-header>
+		<md-select-header class="search-bar">
+			<i class="fa fa-search search-icon"></i>
 			<input
 				id="color-metric-selector"
 				class="metric-search color-metric"
 				ng-model="$ctrl._viewModel.searchTerm"
 				type="text"
-				placeholder="&#xF002; Metric (highest value)"
+				placeholder="Metric (highest value)"
 				ng-keydown="$event.stopPropagation()"
 				ng-change="$ctrl.filterMetricData()"
 			/>

diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss
@@ -79,26 +79,45 @@ edge-chooser-component {
 		display: initial;
 	}
 
+	.search-bar {
+		i,
+		input {
+			background-color: #f5f5f5;
+			padding: 10px;
+			border: none;
+			border-bottom: solid 2px;
+			border-color: rgba(0, 0, 0, 0.12);
+		}
+	}
+
+	.search-bar:focus-within {
+		i,
+		input {
+			border-color: rgb(0, 150, 136);
+			color: rgb(0, 150, 136);
+		}
+	}
+
+	.search-icon {
+		position: absolute;
+		left: 0;
+		width: 12%;
+		height: $optionHeight - 8 + px;
+		top: 8px;
+		box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+	}
+
 	.metric-search {
 		display: block;
 		position: fixed;
 		top: 8px;
-		width: 100%;
-		padding: 10px;
+		left: 12%;
+		width: 88%;
 		height: $optionHeight - 8 + px;
 		outline: none;
-		border: none;
-		border-bottom: solid 2px;
-		border-color: rgba(0, 0, 0, 0.12);
-		background-color: #f5f5f5;
 		font-family: Arial, FontAwesome, sans-serif;
 		font-size: 11pt;
-		box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;
-
-		&:focus {
-			border-color: rgb(0, 150, 136);
-			color: rgb(0, 150, 136);
-		}
+		box-shadow: 5px 1px 5px 0 rgba(0, 0, 0, 0.2);
 	}
 
 	md-content.option-group {

diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.distribution.component.html b/visualization/app/codeCharta/ui/metricChooser/metricChooser.distribution.component.html
@@ -9,13 +9,14 @@
 		md-on-open="$ctrl.focusInputField('distribution-metric')"
 		md-container-class="distributionBarDropdown"
 	>
-		<md-select-header>
+		<md-select-header class="search-bar">
+			<i class="fa fa-search search-icon"></i>
 			<input
 				id="distribution-metric-selector"
 				class="metric-search distribution-metric"
 				ng-model="$ctrl._viewModel.searchTerm"
 				type="text"
-				placeholder="&#xF002; Metric (highest value)"
+				placeholder="Metric (highest value)"
 				ng-keydown="$event.stopPropagation()"
 				ng-change="$ctrl.filterMetricData()"
 			/>

diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.height.component.html b/visualization/app/codeCharta/ui/metricChooser/metricChooser.height.component.html
@@ -9,13 +9,14 @@
 		md-on-open="$ctrl.focusInputField('height-metric')"
 		md-container-class="ribbonBarDropdown"
 	>
-		<md-select-header>
+		<md-select-header class="search-bar">
+			<i class="fa fa-search search-icon"></i>
 			<input
 				id="height-metric-selector"
 				class="metric-search height-metric"
 				ng-model="$ctrl._viewModel.searchTerm"
 				type="text"
-				placeholder="&#xF002; Metric (highest value)"
+				placeholder="Metric (highest value)"
 				ng-keydown="$event.stopPropagation()"
 				ng-change="$ctrl.filterMetricData()"
 			/>