[ACS-6140] - Remove references to internal Angular Material CSS classes #9271

dominikiwanekhyland · 2024-01-23T07:42:07Z

Please check if the PR fulfills these requirements

The commit message follows our guidelines

Tests for the changes have been added (for bug fixes / features)

Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x")

Bugfix

Feature

Code style update (formatting, local variables)

Refactoring (no functional changes, no api changes)

Build related changes

Documentation

Other... Please describe:

What is the current behaviour? (You can also link to an open issue here)

What is the new behaviour?
All internal Angular Material CSS classes are removed and replaced with our custom classes. Changes in Angular Material library with classes won't affect our app.

Does this PR introduce a breaking change? (check one with "x")

Yes

No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:

...arch/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

...-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss

nikita-web-ua · 2024-01-24T13:22:18Z

It appears that the width of some search filter components is not being applied correctly.

nikita-web-ua · 2024-01-24T13:28:42Z

On file properties panel labels have different font size, and margin

nikita-web-ua · 2024-01-24T13:39:26Z

The user/group block has decreased in length

Before:

nikita-web-ua · 2024-01-24T14:00:15Z

...vices/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss

-    &-datatable-selected.mat-icon {
-        height: 100%;
-        width: 100%;
-        margin-left: -2px;


This styles are not always used with adf-people-select-icon class. For example here:

So now magin is not applied and icon has wrong alignment

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss

DenysVuika

looks great, please see comments

VitoAlbano · 2024-01-30T16:31:17Z

lib/content-services/src/lib/content-node-selector/content-node-selector.component.html

-               (selectedIndexChange)="onTabSelectionChange($event)"
-               [class.adf-content-node-selector-headless-tabs]="!canPerformLocalUpload()">
-    <mat-tab label="{{ 'NODE_SELECTOR.REPOSITORY' | translate }}">
-            <adf-content-node-selector-panel


What's happening here? it doesn't seem a style refactoring

Yes, it's refactor of angular materials component usage. In my opinion current usage was not correct. It created a mat-tab-group, which in some cases showed only one tab and was hiding all the styling from mat-tab components. In other case it had 2 tabs and displayed everything normally. It requrired a lot of css manipulation. I think it's easier and more clear to separate those 2 situations: if required show everything in mat-tab component, else show it normally. Thanks to that, there is no need in css manipulation and I could delete some parts of scss files with mat- names.

I understand but as this is already a huge PR wouldn't it be possible to target this work on a separated PR?

VitoAlbano · 2024-01-30T16:32:15Z

lib/content-services/src/lib/content-user-info/content-user-info.component.html

@@ -38,72 +38,64 @@

    <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
              [overlapTrigger]="false" class="adf-userinfo-menu">
-        <mat-tab-group id="tab-group-env" (click)="stopClosing($event)" selectedIndex="0" role="menuitem"


Also here, isn't this a rework of the user-info for content?

same situation

...arch/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss

VitoAlbano

I've added some comments please have a look

VitoAlbano · 2024-01-30T16:35:06Z

...ces/src/lib/search/components/search-filter-container/search-filter-container.component.html

@@ -19,7 +19,7 @@
    </button>

    <mat-menu #filter="matMenu"
-              class="adf-filter-menu"
+              class="adf-filter-menu adf-search-filter-menu"


Wouldn't it be better have just a single style for this one?

Yes, it would, but the css specificity from angular material, makes me do this that way as they do the same thing sometimes. I couldn't have found a better solution for that

We can incorporate the style we need to add in the normal style flow, having multiple styles is something we avoided as it created a lot of confusion long ago, if this component need that style please add it to the relative one

VitoAlbano · 2024-01-30T16:37:11Z

lib/content-services/src/lib/tree-view/components/tree-view.component.html

@@ -1,11 +1,11 @@
 <mat-tree class="adf-tree-view-main" [dataSource]="dataSource"
          [treeControl]="treeControl" *ngIf="nodeId; else missingNodeId">
-    <mat-tree-node class="adf-tree-view-node"
+    <mat-tree-node class="adf-tree-view adf-tree-view-node"


as above wouldn't it be easier to have a single style for this?

same situation

VitoAlbano · 2024-01-30T16:37:17Z

lib/content-services/src/lib/tree-view/components/tree-view.component.html

        *matTreeNodeDef="let treeNode" id="{{treeNode.name + '-tree-node'}}"
        matTreeNodePadding [matTreeNodePaddingIndent]="15">
        {{treeNode.name}}
    </mat-tree-node>
-    <mat-tree-node class="adf-tree-view-node"
+    <mat-tree-node class="adf-tree-view adf-tree-view-node"


same situation

VitoAlbano · 2024-01-30T16:37:39Z

lib/content-services/src/lib/version-manager/version-list.component.html

            <mat-icon mat-list-icon>insert_drive_file</mat-icon>
-            <p mat-line class="adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
+            <p mat-line class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>


same situation

VitoAlbano · 2024-01-30T16:38:46Z

lib/core/src/lib/identity-user-info/identity-user-info.component.html

    <span *ngIf="showName" id="adf-userinfo-identity-name-display" class="adf-userinfo-name">
        {{identityUser | fullName}}
    </span>
-    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button"
+    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-identity-userinfo-button"


multiple styles here as well

same situation

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss

.../lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.scss

nikita-web-ua · 2024-02-02T14:47:58Z

Search facet chips on hover (left one on the pic) have become darker with some light border

Current design, (left one hovered as well)

nikita-web-ua · 2024-02-02T14:52:07Z

Filter icon now misaligned

dominikiwanekhyland · 2024-02-07T11:03:32Z

Filter icon now misaligned

That's the state of current develop branch, I think that's someone's else change and probably that's the change someone has made deribelately.

sonarqubecloud · 2024-02-08T18:50:33Z

Quality Gate passed

Issues
1 New issue

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

dominikiwanekhyland requested review from eromano, popovicsandras and DenysVuika as code owners January 23, 2024 07:42

dominikiwanekhyland force-pushed the ACS-6140-adf-remove-references-to-internal-angular-material-css-classes branch from 067c329 to 8000e61 Compare January 23, 2024 07:43

dominikiwanekhyland commented Jan 23, 2024

View reviewed changes

...arch/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss Show resolved Hide resolved

...-services/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss Show resolved Hide resolved

dominikiwanekhyland requested review from MichalKinas and AleksanderSklorz January 23, 2024 11:01

nikita-web-ua reviewed Jan 24, 2024

View reviewed changes

dominikiwanekhyland force-pushed the ACS-6140-adf-remove-references-to-internal-angular-material-css-classes branch 3 times, most recently from 727a9e4 to e0733e0 Compare January 29, 2024 15:56

dominikiwanekhyland requested a review from nikita-web-ua January 29, 2024 16:10

DenysVuika reviewed Jan 30, 2024

View reviewed changes

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss Outdated Show resolved Hide resolved

DenysVuika requested changes Jan 30, 2024

View reviewed changes

VitoAlbano reviewed Jan 30, 2024

View reviewed changes

...arch/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss Show resolved Hide resolved

VitoAlbano requested changes Jan 30, 2024

View reviewed changes

dominikiwanekhyland requested a review from DenysVuika February 2, 2024 10:23

dominikiwanekhyland force-pushed the ACS-6140-adf-remove-references-to-internal-angular-material-css-classes branch from e0733e0 to d153c38 Compare February 2, 2024 10:23

dominikiwanekhyland requested a review from VitoAlbano February 2, 2024 10:23

dominikiwanekhyland force-pushed the ACS-6140-adf-remove-references-to-internal-angular-material-css-classes branch from d153c38 to c510cd7 Compare February 2, 2024 10:37

VitoAlbano approved these changes Feb 7, 2024

View reviewed changes

dominikiwanekhyland force-pushed the ACS-6140-adf-remove-references-to-internal-angular-material-css-classes branch from c510cd7 to bea035c Compare February 7, 2024 13:23

DenysVuika approved these changes Feb 7, 2024

View reviewed changes

nikita-web-ua approved these changes Feb 8, 2024

View reviewed changes

dominikiwanekhyland added 2 commits February 8, 2024 15:08

[ACS-6140] - Remove references to internal Angular Material CSS classes

6de9df4

Fix after CR

42addec

dominikiwanekhyland force-pushed the ACS-6140-adf-remove-references-to-internal-angular-material-css-classes branch from bea035c to 46cca6b Compare February 8, 2024 14:08

Fix unit tests

8116b47

dominikiwanekhyland force-pushed the ACS-6140-adf-remove-references-to-internal-angular-material-css-classes branch from 46cca6b to 8116b47 Compare February 8, 2024 18:48

dominikiwanekhyland merged commit 6d93d01 into develop Feb 9, 2024
33 checks passed

dominikiwanekhyland deleted the ACS-6140-adf-remove-references-to-internal-angular-material-css-classes branch February 9, 2024 07:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ACS-6140] - Remove references to internal Angular Material CSS classes #9271

