diff --git a/CHANGELOG.md b/CHANGELOG.md index 48eebf7d48..7ba6bf1cf8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/) ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻) +### Fixed 🐞 + +- Fix UI components that look different since version 1.115.0 [#3260](https://github.com/MaibornWolff/codecharta/pull/3260) + ## [1.115.0] - 2023-03-30 ### Added 🚀 diff --git a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.html b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.html index 2ab020a243..6c34103f34 100644 --- a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.html +++ b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.html @@ -3,8 +3,6 @@ [node]="selectedNode$ | async" [fileName]="fileName$ | async" > - - diff --git a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.scss b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.scss index f37c1a1529..a241954e3c 100644 --- a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.scss +++ b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.scss @@ -46,6 +46,10 @@ cc-attribute-side-bar { } table { + th { + text-align: left; + } + &.primary-metrics { table-layout: fixed; width: 100%; @@ -63,54 +67,71 @@ cc-attribute-side-bar { } } + .primary-metric-box { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + } + + .metric-name { + margin-top: 5px; + } + + .primary-metric-value { + margin-right: -5px; + } + i.fa { font-size: 12pt; min-width: 17px; text-align: center; } - - .metric-name { - margin: 5px 0 0 0; - } } - th { - text-align: left; - } + &.secondary-metrics { + td { + padding-left: 5px; - td { - text-align: left; - vertical-align: initial; - margin: 0; - } + &:first-child { + padding-left: 4px; + } + } + + .secondary-metric-box { + border-radius: 3px; + padding: 4px 4px; + vertical-align: middle; + background: #d5d5d5; + } - .metric-summary, - .metric-delta { - border-radius: 3px; - padding: 4px 4px; + .secondary-metric-row { + flex-wrap: nowrap; + } } - .metric-summary { - align-content: flex-end; - background: #d5d5d5; + .primary-metric-row, + .secondary-metric-row { display: flex; - flex-direction: row; - gap: 4px; - justify-content: space-between; - text-align: right; - vertical-align: center; + align-items: center; + flex-wrap: wrap; + gap: 5px; } .metric-name { color: grey; word-break: break-word; + vertical-align: middle; } - .metric-value { - display: inline-block; - margin-left: 4px; + .delta-value-box { + vertical-align: middle; } } + + cc-metric-delta-selected:has(span) { + margin-top: 5px; + } } } } diff --git a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.spec.ts b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.spec.ts index def3c6e66c..a331c28b12 100644 --- a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.spec.ts +++ b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBar.component.spec.ts @@ -71,7 +71,7 @@ describe("AttributeSideBarComponent", () => { expect(pathName).toMatch("/root/big leaf") const firstPrimaryMetricEntry = container.querySelector("cc-attribute-side-bar-primary-metric").textContent - const expectedPrimaryMetricTextContent = "20 a" + const expectedPrimaryMetricTextContent = "20a" expect(firstPrimaryMetricEntry).toMatch(expectedPrimaryMetricTextContent) const expectedSecondaryMetricTextContent = "15b" @@ -79,7 +79,7 @@ describe("AttributeSideBarComponent", () => { .querySelector("cc-attribute-side-bar-primary-metric") .textContent.includes(expectedSecondaryMetricTextContent) expect(isSecondaryMetricInPrimaryMetricSection).toBe(false) - const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics .metric-row").textContent + const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics").textContent expect(firstSecondaryMetricEntry).toMatch(expectedSecondaryMetricTextContent) expect(isAttributeTypeSelectorShown(container)).toBe(false) @@ -88,13 +88,12 @@ describe("AttributeSideBarComponent", () => { it("should display deltas if node has delta values", async () => { mockedSelectedNodeSelector.mockImplementation(() => klona(TEST_NODE_LEAF)) const { container } = await render(AttributeSideBarComponent, { excludeComponentDeclaration: true }) - const firstPrimaryMetricEntry = container.querySelector("cc-attribute-side-bar-primary-metric").textContent const expectedPrimaryMetricTextContent = /20\s+Δ1.0\s+a/ expect(firstPrimaryMetricEntry).toMatch(expectedPrimaryMetricTextContent) const expectedSecondaryMetricTextContent = /15\s+Δ2.0\s+b/ - const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics .metric-row").textContent + const firstSecondaryMetricEntry = container.querySelector("cc-attribute-side-bar-secondary-metrics").textContent expect(firstSecondaryMetricEntry).toMatch(expectedSecondaryMetricTextContent) }) @@ -148,19 +147,15 @@ describe("AttributeSideBarComponent", () => { }) const { container } = await render(AttributeSideBarComponent, { excludeComponentDeclaration: true }) - const attributeTypeSelectorWithinPrimaryMetrics = container.querySelectorAll("cc-attribute-side-bar-primary-metrics td") - const attributeTypeSelectorWithinSecondaryMetrics = container.querySelectorAll( - "cc-attribute-side-bar-secondary-metrics .metric-row" - ) - + const attributeTypeSelectorWithinSecondaryMetrics = container.querySelectorAll("cc-attribute-side-bar-secondary-metrics tr") expect(attributeTypeSelectorWithinPrimaryMetrics[0].getAttribute("title")).toBe("a_testTitle (a):\na_testDescription") expect(attributeTypeSelectorWithinPrimaryMetrics[1].getAttribute("title")).toBe("b_testTitle (b)") expect(attributeTypeSelectorWithinPrimaryMetrics[2].getAttribute("title")).toBe("someColor") expect(attributeTypeSelectorWithinPrimaryMetrics[3].getAttribute("title")).toBe("someEdge") - expect(attributeTypeSelectorWithinSecondaryMetrics[0].getAttribute("title")).toBe("c:\nc_testDescription") - expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(1) + expect(attributeTypeSelectorWithinSecondaryMetrics[1].getAttribute("title")).toBe("c:\nc_testDescription") + expect(attributeTypeSelectorWithinSecondaryMetrics.length).toBe(2) }) }) diff --git a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetric/attributeSideBarPrimaryMetric.component.html b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetric/attributeSideBarPrimaryMetric.component.html index a4cacb95b3..6ea53664ef 100644 --- a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetric/attributeSideBarPrimaryMetric.component.html +++ b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetric/attributeSideBarPrimaryMetric.component.html @@ -1,14 +1,14 @@ - -
- - - {{ metric.value | number: "1.0-0" }} - +
+
+ + + {{ metric.value | number: "1.0-0" }} +
+ + {{ metric.name }}
- -

