Solving requested changes by rodrigok and karlprieb at PR #7517

.meteor/packages

@@ -174,4 +174,3 @@ yasinuslu:blaze-meta
 deepwell:bootstrap-datepicker2
 rocketchat:postcss
 dynamic-import@0.1.1
-fourseven:scss

packages/rocketchat-i18n/i18n/es.i18n.json

@@ -872,7 +872,7 @@
   "Nothing_found": "No se encontró nada",
   "Notification_Duration": "Duración de la notificación",
   "Notifications": "Notificaciones",
-  "Notifications_Sound_Volume": "Notifications sound volume",
+  "Notifications_Sound_Volume": "Volumen del sonido de las notificaciones",
   "Notify_all_in_this_room": "Notificar a todos en este canal",
   "Num_Agents": "# de Agentes",
   "Number_of_messages": "Número de mensajes",

packages/rocketchat-i18n/i18n/sq.i18n.json

@@ -748,7 +748,7 @@
   "Nothing": "asgjë",
   "Nothing_found": "Asgjë për të gjetur",
   "Notifications": "Njoftime",
-  "Notifications_Sound_Volume": "Notifications sound volume",
+  "Notifications_Sound_Volume": "Vëllimi i tingullit të njoftimeve",
   "Notify_all_in_this_room": "Njoftojë të gjithë në këtë dhomë",
   "Num_Agents": "# Agents",
   "Number_of_messages": "Numri i mesazheve",

packages/rocketchat-lib/server/models/Users.js

@@ -397,6 +397,7 @@ class ModelUsers extends RocketChat.models._Base {
 				requirePasswordChangeReason
 			}
 		};
+
 		return this.update(_id, update);
 	}
 

packages/rocketchat-lib/server/startup/settings.js

@@ -70,6 +70,7 @@ RocketChat.settings.addGroup('Accounts', function() {
 		type: 'boolean',
 		'public': true
 	});
