From 39ee0924a693e145d72cdf91dc691fc386b60b9b Mon Sep 17 00:00:00 2001
From: Diego Sampaio <chinello@gmail.com>
Date: Wed, 16 Dec 2015 15:25:43 -0200
Subject: [PATCH] appearance settings

---
 .../client/stylesheets/livechat.less          | 13 +++
 packages/rocketchat-livechat/client/ui.js     |  2 +-
 .../client/views/app/livechatAppearance.html  | 95 +++++++++++--------
 .../client/views/app/livechatAppearance.js    | 56 +++++++++++
 .../client/views/app/livechatUsers.html       |  4 +-
 .../client/views/sideNav/livechatFlex.html    |  2 +-
 .../client/views/sideNav/livechatFlex.js      |  1 +
 .../rocketchat-livechat/i18n/en.i18n.json     |  1 +
 8 files changed, 133 insertions(+), 41 deletions(-)

diff --git a/packages/rocketchat-livechat/client/stylesheets/livechat.less b/packages/rocketchat-livechat/client/stylesheets/livechat.less
index c147598884f..dc12fb153ec 100644
--- a/packages/rocketchat-livechat/client/stylesheets/livechat.less
+++ b/packages/rocketchat-livechat/client/stylesheets/livechat.less
@@ -71,9 +71,22 @@
 	margin-bottom: 1em;
 }
 
