Fancy categories input with bootstrap-tagsinput

4 files changed, 40 insertions, 36 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index 1e9930443..7a5ffc2f7 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -8,9 +8,7 @@ code {
 
 /* jot */
 
-#jot-title,
-#jot-category,
-#jot-pagetitle {
+.jothidden input {
 	border: 0px;
 	margin: 0px;
 	padding: 8px;
diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index ff8b54c55..f28f9aa8d 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -11,6 +11,7 @@ head_add_css('library/colorbox/colorbox.css');
 head_add_css('view/css/conversation.css');
 head_add_css('view/css/widgets.css');
 head_add_css('library/justifiedGallery/dist/css/justifiedGallery.css');
+head_add_css('library/bootstrap-tagsinput/bootstrap-tagsinput.css');
 
 head_add_js('jquery.js');
 head_add_js('jquery-migrate-1.1.1.js');
@@ -41,6 +42,7 @@ head_add_js('crypto.js');
 head_add_js('library/jslider/bin/jquery.slider.min.js');
 head_add_js('docready.js');
 head_add_js('library/colorbox/jquery.colorbox-min.js');
+head_add_js('library/bootstrap-tagsinput/bootstrap-tagsinput.js');
 
 /**
  * Those who require this feature will know what to do with it.
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 382bed90e..961572652 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1746,44 +1746,23 @@ img.mail-list-sender-photo {
 	max-width: $converse_width;
 }
 
-#jot-title,
-#jot-category,
-#jot-pagetitle {
+.jothidden {
 	font-weight: bold;
-	border: solid 1px #ffffff;
 	border-radius: $radiuspx;
 }
 
-#jot-category::-webkit-input-placeholder {
+.jothidden input::-webkit-input-placeholder {
 	font-weight: bold;
 }
 
-#jot-category:-moz-placeholder {
+.jothidden input::-moz-placeholder {
 	font-weight: bold;
 }
 
-#jot-title::-webkit-input-placeholder {
-	font-weight: bold;
-}
-
-#jot-title:-moz-placeholder {
-	font-weight: bold;
-}
-
-#jot-pagetitle::-webkit-input-placeholder {
-	font-weight: bold;
-}
-
-#jot-pagetitle:-moz-placeholder {
-	font-weight: bold;
+.jothidden >input, .jothidden >input {
+	border: 1px solid #fff;
 }
-
-#jot-title:hover,
-#jot-title:focus,
-#jot-pagetitle:hover,
-#jot-pagetitle:focus,
-#jot-category:hover,
-#jot-category:focus {
+.jothidden >input:hover, .jothidden >input:focus {
 	border: 1px solid #cccccc;
 }
 
@@ -2368,3 +2347,28 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
 .bb_observer img {
 	border: 3px solid red !important;
 }
+
+.bootstrap-tagsinput .tag:before {
+	/* Copied from icon-asterisk, is there a better way to do it? */
+	font-family: FontAwesome;
+	font-weight: normal;
+	font-style: normal;
+	text-decoration: inherit;
+	content:"\f069";
+}
+
+/* Modified original CSS to match input in Redbasic */
+.bootstrap-tagsinput {
+	border-color:#fff;
+	background-color: #fff;
+	box-shadow: none;
+	display: inline-block;
+	border-radius: $radiuspx;
+	cursor: text;
+	padding: 0 6px;
+	width: 70% !important;
+}
+
+.jothidden .bootstrap-tagsinput:hover, .jothidden .bootstrap-tagsinput:focus {
+	border: 1px solid #cccccc;
+}
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 34acce879..00ef77d93 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -19,17 +19,17 @@
 			<span class="channel-id-select-desc">{{$id_seltext}}</span> {{$id_select}}
 			</div>
 		{{/if}}
-		<div id="jot-title-wrap">
-			<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" value="{{$title}}" class="jothidden" style="display:none">
+		<div id="jot-title-wrap"  class="jothidden" style="display:none">
+			<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" value="{{$title}}">
 		</div>
 		{{if $catsenabled}}
-		<div id="jot-category-wrap">
-			<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" class="jothidden" style="display:none" />
+		<div id="jot-category-wrap"  class="jothidden" style="display:none">
+			<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" data-role="tagsinput"/>
 		</div>
 		{{/if}}
 		{{if $webpage}}
-		<div id="jot-pagetitle-wrap">
-			<input name="pagetitle" id="jot-pagetitle" type="text" placeholder="{{$placeholdpagetitle}}" value="{{$pagetitle}}" class="jothidden" style="display:none" />
+		<div id="jot-pagetitle-wrap" class="jothidden" style="display:none">
+			<input name="pagetitle" id="jot-pagetitle" type="text" placeholder="{{$placeholdpagetitle}}" value="{{$pagetitle}}"  />
 		</div>
 		{{/if}}
 		<div id="jot-text-wrap">