Add text to reset buttons #1613

MaibornWolff · Jun 11, 2021 · f8f7369 · f8f7369
1 parent 58050cc
commit f8f7369
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 25 deletions.
diff --git a/visualization/app/codeCharta/ui/colorSettingsPanel/colorSettingsPanel.component.html b/visualization/app/codeCharta/ui/colorSettingsPanel/colorSettingsPanel.component.html
@@ -1,6 +1,12 @@
 <range-slider-component></range-slider-component>
 
-<hr />
+<reset-settings-button-component
+	settings-names="dynamicSettings.colorRange, appSettings.mapColors.positiveDelta, appSettings.mapColors.negativeDelta"
+	tooltip=" Reset slider threesholds to default"
+	text="Reset threesholds"
+></reset-settings-button-component>
+
+<md-divider></md-divider>
 
 <div class="wrapper">
 	<div class="spacer" ng-if="!$ctrl._viewModel.isDeltaState">
@@ -35,9 +41,10 @@
 			Invert Colors
 		</md-checkbox>
 	</md-input-container>
-
-	<reset-settings-button-component
-		settings-names="appSettings.mapColors.positive, appSettings.mapColors.negative, appSettings.mapColors.neutral, appSettings.mapColors.selected, appSettings.invertDeltaColors, appSettings.invertColorRange"
-		tooltip=" Reset color values to default"
-	></reset-settings-button-component>
 </div>
+
+<reset-settings-button-component
+	settings-names="appSettings.mapColors.positive, appSettings.mapColors.negative, appSettings.mapColors.neutral, appSettings.mapColors.selected, appSettings.invertDeltaColors, appSettings.invertColorRange"
+	tooltip=" Reset color values to default"
+	text="Reset colors"
+></reset-settings-button-component>
diff --git a/visualization/app/codeCharta/ui/colorSettingsPanel/colorSettingsPanel.component.scss b/visualization/app/codeCharta/ui/colorSettingsPanel/colorSettingsPanel.component.scss
@@ -21,14 +21,6 @@ color-settings-panel-component {
 		margin-bottom: -10px;
 	}
 
-	hr {
-		border: none;
-		border-top: 1px dashed #979797;
-		color: #fff;
-		height: 1px;
-		width: 100%;
-	}
-
 	.wrapper {
 		margin-left: 3px;
 	}
@@ -53,3 +45,7 @@ color-settings-panel-component.hidden {
 	opacity: 0;
 	transition: max-height 200ms ease-in-out, opacity 0ms 200ms;
 }
+
+reset-settings-button-component {
+	margin-top: -15px;
+}
diff --git a/visualization/app/codeCharta/ui/rangeSlider/rangeSlider.component.html b/visualization/app/codeCharta/ui/rangeSlider/rangeSlider.component.html
@@ -30,8 +30,3 @@
 		ng-model-options="{debounce: 1000}"
 	/>
 </md-input-container>
-
-<reset-settings-button-component
-	settings-names="dynamicSettings.colorRange, appSettings.mapColors.positiveDelta, appSettings.mapColors.negativeDelta"
-	tooltip=" Reset slider threesholds to default"
-></reset-settings-button-component>
diff --git a/visualization/app/codeCharta/ui/rangeSlider/rangeSlider.component.ts b/visualization/app/codeCharta/ui/rangeSlider/rangeSlider.component.ts
@@ -37,7 +37,7 @@ export class RangeSliderController
 	private DIGIT_WIDTH = 11
 	private MIN_DIGITS = 4
 	private MAX_DIGITS = 6
-	private FULL_WIDTH_SLIDER = 197
+	private FULL_WIDTH_SLIDER = 235
 
 	private _viewModel: {
 		colorRangeFrom: number

diff --git a/visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.html b/visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.html
@@ -1,3 +1,4 @@
-<md-button class="md-primary" ng-click="$ctrl.applyDefaultSettings()" ng-attr-title="{{ $ctrl.tooltip }}"
-	><i class="fa fa-undo"></i
-></md-button>
+<md-button class="md-primary" ng-click="$ctrl.applyDefaultSettings()" ng-attr-title="{{ $ctrl.tooltip }}">
+	<i class="fa fa-undo"></i>
+	<label class="md-button-label" ng-if="$ctrl.text">{{ $ctrl.text }}</label>
+</md-button>
diff --git a/visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.scss b/visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.scss
@@ -2,8 +2,12 @@ reset-settings-button-component {
 	display: inline-block;
 	height: 48px;
 	.md-button {
-		border-radius: 50%;
+		border-radius: 3%;
 		margin-left: 0;
 		min-width: 36px;
 	}
+
+	.md-button-label {
+		text-transform: none;
+	}
 }
diff --git a/visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.ts b/visualization/app/codeCharta/ui/resetSettingsButton/resetSettingsButton.component.ts
@@ -50,6 +50,7 @@ export const resetSettingsButtonComponent = {
 	controller: ResetSettingsButtonController,
 	bindings: {
 		settingsNames: "@",
-		tooltip: "@"
+		tooltip: "@",
+		text: "@"
 	}
 }