Styling and replace static help to guide tour

src/apps/callflows/app.js

@@ -20,7 +20,8 @@ define(function(require){
 		'./submodules/vmbox/vmbox',
 		'./submodules/featurecodes/featurecodes',
 		'./submodules/temporalset/temporalset',
-		'./submodules/callcenter/callcenter'
+		'./submodules/callcenter/callcenter',
+		'bootstraptour'
 	]);
 
 	var app = {
@@ -147,12 +148,81 @@ define(function(require){
 						.append(callflowsTemplate);
 
 					container.find('.search-query').focus();
-
 					self.hackResize(callflowsTemplate);
+
+					if($('.js-callflows-list .list-element').length === 0) {
+						self.initGuideTour();
+					}
 				}
 			});
 		},
 
+		initGuideTour: function() {
+			var self = this;
+			var i18n = self.i18n.active();
+
+			self.tour = new Tour({
+				name: 'callflow-guide',
+				backdrop: true,
+				debug: true,
+				template: '' +
+					'<div class="popover tour">' +
+						'<div class="arrow"></div>' +
+						'<h3 class="popover-title"></h3>' +
+						'<div class="popover-content"></div>' +
+						'<div class="popover-navigation">' +
+							'<button class="btn btn-default" data-role="next">' +
+								i18n.callflows.guide.nextBtnText +
+							'</button>' +
+							'<button class="btn btn-default" data-role="end">' +
+								i18n.callflows.guide.endTourBtnText +
+							'</button>' +
+						'</div>' +
+					'</div>',
+				steps: [
+					{
+						element: '.js-callflow-edition .js-list-add',
+						placement: 'right',
+						content: i18n.callflows.guide.addCallflow,
+						onShown: function (tour) {
+							$('.popover').find('[data-role="prev"]').remove();
+						},
+						onNext: function (tour) {
+							$('.js-callflow-edition .js-list-add').click();
+						}
+					},
+					{
+						element: '#ws_callflow .js-add-number',
+						placement: 'bottom',
+						content: i18n.callflows.guide.addNumber,
+						onShown: function (tour) {
+							$('.popover').find('[data-role="prev"]').remove();
+						},
+						onNext: function (tour) {
+							$('#ws_callflow .js-add-number').click();
+							tour.end();
+						}
+					},
+					{
+						element: '#ws_cf_tools > div',
+						placement: 'left',
+						content: i18n.callflows.guide.dragAndDropAction,
+						onShown: function (tour) {
+							$('.popover').find('[data-role="next"],[data-role="prev"]').remove();
+						}
+					}
+				]});
+
+			self.tour.init();
+			if(self.tour.ended()) {
+				self.tour.restart();
+			}
+
+			if(self.tour.getCurrentStep() !== 0) {
+				self.tour.goTo(0);
+			}
+		},
+
 		bindCallflowsEvents: function(template, container) {
 			var self = this,
 				callflowList = template.find('.list-container .list'),
@@ -173,6 +243,17 @@ define(function(require){
 						.addClass('edition-mode');
 
 				self.editCallflow();
+
+				if($('.js-callflows-list .list-element').length === 0) {
+					if(self.tour.ended()) {
+						self.tour.restart();
+					}
+					if(self.tour.getCurrentStep() !== 1) {
+						self.tour.goTo(1);
+					}
+				} else {
+					delete self.tour;
+				}
 			});
 
 			// Edit Callflow
@@ -910,7 +991,7 @@ define(function(require){
 
 			delete self.original_flow; // clear original_flow
 
-			$('#callflow-view .callflow_help').hide();
+			$('.js-callflow-intro').hide();
 
 			self.resetFlow();
 
@@ -1390,6 +1471,9 @@ define(function(require){
 					}
 
 					$('.number_column.empty', node_html).click(function() {
+						if(self.tour) {
+							self.tour.end();
+						}
 						self.listNumbers(function(phoneNumbers) {
 							var parsedNumbers = [];
 
@@ -1479,6 +1563,16 @@ define(function(require){
 									popup.dialog('close');
 
 									self.repaintFlow();
+
+									if(self.tour
+										&& $('#ws_callflow .number_column').not('.js-add-number').length === 1) {
+										if(self.tour.ended()) {
+											self.tour.restart();
+										}
+										if(self.tour.getCurrentStep() !== 2) {
+											self.tour.goTo(2);
+										}
+									}
 								}
 								else {
 									monster.ui.alert(self.i18n.active().oldCallflows.you_didnt_select);
@@ -1772,6 +1866,9 @@ define(function(require){
 						$(this).addClass('inactive');
 					},
 					drag: function () {
+						if(self.tour) {
+							self.tour.end();
+						}
 						$('.callflow_helpbox_wrapper', '#callflow-view').hide();
 					},
 					stop: function () {

src/apps/callflows/i18n/en-US.json

@@ -1130,6 +1130,15 @@
 			"thereIsCurrentlyNoUser": "There is currently no user in this queue",
 			"userLabel": "Users list",
 			"selectQueue": "Select Queue"
+		},
+		"introTitle": "What is Callflow?",
+		"introDescription": "A callflow defines what happens when someone dials an extension or phone number.",
+		"guide": {
+			"addCallflow": "Click this button to create new callflow",
+			"addNumber": "Click this button to add phone or extension number into callflow <br/>When someone dials these number, they will behave according to the way you set up the callflow in the next step.",
+			"dragAndDropAction": "Drag actions from the actions panel to the callflow box. You can customize a callflow by adding more actions. <div class='callflows-drag-and-drop'></div>",
+			"nextBtnText": "Next »",
+			"endTourBtnText": "Close"
 		}
 	},
 	"oldCallflows": {

src/apps/callflows/style/app.css

@@ -10,6 +10,7 @@
 @import url('../submodules/featurecodes/featurecodes.css');
 @import url('../submodules/temporalset/temporalset.css');
 @import url('../submodules/callcenter/callcenter.css');
+@import url('../../../css/vendor/bootstrap-tour.css');
 /* style.css */
 #ws_callflow > .callflow {
 	float: left;
@@ -20,7 +21,7 @@
 }
 
 #ws_callflow .callflow .root > .top_bar {
-	background: #22A5FF;
+	background: #0081D6;
 	height: 25px;
 	text-align: left;
 	border-radius: 6px 6px 0 0;
@@ -43,16 +44,12 @@
 }
 
 #ws_callflow .callflow .root > .content .number_row {
-	background-image: url(static/images/nav_line_horizontal.jpg);
-	background-position: bottom;
-	background-repeat: repeat-x;
-	height: 32px;
-	background-color: #303039;
+	height: 30px;
+	background: #0081D6;
+	border-top: 1px solid white;
 }
 
 #ws_callflow .callflow .root > .content .number_row:last-child {
-	background: none;
-	background-color: #303039;
 	height: 30px;
 	border-radius: 0px 0px 2px 2px;
 }
@@ -69,15 +66,13 @@
 }
 
 #ws_callflow .callflow .root > .content .number_column.full {
-	width: 312px;
+	width: 100%;
 	text-align: center;
 }
 
 #ws_callflow .callflow .root > .content .number_column.second {
-	width: 163px;
-	background-image: url(static/images/nav_line.jpg);
-	background-position: left;
-	background-repeat: repeat-y;
+	width: 162px;
+	border-left: 1px solid white;
 }
 
 #ws_callflow .callflow .root > .content .number_column.first {
@@ -85,10 +80,15 @@
 }
 
 #ws_callflow .callflow .root > .content .number_column.empty {
-	color: #A0A0A0;
+	color: white;
 	cursor: default;
 }
 
+#ws_callflow .callflow .root > .content .number_column.add-number {
+	cursor: pointer;
+	background: #22A5FF;
+}
+
 #ws_callflow .callflow .root > .content .number_column .delete {
 	background-image: url(static/images/btn_delete.png);
 	background-repeat: no-repeat;
@@ -103,10 +103,6 @@
 	cursor: pointer;
 }
 
