Improvements to Annotations listing design (#12476)

* Improvements to Annotations listing design

:# Please enter the commit message for your changes. Lines starting

* fixed create a new annotation
 Please enter the commit message for your changes. Lines starting

* fixed the delete feature so it's not a button

3 files changed, 43 insertions, 19 deletions

diff --git a/plugins/Annotations/templates/_annotation.twig b/plugins/Annotations/templates/_annotation.twig
index ab0a8a2ca6..c90e99a428 100755
--- a/plugins/Annotations/templates/_annotation.twig
+++ b/plugins/Annotations/templates/_annotation.twig
@@ -8,23 +8,32 @@
                 <img src="plugins/Morpheus/images/star_empty.png"/>
             {% endif %}
         </div>
-        <div class="annotation-period {% if annotation.canEditOrDelete %}annotation-enter-edit-mode{% endif %}">({{ annotation.date }})</div>
+
+      <div class="annotation-period {% if annotation.canEditOrDelete %}annotation-enter-edit-mode{% endif %}">{{ annotation.date }}</div>
         {% if annotation.canEditOrDelete %}
             <div class="annotation-period-edit" style="display:none;">
-                <a href="#">{{ annotation.date }}</a>
+                <a href="#" class= "font">{{ annotation.date }}</a>
                 <div class="datepicker" style="display:none;"/>
             </div>
         {% endif %}
     </td>
+
+    {% if annotation.user is defined and userLogin != 'anonymous' %}
+        <td class="annotation-user-cell">
+            <span class="annotation-user">{{ annotation.user }}</span><br/>
+
+        </td>
+    {% endif %}
+
+
     <td class="annotation-value">
         <div class="annotation-view-mode">
             <span {% if annotation.canEditOrDelete %}title="{{ 'Annotations_ClickToEdit'|translate }}"
                   class="annotation-enter-edit-mode"{% endif %}>{{ annotation.note|raw }}</span>
-            {% if annotation.canEditOrDelete %}
-                <a href="#" class="edit-annotation annotation-enter-edit-mode" title="{{ 'Annotations_ClickToEdit'|translate }}">{{ 'General_Edit'|translate }}...</a>
-            {% endif %}
         </div>
-        {% if annotation.canEditOrDelete %}
+
+
+          {% if annotation.canEditOrDelete %}
             <div class="annotation-edit-mode" style="display:none;">
                 <div class="input-field">
                     <input class="annotation-edit browser-default" type="text" value="{{ annotation.note|raw }}"/>
@@ -35,13 +44,19 @@
             </div>
         {% endif %}
     </td>
-    {% if annotation.user is defined and userLogin != 'anonymous' %}
-        <td class="annotation-user-cell">
-            <span class="annotation-user">{{ annotation.user }}</span><br/>
-            {% if annotation.canEditOrDelete %}
-                <a href="#" class="delete-annotation" style="display:none;" title="{{ 'Annotations_ClickToDelete'|translate }}">{{ 'General_Delete'|translate }}</a>
-            {% endif %}
-        </td>
-    {% endif %}
-</tr>
+<td class = "wider">
+{% if annotation.canEditOrDelete %}
+
+  <span class="table-action edit-annotation annotation-enter-edit-mode"  title="{{ 'Annotations_ClickToEdit'|translate }}">
+    <span class="icon-edit"></span>
+  </span>
+
+  <a class="delete-annotation" title="Delete">
+      <span class="icon-delete"></span>
+  </a>
 
+{% endif %}
+</td>
+
+
+</tr>
diff --git a/plugins/Annotations/templates/_annotationList.twig b/plugins/Annotations/templates/_annotationList.twig
index c5a0db951c..e7f8a503e3 100755
--- a/plugins/Annotations/templates/_annotationList.twig
+++ b/plugins/Annotations/templates/_annotationList.twig
@@ -5,18 +5,23 @@
     {% endif %}
 
     <table>
+
+
         {% for annotation in annotations %}
             {% include "@Annotations/_annotation.twig" %}
         {% endfor %}
+
+
         <tr class="new-annotation-row" style="display:none;" data-date="{{ selectedDate }}">
             <td class="annotation-meta">
                 <div class="annotation-star">&nbsp;</div>
                 <div class="annotation-period-edit">
-                    <a href="#">{{ selectedDate }}</a>
+                    <a href="#" class="font">{{ selectedDate }}</a>
 
                     <div class="datepicker" style="display:none;"/>
                 </div>
             </td>
+            <td class="annotation-user-cell"><span class="annotation-user">{{ userLogin }}</span></td>
             <td class="annotation-value">
                 <div class="input-field">
                     <input type="text" value=""
@@ -26,7 +31,6 @@
                 <input type="button" class="btn new-annotation-save" value="{{ 'General_Save'|translate }}"/>
                 <input type="button" class="btn new-annotation-cancel" value="{{ 'General_Cancel'|translate }}"/>
             </td>
-            <td class="annotation-user-cell"><span class="annotation-user">{{ userLogin }}</span></td>
         </tr>
     </table>
 
diff --git a/plugins/Annotations/templates/getAnnotationManager.twig b/plugins/Annotations/templates/getAnnotationManager.twig
index e700e2cc5d..3a3899334d 100755
--- a/plugins/Annotations/templates/getAnnotationManager.twig
+++ b/plugins/Annotations/templates/getAnnotationManager.twig
@@ -4,7 +4,7 @@
      {% endif %}>
 
     <div class="annotations-header">
-        <span>{{ 'Annotations_Annotations'|translate }}</span>
+        <span class= "annotation">{{ 'Annotations_Annotations'|translate }}</span>
     </div>
 
     <div class="annotation-list-range">{{ startDatePretty }}{% if startDate != endDate %} &mdash; {{ endDatePretty }}{% endif %}</div>
@@ -17,11 +17,16 @@
     </div>
 
     <div class="annotation-controls">
+
         {% if canUserAddNotes %}
-            <a href="#" class="add-annotation" title="{{ 'Annotations_CreateNewAnnotation'|translate }}">{{ 'Annotations_CreateNewAnnotation'|translate }}</a>
+        <a class="add-annotation">
+          <span class="icon-add"></span>
+          {{ 'Annotations_CreateNewAnnotation'|translate }}
+        </a>
         {% elseif userLogin == 'anonymous' %}
             <a href="index.php?module=Login">{{ 'Annotations_LoginToAnnotate'|translate }}</a>
         {% endif %}
+
     </div>
 
 </div>