commit 0b0e26deda16a86b316f1cda631f18a45608d5bf
author Iftekharul Islam <iffy.ryan@ibm.com> Thu Nov 15 10:44:59 2018 -0600
committer Gunnar Mills <gmills@us.ibm.com> Thu Dec 20 14:01:58 2018 +0000
tree eb18790344b438fb2a8a3080eff3f0effb81a5b4
parent 971954471f7b5fd59a509a6a0c451c009bb4bbc4

Make actions visible in a disabled state

In event log page, main actions are made visible all the time in a disabled
state. Once select a log item is selected, the corresponding actions become
active.

Resolves openbmc/phosphor-webui#26

Change-Id: Idd7dced5984b7d103a706abc12c1e4889710d420
Signed-off-by: Iftekharul Islam <iffy.ryan@ibm.com>

app/server-health/controllers/log-controller.html

diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index f3f9e89..5ece64a 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -49,13 +49,13 @@
         <p class="inline" ng-hide="selectedEvents.length"><span class="event__select-count">{{filteredLogs.length}}</span> Events are logged</p>
         <!-- when logs are selected, this text changes to show how many logs are checked -->
         <div class="event__actions">
-          <button class="inline btn-delete" ng-show="selectedEvents.length || all" ng-click="confirm= ! confirm">
+          <button class="inline btn-delete" ng-class="{'disabled': (!selectedEvents.length && !all)}" ng-disabled="!selectedEvents.length && !all" ng-click="confirm= ! confirm">
             <img class="event__icon" src="../../assets/images/icon-trashcan-white.svg" alt="">Delete
           </button>
-          <button class="inline btn-resolve" ng-class="{'disabled': ((selectedEvents|unResolvedCount) == 0)}" ng-show="selectedEvents.length || all" ng-click="resolve()" ng-disabled="(selectedEvents|unResolvedCount) == 0">
+          <button class="inline btn-resolve" ng-class="{'disabled': ((selectedEvents|unResolvedCount) == 0)}" ng-click="resolve()" ng-disabled="(selectedEvents|unResolvedCount) == 0">
             <img class="event__icon" src="../../assets/images/icon-check-white.svg" alt="">Mark as resolved
           </button>
-            <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export"  download="{{export_name}}" ng-show="selectedEvents.length || all">Export</a>
+          <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export"  ng-class="{'disabled': (!selectedEvents.length && !all)}" download="{{export_name}}">Export</a>
         </div>
       </div>
     </div>

app/server-health/styles/log.scss

diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 6096acb..0e7174e 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -357,6 +357,15 @@
       float: right;
       margin-top: -5px;
     }
+    .disabled {
+      opacity: 0.2;
+      pointer-events: none;
+      cursor: default;
+      text-decoration: none;
+    }
+    .disabled:hover {
+      text-decoration: none;
+    }
   }
   .event__icon {
     width: 20px;