-#ws_callflow .callflow .root > .content .number_column .delete:hover {
-	background-image: url(static/images/btn_delete_blue.png);
-}
-
 #ws_callflow .callflow .node {
 	display: inline-block;
 	cursor: -moz-grab;
@@ -129,10 +125,7 @@
 	right: 0px;
 	padding: 5px;
 	cursor: pointer;
-}
-
-#ws_callflow .callflow .node .node-options .delete:hover {
-	background-image: url(static/images/btn_delete_blue.png);
+	color: #555;
 }
 
 #ws_callflow .tool .fa {
@@ -142,7 +135,7 @@
 
 #ws_callflow .tools .category {
 	text-align: center;
-	background: #22A5FF;
+	background: #0081D6;
 	background-position: top center;
 	cursor: default;
 	border-bottom: 1px solid white;
@@ -150,7 +143,7 @@
 
 #ws_callflow .tools .category .content {
 	background-color: white;
-	border: 1px solid #22A5FF;
+	border: 1px solid #0081D6;
 	padding: 1px 0px 3px;
 }
 
@@ -187,7 +180,7 @@
 }
 
 #ws_callflow .tools .inactive .open:hover {
-	background: #0081D6;
+	background: #22A5FF;
 }
 
 #ws_callflow .tools .inactive .open::before {
