added jumbotron, alert widgets + color picker for alert and panel

public/src/forum/admin/themes.js

@@ -263,6 +263,25 @@ define(['forum/admin/settings'], function(Settings) {
 				}
 			}
 		});
+
+		$('.color-selector').on('click', '.btn', function() {
+			var btn = $(this),
+				selector = btn.parents('.color-selector'),
+				container = selector.parents('[data-container-html]'),
+				classList = [];
+
+			selector.children().each(function() {
+				classList.push($(this).attr('data-class'));
+			});
+
+			container
+				.removeClass(classList.join(' '))
+				.addClass(btn.attr('data-class'));
+
+			container.attr('data-container-html', container.attr('data-container-html')
+				.replace(/class="[a-zA-Z0-9-\s]+"/, 'class="' + container[0].className.replace(' pointer ui-draggable', '') + '"')
+			);
+		});
 	};
 
 	return Themes;

public/templates/admin/themes.tpl

@@ -98,11 +98,29 @@
 							<div class="panel panel-default pointer" data-container-html='<div class="panel panel-default"><div class="panel-heading">{title}</div><div class="panel-body">{body}</div></div>'>
 								<div class="panel-heading">
 									Panel Header
+									<div class="pull-right color-selector">
+										<button data-class="panel-default" class="btn btn-xs">&nbsp;&nbsp;</button>
+										<button data-class="panel-primary" class="btn btn-xs btn-primary">&nbsp;&nbsp;</button>
+										<button data-class="panel-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
+										<button data-class="panel-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
+										<button data-class="panel-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
+										<button data-class="panel-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
+									</div>
 								</div>
 								<div class="panel-body">
 									Panel Body
 								</div>
 							</div>
+
+							<div class="alert alert-info pointer" data-container-html='<div class="alert alert-info">{body}</div>'>
+								Alert
+								<div class="pull-right color-selector">
+									<button data-class="alert-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
+									<button data-class="alert-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
+									<button data-class="alert-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
+									<button data-class="alert-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>