From e28589bea811dbedac5846fdad2ac76020510324 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Thu, 20 Feb 2014 19:22:34 -0500
Subject: [PATCH] added jumbotron, alert widgets + color picker for alert and
 panel

---
 public/src/forum/admin/themes.js  | 19 +++++++++++++++++++
 public/templates/admin/themes.tpl | 18 ++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/public/src/forum/admin/themes.js b/public/src/forum/admin/themes.js
index 0e33f70cc2..a3b22983b1 100644
--- a/public/src/forum/admin/themes.js
+++ b/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;
diff --git a/public/templates/admin/themes.tpl b/public/templates/admin/themes.tpl
index ac84011d44..c7a3f3e6f1 100644
--- a/public/templates/admin/themes.tpl
+++ b/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>