Merge pull request #5324 from RocketChat/discard-button

add discard button

client/helpers/log.js

@@ -1,3 +1,3 @@
-Template.registerHelper('log', function() {
+Template.registerHelper('log', () => {
 	console.log.apply(console, arguments);
 });

client/helpers/not.js

@@ -0,0 +1,3 @@
+Template.registerHelper('not', (value) => {
+	return !value;
+});

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;

packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less

@@ -20,6 +20,17 @@
 @code-border-color: #cccccc;
 @code-font-color: #333333;
 
+/** ----------------------------------------------------------------------------
+ * Transparency variables
+ */
+
+@transparent-darkest: rgba(0, 0, 0, 0.5);
+@transparent-darker: rgba(0, 0, 0, 0.15);
+@transparent-dark: rgba(0, 0, 0, 0.05);
+@transparent-light: rgba(255, 255, 255, 0.1);
+@transparent-lighter: rgba(255, 255, 255, 0.3);
+@transparent-lightest: rgba(255, 255, 255, 0.6);
+
 /** ----------------------------------------------------------------------------
  * Document components
  */
@@ -872,18 +883,38 @@ i.status-offline {
 
 	&.primary {
 		.buttonColors(@primary-action-contrast, @primary-action-color);
+
+		&[disabled] {
+			background-color: lighten(desaturate(@primary-action-color, 50%), 30%);
+		}
 	}
 
 	&.secondary {
 		.buttonColors(@secondary-action-contrast, @secondary-action-color);
+
+		&[disabled] {
+			background-color: lighten(desaturate(@secondary-action-color, 50%), 30%);
+		}
 	}
 
 	&.tertiary {
 		.buttonColors(@primary-action-contrast, @selection-color);
+
+		&[disabled] {
+			background-color: lighten(desaturate(@selection-color, 50%), 30%);
+		}
 	}
 
 	&.danger {
 		.buttonColors(@error-contrast, @error-color);
+
+		&[disabled] {
+			background-color: lighten(desaturate(@error-color, 50%), 30%);
+		}
+	}
+
+	&[disabled] {
+		cursor: initial;
 	}
 
 	&.external-login {

packages/rocketchat-theme/server/variables.coffee

@@ -9,7 +9,7 @@
 # New colors, used for shades on solid backgrounds
 # Defined range of transparencies reduces random colour variances
 alphaColors=
-  'transparent-darkest': 'rgba(0,0,0,0.5)' 
+  'transparent-darkest': 'rgba(0,0,0,0.5)'
   'transparent-darker': 'rgba(0,0,0,0.15)'
   'transparent-dark': 'rgba(0,0,0,0.05)'
   'transparent-light': 'rgba(255,255,255,0.10)'
@@ -48,8 +48,6 @@ minorColors=
 # Bulk-add settings for color scheme
 for key, value of majorColors
   RocketChat.theme.addPublicColor key, value, 'Colors'
-for key, value of alphaColors
-  RocketChat.theme.addPublicColor key, value, 'Colors (alphas)'
 for key, value of minorColors
   RocketChat.theme.addPublicColor key, value, 'Colors (minor)', 'expression'
 

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')
 

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}}

server/startup/migrations/v076.js

@@ -0,0 +1,10 @@
+RocketChat.Migrations.add({
+	version: 76,
+	up: function() {
+		if (RocketChat && RocketChat.models && RocketChat.models.Settings) {
+			RocketChat.models.Settings.find({section: 'Colors (alphas)'}).forEach((setting) => {
+				RocketChat.models.Settings.remove({ _id: setting._id });
+			});
+		}
+	}
+});