refactoring of messages

Change-Id: Ia0de54892a5175194234d887e617715398c9a639
Signed-off-by: Koren Lev <korenlev@gmail.com>

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;