fix(dropdowns): make dropdown links stand out

This commit makes sure that all dropdown links on the registries are colored as hrefs to let users know they are able to be clicked.
Third-Culture-Software · Jan 31, 2017 · 6bbd793 · 6bbd793
1 parent b309824
commit 6bbd793
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 79 deletions.
diff --git a/client/src/partials/cash/payments/registry.js b/client/src/partials/cash/payments/registry.js
@@ -122,9 +122,11 @@ function CashPaymentRegistryController(Cash, bhConstants, Notify, Session, uiGri
 
     Cash.search(filters)
       .then(function (rows) {
+
         rows.forEach(function (row) {
           var hasCreditNote = (row.type_id === bhConstants.transactionType.CREDIT_NOTE);
           row._backgroundColor = hasCreditNote ? reversedBackgroundColor : regularBackgroundColor;
+          row._hasCreditNote = hasCreditNote;
         });
 
         vm.gridOptions.data = rows;

diff --git a/client/src/partials/cash/payments/templates/action.cell.html b/client/src/partials/cash/payments/templates/action.cell.html
@@ -1,24 +1,27 @@
-<div class="ui-grid-cell-contents">
-  <span uib-dropdown dropdown-append-to-body>
+<div class="ui-grid-cell-contents text-action" uib-dropdown dropdown-append-to-body uib-dropdown-toggle>
+  <a href>
+    <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
+    <span class="caret"></span>
+  </a>
 
-    <span uib-dropdown-toggle class="text-action">
-      <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
-      <span class="caret"></span>
-    </span>
-    <ul data-action="{{ rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
-      <li><a data-method="receipt" ng-click="grid.appScope.openReceiptModal(row.entity.uuid)" data-link-receipt="{{ ::row.entity.uuid }}" href><i class="fa fa-file-pdf-o"></i> <span translate>TABLE.COLUMNS.RECEIPT</span></a></li>
-      <li>
-        <a href id="{{row.entity.reference}}" 
-            data-method="cancel"
-            ng-click="grid.appScope.cancelCash(row.entity)" 
-            ng-hide="{{row.entity.type_id === grid.appScope.bhConstants.transactionType.CREDIT_NOTE}}">
-            <span class="text-danger"><i class="fa fa-clone"></i> <span translate>TABLE.COLUMNS.CANCEL_CASH</span></span>
-        </a>
-        <a ng-show="{{row.entity.type_id === grid.appScope.bhConstants.transactionType.CREDIT_NOTE}}"
-            class="text-danger text-action" href>
-            <span class="text-danger"><i class="fa fa-ban"></i> <span translate>FORM.LABELS.CANCELED</span></span>
-        </a>
-      </li>
-    </ul>
-  </span>
+  <ul data-action="{{ rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
+    <li>
+      <a data-method="receipt" ng-click="grid.appScope.openReceiptModal(row.entity.uuid)" data-link-receipt="{{ ::row.entity.uuid }}" href>
+        <i class="fa fa-file-pdf-o"></i> <span translate>TABLE.COLUMNS.RECEIPT</span>
+      </a>
+    </li>
+    <li>
+      <a href
+        id="{{row.entity.reference}}"
+        data-method="cancel"
+        ng-click="grid.appScope.cancelCash(row.entity)"
+        ng-hide="row.entity._hasCreditNote">
+        <span class="text-danger"><i class="fa fa-clone"></i> <span translate>TABLE.COLUMNS.CANCEL_CASH</span></span>
+      </a>
+
+      <a ng-show="row.entity._hasCreditNote" href>
+        <span class="text-danger"><i class="fa fa-ban"></i> <span translate>FORM.LABELS.CANCELED</span></span>
+      </a>
+    </li>
+  </ul>
 </div>
diff --git a/client/src/partials/cash/payments/templates/grid.canceled.tmpl.html b/client/src/partials/cash/payments/templates/grid.canceled.tmpl.html
@@ -1,5 +1,3 @@
-<!-- This template is taken from https://raw.githubusercontent.com/angular-ui/ui-grid/master/src/templates/ui-grid/ui-grid-row.html -->
-
 <div
   ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
   ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
@@ -10,4 +8,4 @@
   ng-style="row.entity._backgroundColor"
   ui-grid-cell
   ng-dblClick="grid.appScope.openReceiptModal(row.entity.uuid)">
-</div>
+</div>
diff --git a/client/src/partials/patients/templates/action.cell.html b/client/src/partials/patients/templates/action.cell.html
@@ -1,26 +1,24 @@
-<div class="ui-grid-cell-contents">
-  <span uib-dropdown dropdown-append-to-body>
+<div class="ui-grid-cell-contents text-action" uib-dropdown dropdown-append-to-body uib-dropdown-toggle>
+  <a href>
+    <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
+    <span class="caret"></span>
+  </a>
 
-    <span uib-dropdown-toggle class="text-action">
-      <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
-      <span class="caret"></span>
-    </span>
-    <ul data-action="{{ rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
-      <li>
-        <a data-method="record" ui-sref="patientRecord.details({patientID : row.entity.uuid})" href>  
-            <span class="fa fa-book"></span> <span translate>PATIENT_REGISTRY.RECORD</span>  
-        </a> 
-      </li>
-      <li>
-        <a data-method="edit" ui-sref="patientEdit({uuid : row.entity.uuid})" href>  
-            <span class="fa fa-edit"></span> <span translate>TABLE.COLUMNS.EDIT</span>  
-        </a> 
-      </li>
-      <li>
-        <a data-method="card" ng-click="grid.appScope.patientCard(row.entity.uuid)" href>  
-            <span class="fa fa-user"></span> <span translate>PATIENT_REGISTRY.CARD</span>  
-        </a> 
-      </li>
-    </ul>
-  </span>
+  <ul data-action="{{ rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
+    <li>
+      <a data-method="record" ui-sref="patientRecord.details({patientID : row.entity.uuid})" href>
+        <span class="fa fa-book"></span> <span translate>PATIENT_REGISTRY.RECORD</span>
+      </a>
+    </li>
+    <li>
+      <a data-method="edit" ui-sref="patientEdit({uuid : row.entity.uuid})" href>
+        <span class="fa fa-edit"></span> <span translate>TABLE.COLUMNS.EDIT</span>
+      </a>
+    </li>
+    <li>
+      <a data-method="card" ng-click="grid.appScope.patientCard(row.entity.uuid)" href>
+        <span class="fa fa-user"></span> <span translate>PATIENT_REGISTRY.CARD</span>
+      </a>
+    </li>
+  </ul>
 </div>
diff --git a/client/src/partials/users/templates/grid/action.cell.html b/client/src/partials/users/templates/grid/action.cell.html
@@ -1,13 +1,11 @@
-<div class="ui-grid-cell-contents">
-  <span uib-dropdown dropdown-append-to-body>
+<div class="ui-grid-cell-contents text-action" uib-dropdown dropdown-append-to-body uib-dropdown-toggle>
+  <a href>
+    <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
+    <span class="caret"></span>
+  </a>
 
-    <span uib-dropdown-toggle class="text-action">
-      <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
-      <span class="caret"></span>
-    </span>
-    <ul data-action="{{ rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
-      <li><a data-method="edit" ng-click="grid.appScope.edit(row.entity)" href><i class="fa fa-edit"></i> <span translate>FORM.BUTTONS.EDIT</span></a></li>
-      <li><a data-method="permission" ng-click="grid.appScope.editPermissions(row.entity)" href><i class="fa fa-key"></i> <span translate>FORM.BUTTONS.EDIT_PERMISSIONS</span></a></li>
-    </ul>
-  </span>
+  <ul data-action="{{ rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
+    <li><a data-method="edit" ng-click="grid.appScope.edit(row.entity)" href><i class="fa fa-edit"></i> <span translate>FORM.BUTTONS.EDIT</span></a></li>
+    <li><a data-method="permission" ng-click="grid.appScope.editPermissions(row.entity)" href><i class="fa fa-key"></i> <span translate>FORM.BUTTONS.EDIT_PERMISSIONS</span></a></li>
+  </ul>
 </div>
diff --git a/client/src/partials/vouchers/templates/action.cell.html b/client/src/partials/vouchers/templates/action.cell.html
@@ -1,20 +1,18 @@
-<div class="ui-grid-cell-contents">
-  <span uib-dropdown dropdown-append-to-body>
+<div class="ui-grid-cell-contents text-action" uib-dropdown dropdown-append-to-body uib-dropdown-toggle>
+  <a href>
+    <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
+    <span class="caret"></span>
+  </a>
 
-    <span uib-dropdown-toggle class="text-action">
-      <span data-method="action" translate>FORM.BUTTONS.ACTIONS</span>
-      <span class="caret"></span>
-    </span>
-    <ul data-action="{{ rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
-      <li>
-        <a href 
-          data-method="receipt"
-          ng-if="row.entity.uuid"
-          ng-click="grid.appScope.showReceipt(row.entity.uuid)"
-          data-link-receipt="{{ ::row.entity.uuid }}">
-          <i class="fa fa-file-pdf-o"></i> <span translate>TABLE.COLUMNS.RECEIPT</span>
-        </a>
-      </li>
-    </ul>
-  </span>
-</div>
+  <ul data-action="{{ rowRenderIndex}}"  class="dropdown-menu-right" uib-dropdown-menu>
+    <li>
+      <a href
+        data-method="receipt"
+        ng-if="row.entity.uuid"
+        ng-click="grid.appScope.showReceipt(row.entity.uuid)"
+        data-link-receipt="{{ ::row.entity.uuid }}">
+        <i class="fa fa-file-pdf-o"></i> <span translate>TABLE.COLUMNS.RECEIPT</span>
+      </a>
+    </li>
+  </ul>
+</div>