LT-275: Creating 'Add description' button action

Packages/design/styles/common/keyframes.styl

@@ -1,19 +1,19 @@
 @import "{design}/app.styl"
 
-@keyframes zoomInOut {
-    from {
-        transform(scale(0))
-    }
-    to {
-        transform(scale(1))
-    }
-}
+@keyframes zoomIn
+  from
+    transform(scale(0))
+  to
+    transform(scale(1))
 
-@keyframes fadeInOut {
-    from {
-        opacity: 0
-    }
-    to {
-        opacity: 1
-    }
-}
+@keyframes fadeIn
+  from
+    opacity: 0
+  to
+    opacity: 1
+
+@keyframes fadeOut
+  from
+    opacity: 1
+  to
+    opacity: 0

Packages/design/styles/imports/animations.styl

@@ -1,15 +1,17 @@
 animationDefaults()
   animation-duration: 0.3s
-  animation-iteration-count: 1
   animation-direction: alternate
   animation-timing-function: ease-out
+  animation-fill-mode: forwards
 
 animateZoomIn()
   animationDefaults()
-  animation-name: zoomInOut
-  animation-fill-mode: forwards
+  animation-name: zoomIn
 
 animateFadeIn()
   animationDefaults()
-  animation-name: fadeInOut
-  animation-fill-mode: forwards
+  animation-name: fadeIn
+
+animateFadeOut()
+  animationDefaults()
+  animation-name: fadeOut

Packages/lesiontracker/client/components/measureFlow/measureFlow.html

@@ -4,9 +4,22 @@
         {{#if eq instance.state.get 'selected'}}
             <div class="tree-leaf">
                 <span>{{instance.value.label}}</span>
+                {{#if instance.descriptionEdit.get}}
+                    <div class="description clearfix">
+                        <textarea
+                            class="pull-left"
+                            rows="1"
+                            style="{{#unless instance.description.get}}height:0{{/unless}}"
+                        >{{instance.description.get}}</textarea>
+                    </div>
+                {{else}}
+                    {{#if instance.description.get}}
+                        <div class="descriptionText">{{instance.description.get}}</div>
+                    {{/if}}
+                {{/if}}
                 <div class="actions clearfix">
                     <button class="pull-left btn-rename">Rename</button>
-                    <button class="pull-right brn-description">Add description</button>
+                    <button class="pull-right btn-description">{{valueIf instance.description.get 'Edit' 'Add'}} description</button>
                 </div>
             </div>
         {{/if}}

Packages/lesiontracker/client/components/measureFlow/measureFlow.js

@@ -9,6 +9,8 @@ Template.measureFlow.onCreated(() => {
     const instance = Template.instance();
 
     instance.state = new ReactiveVar('closed');
+    instance.description = new ReactiveVar('');
+    instance.descriptionEdit = new ReactiveVar(false);
 
     instance.items = [{
         label: 'Category 1',
@@ -120,6 +122,40 @@ Template.measureFlow.events({
             instance.selectTreeView = Blaze.renderWithData(Template.selectTree, data, parentElement);
         });
     },
+    'click .measure-flow .btn-description'(event, instance) {
+        // Fade out the action buttons
+        instance.$('.measure-flow .actions').addClass('fadeOut');
+
+        // Set the description edit mode
+        instance.descriptionEdit.set(true);
+
+        // Wait for DOM rerendering, resize and focus the description textarea
+        Tracker.afterFlush(() => {
+            const $textarea = instance.$('textarea');
+            $textarea.trigger('input').focus();
+        });
+    },
+    'input textarea, change textarea'(event, instance) {
+        const element = event.currentTarget;
+        const $element = $(element);
+
+        // Resize the textarea based on its content length
+        $element.css('max-height', 0);
+        $element.height(element.scrollHeight);
+        $element.css('max-height', '');
+    },
+    'keydown textarea'(event, instance) {
+        // Unset the description edit mode if ENTER or ESC was pressed
+        if (event.which === 13 || event.which === 27) {
+            instance.$('.measure-flow .actions').removeClass('fadeOut');
+            instance.descriptionEdit.set(false);
+        }
+
+        // Keep the current description if ENTER was pressed
+        if (event.which === 13) {
+            instance.description.set($(event.currentTarget).val());
+        }
+    },
     'click .select-tree-common label'(event, instance) {
         instance.commonClicked = true;
     },

Packages/lesiontracker/client/components/measureFlow/measureFlow.styl

@@ -73,8 +73,13 @@
     .actions
       margin-top: 16px
       opacity: 0
-      animateFadeIn()
-      animation-delay: 0.3s
+
+      &:not(.fadeOut)
+        animateFadeIn()
+        animation-delay: 0.3s
+
+      &.fadeOut
+        animateFadeOut()
 
       button
         background-color: transparent
@@ -87,6 +92,30 @@
         padding: 0 12px
         text-align: center
 
+    .description
+      margin-top: -10px
+      margin-bottom: 26px
+
+      textarea
+        background-color: white
+        box-shadow: 0 10px white
+        border: 0
+        line-height: 20px
+        outline: none
+        overflow: hidden
+        padding: 0 12px
+        resize: none
+        transition(height 0.3s ease)
+        width: 100%
+
+    .descriptionText
+      background-color: white
+      box-shadow: 0 10px white
+      line-height: 20px
+      margin-bottom: 26px
+      margin-top: -10px
+      padding: 0 12px
+
   &.selected>.tree-leaf
 
     span