R&I Layout editing mods #2256

charlesh88 · 2019-01-04T22:35:20Z

Changes focused on improving editing in Layouts with an emphasis on sub-object editing.
READY FOR REVIEW

Changes

Much CSS cleanup and reorging for clarity;
Removed is-drilled-in classes;
Solidified styles for c-frame-edit*;
Properly handle .has-complex-content;
Grid visibility now working properly for nested layouts, but approach is brittle as hell;
Removed .l-layout__object container, not needed;
Fixed --no-frame hiding downstream nested __header elements;
Added missing description for DisplayLayoutType;
Add complex-content class implementation for Layout sub-objects with complex views, including 'move bar' with grippy affordance;
Added is-resizing property to DisplayLayout.vue to detect when a user is actively resizing a Layout's frame, in order to prevent intermittent hovers from triggering;
Set frame title by reading domain object name directly;
Fixed border styling for Display and Flexible Layout frame elements while editing;
Flex Layout headers and object Elements pool drag grippies now uses same style as Display Layouts;
Toolbar now has background color as a further visual key into editing mode;

Author Checklist

Changes address original issue? Y
Unit tests included and/or updated with changes? N/A
Command line build passes? Y
Changes have been smoke-tested? Y

- Mods to c-frame-edit__move element styling; - Added object name to frame title;

… layout-editing

- Removed is-drilled-in classes; - Solidified styles for c-frame-edit* and fixed it so it no longer blocks interior selection; - Properly handle .has-complex-content; - TODO: display layout grid on s-selected and s-selected-parent;

- Grid visibility now working properly for nested layouts, but approach is brittle as hell; - Removed .l-layout__object container, not needed; - Fixed --no-frame hiding all nested __headers; - TODOs: - Better strategy needed for s-selected and s-selected-parent;

- Both Display and Flexible Layouts;

- Reorg of is-editing styles; - Show frame move bar on hover, regardless of s-selected; - Hide frame move bar when resizing; - TODO: figure out why move bar transition is only enabled when s-selected is applied to holder;

- Functionality now as desired; - Refinements to move bar display anim and timing; - TODOs: -- Code cleanup; -- Now seeing a problem where the drop target Flex layout remains visible after moving sub-objects between columns.

- Frame-related is-editing and s-selected styling CSS cleaned up and reorganized - styles moved out of _global.scss and into more relevant files; - Added `u-inspectable` to Flex Layout frame markup; - Border settings and margin refined so that frames while browsing don't add margin;

- Toolbar now with color bg for better tie-in with edit area visually; - Edit colors refined for Snow theme, WIP; - Tweak to c-click-icon styling

- New $editUI* and $editFrame* constants in espresso; - Refined coloring; - New mixin `grippy`; - TODOs: - Bring Flex Layout containers (frames, container resize) into style parity; - Cleanup / remove unused old constants; - Sync up other themes;

- Fix frame hover effects to only shrink frame contents for move bar when element is a Display Layout frame; - Flex Layout container grippys now use same style as Disp Layouts; - Style cleanup in Espresso; - TODO: more cleanup, bring other themes into parity;

- CSS cleanups; - Hover and selected styling;

- Brought back pushBack and pullForward functions to allow light and dark themes to be more similar; - Maelstrom and Snow themes brought into parity with Espresso;

psarram

@charlesh88 Good improvements to sub-object editing! Please merge with topic-core-refactor to get the latest changes to the display layout.

psarram · 2019-01-18T00:52:03Z

src/ui/components/ObjectFrame.vue

+                let objectType = this.openmct.types.get(this.domainObject.type);
+                if (!objectType || !objectType.definition) {
+                    return; // TODO: return unknown icon type.
+                }


Is there an unknown icon type to return here? If not, let's track it as a todo item in TCR.

psarram · 2019-01-18T00:57:16Z

src/ui/components/ObjectFrame.vue

+                    return; // TODO: return unknown icon type.
+                }
+
+                return objectType.definition.complexContent;


The code here is almost a duplicate of cssClass(). Can we define a method to get the object type definition instead of repeating the code?

@dtailor90 to address.

psarram · 2019-01-18T01:05:00Z

src/plugins/displayLayout/components/DisplayLayout.vue

-                if (selection.length === 0) {
-                    return;
-                }
-


setSelection() should not be removed. There has been some updates to this file since this change was done. Please merge with topic-core-refactor to get the latest code.

Merged latest TCR, this should be good.

akhenry

Just played around with this branch and sub-object editing is really slick now, I'm super excited about it 😄 This is awesome stuff.

A couple of comments and questions inline.

