From 2e8c5af997b1b6447b42a37a0295c4f437bc282d Mon Sep 17 00:00:00 2001
From: Zara <zara.zaimeche@codethink.co.uk>
Date: Tue, 20 Sep 2016 11:52:29 +0000
Subject: [PATCH] Put task notes in a box

This distinguishes task notes from other elements visually, so they're
a little easier to scan. It also aligns the 'add notes' and
'edit'(notes) buttons, so that the user is not confused, as they will
expect these to be in the same place. Finally, it puts them both nearer
the task notes, so that it's obvious what the edit button edits.

Change-Id: I152a8dc164c9173b52f25b000eb65af9a1b7c57f
---
 src/app/stories/template/detail.html | 27 +++++++++++++++------------
 src/theme/base/edit_tasks.less       | 10 ++++++++++
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/app/stories/template/detail.html b/src/app/stories/template/detail.html
index b04b6da4..e7273e38 100644
--- a/src/app/stories/template/detail.html
+++ b/src/app/stories/template/detail.html
@@ -503,8 +503,14 @@
                 </button>
             </div>
         </div>
-        <div class="row" ng-show="showDetail">
-            <div class="col-xs-10 col-xs-offset-1">
+        <div class="row"ng-show="showDetail">
+            <div class="col-xs-10 col-xs-offset-1 task-notes"
+                 ng-show="isLoggedIn">
+                <button class="btn btn-primary btn-xs pull-right"
+                        ng-show="!task.editing && task.link && isLoggedIn"
+                        ng-click="editNotes(task)">
+                    <i class="fa fa-pencil"></i> Edit
+                </button>
                 <insert-markdown content="task.link" ng-show="!task.editing"></insert-markdown>
                 <insert-markdown content="task.tempNotes" ng-show="task.editing && notesPreview"></insert-markdown>
                 <form name="taskNotesForm" ng-show="task.editing">
@@ -513,14 +519,13 @@
                                   class="form-control context-edit"
                                   msd-elastic
                                   rows="3"
-                                  ng-show="isLoggedIn"
                                   ng-disabled="isUpdating"
                                   ng-model="task.tempNotes">
                         </textarea>
                     </div>
 
                     <div class="clearfix">
-                        <button type="button" ng-show="isLoggedIn"
+                        <button type="button"
                                 class="btn btn-default" ng-click="notesPreview = !notesPreview">
                             Toggle Preview
                         </button>
@@ -528,7 +533,7 @@
                             <div class="btn" ng-show="isUpdating">
                                 <i class="fa fa-spinner fa-lg fa-spin"></i>
                             </div>
-                            <button type="button" ng-show="isLoggedIn"
+                            <button type="button"
                                     class="btn btn-primary"
                                     ng-click="updateTask(task, 'link', task.tempNotes);
                                               cancelEditNotes(task)"
@@ -543,19 +548,17 @@
                         </div>
                     </div>
                 </form>
-                <div class="row text-center" ng-show="!task.editing && !task.link && isLoggedIn">
+                <div class="row pull-right" ng-show="!task.editing && !task.link">
                     <button class="btn btn-primary btn-xs"
                             ng-click="editNotes(task)">
                         <i class="fa fa-pencil"></i> Add notes
                     </button>
                 </div>
             </div>
-            <div class="col-xs-1" ng-show="!task.editing && task.link">
-                <button class="btn btn-primary btn-xs"
-                        ng-show="isLoggedIn"
-                        ng-click="editNotes(task)">
-                    <i class="fa fa-pencil"></i> Edit
-                </button>
+            <div class="col-xs-10 col-xs-offset-1 task-notes"
+                 ng-show="!isLoggedIn && task.link">
+                <insert-markdown content="task.link" ng-show="!task.editing"></insert-markdown>
+                <insert-markdown content="task.tempNotes" ng-show="task.editing && notesPreview"></insert-markdown>
             </div>
         </div>
     </td>
diff --git a/src/theme/base/edit_tasks.less b/src/theme/base/edit_tasks.less
index e7c91cb5..4921ee48 100644
--- a/src/theme/base/edit_tasks.less
+++ b/src/theme/base/edit_tasks.less
@@ -30,6 +30,16 @@
     }
 }
 
+.task-notes {
+    padding-top : 10px;
+    border-radius: 5px;
+    box-shadow: -4px 0px 10px rgba(0,0,0,0.1);
+}
+
+.row {
+    padding-bottom : 10px;
+}
+
 input-inline, project-typeahead, user-typeahead, task-status-dropdown {
     display: inline-block;