[ACS 5551] Property Panel Design #8877

AnukritiGL · 2023-09-01T17:05:14Z

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)
The design of the Property Panel appears outdated, and the title in the InfoDrawer is generic, labeled as "Details."

What is the new behaviour?
The Property Panel design has been revamped for both small and large screens. Additionally, the InfoDrawer now displays file titles with accompanying icons instead of the generic label "Details."

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:
https://alfresco.atlassian.net/browse/ACS-5551

Based on requirements, updated the below points:

Title and Icon in property Panel: In the collapsed and expanded mode now displays file titles with accompanying icons instead of the generic label "Details."

Edit and Clear Button: As per design edit and clear button has been removed from the property panel fields.

Improved Styles: Worked on the styles of property panel. Panels now have a more appealing look, tailored to match figma design.
Alfresco/alfresco-content-app#3415 is a dependency of this PR

CLAassistant · 2023-09-01T17:05:20Z

All committers have signed the CLA.

arohilaGL · 2023-09-05T18:05:59Z

Update the title to match the guidelines.

e2e/content-services/metadata/metadata-smoke-tests.e2e.ts

lib/core/src/lib/info-drawer/info-drawer.component.ts

rbahirsheth · 2023-09-06T11:07:20Z

lib/core/src/lib/info-drawer/info-drawer.component.ts