akhenry · 2019-01-17T21:26:05Z

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -234,12 +230,17 @@
                this.initSelectIndex = this.layoutItems.length - 1;
            },
            trackItem(item) {
+                if (!item.identifier) {


Just wondering why this check is necessary now?

@akhenry Good question. I added this check as I was updating the file to remove the drilled-in logic. An item that has no identifier (i.e, drawing items) doesn't need to be tracked. It's more performant to return right away than checking for the type. I added this check to improve the code and be consistent with untrackItem().

Got it, thanks

akhenry · 2019-01-18T00:52:47Z

src/api/types/TypeRegistry.js

+     * Check if type is included in complex types.
+     * @private
+     */
+    TypeRegistry.prototype.isTypeComplex = function (key) {


I wonder if, for now, we should keep this contained to layouts? As I understand it, this is very layout specific?

I'm also thinking it should be opt-out. ie the list should be of 'simple' object types of which there are far fewer (basically summary widgets and clocks?)

Longer term we will probably need to add some API that allows views to give layouts hints on how to display them, but I don't really want to address that quite yet.

Per discussion with @akhenry and @dtailor90:

List of complex content objects to be opt-out, and maintained within the Layout plugin.

@dtailor90 to address.

…icate code

akhenry · 2019-01-22T19:52:02Z

Changes look good to me. Thanks!

charlesh88 and others added 9 commits December 20, 2018 17:20

Layout mods for SO editing without is-drilled-in

f738327

- Mods to c-frame-edit__move element styling; - Added object name to frame title;

Remove drilled-in logic

7e5db50

add complex-content class implementation for objects with complex views

6594384

Merge branch 'layout-editing' of https://github.com/nasa/openmct into…

388d62a

… layout-editing

Set frame title by reading domain object name directly.

3072cbb

Remove frame title

c92a736

Significant mods for sub-object editing

59c1b78

- Removed is-drilled-in classes; - Solidified styles for c-frame-edit* and fixed it so it no longer blocks interior selection; - Properly handle .has-complex-content; - TODO: display layout grid on s-selected and s-selected-parent;

Added missing description for DisplayLayoutType

e366cf8

charlesh88 requested review from larkin, deeptailor and psarram January 4, 2019 22:35

charlesh88 added 2 commits January 8, 2019 13:28

Merge branch 'topic-core-refactor' into layout-editing

f4009ec

Fixed border styling for frame elements while editing

bb0196b

- Both Display and Flexible Layouts;

charlesh88 removed request for larkin, deeptailor and psarram January 9, 2019 00:13

charlesh88 added 11 commits January 8, 2019 16:55

Layout editing frame enhancements WIP

9ca64e6

- Reorg of is-editing styles; - Show frame move bar on hover, regardless of s-selected; - Hide frame move bar when resizing; - TODO: figure out why move bar transition is only enabled when s-selected is applied to holder;

Layout editing frame enhancements WIP

4fea8e6

- Functionality now as desired; - Refinements to move bar display anim and timing; - TODOs: -- Code cleanup; -- Now seeing a problem where the drop target Flex layout remains visible after moving sub-objects between columns.

Toolbar styling, edit colors WIP

c094dcb

- Toolbar now with color bg for better tie-in with edit area visually; - Edit colors refined for Snow theme, WIP; - Tweak to c-click-icon styling

Code cleanup

2e4476a

Elements pool drag grippy now uses same style as Layouts

5a600c3

Sanding and fixes for Display and Flexible Layout editing styles

7517532

- CSS cleanups; - Hover and selected styling;

Theme parity

6a403db

- Brought back pushBack and pullForward functions to allow light and dark themes to be more similar; - Maelstrom and Snow themes brought into parity with Espresso;

Merge branch 'topic-core-refactor' into layout-editing

a29684e

charlesh88 requested review from psarram and larkin January 16, 2019 00:27

charlesh88 requested a review from akhenry January 16, 2019 00:27

psarram reviewed Jan 18, 2019

View reviewed changes

akhenry requested changes Jan 18, 2019

View reviewed changes

charlesh88 and others added 3 commits January 18, 2019 13:40

Merge latest TCR, resolve conflicts

c9e05fb

Added handling for unknown object types

ce4b6da

simplify complexContent, keep it local to ObjectFrame and delete dupl…

98895e8

…icate code

akhenry approved these changes Jan 22, 2019

View reviewed changes

akhenry merged commit 8ef53d8 into topic-core-refactor Jan 22, 2019

akhenry deleted the layout-editing branch January 22, 2019 19:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

R&I Layout editing mods #2256

R&I Layout editing mods #2256

charlesh88 commented Jan 4, 2019 •

edited

Loading

psarram left a comment •

edited

Loading

psarram Jan 18, 2019

psarram Jan 18, 2019

charlesh88 Jan 18, 2019

psarram Jan 18, 2019

charlesh88 Jan 18, 2019

akhenry left a comment

akhenry Jan 17, 2019

psarram Jan 18, 2019

akhenry Jan 22, 2019

akhenry Jan 18, 2019

charlesh88 Jan 18, 2019

akhenry commented Jan 22, 2019

R&I Layout editing mods #2256

R&I Layout editing mods #2256

Conversation

charlesh88 commented Jan 4, 2019 • edited Loading

Changes

Author Checklist

psarram left a comment • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akhenry 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

akhenry commented Jan 22, 2019

charlesh88 commented Jan 4, 2019 •

edited

Loading

psarram left a comment •

edited

Loading