permissions UI facelift

7 files changed, 61 insertions, 14 deletions

diff --git a/core/views/permissions_form.html.php b/core/views/permissions_form.html.php
index b1f37dc0..81d8cb7c 100644
--- a/core/views/permissions_form.html.php
+++ b/core/views/permissions_form.html.php
@@ -1,8 +1,8 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<form method="post" action="<?= url::site("permissions/edit/$item->id") ?>">
+<form method="post" action="<?= url::site('permissions/edit/$item->id') ?>">
   <?= access::csrf_form_field() ?>
   <fieldset>
-    <legend> <?= t("Edit Permissions") ?> </legend>
+    <legend> <?= t('Edit Permissions') ?> </legend>
 
     <table>
       <tr>
@@ -16,29 +16,77 @@
       <tr>
         <td> <?= t($permission->display_name) ?> </td>
         <? foreach ($groups as $group): ?>
-        <td>
           <? $intent = access::group_intent($group, $permission->name, $item) ?>
           <? $allowed = access::group_can($group, $permission->name, $item) ?>
           <? $lock = access::locked_by($group, $permission->name, $item) ?>
 
           <? if ($lock): ?>
-            <span class="gDenied"><?= t("denied and locked by") ?> <a href="javascript:show(<?= $lock->id ?>)"><?= t("parent") ?></a></span>
+            <td class="gDenied">
+              <img src="<?= url::file('themes/default/images/ico-denied.png') ?>" title="<?= t('denied and locked through parent album') ?>" alt="<?= t('denied icon') ?>" />
+              <a href="javascript:show(<?= $lock->id ?>)" title="<?= t('click to go to parent album') ?>">
+                <img src="<?= url::file('themes/default/images/ico-lock.png') ?>" alt="<?= t('locked icon') ?>" />
+              </a>
+            </td>
           <? else: ?>
             <? if ($intent === null): ?>
               <? if ($allowed): ?>
-                <a href="javascript:set('deny',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)" class="gAllowed">allowed by parent</a>
+                <td class="gAllowed">
+                  <a href="javascript:set('allow',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                    title="<?= t('allowed through parent album, click to allow explicitly') ?>">
+                    <img src="<?= url::file('themes/default/images/ico-success-pale.png') ?>" alt="<?= t('passive allowed icon') ?>" />
+                  </a>
+                  <a href="javascript:set('deny',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                    title="<?= t('click to deny') ?>">
+                    <img src="<?= url::file('themes/default/images/ico-denied-gray.png') ?>" alt="<?= t('inactive denied icon') ?>" />
+                  </a>
+                </td>
               <? else: ?>
-                <a href="javascript:set('deny',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)" class="gDenied">denied by parent</a>
+                <td class="gDenied">
+                  <a href="javascript:set('allow',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                    title="<?= t('click to allow') ?>">
+                    <img src="<?= url::file('themes/default/images/ico-success-gray.png') ?>" alt="<?= t('inactive allowed icon') ?>" />
+                  </a>
+                  <a href="javascript:set('deny',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                    title="<?= t('denied through parent album, click to deny explicitly') ?>">
+                    <img src="<?= url::file('themes/default/images/ico-denied-pale.png') ?>" alt="<?= t('passive denied icon') ?>" />
+                  </a>
+                </td>
               <? endif ?>
+              
             <? elseif ($intent === access::DENY): ?>
-              <a href="javascript:set('allow',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)" class="gDenied">denied</a>
+              <td class="gDenied">
+              <a href="javascript:set('allow',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                title="<?= t('click to allow') ?>">
+                <img src="<?= url::file('themes/default/images/ico-success-gray.png') ?>" alt="<?= t('inactive allowed icon') ?>" />
+              </a>
+              <a href="javascript:set('reset',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                title="<?= t('denied, click to reset') ?>">
+                <img src="<?= url::file('themes/default/images/ico-denied.png') ?>" alt="<?= t('denied icon') ?>" />
+              </a>
             <? elseif ($intent === access::ALLOW): ?>
               <? // skip over the "allowed/denied by parent" state when we're setting permissions on ?>
               <? // the root album, since it has no parent. ?>
               <? if ($item->id == 1): ?>
-              <a href="javascript:set('deny',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)" class="gAllowed">allowed</a>
+                <td class="gAllowed">
+                  <span>
+                    <img src="<?= url::file('themes/default/images/ico-success.png') ?>" title="allowed" alt="<?= t('allowed icon') ?>" />
+                  </span>
+                  <a href="javascript:set('deny',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                    title="<?= t('click to deny') ?>">
+                    <img src="<?= url::file('themes/default/images/ico-denied-gray.png') ?>" alt="<?= t('inactive denied icon') ?>" />
+                  </a>
+                </td>
               <? else: ?>
-              <a href="javascript:set('reset',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)" class="gAllowed">allowed</a>
+                <td class="gAllowed">
+                  <a href="javascript:set('reset',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                    title="<?= t('allowed, click to reset') ?>">
+                    <img src="<?= url::file('themes/default/images/ico-success.png') ?>" alt="<?= t('allowed icon') ?>" />
+                  </a>
+                  <a href="javascript:set('deny',<?= $group->id ?>,<?= $permission->id ?>,<?= $item->id ?>)"
+                    title="<?= t('click to deny') ?>">
+                    <img src="<?= url::file('themes/default/images/ico-denied-gray.png') ?>" alt="<?= t('inactive denied icon') ?>" />
+                  </a>
+                </td>
               <? endif ?>
             <? endif ?>
           <? endif ?>
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css
index 9313086c..26a8eaf7 100644
--- a/themes/default/css/screen.css
+++ b/themes/default/css/screen.css
@@ -987,13 +987,12 @@ form .gError,
 /* Permissions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #gPermissions .gDenied, #gPermissions .gAllowed {
-  padding-left: 20px;
-  background-position: left;
-  background-repeat: no-repeat;
+  text-align: center;
+  vertical-align: middle;
 }
 #gPermissions .gDenied {
-  background-image: url('../images/ico-denied.png');
+  background-color: #FFCCCC;
 }
 #gPermissions .gAllowed {
-  background-image: url('../images/ico-success.png');
+  background-color: #CCFFCC;
 }
diff --git a/themes/default/images/ico-denied-gray.png b/themes/default/images/ico-denied-gray.png
new file mode 100644
index 00000000..56db3ff5
--- /dev/null
+++ b/themes/default/images/ico-denied-gray.png
diff --git a/themes/default/images/ico-denied-pale.png b/themes/default/images/ico-denied-pale.png
new file mode 100644
index 00000000..1e992230
--- /dev/null
+++ b/themes/default/images/ico-denied-pale.png
diff --git a/themes/default/images/ico-lock.png b/themes/default/images/ico-lock.png
new file mode 100644
index 00000000..2ebc4f6f
--- /dev/null
+++ b/themes/default/images/ico-lock.png
diff --git a/themes/default/images/ico-success-gray.png b/themes/default/images/ico-success-gray.png
new file mode 100644
index 00000000..74b2032f
--- /dev/null
+++ b/themes/default/images/ico-success-gray.png
diff --git a/themes/default/images/ico-success-pale.png b/themes/default/images/ico-success-pale.png
new file mode 100644
index 00000000..dc8d1ded
--- /dev/null
+++ b/themes/default/images/ico-success-pale.png