Removes unused whitespaces in the searchbar,

Removes the usage of ids as selectors, Adds semi responsiveness for the metric cards #1037
MaibornWolff · Mar 31, 2021 · dac63df · dac63df
1 parent 5087c47
commit dac63df
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 25 deletions.
diff --git a/visualization/app/codeCharta/codeCharta.component.scss b/visualization/app/codeCharta/codeCharta.component.scss
@@ -43,11 +43,11 @@ code-charta-component {
 	}
 
 	.ribbon-bar-wrapper {
-		height: 500px;
 		position: fixed;
 		z-index: 10;
 		white-space: nowrap;
 		pointer-events: none;
+    width: 100%;
 	}
 
 	attribute-side-bar-component .side-bar-container,

diff --git a/visualization/app/codeCharta/ui/filePanel/filePanel.component.scss b/visualization/app/codeCharta/ui/filePanel/filePanel.component.scss
@@ -13,7 +13,6 @@ file-panel-component {
 		display: inline-flex;
 		vertical-align: middle;
 		margin-left: 10px;
-		margin-right: 10px;
 	}
 
 	.state-selector-button {

diff --git a/visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.html b/visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.html
@@ -1,6 +1,6 @@
 <search-panel-component></search-panel-component>
 
-<md-card ng-attr-id="scenario-card" ng-mouseup="$ctrl.onClick()">
+<md-card class="scenario-card" ng-attr-id="scenario-card" ng-mouseup="$ctrl.onClick()">
 	<div class="section">
 		<div class="section-header">
 			<scenario-drop-down-component></scenario-drop-down-component>
@@ -9,7 +9,7 @@
 	</div>
 </md-card>
 
-<md-card ng-show="$ctrl._viewModel.experimentalFeaturesEnabled" ng-attr-id="custom-configs-card">
+<md-card class="custom-configs-card" ng-show="$ctrl._viewModel.experimentalFeaturesEnabled" ng-attr-id="custom-configs-card">
 	<div class="section">
 		<div class="section-header">
 			<custom-configs-component></custom-configs-component>
@@ -29,7 +29,11 @@
 
 <md-card
 	ng-attr-id="area-metric-card"
-	ng-class="{ expanded: $ctrl._viewModel.panelSelection === $ctrl._viewModel.panelSelectionValues.AREA_PANEL_OPEN }"
+  class="area-metric-card"
+	ng-class="{
+	  expanded: $ctrl._viewModel.panelSelection === $ctrl._viewModel.panelSelectionValues.AREA_PANEL_OPEN,
+	  minimized: $ctrl._viewModel.panelSelection !== $ctrl._viewModel.panelSelectionValues.NONE
+  }"
 >
 	<div class="section">
 		<div class="section-header">
@@ -49,7 +53,11 @@
 
 <md-card
 	ng-attr-id="height-metric-card"
-	ng-class="{ expanded: $ctrl._viewModel.panelSelection === $ctrl._viewModel.panelSelectionValues.HEIGHT_PANEL_OPEN }"
+  class="height-metric-card"
+	ng-class="{
+	  expanded: $ctrl._viewModel.panelSelection === $ctrl._viewModel.panelSelectionValues.HEIGHT_PANEL_OPEN,
+	  minimized: $ctrl._viewModel.panelSelection !== $ctrl._viewModel.panelSelectionValues.NONE
+  }"
 >
 	<div class="section">
 		<div class="section-header">
@@ -69,7 +77,11 @@
 
 <md-card
 	ng-attr-id="color-metric-card"
-	ng-class="{ expanded: $ctrl._viewModel.panelSelection === $ctrl._viewModel.panelSelectionValues.COLOR_PANEL_OPEN }"
+  class="color-metric-card"
+	ng-class="{
+	  expanded: $ctrl._viewModel.panelSelection === $ctrl._viewModel.panelSelectionValues.COLOR_PANEL_OPEN,
+	  minimized: $ctrl._viewModel.panelSelection !== $ctrl._viewModel.panelSelectionValues.NONE
+  }"
 >
 	<div class="section">
 		<div class="section-header">
@@ -89,7 +101,11 @@
 
 <md-card
 	ng-attr-id="edge-metric-card"
-	ng-class="{ expanded: $ctrl._viewModel.panelSelection === $ctrl._viewModel.panelSelectionValues.EDGE_PANEL_OPEN }"
+  class="edge-metric-card"
+	ng-class="{
+	  expanded: $ctrl._viewModel.panelSelection === $ctrl._viewModel.panelSelectionValues.EDGE_PANEL_OPEN,
+	  minimized: $ctrl._viewModel.panelSelection !== $ctrl._viewModel.panelSelectionValues.NONE
+  }"
 >
 	<div class="section">
 		<div class="section-header">
@@ -108,8 +124,8 @@
 	</div>
 </md-card>
 
-<md-card ng-mouseup="$ctrl.onClick()">
+<!---<md-card ng-mouseup="$ctrl.onClick()">
 	<div class="section">
 		<div class="section-header space"></div>
 	</div>
-</md-card>
+</md-card>--->
diff --git a/visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.scss b/visualization/app/codeCharta/ui/ribbonBar/ribbonBar.component.scss
@@ -28,19 +28,14 @@ ribbon-bar-component {
 		float: left;
 		position: relative;
 		overflow: hidden;
+    flex: 1 1 0;
+    min-width: 92px;
+    transition: 200ms width ease-in-out;
 
 		&.expanded {
 			overflow: visible;
 		}
 
-		&.search {
-			width: 380px;
-		}
-
-		&:not(#scenario-card):not(#custom-configs-card):not(#ai-card) {
-			min-width: 240px;
-		}
-
 		.section {
 			display: inline-block;
 			height: 100%;
@@ -160,19 +155,40 @@ ribbon-bar-component {
 		margin: 0;
 	}
 
-	#height-metric-card.expanded {
+  md-card.custom-configs-card {
+    max-width: 90px;
+    min-width: 90px;
+  }
+
+  md-card.scenario-card {
+    max-width: 56px;
+    min-width: 56px;
+  }
+
+  .height-metric-card.expanded,
+  .area-metric-card.expanded,
+  .color-metric-card.expanded,
+  .edge-metric-card.expanded {
+    flex: 1 1 300px;
+  }
+
+  md-card.minimized {
+    min-width: 24px;
+  }
+
+	.height-metric-card.expanded {
 		height: 295px;
 	}
 
-	#area-metric-card.expanded {
+	.area-metric-card.expanded {
 		height: 155px;
 	}
 
-	#color-metric-card.expanded {
+	.color-metric-card.expanded {
 		height: 250px;
 	}
 
-	#edge-metric-card.expanded {
+	.edge-metric-card.expanded {
 		height: 250px;
 	}
 

diff --git a/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss b/visualization/app/codeCharta/ui/searchPanel/searchPanel.component.scss
@@ -1,7 +1,4 @@
 search-panel-component {
-	.section {
-		width: 380px !important;
-	}
 
 	search-panel-mode-selector-component {
 		display: inline-block;