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 3 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
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