+        return nodeAspects.indexOf('rule:rules') > -1 || nodeAspects.indexOf('rule:rules') > -1;
+      }
+
+      isALinkFolder(node: Node) {


change from isALinkFolder to isLinkFolder() method

sonarqubecloud · 2023-09-06T15:14:55Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.2% Duplication

DenysVuika · 2023-09-08T13:05:48Z

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -1,10 +1,12 @@
 <label class="adf-property-label"
+    [ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"


why there are 2 editable flags that look the same? can you have one check instead?

DenysVuika · 2023-09-08T13:06:08Z

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html

@@ -2,6 +2,7 @@
    <div
        [attr.data-automation-id]="'card-select-label-' + property.key"
        class="adf-property-label"
+        [ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"


2 similar flags that is confusing

DenysVuika · 2023-09-08T13:07:36Z

lib/core/src/lib/info-drawer/info-drawer.component.spec.ts

@@ -34,7 +68,7 @@ describe('InfoDrawerComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [
-                TranslateModule.forRoot(),
+                TranslateModule.forRoot(), 


extra space after coma

DenysVuika · 2023-09-08T13:08:21Z

lib/core/src/lib/info-drawer/info-drawer.component.spec.ts

    });

    it('should show info drawer header by default', () => {
        fixture.detectChanges();
        const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]'));


please use proper type instead of "any" here

DenysVuika · 2023-09-08T13:08:30Z

lib/core/src/lib/info-drawer/info-drawer.component.spec.ts

        fixture.detectChanges();
        component.showHeader = false;
        fixture.detectChanges();
        const title: any = fixture.debugElement.queryAll(By.css('[info-drawer-title]'));
+        const icon: any = fixture.debugElement.queryAll(By.css('[info-drawer-icon]'));


missing proper type

DenysVuika · 2023-09-08T13:09:45Z

...ervices/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

+    margin-bottom: 12px;
+}
+
+.acs-details-container {


incorrect prefix, should be "app"

DenysVuika · 2023-09-08T13:10:14Z

stylelint-config.json

@@ -91,7 +91,7 @@
    "max-line-length": 240,
    "linebreaks": "unix",
    "selector-class-pattern": [
-      "^_?(adf|adf-|app|app-|cdk-|example-|demo-|mat-|material-|textLayer|canvasWrapper|page)",
+      "^_?(adf|adf-|app|app-|cdk-|example-|demo-|mat-|material-|textLayer|canvasWrapper|page|acs)",


please don't introduce new prefixes for no reason

DenysVuika · 2023-09-08T13:15:13Z

...-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -251,6 +280,27 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
        }
    }

+    toggleEditMode(buttonType: ButtonType, group?: CardViewGroup) {


you are hardcoding the notion of Tags, Categories, etc in the ADF that has no idea what is that... tags and categories are provided in the App... cc @MichalKinas

DenysVuika · 2023-09-08T13:17:18Z

e2e/content-services/metadata/metadata-smoke-tests.e2e.ts

-        LESS_INFO_BUTTON: 'Less information',
-        ARROW_DOWN: 'keyboard_arrow_down',
-        ARROW_UP: 'keyboard_arrow_up',
+        DEFAULT_ASPECT: 'General info',


Why this rename?

rbahirsheth · 2023-09-08T13:55:22Z

We are raising new PR hence Closing this PR.

AnukritiGL force-pushed the ACS-5551-Property-panel-design branch from d27dcae to b3a9fd8 Compare September 4, 2023 11:55

Yasa-Nataliya and others added 17 commits September 5, 2023 17:52

[ACS-5645]Added edit functionality for each panel and updated test cases

fd5bca7

metadata e2e fix

1c4c508

[ACS-5725]fixed failing e2es

35791f6

added unit test cases for new functionality

3b8ef0b

minor fixes

a7e20e3

minor fixes

ee4173c

minor fixes

3b6236b

[ACS-5645]code modification

5c7d2e5

[ACS-5645]removed unwanted code

ec005f5

[ACS-5645]modified the changes

7c112d8

[ACS-5645]removed unwanted space

4f0c156

[ACS-5645]removed unwanted code

309ff17

[ACS-5645]Implemented changes as per the review comments

45b45ba

linting fixes

495b900

[ACS-5645]minor fixes

1f98b37

[ACS-5551]property panel updated

13edcba

[ACS-5551]minor changes in design

37b8380

AnukritiGL force-pushed the ACS-5551-Property-panel-design branch from c469f14 to 37b8380 Compare September 5, 2023 12:23

AnukritiGL mentioned this pull request Sep 5, 2023

[ACS-5551] Property Panel Design Update Alfresco/alfresco-content-app#3415

Closed

AnukritiGL changed the title ~~Acs 5551 property panel design~~ AC 5551 property panel design Sep 5, 2023

AnukritiGL changed the title ~~AC 5551 property panel design~~ ACS 5551 property panel design Sep 5, 2023

AnukritiGL requested a review from rbahirsheth September 5, 2023 14:02

AnukritiGL changed the base branch from develop to ACS-5645 September 5, 2023 14:08

AnukritiGL added 2 commits September 5, 2023 19:48

[ACS-5551]added E2e test cases

94ab169

[ACS-5551]minor change in code

54c9859

arohilaGL reviewed Sep 6, 2023

View reviewed changes

e2e/content-services/metadata/metadata-smoke-tests.e2e.ts Outdated Show resolved Hide resolved

e2e/content-services/metadata/metadata-smoke-tests.e2e.ts Outdated Show resolved Hide resolved

e2e/content-services/metadata/metadata-smoke-tests.e2e.ts Outdated Show resolved Hide resolved

rbahirsheth reviewed Sep 6, 2023

View reviewed changes

lib/core/src/lib/info-drawer/info-drawer.component.ts Outdated Show resolved Hide resolved

rbahirsheth reviewed Sep 6, 2023

View reviewed changes

AnukritiGL changed the title ~~ACS 5551 property panel design~~ [ACS 5551] Property Panel Design Sep 6, 2023

[ACS-5551] minor changes in code

747df40

Yasa-Nataliya force-pushed the ACS-5645 branch from ad130fe to a860554 Compare September 7, 2023 10:02

DenysVuika added the next version ➡️ label Sep 7, 2023

Yasa-Nataliya force-pushed the ACS-5645 branch from c23f7f4 to f24c918 Compare September 7, 2023 16:31

DenysVuika reviewed Sep 8, 2023

View reviewed changes

rbahirsheth closed this Sep 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ACS 5551] Property Panel Design #8877

[ACS 5551] Property Panel Design #8877

AnukritiGL commented Sep 1, 2023 •

edited

Loading

CLAassistant commented Sep 1, 2023 •

edited

Loading

arohilaGL commented Sep 5, 2023

rbahirsheth Sep 6, 2023

AnukritiGL Sep 6, 2023

sonarqubecloud bot commented Sep 6, 2023

DenysVuika Sep 8, 2023

DenysVuika Sep 8, 2023

DenysVuika Sep 8, 2023

DenysVuika Sep 8, 2023

DenysVuika Sep 8, 2023

DenysVuika Sep 8, 2023

DenysVuika Sep 8, 2023

DenysVuika Sep 8, 2023

DenysVuika Sep 8, 2023

rbahirsheth commented Sep 8, 2023

		@@ -1,10 +1,12 @@
		<label class="adf-property-label"
		[ngClass]="{'adf-property-label-not-editable' : !isEditable() && editable}"

[ACS 5551] Property Panel Design #8877

[ACS 5551] Property Panel Design #8877

Conversation

AnukritiGL commented Sep 1, 2023 • edited Loading

CLAassistant commented Sep 1, 2023 • edited Loading

arohilaGL commented Sep 5, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Sep 6, 2023

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

rbahirsheth commented Sep 8, 2023

AnukritiGL commented Sep 1, 2023 •

edited

Loading

CLAassistant commented Sep 1, 2023 •

edited

Loading