Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Collapse to Recent Objects #7502

Merged
merged 7 commits into from
Feb 21, 2024
Merged

Add Collapse to Recent Objects #7502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
351298a
initial functional implementation
jvigliotta Feb 13, 2024
94e9567
removing vestigial code
jvigliotta Feb 13, 2024
0eece9a
Fix styles for button bar
rukmini-bose Feb 13, 2024
ce2ea42
Remove bound for :persist-position
rukmini-bose Feb 20, 2024
4f089f4
Revert "Remove bound for :persist-position"
ozyx Feb 20, 2024
3f63820
test(e2e): modify existing test to verify collapse/expand recent obje…
ozyx Feb 21, 2024
c3190f4
Merge branch 'master' into collapse-recents
ozyx Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion e2e/tests/functional/recentObjects.e2e.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ test.describe('Recent Objects', () => {
// Assert that the list is empty
expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(0);
});
test('Ensure clear recent objects button is active or inactive', async ({ page }) => {
test('Verify functionality of "clear" and "collapse pane" buttons', async ({ page }) => {
// Assert that the list initially contains 3 objects (clock, folder, my items)
expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(3);

Expand Down Expand Up @@ -331,6 +331,24 @@ test.describe('Recent Objects', () => {
expect(await page.getByRole('button', { name: 'Clear Recently Viewed' }).isEnabled()).toBe(
true
);

// Assert initial state of pane and collapse the Recent Objects panel
await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeHidden();
await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeVisible();
await page.getByLabel('Collapse Recently Viewed Pane').click();

// Assert that the "Expand Recently Viewed Pane" button is visible
// and that the "Collapse Recently Viewed Pane" button is hidden
await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeVisible();
await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeHidden();

// Expand the Recent Objects panel by clicking on the "Expand Recently Viewed Pane" button
await page.getByLabel('Expand Recently Viewed Pane').click();

// Assert that the "Expand Recently Viewed Pane" button is hidden
// and that the "Collapse Recently Viewed Pane" button is visible
await expect(page.getByLabel('Expand Recently Viewed Pane')).toBeHidden();
await expect(page.getByLabel('Collapse Recently Viewed Pane')).toBeVisible();
});

function assertInitialRecentObjectsListState() {
Expand Down
8 changes: 7 additions & 1 deletion src/ui/layout/AppLayout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,13 @@
class="l-shell__tree"
/>
</pane>
<pane handle="before" label="Recently Viewed" :persist-position="true">
<pane
handle="before"

Check warning on line 109 in src/ui/layout/AppLayout.vue

View check run for this annotation

Codecov / codecov/patch

src/ui/layout/AppLayout.vue#L108-L109 

Added lines #L108 - L109 were not covered by tests
label="Recently Viewed"
:persist-position="true"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this doesn't need to be bound to anything as it's constant

Suggested change
:persist-position="true"
persist-position="true"

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I was wrong about this. If we're passing a boolean, we need the :v-bind otherwise it gets passed as a string. Just Vue 3 Things

collapse-type="horizontal"

Check warning on line 112 in src/ui/layout/AppLayout.vue

View check run for this annotation

Codecov / codecov/patch

src/ui/layout/AppLayout.vue#L111-L112 

Added lines #L111 - L112 were not covered by tests
hide-param="hideRecents"
>
<RecentObjectsList
ref="recentObjectsList"
class="l-shell__tree"
Expand Down
9 changes: 8 additions & 1 deletion src/ui/layout/PaneContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ const LOCAL_STORAGE_KEY__PANE_POSITIONS = 'mct-pane-positions';
export default {
inject: ['openmct'],
props: {
collapseType: {
type: String,
default: 'vertical'
},
handle: {
type: String,
default: '',
Expand Down Expand Up @@ -107,6 +111,7 @@ export default {
'l-pane--vertical-handle-before': this.type === 'vertical' && this.handle === 'before',
'l-pane--vertical-handle-after': this.type === 'vertical' && this.handle === 'after',
'l-pane--collapsed': this.collapsed,
'collapse-horizontal': this.collapseType === 'horizontal',
'l-pane--reacts': !this.handle,
'l-pane--resizing': this.resizing === true
};
Expand Down Expand Up @@ -177,7 +182,9 @@ export default {
this.collapsed = true;
},
handleExpand() {
this.$el.style[this.styleProp] = this.currentSize;
let size = this.currentSize ? this.currentSize : this.getSavedPosition();
this.$el.style[this.styleProp] = size;

delete this.currentSize;
delete this.dragCollapse;
this.collapsed = false;
Expand Down
40 changes: 36 additions & 4 deletions src/ui/layout/pane.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,9 @@
&:before {
// '+' icon
font-size: 0.8em;
margin-bottom: $interiorMarginSm;
margin-bottom: $interiorMarginSm; // margin-bottom is needed for Tree and Inspector
margin-right: $interiorMarginSm; // margin-right and margin-left are needed for Recent Objects
margin-left: $interiorMarginSm;
}

&:hover {
Expand Down Expand Up @@ -191,6 +193,36 @@
}
}

&[class*='--collapsed'] { // For Recent Objects Button
&.collapse-horizontal {
[class*='expand-button'] {
display: block;
position: absolute;
top: 0;
width: 100%;
border-top-right-radius: $controlCr;
border-top-left-radius: $controlCr;
}
}
[class*='expand-button'] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: auto;
width: 100%;
padding: $interiorMarginSm 1px;
font-size: 11px;

[class*='label'] {
text-orientation: mixed;
text-transform: uppercase;
writing-mode: horizontal-tb;
}
}
}

&[class*='--horizontal'] {
> .l-pane__handle {
cursor: col-resize;
Expand Down Expand Up @@ -256,7 +288,7 @@
}

/************************** Horizontal Splitter After */
// Example: Tree pane
// Example: Tree pane and Recent Objects
&[class*='-after'] {
margin-right: nth($shellPanePad, 2);
padding-right: nth($shellPanePad, 2);
Expand Down Expand Up @@ -292,7 +324,7 @@
}

/************************** Vertical Splitter Before */
// Pane collapses downward. Used by Elements pool in Inspector
// Pane collapses downward. Used by Recent Objects in Tree
&[class*='-before'] {
$m: $interiorMarginLg;
margin-top: $m;
Expand All @@ -303,7 +335,7 @@
}

.l-pane__collapse-button:before {
content: $glyph-icon-arrow-down;
content: $glyph-icon-line-horz;
}

&.l-pane--collapsed {
Expand Down
Loading