From 0467f3f0358c6eb8d8ee126a6f72c6327f7eb831 Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Thu, 26 Jan 2017 18:17:18 -0200
Subject: [PATCH 1/2] fix lag when typing on admin inputs

---
 .../rocketchat-ui-admin/admin/admin.coffee    |  30 +-
 packages/rocketchat-ui-admin/admin/admin.html | 422 +++++++++---------
 2 files changed, 226 insertions(+), 226 deletions(-)

diff --git a/packages/rocketchat-ui-admin/admin/admin.coffee b/packages/rocketchat-ui-admin/admin/admin.coffee
index 16158a92224..6a935a57925 100644
--- a/packages/rocketchat-ui-admin/admin/admin.coffee
+++ b/packages/rocketchat-ui-admin/admin/admin.coffee
@@ -3,7 +3,7 @@ TempSettings = new Meteor.Collection null
 RocketChat.TempSettings = TempSettings
 
 getDefaultSetting = (settingId) ->
-	return RocketChat.settings.cachedCollectionPrivate.collection.findOne({_id: settingId})
+	return RocketChat.settings.collectionPrivate.findOne({_id: settingId})
 
 setFieldValue = (settingId, value, type, editor) ->
 	input = $('.page-settings').find('[name="' + settingId + '"]')
@@ -69,16 +69,16 @@ Template.admin.helpers
 		return result;
 
 	appLanguage: (key) ->
-		if !key
-			return !RocketChat.settings.get('Language')
-		selected = (RocketChat.settings.get('Language'))?.split('-').shift().toLowerCase() is key
-		return selected
+		return (RocketChat.settings.get('Language'))?.split('-').shift().toLowerCase() is key
 
 	group: ->
-		return TempSettings.findOne { _id: FlowRouter.getParam('group'), type: 'group' }
+		groupId = FlowRouter.getParam('group')
+		group = RocketChat.settings.collectionPrivate.findOne { _id: groupId, type: 'group' }
 
-	sections: ->
-		settings = TempSettings.find({ group: FlowRouter.getParam('group') }, {sort: {section: 1, sorter: 1, i18nLabel: 1}}).fetch()
+		if not group
+			return
+
+		settings = RocketChat.settings.collectionPrivate.find({ group: groupId }, {sort: {section: 1, sorter: 1, i18nLabel: 1}}).fetch()
 
 		sections = {}
 		for setting in settings
@@ -93,19 +93,19 @@ Template.admin.helpers
 
 				found = 0
 				for item in i18nDefaultQuery
-					if TempSettings.findOne(item)?
+					if RocketChat.settings.collectionPrivate.findOne(item)?
 						setting.value = TAPi18n.__(setting._id + '_Default')
 
 			sections[setting.section or ''] ?= []
 			sections[setting.section or ''].push setting
 
-		sectionsArray = []
+		group.sections = []
 		for key, value of sections
-			sectionsArray.push
+			group.sections.push
 				section: key
 				settings: value
 
-		return sectionsArray
+		return group
 
 	i18nDefaultValue: ->
 		return TAPi18n.__(@_id + '_Default')
@@ -259,7 +259,7 @@ Template.admin.helpers
 		return setting.value is setting.packageValue
 
 Template.admin.events
-	"change .input-monitor, keyup .input-monitor": (e, t) ->
+	"change .input-monitor, keyup .input-monitor": _.throttle((e, t) ->
 		value = _.trim $(e.target).val()
 
 		switch @type
@@ -272,6 +272,7 @@ Template.admin.events
 			$set:
 				value: value
 				changed: RocketChat.settings.collectionPrivate.findOne(@_id).value isnt value
+	, 500)
 
 	"change select[name=color-editor]": (e, t) ->
 		value = _.trim $(e.target).val()
@@ -287,10 +288,9 @@ Template.admin.events
 			changed: true
 
 		settings = TempSettings.find(query, {fields: {_id: 1, value: 1, packageValue: 1}}).fetch()
-		console.log(settings)
 
 		settings.forEach (setting) ->
-			oldSetting = RocketChat.settings.cachedCollectionPrivate.collection.findOne({_id: setting._id}, {fields: {value: 1, type:1, editor: 1}})
+			oldSetting = RocketChat.settings.collectionPrivate.findOne({_id: setting._id}, {fields: {value: 1, type:1, editor: 1}})
 
 			setFieldValue(setting._id, oldSetting.value, oldSetting.type, oldSetting.editor)
 
