-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes alignments of panel component elements
Styles panel components individually Makes panel components independent of the parent component Removes the resizing of opened panel Removes the shrinking of other panels when a different panel is opened #1952
- Loading branch information
ChristianE
committed
May 4, 2021
1 parent
38cf21b
commit 40792b9
Showing
13 changed files
with
260 additions
and
191 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
visualization/app/codeCharta/ui/areaSettingsPanel/areaSettingsPanel.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,32 @@ | ||
| area-settings-panel-component { | ||
| background: #ffffff; | ||
| border: 1px solid #b5b5b5; | ||
| border-top: none; | ||
| box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); | ||
| padding: 6px; | ||
| position: relative; | ||
| overflow: visible; | ||
| font-size: 0.9em; | ||
| text-align: left; | ||
| width: 240px; | ||
|
|
||
| md-slider-container { | ||
| position: relative; | ||
| .slider-title { | ||
| position: absolute; | ||
| top: 0; | ||
| font-size: 0.8em; | ||
| color: grey; | ||
| left: 4px; | ||
| } | ||
| .margin-input { | ||
| height: 24px; | ||
| } | ||
| } | ||
|
|
||
| .defaults { | ||
| align-items: center; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| } |
64 changes: 34 additions & 30 deletions
64
visualization/app/codeCharta/ui/colorSettingsPanel/colorSettingsPanel.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,41 @@ | ||
| <range-slider-component></range-slider-component> | ||
|
|
||
| <div ng-if="!$ctrl._viewModel.isDeltaState"> | ||
| <cc-store-color-picker map-color-for="positive" label="0 to < {{ $ctrl._viewModel.colorRange.from | number: 0 }}"> | ||
| </cc-store-color-picker> | ||
| <cc-store-color-picker | ||
| map-color-for="neutral" | ||
| label="≥ {{ $ctrl._viewModel.colorRange.from | number: 0 }} to ≤ {{ $ctrl._viewModel.colorRange.to | number: 0 }}" | ||
| > | ||
| </cc-store-color-picker> | ||
| <cc-store-color-picker map-color-for="negative" label="> {{ $ctrl._viewModel.colorRange.to | number: 0 }} to Infinite"> | ||
| </cc-store-color-picker> | ||
| </div> | ||
| <div class="wrapper"> | ||
| <div class="spacer" ng-if="!$ctrl._viewModel.isDeltaState"> | ||
| <cc-store-color-picker map-color-for="positive" label="0 to < {{ $ctrl._viewModel.colorRange.from | number: 0 }}"> | ||
| </cc-store-color-picker> | ||
| <cc-store-color-picker | ||
| map-color-for="neutral" | ||
| label="≥ {{ $ctrl._viewModel.colorRange.from | number: 0 }} to ≤ {{ $ctrl._viewModel.colorRange.to | number: 0 }}" | ||
| > | ||
| </cc-store-color-picker> | ||
| <cc-store-color-picker map-color-for="negative" label="> {{ $ctrl._viewModel.colorRange.to | number: 0 }} to Infinite"> | ||
| </cc-store-color-picker> | ||
| </div> | ||
|
|
||
| <div ng-if="$ctrl._viewModel.isDeltaState"> | ||
| <cc-store-color-picker map-color-for="positiveDelta" label="+Δ"> </cc-store-color-picker> | ||
| <cc-store-color-picker map-color-for="negativeDelta" label="-Δ"> </cc-store-color-picker> | ||
| </div> | ||
| <div class="spacer" ng-if="$ctrl._viewModel.isDeltaState"> | ||
| <cc-store-color-picker map-color-for="positiveDelta" label="+Δ"> </cc-store-color-picker> | ||
| <cc-store-color-picker map-color-for="negativeDelta" label="-Δ"> </cc-store-color-picker> | ||
| </div> | ||
|
|
||
| <cc-store-color-picker map-color-for="selected" label="selected"> </cc-store-color-picker> | ||
| <cc-store-color-picker map-color-for="selected" label="selected"> </cc-store-color-picker> | ||
| </div> | ||
|
|
||
| <md-input-container ng-if="!$ctrl._viewModel.isDeltaState"> | ||
| <md-checkbox class="md-primary" ng-model="$ctrl._viewModel.invertColorRange" ng-change="$ctrl.invertColorRange()" | ||
| >Invert Colors | ||
| </md-checkbox> | ||
| </md-input-container> | ||
| <div class="bottom-row"> | ||
| <md-input-container ng-if="!$ctrl._viewModel.isDeltaState"> | ||
| <md-checkbox class="md-primary" ng-model="$ctrl._viewModel.invertColorRange" ng-change="$ctrl.invertColorRange()" | ||
| >Invert Colors | ||
| </md-checkbox> | ||
| </md-input-container> | ||
|
|
||
| <md-input-container ng-if="$ctrl._viewModel.isDeltaState"> | ||
| <md-checkbox class="md-primary" ng-model="$ctrl._viewModel.invertDeltaColors" ng-change="$ctrl.invertDeltaColors()"> | ||
| Invert Colors | ||
| </md-checkbox> | ||
| </md-input-container> | ||
| <md-input-container ng-if="$ctrl._viewModel.isDeltaState"> | ||
| <md-checkbox class="md-primary" ng-model="$ctrl._viewModel.invertDeltaColors" ng-change="$ctrl.invertDeltaColors()"> | ||
| Invert Colors | ||
| </md-checkbox> | ||
| </md-input-container> | ||
|
|
||
| <reset-settings-button-component | ||
| settings-names="dynamicSettings.colorRange, appSettings.invertColorRange, appSettings.invertDeltaColors, appSettings.mapColors.positiveDelta, appSettings.mapColors.negativeDelta, appSettings.mapColors.positive, appSettings.mapColors.negative, appSettings.mapColors.neutral, appSettings.mapColors.selected" | ||
| tooltip="Reset color metric settings to their defaults" | ||
| ></reset-settings-button-component> | ||
| <reset-settings-button-component | ||
| settings-names="dynamicSettings.colorRange, appSettings.invertColorRange, appSettings.invertDeltaColors, appSettings.mapColors.positiveDelta, appSettings.mapColors.negativeDelta, appSettings.mapColors.positive, appSettings.mapColors.negative, appSettings.mapColors.neutral, appSettings.mapColors.selected" | ||
| tooltip="Reset color metric settings to their defaults" | ||
| ></reset-settings-button-component> | ||
| </div> |
30 changes: 23 additions & 7 deletions
30
visualization/app/codeCharta/ui/colorSettingsPanel/colorSettingsPanel.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,30 @@ | ||
| color-settings-panel-component { | ||
| md-card .section .section-body md-checkbox { | ||
| font-size: 0.9em; | ||
| background: #ffffff; | ||
| border: 1px solid #b5b5b5; | ||
| border-top: none; | ||
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); | ||
| padding: 6px; | ||
| position: relative; | ||
| overflow: visible; | ||
| font-size: 0.9em; | ||
| text-align: left; | ||
| width: 262px; | ||
|
|
||
| .wrapper { | ||
| margin-left: 3px; | ||
| } | ||
|
|
||
| .spacer .cc-store-color-picker-wrapper { | ||
| margin-bottom: 12px; | ||
| } | ||
|
|
||
| md-checkbox .md-label { | ||
| margin-left: 25px; | ||
| margin-top: 7px; | ||
| cc-store-color-picker p.cc-store-color-picker-label { | ||
| margin-left: 12px; | ||
| } | ||
|
|
||
| md-checkbox .md-container { | ||
| transform: translateY(-80%); | ||
| .bottom-row { | ||
| align-items: center; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
visualization/app/codeCharta/ui/edgeSettingsPanel/edgeSettingsPanel.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,45 @@ | ||
| edge-settings-panel-component { | ||
| background: #ffffff; | ||
| border: 1px solid #b5b5b5; | ||
| border-top: none; | ||
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12); | ||
| display: block; | ||
| padding: 6px; | ||
| position: relative; | ||
| overflow: visible; | ||
| font-size: 0.9em; | ||
| text-align: left; | ||
| width: 262px; | ||
|
|
||
| md-slider-container { | ||
| position: relative; | ||
| .slider-title { | ||
| position: absolute; | ||
| top: 0; | ||
| font-size: 0.8em; | ||
| color: grey; | ||
| left: 4px; | ||
| } | ||
| .margin-input { | ||
| height: 24px; | ||
| } | ||
| } | ||
|
|
||
| .wrapper { | ||
| margin-left: 3px; | ||
| } | ||
|
|
||
| .wrapper cc-store-color-picker:not(:last-child) .cc-store-color-picker-wrapper { | ||
| margin-bottom: 12px; | ||
| } | ||
|
|
||
| cc-store-color-picker p.cc-store-color-picker-label { | ||
| margin-left: 12px; | ||
| } | ||
|
|
||
| .bottom-row { | ||
| align-items: center; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
visualization/app/codeCharta/ui/heightSettingsPanel/heightSettingsPanel.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,32 @@ | ||
| height-settings-panel-component { | ||
| background: #ffffff; | ||
| border: 1px solid #b5b5b5; | ||
| border-top: none; | ||
| box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); | ||
| padding: 6px; | ||
| position: relative; | ||
| overflow: visible; | ||
| font-size: 0.9em; | ||
| text-align: left; | ||
| width: 240px; | ||
|
|
||
| md-slider-container { | ||
| position: relative; | ||
| .slider-title { | ||
| position: absolute; | ||
| top: 0; | ||
| font-size: 0.8em; | ||
| color: grey; | ||
| left: 4px; | ||
| } | ||
| .margin-input { | ||
| height: 24px; | ||
| } | ||
| } | ||
|
|
||
| .bottom-row { | ||
| align-items: center; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.