implement poll UI in jot

4 files changed, 72 insertions, 11 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index f7804f5dd..287d662ae 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -1,15 +1,18 @@
 
 /* jot */
+.jothidden {
+	display:none;
+}
 
-.jothidden input[type="text"] {
-	border: 0px;
-	margin: 0px;
-	height: 2.5rem;
-	width: 100%;
+.jot-poll-option {
+	position: relative;
 }
 
-.jothidden {
-	display:none;
+.poll-option-close {
+	position: absolute;
+	right: 0;
+	top: 0;
+	padding: 0.25rem 0 0.25rem 0.5rem;
 }
 
 #jot-title-wrap,
@@ -18,7 +21,8 @@
 	border-bottom: 1px solid rgba(0, 0, 0, .2);
 }
 
-#jot-attachment-wrap {
+#jot-attachment-wrap,
+#jot-poll-wrap {
 	border-top: 1px solid rgba(0, 0, 0, .2);
 }
 
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 3bee84378..1ababecfc 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1605,6 +1605,10 @@ dl.bb-dl > dd > li {
 	font-size: 100%;
 }
 
+.bootstrap-tagsinput input {
+	height: 2.5rem;
+}
+
 /* Abusing theme-green is less work than makeing a new new one */
 .theme-green .back-bar .selected-bar {
 	background-color: #000000;
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index 7b1f4ee05..d519fd666 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -58,6 +58,9 @@ var activeCommentText = '';
 		$('#id_mimetype').on('load', jotSetMime);
 		$('#id_mimetype').on('change', jotSetMime);
 
+		$('#jot-add-option').on('click', jotAddOption);
+		$(document).on('click', '.poll-option-close', jotRemoveOption);
+
 		function jotSetMime() { 
 			var mtype = $('#id_mimetype').val(); 
 			if(mtype == 'text/bbcode')
@@ -122,6 +125,7 @@ var activeCommentText = '';
 				activeCommentID = 0;
 			},
 		});
+
 	});
 
 	function deleteCheckedItems() {
@@ -309,6 +313,7 @@ var activeCommentText = '';
 	function itemCancel() {
 		$("#jot-title").val('');
 		$("#profile-jot-text").val('');
+		$(".jot-poll-option input").val('');
 		$("#jot-category").tagsinput('removeAll');
 
 		postSaveChanges('clean');
@@ -317,6 +322,7 @@ var activeCommentText = '';
 		$(".jothidden").hide();
 		$("#profile-jot-text").removeClass('jot-expanded');
 		$("#profile-jot-tools").addClass('d-none');
+		$("#jot-poll-wrap").addClass('d-none');
 		$("#jot-preview-content").html('').hide();
 		editor = false;
 		{{else}}
@@ -512,6 +518,19 @@ var activeCommentText = '';
 
     }
 
+	function initPoll() {
+		$('#jot-poll-wrap').toggleClass('d-none');
+	}
+
+	function jotAddOption() {
+		var option = '<div class="jot-poll-option form-group"><input class="w-100 border-0" name="poll_answers[]" type="text" value="" placeholder="Option"><div class="poll-option-close"><i class="fa fa-close"></i></div></div>';
+		$('#jot-poll-options').append(option);
+	}
+
+	function jotRemoveOption(e) {
+		$(this).closest('.jot-poll-option').remove();
+	}
+
 </script>
 
 <script>
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index b4616db6d..9f2860b2f 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -30,15 +30,15 @@
 
 		{{if $webpage}}
 		<div id="jot-pagetitle-wrap" class="jothidden">
-			<input name="pagetitle" id="jot-pagetitle" type="text" placeholder="{{$placeholdpagetitle}}" value="{{$pagetitle}}">
+			<input class="w-100 border-0" name="pagetitle" id="jot-pagetitle" type="text" placeholder="{{$placeholdpagetitle}}" value="{{$pagetitle}}">
 		</div>
 		{{/if}}
 		<div id="jot-title-wrap" class="jothidden">
-			<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" tabindex="1" value="{{$title}}">
+			<input class="w-100 border-0" name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" tabindex="1" value="{{$title}}">
 		</div>
 		{{if $catsenabled}}
 		<div id="jot-category-wrap" class="jothidden">
-			<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" data-role="cat-tagsinput">
+			<input class="w-100 border-0" name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" data-role="cat-tagsinput">
 		</div>
 		{{/if}}
 		<div id="jot-text-wrap">
@@ -59,6 +59,34 @@
 			<input class="jot-attachment" name="attachment" id="jot-attachment" type="text" value="{{$attachment}}" readonly="readonly" onclick="this.select();">
 		</div>
 		{{/if}}
+		<div id="jot-poll-wrap" class="p-2 d-none">
+			<div id="jot-poll-options">
+				<div class="jot-poll-option form-group">
+					<input class="w-100 border-0" name="poll_answers[]" type="text" value="" placeholder="Option">
+				</div>
+				<div class="jot-poll-option form-group">
+					<input class="w-100 border-0" name="poll_answers[]" type="text" value="" placeholder="Option">
+				</div>
+			</div>
+			{{include file="field_checkbox.tpl" field=$multiple_answers}}
+			<div id="jot-poll-tools" class="clearfix">
+				<div id="poll-tools-left" class="float-left">
+					<button id="jot-add-option" class="btn btn-outline-secondary btn-sm" type="button" title="" onclick="">
+						<i class="fa fa-plus"></i> Add option
+					</button>
+				</div>
+				<div id="poll-tools-right" class="float-right">
+					<div class="input-group">
+						<input type="text" name="poll_expire_value" class="form-control" value="10" size="3">
+						<select class="form-control" id="duration-select" name="poll_expire_unit">
+							<option value="Minutes">min</option>
+							<option value="Hours">h</option>
+							<option value="Days" selected="selected">d</option>
+						</select>
+					</div>
+				</div>
+			</div>
+		</div>
 		<div id="profile-jot-submit-wrapper" class="clearfix p-2 jothidden">
 			<div id="profile-jot-submit-left" class="btn-toolbar float-left">
 				{{if $bbcode}}
@@ -132,6 +160,11 @@
 						<i id="profile-voting" class="fa fa-square-o jot-icons"></i>
 					</button>
 				{{/if}}
+
+					<button type="button" id="profile-poll-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$poll}}" onclick="initPoll();">
+						<i id="profile-poll" class="fa fa-bar-chart jot-icons"></i>
+					</button>
+
 				{{if $feature_nocomment}}
 					<button id="profile-nocomment-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$nocommenttitle}}" onclick="toggleNoComment();return false;">
 						<i id="profile-nocomment" class="fa fa-comments jot-icons"></i>
@@ -176,6 +209,7 @@
 						{{if $feature_voting}}
 						<a class="dropdown-item" href="#" onclick="toggleVoting(); return false;"><i id="profile-voting-sub" class="fa fa-square-o"></i>&nbsp;{{$voting}}</a>
 						{{/if}}
+						<a class="dropdown-item" href="#" onclick="initPoll(); return false"><i id="profile-poll" class="fa fa-bar-chart jot-icons"></i>&nbsp;{{$poll}}</a>
 						{{if $feature_nocomment}}
 						<a class="dropdown-item" href="#" onclick="toggleNoComment(); return false;"><i id="profile-nocomment-sub" class="fa fa-comments"></i>&nbsp;{{$nocommenttitlesub}}</a>
 						{{/if}}