From b240af6d7cf9de11a398b8df033ec0a8f5b165aa Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Wed, 1 Apr 2015 14:41:41 -0400
Subject: [PATCH] Redo styling of the default permissions manager

---
 static/css/core-ui.css                      |  6 +-
 static/css/directives/ui/robots-manager.css | 10 ---
 static/css/quay.css                         | 10 +++
 static/directives/prototype-manager.html    | 67 ++++++++++++---------
 static/partials/org-view.html               |  1 -
 5 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/static/css/core-ui.css b/static/css/core-ui.css
index 7e614d998..37cc03d69 100644
--- a/static/css/core-ui.css
+++ b/static/css/core-ui.css
@@ -779,9 +779,11 @@
 }
 
 .co-table thead td {
+  color: #999;
+  font-size: 90%;
   text-transform: uppercase;
-  font-size: 16px;
-  color: #666;
+  font-weight: 300;
+  padding-top: 0px !important;
 }
 
 .co-table thead td a {
diff --git a/static/css/directives/ui/robots-manager.css b/static/css/directives/ui/robots-manager.css
index 3be428238..b2eb42bcf 100644
--- a/static/css/directives/ui/robots-manager.css
+++ b/static/css/directives/ui/robots-manager.css
@@ -1,13 +1,3 @@
-.robots-manager-element .manager-header {
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
-}
-
-.robots-manager-element .manager-header h3 {
-  margin-bottom: 10px;
-}
-
 .robots-manager-element .robot a {
   font-size: 16px;
   cursor: pointer;
diff --git a/static/css/quay.css b/static/css/quay.css
index c61321b0e..c357bd8e1 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -4935,3 +4935,13 @@ i.rocket-icon {
   text-align: center;
 }
 
+.manager-header {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.manager-header h3 {
+  margin-bottom: 10px;
+}
+
diff --git a/static/directives/prototype-manager.html b/static/directives/prototype-manager.html
index 85e897318..639285224 100644
--- a/static/directives/prototype-manager.html
+++ b/static/directives/prototype-manager.html
@@ -1,54 +1,67 @@
 <div class="prototype-manager-element">
-  <div class="quay-spinner" ng-show="loading"></div>
-
-  <div class="cor-container" ng-show="!loading">
-    <div class="alert alert-info">
-      Default permissions provide a means of specifying <span class="context-tooltip" data-title="By default, all repositories have the creating user added as an 'Admin'" bs-tooltip="tooltip.title">additional</span> permissions that should be granted automatically to a repository <strong>when it is created</strong>.
+  <div class="cor-loader" ng-show="loading"></div>
+  <div ng-show="!loading">
+    <div class="manager-header">
+      <div class="side-controls">
+        <button class="btn btn-primary" ng-click="showAddDialog()">
+          <i class="fa fa-plus"></i>
+          Create Default Permission
+        </button>
+      </div>
+      <h3>Default Permissions</h3>
     </div>
 
-    <div class="side-controls">
-      <button class="btn btn-success" ng-click="showAddDialog()">
-        <i class="fa fa-plus"></i>
-        New Default Permission
-      </button>
+    <div class="manager-header section-description-header">
+      The Default permissions panel defines permissions that should be granted automatically to a repository when it is created, in addition to the default of the repository's
+      creator. Permissions are assigned based on the user who created the repository.
+      <br><br>
+      <strong>Note:</strong> Permissions added here do <strong>not</strong> automatically get added to
+      existing repositories.
     </div>
 
-    <table class="table">
+    <table class="co-table">
       <thead>
-        <th>
+        <td>
           <span class="context-tooltip"
                 data-title="The user or robot that is creating a repository. If '(Organization Default)', then any repository created in this organization will be granted the permission."
-                bs-tooltip="tooltip.title" data-container="body">
-            Repository Creator
+                data-container="body" bs-tooltip>
+            Repository Created By
           </span>
-        </th>
-        <th>
-          <span class="context-tooltip" data-title="The user, robot or team that is being granted the permission"
-                bs-tooltip="tooltip.title" data-container="body">
-            Applies To User/Robot/Team
+        </td>
+        <td>
+          <span class="context-tooltip"
+                data-title="The user, robot or team that is being granted the permission"
+                data-container="body" bs-tooltip>
+            Permission Applied To
           </span>
-        </th>
-        <th>Permission</th>
-        <th style="width: 150px"></th>
+        </td>
+        <td>Permission</td>
+        <td class="options-col"></td>
       </thead>
 
       <tr ng-repeat="prototype in prototypes | orderBy:comparePrototypes">
         <td>
           <span class="entity-reference block-reference" entity="prototype.activating_user"
-                namespace="organization.name" ng-show="prototype.activating_user"></span>
+                namespace="organization.name" ng-if="prototype.activating_user"
+                avatar-size="24"></span>
 
-          <span ng-show="!prototype.activating_user" style="font-variant: small-caps; font-weight: bold; font-size: 16px;">
+          <span ng-show="!prototype.activating_user"
+                style="font-variant: small-caps; font-weight: bold; font-size: 16px;">
             (Organization Default)
           </span>
         </td>
         <td>
-          <span class="entity-reference block-reference" entity="prototype.delegate" namespace="organization.name"></span>
+          <span class="entity-reference block-reference" entity="prototype.delegate" namespace="organization.name" avatar-size="24"></span>
         </td>
         <td>
           <span class="role-group" current-role="prototype.role" role-changed="setRole(role, prototype)" roles="roles"></span>
         </td>
-        <td>
-          <span class="delete-ui" delete-title="'Delete Permission'" perform-delete="deletePrototype(prototype)"></span>
+        <td class="options-col">
+          <span class="cor-options-menu">
+            <span class="cor-option" option-click="deletePrototype(prototype)">
+              <i class="fa fa-times"></i> Delete Permission
+            </span>
+          </span>
         </td>
       </tr>
     </table>
diff --git a/static/partials/org-view.html b/static/partials/org-view.html
index 44f000eac..2652fceb9 100644
--- a/static/partials/org-view.html
+++ b/static/partials/org-view.html
@@ -70,7 +70,6 @@
 
         <!-- Default Permissions -->
         <div id="default" class="tab-pane">
-          <h3>Default Permissions</h3>
           <div class="prototype-manager" organization="organization"></div>
         </div>