Skip to content

Commit

Permalink
Fix/3225/ui components (#3260)
Browse files Browse the repository at this point in the history
Fix UI components of attribute sidebar, ribbonbar and file selection panel
#3225
  • Loading branch information
Hall-Ma authored Mar 30, 2023
1 parent a7688d3 commit 598e2f4
Show file tree
Hide file tree
Showing 18 changed files with 165 additions and 112 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 🚀
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
[node]="selectedNode$ | async"
[fileName]="fileName$ | async"
></cc-attribute-side-bar-header-section>

<cc-attribute-side-bar-primary-metrics></cc-attribute-side-bar-primary-metrics>

<cc-attribute-side-bar-secondary-metrics></cc-attribute-side-bar-secondary-metrics>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ cc-attribute-side-bar {
}

table {
th {
text-align: left;
}

&.primary-metrics {
table-layout: fixed;
width: 100%;
Expand All @@ -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;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,15 @@ 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"
const isSecondaryMetricInPrimaryMetricSection = container
.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)
Expand All @@ -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)
})

Expand Down Expand Up @@ -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)
})
})

Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<i [class]="iconName"></i>
<div class="metric-value">
<cc-attribute-type-selector
*ngIf="showAttributeTypeSelector$ | async"
class="attribute-type-select"
[metricName]="metric.name"
[metricType]="'nodes'"
></cc-attribute-type-selector>
<span>
{{ metric.value | number: "1.0-0" }}
</span>
<div class="primary-metric-box">
<div class="primary-metric-row">
<i [class]="iconName"></i>
<cc-attribute-type-selector
*ngIf="showAttributeTypeSelector$ | async"
class="attribute-type-select"
[metricName]="metric.name"
[metricType]="'nodes'"
></cc-attribute-type-selector>
<span class="primary-metric-value">{{ metric.value | number: "1.0-0" }}</span>
</div>
<cc-metric-delta-selected [metricName]="metric.name"></cc-metric-delta-selected>
<span class="metric-name">{{ metric.name }}</span>
</div>
<cc-metric-delta-selected [metricName]="metric.name"></cc-metric-delta-selected>
<p class="metric-name">{{ metric.name }}</p>
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
></cc-attribute-side-bar-primary-metric>
</td>
</tr>

<tr>
<td [title]="primaryMetrics.color.descriptors | metricDescriptorTitle">
<cc-attribute-side-bar-primary-metric
Expand All @@ -26,26 +25,28 @@
</td>
<ng-container *ngIf="primaryMetrics.edge as edge; else sidebarPrimaryMetricsEdgeElse">
<td [title]="edge.descriptors | metricDescriptorTitle">
<i class="fa fa-exchange"></i>
<div class="metric-value">
<cc-attribute-type-selector
*ngIf="showAttributeTypeSelector$ | async"
class="attribute-type-select"
[metricName]="edge.name"
[metricType]="'edges'"
></cc-attribute-type-selector>
<span class="metric-value">
{{ edge.incoming | number: "1.0-0" }}
<span>/</span>
{{ edge.outgoing | number: "1.0-0" }}
</span>
<div class="primary-metric-box">
<div class="primary-metric-row">
<i class="fa fa-exchange"></i>
<cc-attribute-type-selector
*ngIf="showAttributeTypeSelector$ | async"
class="attribute-type-select"
[metricName]="edge.name"
[metricType]="'edges'"
></cc-attribute-type-selector>
<span>
{{ edge.incoming | number: "1.0-0" }}
<span>/</span>
{{ edge.outgoing | number: "1.0-0" }}
</span>
</div>
<span class="metric-name">{{ edge.name }} (in/out)</span>
</div>
<p class="metric-name">{{ edge.name }} (in/out)</p>
</td>
</ng-container>
<ng-template #sidebarPrimaryMetricsEdgeElse>
<td>
<p class="metric-name">No edge metric available</p>
<span class="metric-name">No edge metric available</span>
</td>
</ng-template>
</tr>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,25 @@
<tr>
<th scope="col" colspan="2">Secondary Metrics</th>
</tr>
<tr
*ngFor="let secondaryMetric of secondaryMetrics$ | async"
class="metric-row"
[title]="secondaryMetric.descriptors | metricDescriptorTitle"
>
<td class="metric-summary">
<span class="metric-type">
<tr *ngFor="let secondaryMetric of secondaryMetrics$ | async" [title]="secondaryMetric.descriptors | metricDescriptorTitle">
<td class="secondary-metric-box">
<div class="secondary-metric-row">
<cc-attribute-type-selector
*ngIf="showAttributeTypeSelector$ | async"
class="attribute-type-select"
[metricName]="secondaryMetric.name"
[metricType]="'nodes'"
>
</cc-attribute-type-selector>
</span>
<span class="metric-value">{{ secondaryMetric.value | number: "1.0-0" }}</span>
<span class="metric-value">{{ secondaryMetric.value | number: "1.0-0" }}</span>
</div>
</td>
<td [hidden]="!(showDeltaValue$ | async)">
<td class="delta-value-box" [hidden]="!(showDeltaValue$ | async)">
<cc-metric-delta-selected [metricName]="secondaryMetric.name"></cc-metric-delta-selected>
</td>
<td class="metric-name">{{ secondaryMetric.name }}</td>
<td>
<span class="metric-name">{{ secondaryMetric.name }}</span>
</td>
</tr>
</table>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ng-container *ngIf="(selectedNode$ | async )?.deltas?.[metricName] as deltaValue">
<span [style.color]="(mapColors$ | async)[deltaValue > 0 ? 'positiveDelta' : 'negativeDelta']" class="metric-delta">
<span [style.color]="(mapColors$ | async)[deltaValue > 0 ? 'positiveDelta' : 'negativeDelta']">
&Delta;{{ deltaValue | number: "1.1-2" }}
</span>
</ng-container>

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
class="standard-select"
multiple
>
<div class="actions">
<button mat-button (click)="handleSelectAllFiles()">All</button>
<button mat-button (click)="handleSelectZeroFiles()">None</button>
<button mat-button (click)="handleInvertSelectedFiles()">Invert</button>
<div class="file-selection-actions">
<button class="file-select-action-button" (click)="handleSelectAllFiles()">All</button>
<button class="file-select-action-button" (click)="handleSelectZeroFiles()">None</button>
<button class="file-select-action-button" (click)="handleInvertSelectedFiles()">Invert</button>
</div>
<mat-option class="filenames" *ngFor="let file of fileStates" [value]="file.file">
{{ file.file.fileMeta.fileName | removeExtension }}
Expand Down
Loading

0 comments on commit 598e2f4

Please sign in to comment.