mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 13:43:09 +00:00
Added drag to enable edit mode
This commit is contained in:
parent
5382cca435
commit
92573b817f
@ -20,6 +20,7 @@
|
||||
"$scope",
|
||||
"$route",
|
||||
"$location",
|
||||
"$q",
|
||||
"objectService",
|
||||
"navigationService",
|
||||
"urlService"
|
||||
@ -34,7 +35,7 @@
|
||||
{
|
||||
"key": "BrowseObjectController",
|
||||
"implementation": "BrowseObjectController.js",
|
||||
"depends": [ "$scope", "$location", "$route" ]
|
||||
"depends": [ "$scope", "$location", "$route", "$q" ]
|
||||
},
|
||||
{
|
||||
"key": "CreateMenuController",
|
||||
@ -62,6 +63,7 @@
|
||||
{
|
||||
"key": "browse-object",
|
||||
"templateUrl": "templates/browse-object.html",
|
||||
"gestures": ["drop"],
|
||||
"uses": [ "view" ]
|
||||
},
|
||||
{
|
||||
|
@ -20,13 +20,8 @@
|
||||
at runtime from the About dialog for additional information.
|
||||
-->
|
||||
<div ng-init="
|
||||
editMode = false;
|
||||
editBtns = [{ cssclass: 'save',title: 'Save Changes' },{ cssclass: 'cancel',title: 'Discard Changes' }];
|
||||
"></div>
|
||||
<a class="s-btn"
|
||||
style="opacity: 0.9; position:absolute; right: 250px; z-index: 100"
|
||||
ng-class="{ major:!editMode }"
|
||||
ng-click="editMode = !editMode">Set EditMode to {{!editMode}}</a>
|
||||
<span ng-controller="BrowseObjectController">
|
||||
<div class="object-browse-bar bar l-flex">
|
||||
<div class="items-select left">
|
||||
@ -50,23 +45,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-object-wrapper"
|
||||
<div class="l-object-wrapper edit-main"
|
||||
ng-class="{ active:editMode }">
|
||||
<div class="l-object-wrapper-inner l-flex flex-col">
|
||||
<!-- Toolbar and Save/Cancel buttons -->
|
||||
<div class="l-edit-controls flex-elem l-flex flex-row"
|
||||
ng-class="{ active:editMode }">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<mct-toolbar name="mctToolbar"
|
||||
structure="toolbar.structure"
|
||||
ng-model="toolbar.state"
|
||||
class="flex-elem grow">
|
||||
</mct-toolbar>
|
||||
<!-- from toolbar.html -->
|
||||
<!-- <mct-toolbar-x class="flex-elem grow">
|
||||
<!--<mct-toolbar-x class="flex-elem grow">
|
||||
<form novalidate>
|
||||
<div class="tool-bar btn-bar contents abs">
|
||||
<span class="l-control-group">
|
||||
@ -75,17 +67,17 @@
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
</mct-toolbar-x>-->
|
||||
</mct-toolbar-x> -->
|
||||
|
||||
|
||||
|
||||
|
||||
<mct-representation key="'edit-action-buttons'"
|
||||
<!--<mct-representation key="'edit-action-buttons'"
|
||||
mct-object="domainObject"
|
||||
class='flex-elem conclude-editing'>
|
||||
</mct-representation>
|
||||
</mct-representation> -->
|
||||
<!-- from edit-action-buttons.html -->
|
||||
<!-- <span>
|
||||
<!--<span>
|
||||
<span ng-repeat="btn in editBtns">
|
||||
<a class='s-btn t-{{btn.cssclass}}'
|
||||
title='{{btn.title}}'
|
||||
|
@ -26,8 +26,11 @@
|
||||
* @namespace platform/commonUI/browse
|
||||
*/
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
[
|
||||
'../../../representation/src/gestures/GestureConstants',
|
||||
'../../edit/src/objects/EditableDomainObject'
|
||||
],
|
||||
function (GestureConstants, EditableDomainObject) {
|
||||
"use strict";
|
||||
|
||||
var ROOT_ID = "ROOT",
|
||||
@ -43,7 +46,7 @@ define(
|
||||
* @memberof platform/commonUI/browse
|
||||
* @constructor
|
||||
*/
|
||||
function BrowseController($scope, $route, $location, objectService, navigationService, urlService) {
|
||||
function BrowseController($scope, $route, $location, $q, objectService, navigationService, urlService) {
|
||||
var path = [ROOT_ID].concat(
|
||||
($route.current.params.ids || DEFAULT_PATH).split("/")
|
||||
);
|
||||
@ -71,7 +74,9 @@ define(
|
||||
// Callback for updating the in-scope reference to the object
|
||||
// that is currently navigated-to.
|
||||
function setNavigation(domainObject) {
|
||||
$scope.navigatedObject = domainObject;
|
||||
var navigatedDomainObject = domainObject;
|
||||
|
||||
$scope.navigatedObject = navigatedDomainObject;
|
||||
$scope.treeModel.selectedObject = domainObject;
|
||||
navigationService.setNavigation(domainObject);
|
||||
updateRoute(domainObject);
|
||||
@ -148,12 +153,14 @@ define(
|
||||
|
||||
// Also listen for changes which come from the tree
|
||||
$scope.$watch("treeModel.selectedObject", setNavigation);
|
||||
|
||||
|
||||
// Clean up when the scope is destroyed
|
||||
$scope.$on("$destroy", function () {
|
||||
navigationService.removeListener(setNavigation);
|
||||
});
|
||||
|
||||
|
||||
$scope.editMode = false;
|
||||
|
||||
}
|
||||
|
||||
return BrowseController;
|
||||
|
@ -22,8 +22,9 @@
|
||||
/*global define,Promise*/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
['../../../representation/src/gestures/GestureConstants',
|
||||
'../../edit/src/objects/EditableDomainObject'],
|
||||
function (GestureConstants, EditableDomainObject) {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
@ -32,8 +33,9 @@ define(
|
||||
* @memberof platform/commonUI/browse
|
||||
* @constructor
|
||||
*/
|
||||
function BrowseObjectController($scope, $location, $route) {
|
||||
function BrowseObjectController($scope, $location, $route, $q) {
|
||||
function setViewForDomainObject(domainObject) {
|
||||
|
||||
var locationViewKey = $location.search().view;
|
||||
|
||||
function selectViewIfMatching(view) {
|
||||
@ -64,9 +66,24 @@ define(
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function toggleEditMode(editMode){
|
||||
var domainObject = $scope.domainObject;
|
||||
if (editMode){
|
||||
$scope.domainObject = domainObject && new EditableDomainObject(domainObject, $q);
|
||||
} else {
|
||||
$scope.domainObject = (domainObject.getDomainObject && domainObject.getDomainObject) || domainObject;
|
||||
}
|
||||
}
|
||||
|
||||
$scope.$watch('editMode', toggleEditMode);
|
||||
$scope.$watch('domainObject', setViewForDomainObject);
|
||||
$scope.$watch('representation.selected.key', updateQueryParam);
|
||||
|
||||
$scope.$on(GestureConstants.MCT_DROP_EVENT, function() {
|
||||
$scope.editMode = true;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return BrowseObjectController;
|
||||
|
@ -101,6 +101,10 @@ define(
|
||||
new Factory(capability, editableObject, domainObject, cache) :
|
||||
capability;
|
||||
};
|
||||
|
||||
editableObject.getDomainObject = function() {
|
||||
return domainObject;
|
||||
}
|
||||
|
||||
return editableObject;
|
||||
}
|
||||
|
@ -31,7 +31,6 @@
|
||||
mct-object="childObject">
|
||||
</mct-representation>
|
||||
</div>
|
||||
|
||||
<!-- Drag handles -->
|
||||
<span ng-show="domainObject.hasCapability('editor')">
|
||||
|
||||
|
@ -98,7 +98,7 @@ define(
|
||||
// If currently in edit mode allow drag and drop gestures to the
|
||||
// domain object. An exception to this is folders which have drop
|
||||
// gestures in browse mode.
|
||||
if (domainObjectType === 'folder' || domainObject.hasCapability('editor')) {
|
||||
//if (domainObjectType === 'folder' || domainObject.hasCapability('editor')) {
|
||||
|
||||
// Handle the drop; add the dropped identifier to the
|
||||
// destination domain object's composition, and persist
|
||||
@ -108,7 +108,7 @@ define(
|
||||
broadcastDrop(id, event);
|
||||
});
|
||||
}
|
||||
}
|
||||
//}
|
||||
// TODO: Alert user if drag and drop is not allowed
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user