diff options
author | Koren Lev <korenlev@gmail.com> | 2017-09-07 16:07:17 +0300 |
---|---|---|
committer | Koren Lev <korenlev@gmail.com> | 2017-09-07 16:07:17 +0300 |
commit | f95cd97e11f6d11d5412ef19704dcb6e8b9d022c (patch) | |
tree | 2b10ad279f02c5a575e0a723484a69ebe7474113 /ui/imports/ui/components/configuration | |
parent | cb24f67be756b8a92cee1ee3284207e95a03e6d3 (diff) |
refactoring of messages
Change-Id: Ia0de54892a5175194234d887e617715398c9a639
Signed-off-by: Koren Lev <korenlev@gmail.com>
Diffstat (limited to 'ui/imports/ui/components/configuration')
3 files changed, 46 insertions, 24 deletions
diff --git a/ui/imports/ui/components/configuration/configuration.html b/ui/imports/ui/components/configuration/configuration.html index f381453..c8d81b2 100644 --- a/ui/imports/ui/components/configuration/configuration.html +++ b/ui/imports/ui/components/configuration/configuration.html @@ -4,14 +4,18 @@ <form> <div class="cl-field-group"> <label class="cl-field-label">Message view backward delta</label> - <input name="msgsViewBackDelta" - value="{{ getModelField 'messages_view_backward_delta' }}" - class="cl-msgs-view-back-delta cl-input" - type="number" - placeholder="" /> - <div class="cl-field-desc">Backward duration of {{ durationHumanize (getModelField 'messages_view_backward_delta') }} from current date (miliseconds)</div> + <div class="input-box"> + <input name="msgsViewBackDelta" + value="{{ getModelField 'messages_view_backward_delta' }}" + class="sm-msgs-view-back-delta cl-input" + type="number" + placeholder="" /> + <div class="input-hint"> + {{ durationAsText (getModelField 'messages_view_backward_delta') }} + </div> + </div> + <div class="cl-field-desc">Change the start duration of message display (miliseconds)</div> </div> - <button type="button" class="js-submit-button mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" diff --git a/ui/imports/ui/components/configuration/configuration.js b/ui/imports/ui/components/configuration/configuration.js index 493cc36..a3582df 100644 --- a/ui/imports/ui/components/configuration/configuration.js +++ b/ui/imports/ui/components/configuration/configuration.js @@ -55,9 +55,16 @@ Template.Configuration.rendered = function() { Template.Configuration.events({ 'click .js-submit-button': function (event, instance) { event.preventDefault(); - let msgsViewBackDelta = instance.$('.cl-msgs-view-back-delta')[0].value; + let msgsViewBackDelta = Number.parseInt(instance.$('.sm-msgs-view-back-delta')[0].value); saveForm(instance, msgsViewBackDelta); - } + }, + + 'input .sm-msgs-view-back-delta': function (_e, instance) { + let msgsViewBackDelta = Number.parseInt(instance.$('.sm-msgs-view-back-delta')[0].value); + let model = instance.state.get('model'); + model = R.assoc('messages_view_backward_delta', msgsViewBackDelta, model); + instance.state.set('model', model); + }, }); /* @@ -85,9 +92,11 @@ Template.Configuration.helpers({ return instance.state.get('actionResult') === 'success'; }, - durationHumanize: function (duration) { - return moment.duration(duration).humanize(); - } + durationAsText: function (delta) { + let duration = moment.duration(delta); + let text = `${duration.years()} years, ${duration.months()} months, ${duration.days()} days, ${duration.hours()} hours and ${duration.minutes()} minutes from current time.`; + return text; + }, }); // end: helpers function saveForm(instance, msgsViewBackDelta) { diff --git a/ui/imports/ui/components/configuration/configuration.styl b/ui/imports/ui/components/configuration/configuration.styl index b8be180..b14ce7d 100644 --- a/ui/imports/ui/components/configuration/configuration.styl +++ b/ui/imports/ui/components/configuration/configuration.styl @@ -15,22 +15,31 @@ width: 120px; margin: 0 5px; - >.cl-input + .input-box display: block; - width: 100%; - min-height: 34px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857143; - color: #555; - background-color: #fff; - background-image: none; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); width: 400px; margin: 0 5px; + .cl-input + display: block; + width: 100%; + min-height: 34px; + padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + background-color: #fff; + background-image: none; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + width: 400px; + + .input-hint + position: absolute; + margin: 5px 0; + + .cl-field-desc margin: 0 5px; |