{{ metric.name }}

diff --git a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.html b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.html index b913730c83..7ec067034b 100644 --- a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.html +++ b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarPrimaryMetrics/attributeSideBarPrimaryMetrics.component.html @@ -16,7 +16,6 @@ > - - -
- - - {{ edge.incoming | number: "1.0-0" }} - / - {{ edge.outgoing | number: "1.0-0" }} - +
+
+ + + + {{ edge.incoming | number: "1.0-0" }} + / + {{ edge.outgoing | number: "1.0-0" }} + +
+ {{ edge.name }} (in/out)
-

{{ edge.name }} (in/out)

-

No edge metric available

+ No edge metric available diff --git a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.html b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.html index a8e4f54fea..3fa2ed6317 100644 --- a/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.html +++ b/visualization/app/codeCharta/ui/attributeSideBar/attributeSideBarSecondaryMetrics/attributeSideBarSecondaryMetrics.component.html @@ -5,13 +5,9 @@ Secondary Metrics - - - + + +
- - {{ secondaryMetric.value | number: "1.0-0" }} + {{ secondaryMetric.value | number: "1.0-0" }} +
- + - {{ secondaryMetric.name }} + + {{ secondaryMetric.name }} +
diff --git a/visualization/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss b/visualization/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss index c9e5a81f92..fde695a16d 100644 --- a/visualization/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss +++ b/visualization/app/codeCharta/ui/attributeSideBar/attributeTypeSelector/attributeTypeSelector.component.scss @@ -1,14 +1,24 @@ +@use "../../../../material/theme"; cc-attribute-type-selector { - .mat-mdc-button-toggle-group { - height: 18px; + .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { + display: flex; align-items: center; - justify-content: space-evenly; + height: 100%; } - .mat-mdc-button-toggle-appearance-standard .mat-button-toggle-label-content { - padding: 0 7px 0 7px; + + button { + align-items: center; + height: 100%; + + &:hover { + background-color: rgba(0, 0, 0, 0.05); + color: theme.$cc-primary-color; + } } - .mat-mdc-button-toggle-standalone.mat-button-toggle-appearance-standard, - .mat-mdc-button-toggle-group-appearance-standard { - border: 0.1px solid darkgrey; + + .mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*="mat-elevation-z"]), + .mat-button-toggle-group-appearance-standard:not([class*="mat-elevation-z"]) { + height: 22px; + border: 0.5px solid darkgrey; } } diff --git a/visualization/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.html b/visualization/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.html index e4c77fffb6..50d432477e 100644 --- a/visualization/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.html +++ b/visualization/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.html @@ -1,5 +1,5 @@ - + Δ{{ deltaValue | number: "1.1-2" }} diff --git a/visualization/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.scss b/visualization/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.scss deleted file mode 100644 index 5221d8c525..0000000000 --- a/visualization/app/codeCharta/ui/attributeSideBar/metricDeltaSelected/metricDeltaSelected.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -cc-metric-delta-selected { - .metric-delta { - margin-left: 3px; - } -} diff --git a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html index f8a25f38de..3ec7dbbe70 100644 --- a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html +++ b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.html @@ -6,10 +6,10 @@ class="standard-select" multiple > -
- - - +
+ + +
{{ file.file.fileMeta.fileName | removeExtension }} diff --git a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss index c37a41f805..1670baa0f0 100644 --- a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss +++ b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/filePanelFileSelector.component.scss @@ -1,5 +1,42 @@ +@use "../../../../material/theme"; .file-select { &.mat-mdc-select-panel { min-width: max-content; + padding: 0; + + .mat-mdc-option .mdc-list-item__primary-text { + flex: 1; + display: flex; + justify-content: space-between; + align-items: center; + } + + .file-selection-actions { + display: flex; + } + + button { + width: 100%; + font-size: 16px; + margin: 0; + background-color: transparent; + + &:hover { + background-color: rgba(0, 0, 0, 0.05); + color: theme.$cc-primary-color; + } + + &.file-select-action-button { + padding: 15px 10px; + } + + &.remove-button { + padding: 8px 10px; + + &:hover { + border-radius: 50%; + } + } + } } } diff --git a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.html b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.html index 532d03d81d..0eb57d1d91 100644 --- a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.html +++ b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.html @@ -1,3 +1,3 @@ - diff --git a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.scss b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.scss deleted file mode 100644 index 1f314fe848..0000000000 --- a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.scss +++ /dev/null @@ -1,9 +0,0 @@ -cc-remove-file-button { - .mat-mdc-button { - border-radius: 50%; - margin: 0; - min-width: 0; - line-height: 0; - padding: 8px 10px; - } -} diff --git a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.ts b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.ts index dd142b167e..4cfb195419 100644 --- a/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.ts +++ b/visualization/app/codeCharta/ui/filePanel/filePanelFileSelector/removeFileButton/removeFileButton.component.ts @@ -5,7 +5,6 @@ import { removeFile } from "../../../../state/store/files/files.actions" @Component({ selector: "cc-remove-file-button", templateUrl: "./removeFileButton.component.html", - styleUrls: ["./removeFileButton.component.scss"], encapsulation: ViewEncapsulation.None }) export class RemoveFileButtonComponent { diff --git a/visualization/app/codeCharta/ui/legendPanel/legendPanel.component.html b/visualization/app/codeCharta/ui/legendPanel/legendPanel.component.html index f759048533..1d9d57b7ba 100755 --- a/visualization/app/codeCharta/ui/legendPanel/legendPanel.component.html +++ b/visualization/app/codeCharta/ui/legendPanel/legendPanel.component.html @@ -34,8 +34,6 @@