From 368b3d85802425ab46865a44698c636ddaeabb5f Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Fri, 23 Dec 2016 16:32:00 -0200
Subject: [PATCH] change colorpicker behavior and add discard button

---
 .../assets/stylesheets/base.less              |  9 ++++
 .../rocketchat-ui-admin/admin/admin.coffee    | 42 +++++++++++++++++--
 packages/rocketchat-ui-admin/admin/admin.html | 14 ++++---
 3 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/packages/rocketchat-theme/assets/stylesheets/base.less b/packages/rocketchat-theme/assets/stylesheets/base.less
index 104288a5db4..093624a9ce6 100644
--- a/packages/rocketchat-theme/assets/stylesheets/base.less
+++ b/packages/rocketchat-theme/assets/stylesheets/base.less
@@ -1601,6 +1601,15 @@ label.required::after {
 		}
 	}
 
+	.submit {
+		display: flex;
+
+		.button {
+			white-space: nowrap;
+			margin-left: 1rem;
+		}
+	}
+
 	.animated-hidden {
 		visibility: hidden;
 		display: none;
diff --git a/packages/rocketchat-ui-admin/admin/admin.coffee b/packages/rocketchat-ui-admin/admin/admin.coffee
index e529d885a58..cb72284f66d 100644
--- a/packages/rocketchat-ui-admin/admin/admin.coffee
+++ b/packages/rocketchat-ui-admin/admin/admin.coffee
@@ -2,11 +2,10 @@ import toastr from 'toastr'
 TempSettings = new Meteor.Collection null
 RocketChat.TempSettings = TempSettings
 
-updateColorComponent = ->
-	$('input.minicolors').minicolors
+updateColorComponent = (input = $('input.minicolors')) ->
+	input.minicolors
 		theme: 'rocketchat'
-		format: 'rgb'
-		opacity: true
+		letterCase: 'uppercase'
 
 Template.admin.onCreated ->
 	if not RocketChat.settings.cachedCollectionPrivate?
@@ -273,6 +272,41 @@ Template.admin.events
 
 		Meteor.setTimeout updateColorComponent, 100
 
+	"click .submit .discard": ->
+		group = FlowRouter.getParam('group')
+
+		query =
+			group: group
+			changed: true
+
+		settings = TempSettings.find(query, {fields: {_id: 1, value: 1, editor: 1}}).fetch()
+
+		settings.forEach (setting) ->
+			oldSetting = RocketChat.settings.cachedCollectionPrivate.collection.findOne({"_id": setting._id})
+			input = $('.page-settings').find('[name="' + setting._id + '"]')
+
+			switch oldSetting.type
+				when 'boolean'
+					input.not(':checked').prop('checked', true).change()
+				when 'code'
+					input.next()[0].CodeMirror.setValue(oldSetting.value)
+				when 'color'
+					oldEditorColor = oldSetting.editor is 'color'
+					input.parents('.horizontal').find('select[name="color-editor"]').val(oldSetting.editor).change()
+
+					if oldEditorColor && setting.editor is 'color'
+						input.minicolors('value', oldSetting.value)
+					else
+						input.val(oldSetting.value).change()
+
+					if oldEditorColor
+						Meteor.setTimeout ->
+							updateColorComponent(input)
+						, 100
+
+				else
+					input.val(oldSetting.value).change()
+
 	"click .submit .save": (e, t) ->
 		group = FlowRouter.getParam('group')
 
diff --git a/packages/rocketchat-ui-admin/admin/admin.html b/packages/rocketchat-ui-admin/admin/admin.html
index e24eb9f0b5f..9fedc720141 100644
--- a/packages/rocketchat-ui-admin/admin/admin.html
+++ b/packages/rocketchat-ui-admin/admin/admin.html
@@ -5,6 +5,14 @@
 			<h2>
 				<span class="room-title">{{#with group}}{{label}}{{/with}}</span>
 			</h2>
+			{{#unless $eq group._id 'Assets'}}
+				<div class="submit">
+					{{#if hasChanges}}
+						<button class="button danger discard"><i class="icon-send"></i><span>{{_ "Cancel"}}</span></button>
+					{{/if}}
+					<button class="button primary save" disabled="{{not hasChanges}}"><i class="icon-send"></i><span>{{_ "Save_changes"}}</span></button>
+				</div>
+			{{/unless}}
 		</header>
 
 		<div class="content">
@@ -196,12 +204,6 @@
 										</div>
 									{{/if}}
 								{{/if}}
-
-								{{#if hasChanges section}}
-									<div class="submit">
-										<button class="button primary save"><i class="icon-send"></i><span>{{_ "Save_changes"}}</span></button>
-									</div>
-								{{/if}}
 							</div>
 						</div>
 					{{/each}}