openmct/platform/commonUI
Pegah Sarram e7cdb334de Reimplementation of Display Layout in Vue (#2185)
* Saving work

* Fix conflict

* Position the panels by setting the style

* Put the div back with height set to 100% in ObjectView.
Add markup for  drag handles.

* Use default position and dimensions if the layout panel is missing those values. Set s-status-editing on the main div to get the drag handles appear for now.

* Display Layout and frames major improvements

- Moved Toolbar out of Layout.vue and into DisplayLayout.vue;
- Styles for object view, Layout, Frame, etc.
- Major refactor of markup for frame;
- Added abs() mixin;
- Styles for is-editing done;
- Styles for
- TODO: styles for selectable, moveable, etc.

* Implement drill in gesture.

* Hide the background grid when a frame is drilled in

* Edit styling and toolbar WIP

- c-search styles moved mostly into mixin;
- New .c-labeled-input class;
- Browser overrides for number-type input spinners in webkit;

* Toolbar WIP

- Custom wrapped number input added;
- Toolbar buttons WIP;

* New toolbar buttons WIP

* Define a computed property for the css class object.

* Frame edit handles markup and styling

* Toolbar, editing and selection style refinements

- Moved toolbar back into Layout.vue;
- Hard-coded 'is-editing' onto __pane-main for now,
removed from DisplayLayout.vue;
- Styles for frame in LayoutFrame.vue:
-- editing default (dotted border)
-- editing .s-selected
-- .s-drilled-in (renamed .is-drilled-in)

* Refactoring button classes

- Lots of stuff broken right now;
- TODO: lots of renaming (c-menu-button, c-icon-button, etc.);
- Removed import of _controls in search.vue;

* Fixes for selection on nested selected elements

* Fix conflict

* Significant refactoring of button and click-icon classes

- Markup and CSS updated;
- Toolbar in good shape, prior to merge of vue-layout;

* Fix issues with relative font-sizing

* Add color palette markup and CSS

- Also added Layers menu example;

* Font, font-size glyphs and size menu, and more

- Added art for font glyph and renamed from .icon-T;
- Added new glyph for font-size;
- Fixed font-sizing in controls;
- Added font-size menu;
- Re-org'd toolbar items;

* Styling tweak for c-labeled-input

- Code cleanup as well;

* Fixes for toolbar toggleMenus and labeledNumberInput

* Implement resize and move for frames.
Added stub for drag 'n drop.

* Add custom checkbox control.

- Also, code cleanup.

* Add toggleButton component

- Code and examples

* Custom checkbox code cleanups, sanding

* - Persist new position/dimensions on the domain object when frames are moved/resized.
- Bypass the selection of the layout when dragging a frame is finished to keep the frame selected.
- Set the grid size to layoutGrid from domain object or use default if it's not specified.

* Fix conflict

* Implement resize and move for frames.
Added stub for drag 'n drop.

* Remove old layout view, was triggering View Switcher
and massive confusion when viewing Layouts

- TODO: add view provider for new Layout

* Enable drag and drop

* Changed example toggle-button

- Now uses show/hide frame as toggle-button example;

* Added pseudocode for handling drag/drop composition change

* Add copyright notice

* Layout frame and contained components styling

- Hyperlinks, Hyperlink buttons, Summary Widgets now use `.u-links`
which disables their pointer-events when editing;
- Hyperlink buttons, Summary Widgets now expand to fill their
containers in a Layout;
- Markup and JS for Hyperlinks, Hyperlink buttons, Summary Widgets
somewhat
modded to use new classing, applied in legacy scss files;

* Fix icon sizing error in BrowseBar

* Edit and selecting styling for Layouts

- WIP!

* Edit and selecting styling for Layout frames

- Color vars more standardized;
- Hover and *-selected styles;

* Getting vue-toolbar reverted back to latest

- Merging this branch with vue-layout may cause conflicts;

* - Implement drag ’n drop.
- Set hasFrame to a default value if it’s not set on the configuration.
- Emit an event to the parent wrapper component to update the ‘newDomainObject’ prop whenever the domain object is mutated in the display layout child component.

* Revert emitting 'update:object' event to the parent.

* New branch from topic-core-refactor to use as central point for common
CSS work

- Manually migrated changes from vue-toolbar, expect conflicts there and
 in vue-layout;

* Manually update constants-snow from vue-toolbar branch

* Update markup to use latest button classnames

- c-menu-button > c-button--menu;
- c-icon-button > c-click-icon;

* Various from vue-conductor-style

- Mods to input styling;
- Input[] styles moved to _controls;
- New/revised constants vals;

* Resolve bizarre merge conflict when applying stash

* Code cleanup

* Alias and type-icon fixes

- More robust approach to alias indicators;
- Added alias indication to tree-item.vue;
- TODO: wire up alias indication tree-item.vue;

* Accessibility mods, convert elements to <button>

- Better reset styles for htmlInputReset mixin to allow use of <button>
without browser default styling;
- Create button;
- BrowseBar action buttons;
- c-click-icons;
- Removed Preview button from BrowseBar.vue;

* Fix styles that were affected during resolving conflicts

* Moved draggable into __label element rather than whole <li>

* Change the priority to 100 to get the view working properly

* Code cleanup

* Remove angular layout

* Display the object name in the frame header

* Tweaks to __header in LayoutFrame

- Name now does not overflow frame edge;
- Layout strategy now in parity with similar elements in main view;

* Remove test()

* Add a type for display layout to make it appear in the Create menu.

* Change the key type to 'layout'

* Clean up code and hide toolbar

* Enable toolbar, and revert changes in webpack config

* Remove commented code

* revert to the original code
2018-10-04 15:59:23 -07:00
..
about Build refactor to webpack (#2139) 2018-08-07 14:47:50 -07:00
browse Reimplementation of Display Layout in Vue (#2185) 2018-10-04 15:59:23 -07:00
dialog Build refactor to webpack (#2139) 2018-08-07 14:47:50 -07:00
edit Vue tables followup work. (#2162) 2018-09-11 11:03:32 -07:00
formats Review and integrate Time Conductor Vue style conversion (#2180) 2018-10-02 17:31:45 -07:00
general Squashed commit of the following: 2018-08-31 12:03:15 -07:00
inspect Build refactor to webpack (#2139) 2018-08-07 14:47:50 -07:00
mobile Build refactor to webpack (#2139) 2018-08-07 14:47:50 -07:00
notification Build refactor to webpack (#2139) 2018-08-07 14:47:50 -07:00
regions Squashed commit of the following: 2018-08-31 12:03:15 -07:00
README.md [Licenses] Update copyright year to 2017 2017-04-05 14:52:46 -07:00

This directory contains bundles containing common user interface elements of Open MCT; that is, the user interface for the application as a whole (as opposed to for specific features) is implemented here.

Extensions

This bundles adds a stylesheets extension category used to inject CSS from bundles. These extensions are declaration-only (no scripted implementation is needed or used); a single property, stylesheetUrl, should be provided, with a path to the relevant CSS file (including extension) relative to the resources directory for that bundle.

Links to these CSS files are appended to the head when the application is started. These are added in standard priority order (see documentation for the framework layer); the order of inclusion of style sheets can change the way they are handled/understood by the browser, so priority can be used to provide control over this order.