Mathijs den Burger pushed to branch master at cms-community /
hippo-addon-channel-manager
Commits:
ca800659 by Arthur Bogaart at 2016-06-06T16:29:15+02:00
CHANNELMGR-700 Drag menu-editor item by card title
- Removed default ui-tree-handle directive from hippo-tree and place it on the
md-card-title element
- Aligned drag/drop cursor with other places where we support drag/drop (use
cursor: drag and cursor:dragging in normal browsers, use cursor:move in IE)
- - - - -
06f2bbe7 by Mathijs den Burger at 2016-06-06T17:22:02+02:00
CHANNELMGR-700 Reintegrate bugfix/CHANNELMGR-700
- - - - -
4 changed files:
- frontend-ng/src/angularjs/channel/menu/editor.controller.js
- frontend-ng/src/angularjs/channel/menu/editor.html
- frontend-ng/src/angularjs/channel/menu/tree/items.renderer.html
- frontend-ng/src/styles/_tree.scss
Changes:
=====================================
frontend-ng/src/angularjs/channel/menu/editor.controller.js
=====================================
--- a/frontend-ng/src/angularjs/channel/menu/editor.controller.js
+++ b/frontend-ng/src/angularjs/channel/menu/editor.controller.js
@@ -28,6 +28,7 @@ export class MenuEditorCtrl {
this.PickerService = PickerService;
this.isSaving = {};
+ this.isDragging = false;
SiteMenuService.loadMenu(this.menuUuid)
.then((menu) => {
@@ -51,6 +52,12 @@ export class MenuEditorCtrl {
});
this.treeOptions = {
+ dragStart: () => {
+ this.isDragging = true;
+ },
+ dragStop: () => {
+ this.isDragging = false;
+ },
dropped: (event) => {
const source = event.source;
const sourceNodeScope = source.nodeScope;
=====================================
frontend-ng/src/angularjs/channel/menu/editor.html
=====================================
--- a/frontend-ng/src/angularjs/channel/menu/editor.html
+++ b/frontend-ng/src/angularjs/channel/menu/editor.html
@@ -27,13 +27,16 @@
data-options="menuEditor.treeOptions"
data-selected-item="menuEditor.selectedItem"
data-draggable="true"
+ ng-class="{
+ 'hippo-tree-is-dragging': menuEditor.isDragging,
+ }"
flex>
<form name="form"
flex
ng-submit="form.$valid && menuEditor.saveItem()"
novalidate>
<md-card scroll-to-if="menuEditor.editingItem == item">
- <md-card-title class="no-padding" ng-class="{active:
menuEditor.selectedItem.id === item.id}">
+ <md-card-title ui-tree-handle class="no-padding" ng-class="{active:
menuEditor.selectedItem.id === item.id}">
<md-card-title-text>
<div class="md-headline" layout="row" layout-align="space-between
center">
<div layout="row" layout-align="start center">
=====================================
frontend-ng/src/angularjs/channel/menu/tree/items.renderer.html
=====================================
--- a/frontend-ng/src/angularjs/channel/menu/tree/items.renderer.html
+++ b/frontend-ng/src/angularjs/channel/menu/tree/items.renderer.html
@@ -13,7 +13,7 @@
- See the License for the specific language governing permissions and
- limitations under the License.
-->
-<div ui-tree-handle ng-click="hippoTree.selectItem(item)">
+<div ng-click="hippoTree.selectItem(item)">
<div hippo-tree-template></div>
</div>
<ol ui-tree-nodes
=====================================
frontend-ng/src/styles/_tree.scss
=====================================
--- a/frontend-ng/src/styles/_tree.scss
+++ b/frontend-ng/src/styles/_tree.scss
@@ -43,6 +43,7 @@
.angular-ui-tree-drag {
border-radius: $tree-border-radius;
box-sizing: border-box;
+ cursor: grabbing;
filter: alpha(opacity=90);
opacity: 0.9;
pointer-events: none;
@@ -54,8 +55,18 @@
.angular-ui-tree-handle {
.drag-enabled & {
cursor: move;
+ cursor: grab;
}
- cursor: pointer;
+
+ .hippo-tree-is-dragging & {
+ cursor: move;
+ cursor: grabbing;
+ }
+}
+
+.hippo-tree-is-dragging {
+ cursor: move;
+ cursor: grabbing;
}
.has-styling {
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/compare/5bc12c8b336724a43d3dc4dfd685d2ae5b5f2467...06f2bbe745bc099d022be616aa007cf96ff8a42a
_______________________________________________
Hippocms-svn mailing list
Hippocms-svn@lists.onehippo.org
https://lists.onehippo.org/mailman/listinfo/hippocms-svn