+
 	this.section('Registration', function() {
 		this.add('Accounts_DefaultUsernamePrefixSuggestion', 'user', {
 			type: 'string'

packages/rocketchat-livechat/app/client/lib/_visitor.js

@@ -59,7 +59,7 @@ this.visitor = new class {
 				// notification sound
 				if (Session.equals('sound', true) && msg.u._id !== Meteor.userId()) {
 					const audioVolume = Meteor.user().settings.preferences.notificationsSoundVolume || 100;
-					const audio = $('#chatAudioNotification')[0];
+					const audio = document.getElementById('chatAudioNotification');
 					audio.volume = Number((audioVolume/100).toPrecision(2));
 					audio.play();
 				}

packages/rocketchat-slider/package.js

@@ -9,9 +9,8 @@ Package.describe({
 Package.onUse(function(api) {
 	api.use('ecmascript');
 	api.use('templating', 'client');
-	api.use('fourseven:scss');
+	api.use('rocketchat:theme');
 
-	api.addFiles('rocketchat-slider.scss', 'client');
 	api.addFiles('rocketchat-slider.html', 'client');
 	api.addFiles('rocketchat-slider.js', 'client');
 });

packages/rocketchat-slider/rocketchat-slider.js

@@ -1,6 +1,3 @@
-import './rocketchat-slider.scss';
-import './rocketchat-slider.html';
-
 Template.slider.onRendered(function() {
 	const params = this.data;
 

packages/rocketchat-slider/rocketchat-slider.scss

@@ -1,112 +0,0 @@
-$shade-10: #04436a !default;
-$shade-1: #d7dcdf !default;
-$shade-0: #ffffff !default;
-$teal: #1abc9c !default;
-
-* {
-	&,
-	&::before,
-	&::after {
-		box-sizing: border-box;
-	}
-}
-
-$range-width: 100% !default;
-
-.range-slider {
-	margin: 0 0 0 0%;
-	width: $range-width;
-}
-
-$range-handle-color: $shade-10 !default;
-$range-handle-color-hover: $teal !default;
-$range-handle-size: 20px !default;
-
-$range-track-color: $shade-1 !default;
-$range-track-height: 10px !default;
-
-$range-label-color: $shade-10 !default;
-$range-label-width: 60px !default;
-
-.range-slider__range {
-	-webkit-appearance: none;
-	width: calc(100% - (#{$range-label-width + 13px}));
-	height: $range-track-height;
-	border-radius: 5px;
-	background: $range-track-color;
-	outline: none;
-	padding: 0;
-	margin: 0;
-
-	// Range Handle
-	&::-webkit-slider-thumb {
-		appearance: none;
-		width: $range-handle-size;
-		height: $range-handle-size;
-		border-radius: 50%;
-		background: $range-handle-color;
-		cursor: pointer;
-		transition: background 0.15s ease-in-out;
-
-		&:hover {
-			background: $range-handle-color-hover;
-		}
-	}
-
-	&:active::-webkit-slider-thumb {
-		background: $range-handle-color-hover;
-	}
-
-	&::-moz-range-thumb {
-		width: $range-handle-size;
-		height: $range-handle-size;
-		border: 0;
-		border-radius: 50%;
-		background: $range-handle-color;
-		cursor: pointer;
-		transition: background 0.15s ease-in-out;
-
-		&:hover {
-			background: $range-handle-color-hover;
-		}
-	}
-
-	&:active::-moz-range-thumb {
-		background: $range-handle-color-hover;
-	}
-}
-
-.range-slider__value {
-	display: inline-block;
-	position: relative;
-	width: $range-label-width;
-	color: $shade-0;
-	line-height: 20px;
-	text-align: center;
-	border-radius: 3px;
-	background: $range-label-color;
-	padding: 5px 10px;
-	margin-left: 8px;
-
-	&::after {
-		position: absolute;
-		top: 8px;
-		left: -7px;
-		width: 0;
-		height: 0;
-		border-top: 7px solid transparent;
-		border-right: 7px solid $range-label-color;
-		border-bottom: 7px solid transparent;
-		content: '';
-	}
-}
-
-::-moz-range-track {
-	background: $range-track-color;
-	border: 0;
-}
-
-input::-moz-focus-inner,
-input::-moz-focus-outer {
-	border: 0;
-}

packages/rocketchat-theme/client/imports/slider.css

@@ -0,0 +1,72 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+.range-slider {
+	margin: 0 0 0 0%;
+	width: 100%;
+}
+
+.range-slider__range {
+	-webkit-appearance: none;
+	width: calc(100% - (73px));
+	height: 10px;
+	border-radius: 5px;
+	outline: none;
+	padding: 0;
+	margin: 0;
+}
+
+.range-slider__range::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	cursor: pointer;
+	-webkit-transition: background 0.15s ease-in-out;
+	transition: background 0.15s ease-in-out;
+}
+
+.range-slider__range::-moz-range-thumb {
+	width: 20px;
+	height: 20px;
+	border: 0;
+	border-radius: 50%;
+	cursor: pointer;
+	-webkit-transition: background 0.15s ease-in-out;
+	transition: background 0.15s ease-in-out;
+}
+
+.range-slider__value {
+	display: inline-block;
+	position: relative;
+	width: 60px;
+	line-height: 20px;
+	text-align: center;
+	border-radius: 3px;
+	padding: 5px 10px;
+	margin-left: 8px;
+}
+
+.range-slider__value::after {
+	position: absolute;
+	top: 8px;
+	left: -7px;
+	width: 0;
+	height: 0;
+	border-top: 7px solid;
+	border-right: 7px solid;
+	border-bottom: 7px solid;
+	content: '';
+}
+
+::-moz-range-track {
+	border: 0;
+}
+
+input::-moz-focus-inner,
+input::-moz-focus-outer {
+	border: 0;
+}

packages/rocketchat-theme/client/main.css

@@ -5,4 +5,4 @@
 @import 'imports/forms.css';
 @import 'imports/base.css';
 @import 'imports/rtl.css';
-
+@import 'imports/slider.css';

packages/rocketchat-theme/client/vendor/jscolor.js

@@ -619,7 +619,7 @@ var jsc = {
 
 		switch (controlName) {
 		case 'pad':
-			// if the rocketchat-slider is at the bottom, move it up
+			// if the slider is at the bottom, move it up
 			switch (jsc.getSliderComponent(thisObj)) {
 			case 's': if (thisObj.hsv[1] === 0) { thisObj.fromHSV(null, 100, null); }; break;
 			case 'v': if (thisObj.hsv[2] === 0) { thisObj.fromHSV(null, null, 100); }; break;
@@ -1387,10 +1387,10 @@ var jsc = {
 					sldB : document.createElement('div'), // border
 					sldM : document.createElement('div'), // mouse/touch area
 					sldGrad : jsc.createSliderGradient(),
-					sldPtrS : document.createElement('div'), // rocketchat-slider pointer spacer
+					sldPtrS : document.createElement('div'), // slider pointer spacer
-					sldPtrIB : document.createElement('div'), // rocketchat-slider pointer inner border
+					sldPtrIB : document.createElement('div'), // slider pointer inner border
-					sldPtrMB : document.createElement('div'), // rocketchat-slider pointer middle border
+					sldPtrMB : document.createElement('div'), // slider pointer middle border
-					sldPtrOB : document.createElement('div'), // rocketchat-slider pointer outer border
+					sldPtrOB : document.createElement('div'), // slider pointer outer border
 					btn : document.createElement('div'),
 					btnT : document.createElement('span') // text
 				};
@@ -1540,15 +1540,15 @@ var jsc = {
 			p.crossLX.style.left =
 				THIS.pointerBorderWidth + 'px';
 
-			// rocketchat-slider
+			// slider
 			p.sld.style.overflow = 'hidden';
 			p.sld.style.width = THIS.sliderSize + 'px';
 			p.sld.style.height = THIS.height + 'px';
 
-			// rocketchat-slider gradient
+			// slider gradient
 			p.sldGrad.draw(THIS.sliderSize, THIS.height, '#000', '#000');
 
-			// rocketchat-slider border
+			// slider border
 			p.sldB.style.display = displaySlider ? 'block' : 'none';
 			p.sldB.style.position = 'absolute';
 			p.sldB.style.right = THIS.padding + 'px';
@@ -1556,7 +1556,7 @@ var jsc = {
 			p.sldB.style.border = THIS.insetWidth + 'px solid';
 			p.sldB.style.borderColor = THIS.insetColor;
 
-			// rocketchat-slider mouse area
+			// slider mouse area
 			p.sldM._jscInstance = THIS;
 			p.sldM._jscControlName = 'sld';
 			p.sldM.style.display = displaySlider ? 'block' : 'none';
@@ -1567,20 +1567,20 @@ var jsc = {
 			p.sldM.style.height = dims[1] + 'px';
 			p.sldM.style.cursor = 'default';
 
-			// rocketchat-slider pointer inner and outer border
+			// slider pointer inner and outer border
 			p.sldPtrIB.style.border =
 			p.sldPtrOB.style.border =
 				THIS.pointerBorderWidth + 'px solid ' + THIS.pointerBorderColor;
 
-			// rocketchat-slider pointer outer border
+			// slider pointer outer border
 			p.sldPtrOB.style.position = 'absolute';
 			p.sldPtrOB.style.left = -(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
 			p.sldPtrOB.style.top = '0';
 
-			// rocketchat-slider pointer middle border
+			// slider pointer middle border
 			p.sldPtrMB.style.border = THIS.pointerThickness + 'px solid ' + THIS.pointerColor;
 
-			// rocketchat-slider pointer spacer
+			// slider pointer spacer
 			p.sldPtrS.style.width = THIS.sliderSize + 'px';
 			p.sldPtrS.style.height = sliderPtrSpace + 'px';
 
@@ -1655,7 +1655,7 @@ var jsc = {
 			jsc.picker.cross.style.left = (x + ofs) + 'px';
 			jsc.picker.cross.style.top = (y + ofs) + 'px';
 
-			// redraw the rocketchat-slider
+			// redraw the slider
 			switch (jsc.getSliderComponent(THIS)) {
 			case 's':
 				var rgb1 = HSV_RGB(THIS.hsv[0], 100, THIS.hsv[2]);
@@ -1686,7 +1686,7 @@ var jsc = {
 		function redrawSld () {
 			var sldComponent = jsc.getSliderComponent(THIS);
 			if (sldComponent) {
-				// redraw the rocketchat-slider pointer
+				// redraw the slider pointer
 				switch (sldComponent) {
 				case 's': var yComponent = 1; break;
 				case 'v': var yComponent = 2; break;

packages/rocketchat-theme/server/colors.less

@@ -911,3 +911,50 @@ label.required::after {
 		opacity: inherit;
 	}
 }
+
+/** ----------------------------------------------------------------------------
+ * Input Range Slider
+ */
+
+.range-slider__range {
+	background-color: @tertiary-background-color;
+}
+
+.range-slider__range::-webkit-slider-thumb {
+	background-color: @primary-background-color;
+}
+
+.range-slider__range::-webkit-slider-thumb:hover {
+	background-color: darken(@success-color, 30%);
+}
+
+.range-slider__range:active::-webkit-slider-thumb {
+	background-color: darken(@success-color, 10%);
+}
+
+.range-slider__range::-moz-range-thumb {
+	background-color: @primary-background-color;
+}
+
+.range-slider__range::-moz-range-thumb:hover {
+	background-color: darken(@success-color, 30%);
+}
+
+.range-slider__range:active::-moz-range-thumb {
+	background-color: darken(@success-color, 10%);
+}
+
+.range-slider__value {
+	color: lighten(@tertiary-background-color, 50%);
+	background-color: @primary-background-color;
+}
+
+.range-slider__value::after {
+	border-top-color: transparent;
+	border-right-color: @primary-background-color;
+	border-bottom-color: transparent;
+}
+
+::-moz-range-track {
+	background-color: @tertiary-background-color;
+}