[ACS-6140] - Remove references to internal Angular Material CSS classes #9271

dominikiwanekhyland commented Jan 23, 2024

nikita-web-ua commented Jan 24, 2024

nikita-web-ua commented Jan 24, 2024

nikita-web-ua commented Jan 24, 2024

nikita-web-ua Jan 24, 2024

DenysVuika left a comment

VitoAlbano Jan 30, 2024

dominikiwanekhyland Feb 2, 2024 •

edited

Loading

VitoAlbano Feb 5, 2024

VitoAlbano Jan 30, 2024

dominikiwanekhyland Feb 2, 2024

VitoAlbano left a comment

VitoAlbano Jan 30, 2024

dominikiwanekhyland Feb 2, 2024

VitoAlbano Feb 5, 2024

VitoAlbano Jan 30, 2024

dominikiwanekhyland Feb 2, 2024

VitoAlbano Jan 30, 2024

dominikiwanekhyland Feb 2, 2024

VitoAlbano Jan 30, 2024

dominikiwanekhyland Feb 2, 2024

VitoAlbano Jan 30, 2024

dominikiwanekhyland Feb 2, 2024

nikita-web-ua commented Feb 2, 2024

nikita-web-ua commented Feb 2, 2024

dominikiwanekhyland commented Feb 7, 2024

sonarqubecloud bot commented Feb 8, 2024

[ACS-6140] - Remove references to internal Angular Material CSS classes #9271

[ACS-6140] - Remove references to internal Angular Material CSS classes #9271

Conversation

dominikiwanekhyland commented Jan 23, 2024

nikita-web-ua commented Jan 24, 2024

nikita-web-ua commented Jan 24, 2024

nikita-web-ua commented Jan 24, 2024

Choose a reason for hiding this comment

DenysVuika left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dominikiwanekhyland Feb 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VitoAlbano left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nikita-web-ua commented Feb 2, 2024

nikita-web-ua commented Feb 2, 2024

dominikiwanekhyland commented Feb 7, 2024

sonarqubecloud bot commented Feb 8, 2024

Quality Gate passed

dominikiwanekhyland Feb 2, 2024 •

edited

Loading