diff --git a/packages/rocketchat-ui-admin/admin/admin.html b/packages/rocketchat-ui-admin/admin/admin.html
index d2e8e05d655..d391366d9cd 100644
--- a/packages/rocketchat-ui-admin/admin/admin.html
+++ b/packages/rocketchat-ui-admin/admin/admin.html
@@ -1,241 +1,241 @@
 <template name="admin">
-	<section class="page-container page-home page-static page-settings">
-		<header class="fixed-title border-component-color">
-			{{> burger}}
-			<h2>
-				<span class="room-title">{{#with group}}{{label}}{{/with}}</span>
-			</h2>
-			<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>
-		</header>
+	{{#with group}}
+		<section class="page-container page-home page-static page-settings">
+			<header class="fixed-title border-component-color">
+				{{> burger}}
+				<h2>
+					<span class="room-title">{{label}}</span>
+				</h2>
+				<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>
+			</header>
 
-		<div class="content background-transparent-dark">
-			{{#unless hasPermission 'view-privileged-setting'}}
-				<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
-			{{else}}
-				{{#with group}}
+			<div class="content background-transparent-dark">
+				{{#unless hasPermission 'view-privileged-setting'}}
+					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
+				{{else}}
 					{{#if description}}
 						<div class="info">
 							<p class="settings-description">{{description}}</p>
 						</div>
 					{{/if}}
-				{{/with}}
-				<div class="rocket-form">
-					{{#each sections}}
-						<div class="section {{#if section}}section-collapsed{{/if}}">
-							{{#if section}}
-								<div class="section-title">
-									<div class="section-title-text">
-										{{translateSection section}}
-									</div>
-									<div class="section-title-right">
-										<button class="button primary expand"><span>{{_ "Expand"}}</span></button>
-									</div>
-								</div>
-							{{/if}}
-							<div class="section-content border-component-color">
+					<div class="rocket-form">
+						{{#each sections}}
+							<div class="section {{#if section}}section-collapsed{{/if}}">
 								{{#if section}}
-									{{#if sectionIsCustomOAuth section}}
-										<div class="section-helper">
-											{{#with callbackURL section}}
-												{{{_ "Custom_oauth_helper" .}}}
-											{{/with}}
+									<div class="section-title">
+										<div class="section-title-text">
+											{{translateSection section}}
 										</div>
-									{{/if}}
+										<div class="section-title-right">
+											<button class="button primary expand"><span>{{_ "Expand"}}</span></button>
+										</div>
+									</div>
 								{{/if}}
-								{{#each settings}}
-									<div class="input-line double-col {{#if changed}}setting-changed{{/if}}" {{isDisabled}}>
-										<label class="setting-label">{{label}}</label>
-										<div class="setting-field">
-											{{#if $eq type 'string'}}
-												{{#if multiline}}
-													<textarea class="input-monitor" name="{{_id}}" rows="4" style="height: auto" {{isDisabled}}>{{value}}</textarea>
-												{{else}}
-													<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
-												{{/if}}
-											{{/if}}
-
-											{{#if $eq type 'relativeUrl'}}
-												<input class="input-monitor" type="text" name="{{_id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}}/>
-											{{/if}}
-
-											{{#if $eq type 'password'}}
-												<input class="input-monitor" type="password" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
-											{{/if}}
-
-											{{#if $eq type 'int'}}
-												<input class="input-monitor" type="number" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
-											{{/if}}
-
-											{{#if $eq type 'boolean'}}
-												<label><input class="input-monitor" type="radio" name="{{_id}}" value="1" checked="{{$eq value true}}" {{isDisabled}}/> {{_ "True"}}</label>
-												<label><input class="input-monitor" type="radio" name="{{_id}}" value="0" checked="{{$eq value false}}" {{isDisabled}}/> {{_ "False"}}</label>
-											{{/if}}
-
-											{{#if $eq type 'select'}}
-												<div class="select-arrow">
-													<i class="icon-down-open secondary-font-color"></i>
-												</div>
-												<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
-													{{#each values}}
-														<option value="{{key}}" selected="{{selectedOption ../_id key}}">{{_ i18nLabel}}</option>
-													{{/each}}
-												</select>
-											{{/if}}
-
-											{{#if $eq type 'language'}}
-												<div class="select-arrow">
-													<i class="icon-down-open secondary-font-color"></i>
-												</div>
-												<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
-													{{#each languages}}
-													<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
-													{{/each}}
-												</select>
-											{{/if}}
-
-											{{#if $eq type 'color'}}
-												<div class="horizontal">
-													{{#if $eq editor 'color'}}
-														<div class="flex-grow-1">
-															<input class="input-monitor colorpicker-input" type="text" name="{{_id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/>
-															<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
-														</div>
-													{{/if}}
-													{{#if $eq editor 'expression'}}
-														<div class="flex-grow-1">
-															<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
-														</div>
+								<div class="section-content border-component-color">
+									{{#if section}}
+										{{#if sectionIsCustomOAuth section}}
+											<div class="section-helper">
+												{{#with callbackURL section}}
+													{{{_ "Custom_oauth_helper" .}}}
+												{{/with}}
+											</div>
+										{{/if}}
+									{{/if}}
+									{{#each settings}}
+										<div class="input-line double-col {{#if changed}}setting-changed{{/if}}" {{isDisabled}}>
+											<label class="setting-label">{{label}}</label>
+											<div class="setting-field">
+												{{#if $eq type 'string'}}
+													{{#if multiline}}
+														<textarea class="input-monitor" name="{{_id}}" rows="4" style="height: auto" {{isDisabled}}>{{value}}</textarea>
+													{{else}}
+														<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
 													{{/if}}
-													<div class="color-editor">
-														<div class="select-arrow">
-															<i class="icon-down-open secondary-font-color"></i>
-														</div>
-														<select name="color-editor">
-															{{#each allowedTypes}}
-																<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
-															{{/each}}
-														</select>
+												{{/if}}
+
+												{{#if $eq type 'relativeUrl'}}
+													<input class="input-monitor" type="text" name="{{_id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}}/>
+												{{/if}}
+
+												{{#if $eq type 'password'}}
+													<input class="input-monitor" type="password" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
+												{{/if}}
+
+												{{#if $eq type 'int'}}
+													<input class="input-monitor" type="number" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
+												{{/if}}
+
+												{{#if $eq type 'boolean'}}
+													<label><input class="input-monitor" type="radio" name="{{_id}}" value="1" checked="{{$eq value true}}" {{isDisabled}}/> {{_ "True"}}</label>
+													<label><input class="input-monitor" type="radio" name="{{_id}}" value="0" checked="{{$eq value false}}" {{isDisabled}}/> {{_ "False"}}</label>
+												{{/if}}
+
+												{{#if $eq type 'select'}}
+													<div class="select-arrow">
+														<i class="icon-down-open secondary-font-color"></i>
 													</div>
-												</div>
-												<div class="settings-description">Variable name: {{getColorVariable _id}}</div>
-											{{/if}}
-
-											{{#if $eq type 'font'}}
-												<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
-											{{/if}}
-
-											{{#if $eq type 'code'}}
-												{{#if isDisabled.disabled}}
-													{{> CodeMirror name=_id options=(getEditorOptions true) code=(i18nDefaultValue) }}
-												{{else}}
-													<div class="code-mirror-box" data-editor-id="{{_id}}">
-														<div class="title">
-															{{label}}
-														</div>
-														{{> CodeMirror name=_id options=getEditorOptions code=value }}
-														{{setEditorOnBlur _id}}
-														<div class="buttons">
-															<button class="button primary button-fullscreen">Full Screen</button>
-															<button class="button primary button-restore">Exit Full Screen</button>
+													<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
+														{{#each values}}
+															<option value="{{key}}" selected="{{selectedOption ../_id key}}">{{_ i18nLabel}}</option>
+														{{/each}}
+													</select>
+												{{/if}}
+
+												{{#if $eq type 'language'}}
+													<div class="select-arrow">
+														<i class="icon-down-open secondary-font-color"></i>
+													</div>
+													<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
+														{{#each languages}}
+														<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
+														{{/each}}
+													</select>
+												{{/if}}
+
+												{{#if $eq type 'color'}}
+													<div class="horizontal">
+														{{#if $eq editor 'color'}}
+															<div class="flex-grow-1">
+																<input class="input-monitor colorpicker-input" type="text" name="{{_id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/>
+																<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
+															</div>
+														{{/if}}
+														{{#if $eq editor 'expression'}}
+															<div class="flex-grow-1">
+																<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
+															</div>
+														{{/if}}
+														<div class="color-editor">
+															<div class="select-arrow">
+																<i class="icon-down-open secondary-font-color"></i>
+															</div>
+															<select name="color-editor">
+																{{#each allowedTypes}}
+																	<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
+																{{/each}}
+															</select>
 														</div>
 													</div>
+													<div class="settings-description">Variable name: {{getColorVariable _id}}</div>
 												{{/if}}
-											{{/if}}
 
-											{{#if $eq type 'action'}}
-												{{#if hasChanges section}}
-													<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
-												{{else}}
-													<button type="button" class="button primary action" data-setting="{{_id}}" data-action="{{value}}" {{isDisabled}}>{{_ actionText}}</button>
+												{{#if $eq type 'font'}}
+													<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
 												{{/if}}
-											{{/if}}
-
-											{{#if $eq type 'asset'}}
-												{{#if value.url}}
-													<div class="settings-file-preview">
-														<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
-														<div class="action">
-															<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
+
+												{{#if $eq type 'code'}}
+													{{#if isDisabled.disabled}}
+														{{> CodeMirror name=_id options=(getEditorOptions true) code=(i18nDefaultValue) }}
+													{{else}}
+														<div class="code-mirror-box" data-editor-id="{{_id}}">
+															<div class="title">
+																{{label}}
+															</div>
+															{{> CodeMirror name=_id options=getEditorOptions code=value }}
+															{{setEditorOnBlur _id}}
+															<div class="buttons">
+																<button class="button primary button-fullscreen">Full Screen</button>
+																<button class="button primary button-restore">Exit Full Screen</button>
+															</div>
 														</div>
-													</div>
-												{{else}}
-													<div class="settings-file-preview">
-														<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
-														<div class="action">
-															<div class="button primary">{{_ 'Select_file'}}
-																<input type="file" accept="{{assetAccept fileConstraints}}" />
+													{{/if}}
+												{{/if}}
+
+												{{#if $eq type 'action'}}
+													{{#if hasChanges section}}
+														<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
+													{{else}}
+														<button type="button" class="button primary action" data-setting="{{_id}}" data-action="{{value}}" {{isDisabled}}>{{_ actionText}}</button>
+													{{/if}}
+												{{/if}}
+
+												{{#if $eq type 'asset'}}
+													{{#if value.url}}
+														<div class="settings-file-preview">
+															<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
+															<div class="action">
+																<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
+															</div>
+														</div>
+													{{else}}
+														<div class="settings-file-preview">
+															<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
+															<div class="action">
+																<div class="button primary">{{_ 'Select_file'}}
+																	<input type="file" accept="{{assetAccept fileConstraints}}" />
+																</div>
 															</div>
 														</div>
+													{{/if}}
+												{{/if}}
+
+												{{#if $eq type 'roomPick'}}
+													<div>
+														{{> inputAutocomplete settings=autocompleteRoom id=_id name=_id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
+														<ul class="selected-rooms">
+															{{#each selectedRooms}}
+																<li class="remove-room" data-setting={{../_id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
+															{{/each}}
+														</ul>
 													</div>
 												{{/if}}
-											{{/if}}
-
-											{{#if $eq type 'roomPick'}}
-												<div>
-													{{> inputAutocomplete settings=autocompleteRoom id=_id name=_id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
-													<ul class="selected-rooms">
-														{{#each selectedRooms}}
-															<li class="remove-room" data-setting={{../_id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
-														{{/each}}
-													</ul>
-												</div>
-											{{/if}}
-
-											{{#if description}}
-												<div class="settings-description">{{{RocketChatMarkdown description}}}</div>
-											{{/if}}
-											{{#if alert}}
-												<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ alert}}}</div>
-											{{/if}}
-										</div>
-										{{#unless $eq group._id 'Assets'}}
-											{{#unless isDefaultValue _id}}
-												<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting button danger">
-													<i class="icon-ccw secondary-font-color color-error-contrast"></i>
-												</button>
+
+												{{#if description}}
+													<div class="settings-description">{{{RocketChatMarkdown description}}}</div>
+												{{/if}}
+												{{#if alert}}
+													<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ alert}}}</div>
+												{{/if}}
+											</div>
+											{{#unless $eq type 'asset'}}
+												{{#unless isDefaultValue _id}}
+													<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting button danger">
+														<i class="icon-ccw secondary-font-color color-error-contrast"></i>
+													</button>
+												{{/unless}}
 											{{/unless}}
-										{{/unless}}
-									</div>
-								{{/each}}
-
-								{{#unless $eq group._id 'Assets'}}
-									<div class="input-line double-col">
-										<label class="setting-label">{{_ "Reset_section_settings"}}</label>
-										<div class="setting-field">
-											<button data-section="{{section}}" class="reset-group button danger">
-												{{_ "Reset"}}
-											</button>
 										</div>
-									</div>
-								{{/unless}}
-
-								{{#if section}}
-									{{#if sectionIsCustomOAuth section}}
-										<div class="submit">
-											<button class="button danger remove-custom-oauth"><span>{{_ "Remove_custom_oauth"}}</span></button>
+									{{/each}}
+
+									{{#unless $eq ../../_id 'Assets'}}
+										<div class="input-line double-col">
+											<label class="setting-label">{{_ "Reset_section_settings"}}</label>
+											<div class="setting-field">
+												<button data-section="{{section}}" class="reset-group button danger">
+													{{_ "Reset"}}
+												</button>
+											</div>
 										</div>
+									{{/unless}}
+
+									{{#if section}}
+										{{#if sectionIsCustomOAuth section}}
+											<div class="submit">
+												<button class="button danger remove-custom-oauth"><span>{{_ "Remove_custom_oauth"}}</span></button>
+											</div>
+										{{/if}}
 									{{/if}}
-								{{/if}}
+								</div>
 							</div>
+						{{/each}}
+
+						<div class="submit">
+							{{#if $eq ../../_id 'OAuth'}}
+								<button class="button secondary refresh-oauth"><span>{{_ "Refresh_oauth_services"}}</span></button>
+								<button class="button secondary add-custom-oauth"><span>{{_ "Add_custom_oauth"}}</span></button>
+							{{/if}}
+							{{#if $eq ../../_id 'Assets'}}
+								<button class="button refresh-clients"><span>{{_ "Apply_and_refresh_all_clients"}}</span></button>
+							{{/if}}
 						</div>
-					{{/each}}
-
-					<div class="submit">
-						{{#if $eq group._id 'OAuth'}}
-							<button class="button secondary refresh-oauth"><span>{{_ "Refresh_oauth_services"}}</span></button>
-							<button class="button secondary add-custom-oauth"><span>{{_ "Add_custom_oauth"}}</span></button>
-						{{/if}}
-						{{#if $eq group._id 'Assets'}}
-							<button class="button refresh-clients"><span>{{_ "Apply_and_refresh_all_clients"}}</span></button>
-						{{/if}}
 					</div>
-				</div>
-			{{/unless}}
-		</div>
-	</section>
+				{{/unless}}
+			</div>
+		</section>
+	{{/with}}
 </template>

From 9e46094fa75c6e76c0c0ca68c2dfe8d477a30e7d Mon Sep 17 00:00:00 2001
From: Karl Prieb <karl@prieb.me>
Date: Fri, 27 Jan 2017 13:42:01 -0200
Subject: [PATCH 2/2] fix highlighted labels

---
 packages/rocketchat-ui-admin/admin/admin.coffee | 3 +++
 packages/rocketchat-ui-admin/admin/admin.html   | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/rocketchat-ui-admin/admin/admin.coffee b/packages/rocketchat-ui-admin/admin/admin.coffee
index 6a935a57925..4c907eac343 100644
--- a/packages/rocketchat-ui-admin/admin/admin.coffee
+++ b/packages/rocketchat-ui-admin/admin/admin.coffee
@@ -154,6 +154,9 @@ Template.admin.helpers
 
 		return TempSettings.find(query).count() > 0
 
+	isSettingChanged: (id) ->
+		return RocketChat.TempSettings.findOne({_id: id}, {fields: {changed: 1}}).changed
+
 	translateSection: (section) ->
 		if section.indexOf(':') > -1
 			return section
diff --git a/packages/rocketchat-ui-admin/admin/admin.html b/packages/rocketchat-ui-admin/admin/admin.html
index d391366d9cd..d0e8e452e0d 100644
--- a/packages/rocketchat-ui-admin/admin/admin.html
+++ b/packages/rocketchat-ui-admin/admin/admin.html
@@ -47,7 +47,7 @@
 										{{/if}}
 									{{/if}}
 									{{#each settings}}
-										<div class="input-line double-col {{#if changed}}setting-changed{{/if}}" {{isDisabled}}>
+										<div class="input-line double-col {{#if isSettingChanged _id}}setting-changed{{/if}}" {{isDisabled}}>
 											<label class="setting-label">{{label}}</label>
 											<div class="setting-field">
 												{{#if $eq type 'string'}}