Fluid layouts 2 electric boogaloo (#2047)

* [Frontend] Viewport metatag updated

Fixes #2008
- Added shrink-to-fit=no;

* [Frontend] Fix to Time Conductor for Safari

Fixes #2008
- CSS mod for gradient blockers in TC

* [Frontend] Remove data visualization element in TC

Fixes #2008
- Note: this element holds the TOI indicator!

* [Frontend] Hide TC ticks when on mobile

Fixes #2008
- Added class `mobile-hide` to <conductor-axis>

* [Frontend] Significant mobile fixes for panes and viewport

Fixes #2008
Fixes #1770
Fixes #1928
- Left and right panes now positioning properly in mobile;
- Fixed body overflow problem for #2008 "viewport" issue;

* fixes multiple issues related to 2008
context menu firing too often - fixed by setting a isDragging flag
Add and Remove respective classes on mobile orientation change by using mathMedia
Close tree pane when navigating in mobile portrait only

* [Frontend] Various

Fixes #2008
- Always show Timeline zoom controls;
- Prevent inline editing of object names in the main view when in
mobile;

* Add touch functionality to mct-drag
it allows users to use the splitter in mobile
and include appropriate tests

* remove couchdb and reinstall localStorage

* [Frontend] Mods to imagery CSS

Fixes #2008
- Reduced size of image thumbnails;
- Changed min-heights of image and thumbnail
holders for .mobile.phone

* [Frontend] Add Advanced CSS property to Display Layouts

- WIP!
- Add property to bundle;
- Add CSS for column, row and fit-all classes;

* [Frontend] Grid holder and class prefixing

- WIP!
- Edit grid-holder set to position: absolute
- Added "fl-" prefix to fluid layout class names;

* [Frontend] More CSS tweaks

- WIP!

* [Frontend] Added .drag-vertical

- For use in Elements pool;
- Applied in elements.html;

* fix: check if stats is present before reseting zoom (#2029)

* [Timer] Fix regression in timer visual indication and add tests

* [TimeConductor] Fixes Issue #925 (#2020)

* [TimeConductor] Fixes Issue #925`
- Pressing enter in date field will update bounds properly in Safari

* [Copyright] Update copyright year across platform code references

Fixes #2034.

* fixes issue #1999 - Use Object name as default export filename (#2001)

* fixes issue #1999
add dynamic name(object name) to exportAsCSV filename

* make requested changes

* [Frontend] Add Advanced CSS property to Display Layouts

- WIP!
- Add property to bundle;
- Add CSS for column, row and fit-all classes;

* [Frontend] Grid holder and class prefixing

- WIP!
- Edit grid-holder set to position: absolute
- Added "fl-" prefix to fluid layout class names;

* [Frontend] More CSS tweaks

- WIP!

* [Frontend] Added .drag-vertical

- For use in Elements pool;
- Applied in elements.html;

* [Frontend] More CSS tweaks

- WIP!
- Added .fl-phone-best-fit

* working drag and switch, need to mutate

* fix conflict

* add ability to rearrange composition using drag gestures

* add maxHeight and maxWidth to layout frames

* [Frontend] Added fl-mobile-best-fit

* [Frontend] Allow editor to set mins dimensions for fluid layout

- Cleanups in CSS;
- Mod to LayoutController.js to use minWidth and minHeight;

* [Frontend] Styles for reordering in Elements pool

- Changed class "dragging" to "reordering";
- Visual styling WIP;
- TODO: style "reorder-actor" when implemented;

* add reorder-actor class to draggable item in elements pool when selected and remove class when dropped

* stacked plots reload on composition change

* [Frontend] Tweaks to Elements pool reordering styles

- "reorder-actor" added/removed from parent tree item;
- Refined styling for drag in process in list;

* [Frontend] Added new 12px list view glyph

- Font files and CSS updates;

* [Frontend] Added new 12px grippy glyph

- Font files and CSS updates for Elements pool sorting styling;

* fix failing test

* make reviewer requested changes

* remove create dialog from mobile
This commit is contained in:
Andrew Henry
2018-05-25 18:58:49 -07:00
committed by GitHub
parent c909831dd4
commit 08bed6c23a
17 changed files with 343 additions and 19 deletions

View File

@ -21,8 +21,8 @@
*****************************************************************************/
define(
[],
function () {
['zepto'],
function ($) {
/**
* The ElementsController prepares the elements view for display
@ -32,6 +32,10 @@ define(
function ElementsController($scope, openmct) {
this.scope = $scope;
this.scope.composition = [];
this.openmct = openmct;
this.dragDown = this.dragDown.bind(this);
this.dragUp = this.dragUp.bind(this);
var self = this;
function filterBy(text) {
@ -65,6 +69,7 @@ define(
self.refreshComposition(domainObject);
if (domainObject) {
self.mutationListener = domainObject.getCapability('mutation')
.listen(self.refreshComposition.bind(self, domainObject));
}
@ -76,11 +81,80 @@ define(
openmct.selection.on('change', setSelection);
setSelection(openmct.selection.get());
$scope.dragDown = this.dragDown;
$scope.drag = this.drag;
$scope.dragUp = this.dragUp;
$scope.$on("$destroy", function () {
openmct.selection.off("change", setSelection);
});
}
/**
* Invoked on DragStart - Adds reordering class to parent UL element
* Sets selected object ID, to be used on Drag End
*
* @param {object} event | Mouse Event
*/
ElementsController.prototype.dragDown = function (event) {
if (!this.parentUL) {
this.parentUL = $(document).find('#inspector-elements-tree');
}
this.selectedTreeItem = $(event.target).parent();
this.selectedObjectId = event.target.getAttribute('data-id');
this.parentUL.addClass('reordering');
this.selectedTreeItem.addClass('reorder-actor');
};
/**
* Invoked on dragEnd - Removes selected object from position in composition
* and replaces it at the target position. Composition is then updated with current
* scope
*
* @param {object} event - Mouse Event
*/
ElementsController.prototype.dragUp = function (event) {
this.targetObjectId = event.target.getAttribute('data-id');
if (this.targetObjectId && this.selectedObjectId) {
var selectedObjectPosition,
targetObjectPosition;
selectedObjectPosition = findObjectInCompositionFromId(this.selectedObjectId, this.scope.composition);
targetObjectPosition = findObjectInCompositionFromId(this.targetObjectId, this.scope.composition);
if ((selectedObjectPosition !== -1) && (targetObjectPosition !== -1)) {
var selectedObject = this.scope.composition.splice(selectedObjectPosition, 1),
selection = this.openmct.selection.get(),
domainObject = selection ? selection[0].context.oldItem : undefined;
this.scope.composition.splice(targetObjectPosition, 0, selectedObject[0]);
if (domainObject) {
domainObject.getCapability('mutation').mutate(function (model) {
model.composition = this.scope.composition.map(function (dObject) {
return dObject.id;
});
}.bind(this));
}
}
}
if (this.parentUL) {
this.parentUL.removeClass('reordering');
}
if (this.selectedTreeItem) {
this.selectedTreeItem.removeClass('reorder-actor');
}
};
ElementsController.prototype.drag = function (event) {
};
/**
* Gets the composition for the selected object and populates the scope with it.
*
@ -103,6 +177,21 @@ define(
}
};
/**
* Finds position of object with given ID in Composition
*
* @param {String} id
* @param {Array} composition
* @private
*/
function findObjectInCompositionFromId(id, composition) {
var mapped = composition.map(function (element) {
return element.id;
});
return mapped.indexOf(id);
}
return ElementsController;
}
);