Fixed action menu in TPS UI.

The TPS UI has been modified to display the appropriate actions
menu based on the roles of the user. TPS agent can only enable
and disable profiles, and also approve or reject pending requests.
TPS admin can only edit disabled profiles, then submit it for
approval, or cancel the request.

https://fedorahosted.org/pki/ticket/1292

2 files changed, 34 insertions, 10 deletions

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 0d5edd7fd..6042dc3ee 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -42,8 +42,13 @@
 }
 
 .pki-menu {
+  display: inline-block;
+}
+
+.pki-menu ul {
   padding: 0;
   list-style-type: none;
+  list-style-position: inside;
 }
 
 .pki-actions {
@@ -51,6 +56,13 @@
   display: inline-block;
 }
 
+.pki-actions ul {
+  padding: 0;
+  list-style-type: none;
+  list-style-position: inside;
+  text-align: right;
+}
+
 .pki-fields {
   margin-bottom: 5px;
 }
@@ -79,6 +91,14 @@ input[readonly="readonly"]:enabled:hover {
   border-color: #FFFFFF;
 }
 
+textarea {
+  background-color: #FFFFFF;
+}
+
+textarea[readonly="readonly"] {
+  background-color: #F8F8F8;
+}
+
 table tfoot tr th {
   padding: 6px 15px;
   font-size: 11.5px;
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 98e3330c0..c1c57793c 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -485,6 +485,8 @@ var Table = Backbone.View.extend({
 
         self.thead = $("thead", self.$el);
         self.buttons = $(".pki-table-buttons", self.thead);
+        self.addButton = $("[name='add']", self.buttons);
+        self.removeButton = $("[name='remove']", self.buttons);
 
         // setup search field handler
         self.searchField = $("input[name='search']", self.thead);
@@ -497,12 +499,12 @@ var Table = Backbone.View.extend({
         });
 
         // setup add button handler
-        $("button[name='add']", self.buttons).click(function(e) {
+        self.addButton.click(function(e) {
             self.add();
         });
 
         // setup remove button handler
-        $("button[name='remove']", self.buttons).click(function(e) {
+        self.removeButton.click(function(e) {
             var items = [];
             var message = "Are you sure you want to remove the following entries?\n";
 
@@ -625,10 +627,12 @@ var Table = Backbone.View.extend({
         var self = this;
 
         if (self.mode == "view") {
-            self.buttons.hide();
+            self.addButton.hide();
+            self.removeButton.hide();
 
         } else { // self.mode == "edit"
-            self.buttons.show();
+            self.addButton.show();
+            self.removeButton.show();
         }
 
         // clear selection
@@ -928,27 +932,27 @@ var EntryPage = Page.extend({
         self.actions = self.$(".pki-actions");
 
         self.viewMenu = $(".pki-actions-menu[name='view']", self.actions);
-        self.editLink = $("a[name='edit']", self.viewMenu);
+        self.editAction = $("[name='edit']", self.viewMenu);
 
         self.editMenu = $(".pki-actions-menu[name='edit']", self.actions);
-        self.cancelButton = $("button[name='cancel']", self.editMenu);
-        self.saveButton = $("button[name='save']", self.editMenu);
+        self.cancelAction = $("[name='cancel']", self.editMenu);
+        self.saveAction = $("[name='save']", self.editMenu);
 
         self.idField = self.$("input[name='id']");
         self.statusField = self.$("input[name='status']");
 
-        self.editLink.click(function(e) {
+        $("a", self.editAction).click(function(e) {
             self.mode = "edit";
             self.render();
             e.preventDefault();
         });
 
-        self.cancelButton.click(function(e) {
+        self.cancelAction.click(function(e) {
             self.cancel();
             e.preventDefault();
         });
 
-        self.saveButton.click(function(e) {
+        self.saveAction.click(function(e) {
             self.save();
             e.preventDefault();
         });