@@ -224,15 +217,16 @@
 	z-index: 19;
 	height: 53px;
 	border-radius: 6px;
-	background: #22A5FF;
+	background: #0081D6;
 	color: white;
-	border: 1px solid #22A5FF;
+	border: 1px solid #0081D6;
 	padding-top: 7px;
+	width: 76px;
 }
 
 #ws_callflow .tools .tool .action:hover {
-	background: #0081D6;
-	border: 1px solid #0081D6;
+	background: #22A5FF;
+	border: 1px solid #22A5FF;
 }
 
 #ws_callflow .tools .app_list_nav {
@@ -240,9 +234,9 @@
 }
 
 #ws_callflow .callflow .icons_black.node {
-	width: 143px;
+	width: 132px;
 	height: 84px;
-	background: #303039;
+	background: #0081D6;
 	border-radius: 6px;
 }
 
@@ -319,19 +313,20 @@
 }
 
 #ws_callflow .a_link_option {
-	color: #EEE;
-	font-size: 12px;
+	color: white;
+	font-size: 17px;
+	display: block;
+	padding: 2px 0;
 }
 
 #ws_callflow .div_option {
 	display: inline-block;
-	height: 15px;
-	line-height: 15px;
+	line-height: 1;
 	width: 131px;
-	background-color: #474747;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #303030;
+	background-color: #22A5FF;
+	margin: 0 0 2px;
+	padding: 2px 0;
+	border: 1px solid #22A5FF;
 	border-radius: 2px;
 }
 
@@ -492,16 +487,13 @@
 	overflow: visible;
 }
 
-#callflow_container .callflow-help, .popup_help .callflow-help {
-	background: url(static/images/callflow_help.gif) no-repeat center;
-	height: 644px;
-	width: 847px;
-	margin: 20px auto auto;
-	border-radius: 10px;
+#callflow_container .callflow-intro {
+	padding: 0 0 0 40px;
 }
 
-#callflow_container .callflow-content.edition-mode .callflow-help {
-	display: none;
+#callflow_container .callflow-intro .callflow-intro-title {
+	font-weight: normal;
+	font-size: 23px;
 }
 
 #callflow_container .callflow-content.listing-mode #ws_callflow {
@@ -598,8 +590,8 @@
 }
 
 #ws_callflow .tools .search-box {
-	border-left: 1px solid #22A5FF;
-	border-right: 1px solid #22A5FF;
+	border-left: 1px solid #0081D6;
+	border-right: 1px solid #0081D6;
 	position: relative;
 }
 
@@ -636,7 +628,7 @@
 }
 
 #ws_callflow .title {
-	background: #22A5FF;
+	background: #0081D6;
 	font-size: 15px;
 	height: 25px;
 	line-height: 25px;
@@ -648,7 +640,8 @@
 
 #callflow_container .wrapper_callflow_buttons {
 	display: block;
-	width: 322px;
+	width: 100%;
+	text-align: center;
 	margin: auto;
 	margin-bottom: 5px;
 }
@@ -657,7 +650,7 @@
 	width: 114px;
 	text-align: center;
 	display: inline-block;
-	margin-left: 0px;
+	margin-left: 0;
 }
 
 #callflow_container .wrapper_callflow_buttons .monster-button:first-child {
