added containers; drag on top of widgets to set a custom container

public/src/forum/admin/themes.js

@@ -135,18 +135,34 @@ define(['forum/admin/settings'], function(Settings) {
 	}
 
 	Themes.prepareWidgets = function() {
-		$('#widgets .panel').draggable({
+		$('#widgets .available-widgets .panel').draggable({
 			helper: function(e) {
 				return $(e.target).parents('.panel').clone().addClass('block').width($(e.target.parentNode).width());
 			},
 			connectToSortable: ".widget-area"
 		});
 
+		$('#widgets .available-containers .containers > [data-container]').draggable({
+			helper: function(e) {
+				var target = $(e.target);
+				target = target.attr('data-container') ? target : target.parents('[data-container]');
+
+				return target.clone().addClass('block').width(target.width()).css('opacity', '0.5');
+			}
+		});
+
 		function appendToggle(el) {
 			if (!el.hasClass('block')) {
 				el.addClass('block')
+					.droppable({
+						drop: function(event, ui) {
+							$(this).find('.panel-heading small').html(ui.draggable.attr('data-container'));
+						},
+						hoverClass: "panel-info"
+					})
 					.children('.panel-heading')
-						.append('<div class="pull-right pointer"><span class="delete-widget"><i class="fa fa-times-circle"></i></span>&nbsp;<span class="toggle-widget"><i class="fa fa-chevron-down"></i></span></div>');
+						.append('<div class="pull-right pointer"><span class="delete-widget"><i class="fa fa-times-circle"></i></span>&nbsp;<span class="toggle-widget"><i class="fa fa-chevron-down"></i></span></div>')
+						.children('small').html('');
 			}
 		}
 

public/templates/admin/themes.tpl

@@ -54,9 +54,20 @@
 			<h3>Widgets</h3>
 
 			<div class="row">
-				<div class="col-xs-6 available-widgets">
+				<div class="col-xs-6 pull-right">
+					<!-- BEGIN areas -->
+					<div class="area">
+						<h4>{areas.name} <small>{areas.template} / {areas.location}</small> <button data-template="{areas.template}" data-location="{areas.location}" class="btn btn-success btn-xs pull-right">Save</button></h4>
+						<div class="well widget-area">
+
+						</div>
+					</div>
+					<!-- END areas -->
+				</div>
+				<div class="col-xs-6 pull-left">
+					<div class="available-widgets">
 						<h4>Available Widgets</h4>
-					<div class="well">
+						<div>
 							<!-- BEGIN widgets -->
 							<div data-widget="{widgets.widget}" class="panel panel-default pointer">
 								<div class="panel-heading">
@@ -72,15 +83,25 @@
 						</div>
 					</div>
 
-				<div class="col-xs-6">
-					<!-- BEGIN areas -->
-					<div class="area">
-						<h4>{areas.name} <small>{areas.template} / {areas.location}</small> <button data-template="{areas.template}" data-location="{areas.location}" class="btn btn-success btn-xs pull-right">Save</button></h4>
-						<div class="well widget-area">
-
+					<div class="available-containers">
+						<h4>Available Containers</h4>
+						<div class="containers">
+							<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container=" ">
+								None
+							</div>
+							<div class="well pointer" data-container="well">
+								Well
+							</div>
+							<div class="panel panel-default pointer" data-container="panel">
+								<div class="panel-heading">
+									Panel Header
+								</div>
+								<div class="panel-body">
+									Panel Body
+								</div>
+							</div>
 						</div>
 					</div>
-					<!-- END areas -->
 				</div>
 			</div>
 		</div>