+.livechat-settings-div, .livechat-preview-div {
+	width: 50%;
+	float: left;
+	height: 95%;
+	margin-bottom: 0 !important;
+	padding: 1em;
+}
+
+.livechat-settings-div {
+	border-right: 1px solid #CCC;
+}
+
 .livechat-preview {
 	width: 340px;
 	height: 350px;
+	margin: 0 auto;
 
 	border-bottom: 1px solid #CCC;
 	position: relative;
diff --git a/packages/rocketchat-livechat/client/ui.js b/packages/rocketchat-livechat/client/ui.js
index fd53097ea58..f23b438a912 100644
--- a/packages/rocketchat-livechat/client/ui.js
+++ b/packages/rocketchat-livechat/client/ui.js
@@ -20,7 +20,7 @@ RocketChat.roomTypes.add('l', 5, {
 AccountBox.addItem({
 	name: 'Livechat',
 	icon: 'icon-chat-empty',
-	href: 'livechat-dashboard',
+	href: 'livechat-users',
 	sideNav: 'livechatFlex',
 	permissions: ['view-livechat-manager'],
 });
diff --git a/packages/rocketchat-livechat/client/views/app/livechatAppearance.html b/packages/rocketchat-livechat/client/views/app/livechatAppearance.html
index bb7c79f8226..d6b03dd458d 100644
--- a/packages/rocketchat-livechat/client/views/app/livechatAppearance.html
+++ b/packages/rocketchat-livechat/client/views/app/livechatAppearance.html
@@ -1,47 +1,68 @@
 <template name="livechatAppearance">
-	<h1>{{_ "Preview"}}</h1>
+	<div class="livechat-settings-div">
+		<h2>{{_ "Settings"}}</h2>
 
-	<select class="preview-mode">
-		<option value="opened">{{_ "Opened"}}</option>
-		<option value="closed">{{_ "Closed"}}</option>
-	</select>
+		<form class="rocket-form">
+			<div class="input-line">
+				<label for="title">{{_ "Title"}}</label>
+				<input type="text" class="preview-settings" name="title" value="{{title}}">
+			</div>
+			<div class="input-line">
+				<label for="color">{{_ "Title_bar_color"}}</label>
+				<input type="text" class="preview-settings minicolors" name="color" value="{{color}}">
+			</div>
+			<div class="submit">
+				<button class="button secondary reset-settings"><i class="icon-ccw"></i>{{_ "Reset"}}</button>
+				<button class="button"><i class="icon-floppy"></i>{{_ "Save"}}</button>
+			</div>
+		</form>
+	</div>
+
+	<div class="livechat-preview-div">
+		<h2>{{_ "Preview"}}</h2>
+
+		<select class="preview-mode">
+			<option value="opened">{{_ "Opened"}}</option>
+			<option value="closed">{{_ "Closed"}}</option>
+		</select>
 
-	<div class="livechat-preview {{previewState}}">
-		<div class="preview-wrapper">
-			{{#with sampleData}}
-				<div class="livechat-room">
-					<div class="title" style="background-color:{{color}}">
-						<div class="toolbar">
-							&nbsp;
-							<i class="popout icon-link-ext" title="Open in a new window"></i>
+		<div class="livechat-preview {{previewState}}">
+			<div class="preview-wrapper">
+				{{#with sampleData}}
+					<div class="livechat-room">
+						<div class="title" style="background-color:{{color}}">
+							<div class="toolbar">
+								&nbsp;
+								<i class="popout icon-link-ext" title="Open in a new window"></i>
+							</div>
+							<h1>{{title}}</h1>
 						</div>
-						<h1>{{title}}</h1>
-					</div>
-					<div class="messages">
-						<div class="wrapper">
-							<ul>
-								{{#each messages}}
-									<li id="{{_id}}" class="message {{sequential}}" data-username="{{u.username}}" data-date="{{date}}">
-										<span class="thumb thumb-small" href="#" data-username="{{u.username}}" tabindex="1">{{> avatar username=u.username}}</span>
-										<span class="user" href="#" data-username="{{u.username}}" tabindex="1">{{u.username}}</span>
-										<span class="info">
-											<span class="time">{{time}}</span>
-										</span>
-										<div class="body" dir="auto">
-											{{{body}}}
-										</div>
-									</li>
-								{{/each}}
-							</ul>
+						<div class="messages">
+							<div class="wrapper">
+								<ul>
+									{{#each messages}}
+										<li id="{{_id}}" class="message {{sequential}}" data-username="{{u.username}}" data-date="{{date}}">
+											<span class="thumb thumb-small" href="#" data-username="{{u.username}}" tabindex="1">{{> avatar username=u.username}}</span>
+											<span class="user" href="#" data-username="{{u.username}}" tabindex="1">{{u.username}}</span>
+											<span class="info">
+												<span class="time">{{time}}</span>
+											</span>
+											<div class="body" dir="auto">
+												{{{body}}}
+											</div>
+										</li>
+									{{/each}}
+								</ul>
+							</div>
 						</div>
-					</div>
-					<div class="footer">
-						<div class="input-wrapper">
-							<textarea class="input-message" placeholder="Type your message"></textarea>
+						<div class="footer">
+							<div class="input-wrapper">
+								<textarea class="input-message" placeholder="Type your message"></textarea>
+							</div>
 						</div>
 					</div>
-				</div>
-			{{/with}}
+				{{/with}}
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/packages/rocketchat-livechat/client/views/app/livechatAppearance.js b/packages/rocketchat-livechat/client/views/app/livechatAppearance.js
index ebf00aa531c..a8415b6be65 100644
--- a/packages/rocketchat-livechat/client/views/app/livechatAppearance.js
+++ b/packages/rocketchat-livechat/client/views/app/livechatAppearance.js
@@ -2,6 +2,12 @@ Template.livechatAppearance.helpers({
 	previewState () {
 		return Template.instance().previewState.get();
 	},
+	color () {
+		return Template.instance().color.get();
+	},
+	title () {
+		return Template.instance().title.get();
+	},
 	sampleData () {
 		return {
 			color: RocketChat.settings.get('Livechat_title_color'),
@@ -74,10 +80,60 @@ Template.livechatAppearance.helpers({
 
 Template.livechatAppearance.onCreated(function() {
 	this.previewState = new ReactiveVar('opened');
+
+	this.title = new ReactiveVar(null);
+	this.color = new ReactiveVar(null);
+
+	this.autorun(() => {
+		this.title.set(RocketChat.settings.get('Livechat_title'));
+	});
+	this.autorun(() => {
+		this.color.set(RocketChat.settings.get('Livechat_title_color'));
+	});
 });
 
 Template.livechatAppearance.events({
 	'change .preview-mode' (e, instance) {
 		instance.previewState.set(e.currentTarget.value);
+	},
+	'change .preview-settings, keyup .preview-settings' (e, instance) {
+		instance[e.currentTarget.name].set(e.currentTarget.value);
+	},
+	'click .reset-settings' (e, instance) {
+		e.preventDefault();
+
+		instance.title.set(RocketChat.settings.get('Livechat_title'));
+		instance.color.set(RocketChat.settings.get('Livechat_title_color'));
+
+		instance.$('input.preview-settings[name=color]').minicolors('value', instance.color.get());
+	},
+	'submit .rocket-form' (e, instance) {
+		e.preventDefault();
+
+		var settings = [
+			{
+				_id: 'Livechat_title',
+				value: instance.title.get()
+			},
+			{
+				_id: 'Livechat_title_color',
+				value: instance.color.get()
+			}
+		];
+		RocketChat.settings.batchSet(settings, (err, success) => {
+			if (err) {
+				return toastr.error(t('Error_updating_settings'));
+			}
+			toastr.success(t('Settings_updated'));
+		});
 	}
 })
+
+Template.livechatAppearance.onRendered(function() {
+	Meteor.setTimeout(() => {
+		$('input.minicolors').minicolors({
+			theme: 'rocketchat',
+			letterCase: 'uppercase'
+		});
+	}, 500);
+});
diff --git a/packages/rocketchat-livechat/client/views/app/livechatUsers.html b/packages/rocketchat-livechat/client/views/app/livechatUsers.html
index ebc48630388..9bdb3f99dbd 100644
--- a/packages/rocketchat-livechat/client/views/app/livechatUsers.html
+++ b/packages/rocketchat-livechat/client/views/app/livechatUsers.html
@@ -27,7 +27,7 @@
 						<td>{{name}}</td>
 						<td>{{username}}</td>
 						<td>{{emailAddress}}</td>
-						<td><a href="#remove" class="remove-manager"><i class="icon-block"></i></a></td>
+						<td><a href="#remove" class="remove-manager"><i class="icon-trash"></i></a></td>
 					</tr>
 				{{/each}}
 			</tbody>
@@ -61,7 +61,7 @@
 						<td>{{name}}</td>
 						<td>{{username}}</td>
 						<td>{{emailAddress}}</td>
-						<td><a href="#remove" class="remove-agent"><i class="icon-block"></i></a></td>
+						<td><a href="#remove" class="remove-agent"><i class="icon-trash"></i></a></td>
 					</tr>
 				{{/each}}
 			</tbody>
diff --git a/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.html b/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.html
index 69a48249e3b..a859f5385a5 100644
--- a/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.html
+++ b/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.html
@@ -8,7 +8,7 @@
 		<div class="wrapper">
 			<ul class="flex-list">
 				<li>
-					<a href="{{pathFor 'livechat-dashboard'}}" class="{{active 'livechat-dashboard'}}">{{_ "Dashboard"}}</a>
+					<!-- <a href="{{pathFor 'livechat-dashboard'}}" class="{{active 'livechat-dashboard'}}">{{_ "Dashboard"}}</a> -->
 					<a href="{{pathFor 'livechat-users'}}" class="{{active 'livechat-users'}}">{{_ "User_management"}}</a>
 					<a href="{{pathFor 'livechat-departments'}}" class="{{active 'livechat-departments'}}">{{_ "Departments"}}</a>
 					<a href="{{pathFor 'livechat-triggers'}}" class="{{active 'livechat-triggers'}}">{{_ "Triggers"}}</a>
diff --git a/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.js b/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.js
index ff277d3d909..4e2578cea84 100644
--- a/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.js
+++ b/packages/rocketchat-livechat/client/views/sideNav/livechatFlex.js
@@ -1,5 +1,6 @@
 Template.livechatFlex.helpers({
 	active (route) {
+		FlowRouter.watchPathChange();
 		if (FlowRouter.current().route.name === route) {
 			return 'active';
 		}
diff --git a/packages/rocketchat-livechat/i18n/en.i18n.json b/packages/rocketchat-livechat/i18n/en.i18n.json
index a9a11219987..d64d472d807 100644
--- a/packages/rocketchat-livechat/i18n/en.i18n.json
+++ b/packages/rocketchat-livechat/i18n/en.i18n.json
@@ -42,6 +42,7 @@
   "Theme" : "Theme",
   "There_are_no_agents_added_to_this_department_yet" : "There are no agents added to this department yet.",
   "Time_in_seconds": "Time in seconds",
+  "Title_bar_color": "Title bar color",
   "To_install_RocketChat_Livechat_in_your_website_copy_paste_this_code_above_the_last_body_tag_on_your_site": "To install Rocket.Chat Livechat in your website, copy &amp; paste this code above the last <strong>&lt;/body&gt;</strong> tag on your site.",
   "Trigger_removed": "Trigger removed",
   "Triggers": "Triggers",