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

4 files changed, 102 insertions, 39 deletions

diff --git a/plugins/Annotations/stylesheets/annotations.less b/plugins/Annotations/stylesheets/annotations.less
index eef8f9c478..6270ebbe05 100755
--- a/plugins/Annotations/stylesheets/annotations.less
+++ b/plugins/Annotations/stylesheets/annotations.less
@@ -15,7 +15,7 @@
 
 .annotation-manager {
     text-align: left;
-    margin-top: 5px;
+    margin-top: 30px;
 
   .new-annotation-row {
     height: 145px;
@@ -39,10 +39,19 @@
   }
 }
 
+span.annotation {
+  display: block;
+  font-size: 20px;
+  color: black;
+  font-style: normal;
+  text-align: left;
+  padding-left: 10px;
+}
+
 .annotations-header {
     display: inline-block;
     width: 128px;
-    text-align: right;
+    text-align: left;
     font-size: 12px;
     font-style: italic;
     margin-bottom: 8px;
@@ -52,16 +61,24 @@
 
 .annotation-controls {
     display: inline-block;
-    margin-left: 132px;
+    margin:0;
+    padding: 50px 0px 10px 10px;
+    color: transparent;
+}
+
+.annotation-controls a:hover {
+    text-decoration: underline;
 }
 
+
 .annotation-controls>a {
-    font-size: 11px;
-    font-style: italic;
-    color: @theme-color-text-lighter;
+    font-size:14px;
+    font-style: normal;
+    color: black;
     cursor: pointer;
     padding: 3px 0 6px 0;
     display: inline-block;
+    margin:0;
 }
 
 .annotation-controls>a:hover {
@@ -74,15 +91,17 @@
 
 .annotation-list table {
     width: 100%;
+
 }
 
 .annotation-list-range {
-    display: inline-block;
-    font-size: 12px;
+    display: block;
+    font-size: 15px;
     font-style: italic;
     color: @theme-color-text-lighter;
     vertical-align: top;
     margin: 0 0 8px 8px;
+    padding-bottom: 20px;
 }
 
 .empty-annotation-list, .annotation-list .loadingPiwik {
@@ -94,15 +113,16 @@
 }
 
 .annotation-meta {
-    width: 128px;
-    text-align: right;
+    width: 159px;
+    text-align: left;
     vertical-align: top;
     font-size: 14px;
+    padding-top: 10px;
 }
 
 .annotation-user {
-    font-style: italic;
-    font-size: 11px;
+    font-style: normal;
+    font-size: 13px;
     color: @theme-color-text-light;
 }
 
@@ -113,7 +133,7 @@
 
 .annotation-period {
     display: inline-block;
-    font-style: italic;
+    font-style: normal;
     margin: 0 8px 8px 8px;
     vertical-align: top;
 }
@@ -127,6 +147,7 @@
 
 .annotation-enter-edit-mode {
     cursor: pointer;
+    font-size: 15px;
 }
 
 .annotation-edit, .new-annotation-edit {
@@ -147,15 +168,15 @@
 }
 
 .delete-annotation {
-    font-size: 12px;
-    font-style: italic;
-    color: red;
+    font-size: 15px;
+    color: #666666;
     text-decoration: none;
-    display: inline-block;
+    display: NONE;
 }
 
 .delete-annotation:hover {
-    text-decoration: underline;
+    color: #cc3300;
+    text-decoration: none;
 }
 
 .annotation-manager .submit {
@@ -163,9 +184,11 @@
 }
 
 .edit-annotation {
-    font-size: 10px;
-    color: @theme-color-text-lighter;
+    font-size: 13px;
+    color: black;
     font-style: italic;
+    padding: 6px 5px;
+    margin-top: -5px;
 }
 
 .edit-annotation:hover {
@@ -202,3 +225,19 @@
     border: 1px solid #e4e5e4;
     border-radius: 4px;
 }
+
+a.add-annotation {
+  margin: 0;
+}
+
+td.padding {
+  padding: 1px 5px 6px 5px;
+}
+
+td.wider {
+  width: 80px;
+}
+
+a.font   {
+  font-size: 14px;
+}
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>