ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-24 07:16:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Collapse to Recent Objects (#7502)

Browse Source 
* initial functional implementation

* removing vestigial code

* Fix styles for button bar

* Remove bound for :persist-position

* Revert "Remove bound for :persist-position"

This reverts commit ce2ea422d7.

* test(e2e): modify existing test to verify collapse/expand recent objects pane

---------

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
This commit is contained in:
Rukmini Bose (Ruki) 2024-02-21 13:28:29 -08:00 committed by GitHub
parent 5894c66df1
commit f18d1d2a51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 70 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
e2e/tests/functional/recentObjects.e2e.spec.js
View File

@ -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);
@ -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() {

8
src/ui/layout/AppLayout.vue
View File

@ -105,7 +105,13 @@
class="l-shell__tree"
/>
</pane>
<pane handle="before" label="Recently Viewed" :persist-position="true">
<pane
handle="before"
label="Recently Viewed"
:persist-position="true"
collapse-type="horizontal"
hide-param="hideRecents"
>
<RecentObjectsList
ref="recentObjectsList"
class="l-shell__tree"

9
src/ui/layout/PaneContainer.vue
View File

@ -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: '',
@ -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
};
@ -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;

40
src/ui/layout/pane.scss
View File

@ -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 {
@ -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;
@ -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);
@ -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;
@ -303,7 +335,7 @@
}
.l-pane__collapse-button:before {
content: $glyph-icon-arrow-down;
content: $glyph-icon-line-horz;
}
&.l-pane--collapsed {