Add basic UI front end code for drag/drop.

* Use jquery-ui.sortable to move elements. * Open folders have some extra height to allow you to drop items into them Needs Improvement * Placement is a bit fiddly

Author: peakpg

app/assets/javascripts/cms/new-sitemap.js

@@ -1,4 +1,5 @@
 //= require 'jquery'
+//= require 'jquery-ui'
 //= require 'bootstrap'
 //= require 'cms/ajax'
 
@@ -9,16 +10,16 @@ var GlobalMenu = function() {
 };
 
 // Setting the 'New Page' path should update the global menu
-GlobalMenu.prototype.addPagePath = function(path){
+GlobalMenu.prototype.addPagePath = function(path) {
  $('#new-content-button').attr('href', path);
  $('.add-page-button').attr('href', path);
 };
 
-GlobalMenu.prototype.addSectionPath = function(path){
+GlobalMenu.prototype.addSectionPath = function(path) {
  $('.add-link-button').attr('href', path);
 };
 
-GlobalMenu.prototype.addLinkPath = function(path){
+GlobalMenu.prototype.addLinkPath = function(path) {
  $('.add-section-button').attr('href', path);
 };
 
@@ -29,7 +30,7 @@ var Sitemap = function() {
 
 // @return [Selector] The currently selected section in the sitemap. If a page or other child is selected, this will be
 // that element's parent.
-Sitemap.prototype.currentSection = function(){
+Sitemap.prototype.currentSection = function() {
  return $(this.selectedSection);
 };
 
@@ -42,16 +43,15 @@ Sitemap.prototype.clearSelection = function() {
 };
 
 // Different Content types have different behaviors when double clicked.
-Sitemap.prototype._doubleClick = function(event){
+Sitemap.prototype._doubleClick = function(event) {
  var type = $(event.target).data('type');
- switch(type)
- {
- case 'section':
- case 'link':
- $('#properties-button')[0].click();
- break;
- default:
- $('#edit-button')[0].click();
+ switch(type) {
+ case 'section':
+ case 'link':
+ $('#properties-button')[0].click();
+ break;
+ default:
+ $('#edit-button')[0].click();
  }
 };
 
@@ -78,7 +78,7 @@ Sitemap.prototype.selectRow = function(row) {
 };
 
 // Configure the 'New' button for content that is added directly to sections.
-Sitemap.prototype.configureNewButton = function(){
+Sitemap.prototype.configureNewButton = function() {
  globalMenu.addPagePath(this.currentSection().data('add-page-path'));
  globalMenu.addLinkPath(this.currentSection().data('add-link-path'));
  globalMenu.addSectionPath(this.currentSection().data('add-section-path'));
@@ -145,6 +145,15 @@ $(function() {
  });
  $('.selectable').on('dblclick', sitemap._doubleClick);
  sitemap.clickWebsite();
+ $('#sitemap ul ul').sortable({
+ connectWith: '#sitemap ul ul',
+ placeholder: 'ui-placeholder',
+ delay: 250,
+ start: function(event, ui) {
+ sitemap.clearSelection();
+ }
+ });
+
 });
 
 // Change the folder icon when they are opened/closed.

app/assets/stylesheets/cms/sitemap.css.scss

@@ -68,6 +68,7 @@ body {
  margin-left: 28px;
 }
 
+
 #sitemap .phidden + i {
  margin-left: 10px;
 }
@@ -77,6 +78,16 @@ body {
  clear: both;
 }
 
+// Ensures open folders have a hitable drop target.
+ul.in { min-height:10px; }
+
+// Drop location for pages or sections within sitemap.
+.ui-placeholder {
+ background-color: #EE5F5B;
+ padding-right: 10px;
+ height: 30px;
+}
+
 
 
 

todo_ui_Revamp.md

@@ -1,5 +1,10 @@
 Tasks:
 
+- Move sitemap items
+-- Add ajax calls to move items.
+-- Need to expand sections as you pass over them.
+-- Need an image/section name for hover element when it leaves a parent section.
+
 ## UI Merge
 
 * Move/drag/drop sections
@@ -22,11 +27,19 @@ Tasks:
 * Implement search
 * Implement notifications
 
-## Developer Tasks
+## UI Open Issues
+
+Things that need to be updated in the CSS for the new UI.
+
+* Selecting a row in content tables have no visual indicator.
+* New button looks bad when you hover over it.
+* When viewing a page, the draft button is on the right (rather than left) [Bad Merge?]
+* Flash messages still don't look right.
+* Select boxes are not styled.
+* RTE drop down isn't styled correctly
+* Form pages need to be styled
 
-Style the following elements
 
-* Edit Properties popover (currently centered and too small text)
 
 # Points of Design Discussion