From 5ae0f43f9585852d310b4b958b491b708763d13c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lindo=C3=A9lio=20L=C3=A1zaro?= Date: Wed, 26 Jul 2017 17:07:41 -0300 Subject: [PATCH] Solving requested changes by rodrigok and karlprieb at PR #7517 --- .meteor/packages | 1 - packages/rocketchat-i18n/i18n/es.i18n.json | 2 +- packages/rocketchat-i18n/i18n/sq.i18n.json | 2 +- .../rocketchat-lib/server/models/Users.js | 1 + .../rocketchat-lib/server/startup/settings.js | 1 + .../app/client/lib/_visitor.js | 2 +- packages/rocketchat-slider/package.js | 3 +- .../rocketchat-slider/rocketchat-slider.js | 3 - .../rocketchat-slider/rocketchat-slider.scss | 112 ------------------ .../client/imports/slider.css | 72 +++++++++++ packages/rocketchat-theme/client/main.css | 2 +- .../rocketchat-theme/client/vendor/jscolor.js | 30 ++--- packages/rocketchat-theme/server/colors.less | 47 ++++++++ 13 files changed, 141 insertions(+), 137 deletions(-) delete mode 100644 packages/rocketchat-slider/rocketchat-slider.scss create mode 100644 packages/rocketchat-theme/client/imports/slider.css diff --git a/.meteor/packages b/.meteor/packages index 36fe3a6d4b6..8b41bacd142 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -174,4 +174,3 @@ yasinuslu:blaze-meta deepwell:bootstrap-datepicker2 rocketchat:postcss dynamic-import@0.1.1 -fourseven:scss diff --git a/packages/rocketchat-i18n/i18n/es.i18n.json b/packages/rocketchat-i18n/i18n/es.i18n.json index 522ab29c00e..04ce087edc9 100644 --- a/packages/rocketchat-i18n/i18n/es.i18n.json +++ b/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", diff --git a/packages/rocketchat-i18n/i18n/sq.i18n.json b/packages/rocketchat-i18n/i18n/sq.i18n.json index 1050a63016a..5fd532bb7f5 100644 --- a/packages/rocketchat-i18n/i18n/sq.i18n.json +++ b/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", diff --git a/packages/rocketchat-lib/server/models/Users.js b/packages/rocketchat-lib/server/models/Users.js index acc11292155..fe3b0d88c39 100644 --- a/packages/rocketchat-lib/server/models/Users.js +++ b/packages/rocketchat-lib/server/models/Users.js @@ -397,6 +397,7 @@ class ModelUsers extends RocketChat.models._Base { requirePasswordChangeReason } }; + return this.update(_id, update); } diff --git a/packages/rocketchat-lib/server/startup/settings.js b/packages/rocketchat-lib/server/startup/settings.js index 0379dd2d983..d93b106c04f 100644 --- a/packages/rocketchat-lib/server/startup/settings.js +++ b/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' diff --git a/packages/rocketchat-livechat/app/client/lib/_visitor.js b/packages/rocketchat-livechat/app/client/lib/_visitor.js index 08891024b22..491af4746e6 100644 --- a/packages/rocketchat-livechat/app/client/lib/_visitor.js +++ b/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(); } diff --git a/packages/rocketchat-slider/package.js b/packages/rocketchat-slider/package.js index 8120e6642c6..8f6e4ea8e32 100644 --- a/packages/rocketchat-slider/package.js +++ b/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'); }); diff --git a/packages/rocketchat-slider/rocketchat-slider.js b/packages/rocketchat-slider/rocketchat-slider.js index d08bc6fafd3..26ddf0d9d36 100644 --- a/packages/rocketchat-slider/rocketchat-slider.js +++ b/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; diff --git a/packages/rocketchat-slider/rocketchat-slider.scss b/packages/rocketchat-slider/rocketchat-slider.scss deleted file mode 100644 index 6ae9f885f61..00000000000 --- a/packages/rocketchat-slider/rocketchat-slider.scss +++ /dev/null @@ -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; -} diff --git a/packages/rocketchat-theme/client/imports/slider.css b/packages/rocketchat-theme/client/imports/slider.css new file mode 100644 index 00000000000..4bb54c5e7f2 --- /dev/null +++ b/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; +} diff --git a/packages/rocketchat-theme/client/main.css b/packages/rocketchat-theme/client/main.css index f7b298262b5..dc3585a18e9 100644 --- a/packages/rocketchat-theme/client/main.css +++ b/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'; diff --git a/packages/rocketchat-theme/client/vendor/jscolor.js b/packages/rocketchat-theme/client/vendor/jscolor.js index b7b6bd95233..8d65d83740e 100644 --- a/packages/rocketchat-theme/client/vendor/jscolor.js +++ b/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 - sldPtrIB : document.createElement('div'), // rocketchat-slider pointer inner border - sldPtrMB : document.createElement('div'), // rocketchat-slider pointer middle border - sldPtrOB : document.createElement('div'), // rocketchat-slider pointer outer border + sldPtrS : document.createElement('div'), // slider pointer spacer + sldPtrIB : document.createElement('div'), // slider pointer inner border + sldPtrMB : document.createElement('div'), // slider pointer middle 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; diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less index 0c191b7c3f1..5a77602ac4f 100755 --- a/packages/rocketchat-theme/server/colors.less +++ b/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; +}