@@ -703,13 +696,13 @@
 }
 
 @-webkit-keyframes pulse-box {
-	0% { box-shadow: 0px 0px 0px #0081D6 inset, 0px 0px 0px #0081D6; }
-	100% { box-shadow: 0px 0px 30px #0081D6 inset, 0px 0px 10px #0081D6; }
+	0% { box-shadow: 0px 0px 0px #09DB4B inset, 0px 0px 0px #09DB4B; }
+	100% { box-shadow: 0px 0px 30px #09DB4B inset, 0px 0px 10px #09DB4B; }
 }
 
 @keyframes pulse-box {
-	0% { box-shadow: 0px 0px 0px #0081D6 inset, 0px 0px 0px #0081D6; }
-	100% { box-shadow: 0px 0px 30px #0081D6 inset, 0px 0px 10px #0081D6; }
+	0% { box-shadow: 0px 0px 0px #09DB4B inset, 0px 0px 0px #09DB4B; }
+	100% { box-shadow: 0px 0px 30px #09DB4B inset, 0px 0px 10px #09DB4B; }
 }
 
 /* JR's customization */
@@ -1644,14 +1637,14 @@
 .callflows-port .monster-button-success,
 #callflow_container .monster-button-success {
 	color: white;
-	border-color: #22A5FF;
-	background: #22A5FF;
+	border-color: #09A74B;
+	background: #09A74B;
 }
 
 .callflows-port .monster-button-success:hover,
 #callflow_container .monster-button-success:hover {
-	border-color: #0081D6;
-	background: #0081D6;
+	border-color: #18B65A;
+	background: #18B65A;
 }
 
 .callflows-port .items-selector .box-selector .item-selector {
@@ -1748,3 +1741,21 @@
 	background: transparent;
 	color: #22A5FF;
 }
+
+.callflows-drag-and-drop {
+	width: 285px;
+	height: 148px;
+	background: url('static/images/callflows-drag-and-drop.gif') no-repeat;
+}
+
+
+/*
+ * Bootstrap guide tour - override styles
+ */
+.popover[class*="tour-"] {
+	min-width: 350px;
+}
+
+.tour-backdrop {
+	opacity: 0.6;
+}

src/apps/callflows/views/callflow-manager.html

@@ -4,11 +4,11 @@
 			<i class="fa fa-search"></i>
 			<input type="text" class="search-query" placeholder="{{ i18n.search }}">
 		</div>
-		<div class="list-add">
+		<div class="js-list-add list-add">
 			<i class="fa fa-plus-circle fa-lg"></i>
 			<span>{{ i18n.callflows.addCallflow }}</span>
 		</div>
-		<div class="list-container clearfix">
+		<div class="js-callflows-list list-container clearfix">
 			<ul class="list"></ul>
 		</div>
 	</div>
@@ -32,7 +32,12 @@
 		</div>
 		<div class="callflow-view clearfix">
 			<div class="real-content"> 
-				<div class="callflow-help"/>
+				<div class="js-callflow-intro callflow-intro">
+					<h2 class="callflow-intro-title">
+						{{ i18n.callflows.introTitle }}
+					</h2>
+					<p>{{ i18n.callflows.introDescription }}</p>
+				</div>
 
 				<div id="ws_callflow" class="clearfix">
 					<div class="tools">

src/apps/callflows/views/layout.html

@@ -38,5 +38,5 @@
 			<div class="entity-content"></div>
 		</div>
 	</div>
-	<div class="callflow-edition callflow-app-section"></div>
+	<div class="js-callflow-edition callflow-edition callflow-app-section"></div>
 </div>

src/apps/callflows/views/rowNumber.html

@@ -39,9 +39,9 @@
 				{{/compare}}
 				<span class="delete"/>
 			</div>
-			<div class="number_column empty second">{{ i18n.oldCallflows.click_to_add_number }}</div>
+			<div class="js-add-number number_column empty second add-number">{{ i18n.oldCallflows.click_to_add_number }}</div>
 		{{else}}
-			<div class="number_column empty full">{{ i18n.oldCallflows.click_to_add_number }}</div>
+			<div class="js-add-number number_column empty full add-number">{{ i18n.oldCallflows.click_to_add_number }}</div>
 		{{/if}}
 	{{/if}}
 	<div class="clear"/>

src/css/vendor/bootstrap-tour.css

@@ -0,0 +1,55 @@
+/* ========================================================================
+ * bootstrap-tour - v0.11.0
+ * http://bootstraptour.com
+ * ========================================================================
+ * Copyright 2012-2015 Ulrich Sossou
+ *
+ * ========================================================================
+ * Licensed under the MIT License (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================================
+ */
+
+.tour-backdrop {
+  position: absolute;
+  z-index: 1100;
+  background-color: #000;
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+.popover[class*="tour-"] {
+  z-index: 1102;
+}
+.popover[class*="tour-"] .popover-navigation {
+  padding: 9px 14px;
+  overflow: hidden;
+}
+.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
+  float: right;
+}
+.popover[class*="tour-"] .popover-navigation *[data-role="prev"],
+.popover[class*="tour-"] .popover-navigation *[data-role="next"],
+.popover[class*="tour-"] .popover-navigation *[data-role="end"] {
+  cursor: pointer;
+}
+.popover[class*="tour-"] .popover-navigation *[data-role="prev"].disabled,
+.popover[class*="tour-"] .popover-navigation *[data-role="next"].disabled,
+.popover[class*="tour-"] .popover-navigation *[data-role="end"].disabled {
+  cursor: default;
+}
+.popover[class*="tour-"].orphan {
+  position: fixed;
+  margin-top: 0;
+}
+.popover[class*="tour-"].orphan .arrow {
+  display: none;
+}