Updates to UI

internet2 · Sep 20, 2022 · 68283c1 · 68283c1
1 parent 3110bbf
commit 68283c1
Show file tree

Hide file tree

Showing 15 changed files with 141 additions and 87 deletions.
diff --git a/Lib/lang.php b/Lib/lang.php
@@ -158,6 +158,6 @@
   'pl.grouperlite.pagination.counter' => 'Viewing {:start}-{:end} of {:count}',
   'pl.grouperlite.attributes.zero-state' => 'No Attributes Associated to this Group.',
   'pl.grouperlite.groups.zero-state' => 'No groups found.',
-  'pl.grouperlite.working-groups.zero-state' => 'No working groups found.',
+  'pl.grouperlite.working-groups.zero-state' => 'None.',
   'pl.grouperlite.email-lists.zero-state' => 'No email lists found.'
 );
diff --git a/View/CoGrouperLites/display.ctp b/View/CoGrouperLites/display.ctp
@@ -48,7 +48,7 @@ echo $this->element('GrouperLite.base-styles');
                         </div>
                     </div>
                     <div class="col-xs-12 col-md-6">
-                        <h3 class="text-center mb-2 mt-2 h6"><i class="fa fa-users"></i>&nbsp; <?php echo _txt('pl.grouperlite.dashboard.heading.groups'); ?></h3>
+                        <h3 class="text-center mb-2 mt-2 h6"><em class="material-icons text-grouper" aria-hidden="true">group</em>&nbsp; <?php echo _txt('pl.grouperlite.dashboard.heading.groups'); ?></h3>
                         <div class="px-4 d-flex flex-column justify-content-center align-items-center">
                             <a class="btn btn-primary btn-block text-nowrap" href="<?php print $this->Html->url(
                                                                                         array(

diff --git a/View/Elements/Components/groupattributes.ctp b/View/Elements/Components/groupattributes.ctp
@@ -14,7 +14,7 @@
                     <td><?php echo $attr['attributeDefName'] ?></td>
                     <td>
                         <a href="<?php echo $baseUrl . $attr['attributeDefNameId']; ?>" class="btn btn-grouper btn btn-primary btn btn-raised btn btn-block" target="_blank" role="button">
-                            <?php echo _txt('pl.grouperlite.action.view'); ?> <i class="fa fa-external-link"></i>
+                            <?php echo _txt('pl.grouperlite.action.view'); ?> <em class="material-icons mt-0" aria-hidden="true">link</em>
                         </a>
                     </td>
                 </tr>

diff --git a/View/Elements/Components/navigation-groups.ctp b/View/Elements/Components/navigation-groups.ctp
@@ -64,7 +64,7 @@
             );
             ?>
             <a href="<?php echo $createTemplateGroupUrl; ?>" class="btn btn-grouper btn btn-link px-3 py-2">
-                <i class="fa fa-plus-circle"></i>&nbsp; <?php echo _txt('pl.grouperlite.nav.create-working-group'); ?>
+                <em class="material-icons text-grouper" aria-hidden="true">add_circle</em>&nbsp; <?php echo _txt('pl.grouperlite.nav.create-working-group'); ?>
             </a>
         </div>
     <?php } ?>

diff --git a/View/Elements/Components/optAction.ctp b/View/Elements/Components/optAction.ctp
@@ -6,6 +6,6 @@
 <?php print $this->Form->hidden('GroupName', array('default' => $group, 'id' => 'groupName.' . $idx)); ?>
 <button class="btn btn-sm btn-<?php echo $member ? 'danger' : 'success'; ?> btn-block text-nowrap m-1" type="submit">
   <?php echo $member ? _txt('pl.grouperlite.action.leave') : _txt('pl.grouperlite.action.join') ?> &nbsp;
-  <i class="fa fa-<?php echo $member ? 'user-times' : 'users'; ?> fa-sm"></i>
+  <em class="material-icons mt-0" aria-hidden="true"><?php echo $member ? 'person_off' : 'person'; ?></em>
 </button>
 <?php echo $this->Form->end(); ?>
diff --git a/View/Elements/Components/search.ctp b/View/Elements/Components/search.ctp
@@ -11,12 +11,12 @@
             <div class="input-group-append">
                 <?php if (isset($searchcriteria) && $searchcriteria !== '') { ?>
                     <button class="btn btn-grouper btn-outline-secondary shadow-none" type="button" value="Clear" id="reset-search" aria-label="<?php echo _txt("pl.grouperlite.action.clear"); ?>">
-                        <i class="fa fa-times"></i>
+                        <em class="material-icons lg" aria-hidden="true">close</em>
                         <span class="sr-only"><?php echo _txt("pl.grouperlite.action.clear"); ?></span>
                     </button>
                 <?php } ?>
                 <button class="btn btn-grouper btn-primary px-4" type="submit" value="Submit">
-                    <i class="fa fa-search"></i>
+                    <em class="material-icons" aria-hidden="true">search</em>
                     <span class="ml-2"><?php echo _txt('pl.grouperlite.action.search'); ?></span>
                 </button>
             </div>

diff --git a/View/Elements/Components/subscriberList.ctp b/View/Elements/Components/subscriberList.ctp
@@ -9,7 +9,12 @@
                 </button>
             </div>
             <div class="modal-body loader text-center">
-                <i class="fa fa-spinner fa-pulse fa-3x fa-fw" aria-hidden="true"></i>
+                <svg id="grouper-loader" class="fade-out-half" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
+                    <circle r="20%" cx="15%" cy="50%" color="#000" />
+                    <circle r="20%" cx="50%" cy="50%" color="#000" />
+                    <circle r="20%" cx="85%" cy="50%" color="#000" />
+                </svg>
+
                 <p class="sr-only">Loading...</p>
             </div>
             <div class="modal-body msg">
@@ -29,7 +34,7 @@
                         <!--<input type="text" name="search" class="form-control" value="<?php echo isset($searchcriteria) ? $searchcriteria : ''; ?>" /> -->
                         <div class="input-group-append">
                             <button id="addUserbutton" class=" btn btn-grouper btn-primary px-4" type="submit" value="Submit">
-                                <i id="btn-icon" class="fa fa-plus"></i>
+                                <em class="material-icons lg" aria-hidden="true">add</em>
                                 <span class="ml-2"><?php echo _txt('pl.grouperlite.action.add-user'); ?></span>
                             </button>
                         </div>

diff --git a/View/Elements/base-styles.ctp b/View/Elements/base-styles.ctp
@@ -15,6 +15,18 @@
         --secondary: var(--darkteal)
     }
 
+    .text-grouper {
+        color: var(--primary);
+    }
+
+    .material-icons.mt-0 {
+        margin-top: 0;
+    }
+
+    #content .material-icons.lg {
+        font-size: 1.2rem;
+    }
+
     .grouper .btn:not(.btn-link) {
         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
         max-width: 220px;
@@ -76,4 +88,45 @@
     .modal-open .ui-menu {
         z-index: 2000;
     }
+
+    #grouper-loader {
+        pointer-events: none;
+        width: 100px;
+        display: block;
+        margin: 0 auto;
+        overflow: visible;
+        padding: 15px;
+        max-width: 100%;
+    }
+
+    #grouper-loader circle {
+        transform-origin: center;
+        fill: var(--primary);
+        transition: ease;
+        animation-timing-function: ease-in-out !important;
+    }
+
+    /* fade out half */
+
+    #grouper-loader.fade-out-half circle:nth-child(1) {
+        animation: fadeInHalf 0.9s -2.3s infinite reverse;
+    }
+
+    #grouper-loader.fade-out-half circle:nth-child(2) {
+        animation: fadeInHalf 0.9s -1.3s infinite reverse;
+    }
+
+    #grouper-loader.fade-out-half circle:nth-child(3) {
+        animation: fadeInHalf 0.9s -0.3s infinite reverse;
+    }
+
+    @keyframes fadeInHalf {
+        from {
+            opacity: 0.5;
+        }
+
+        to: {
+            opacity: 1;
+        }
+    }
 </style>
diff --git a/View/GrouperGroups/base.ctp b/View/GrouperGroups/base.ctp
@@ -39,14 +39,14 @@ $this->Html->addCrumb(_txt('pl.grouperlite.crumb.root'), array('controller' => '
     $('.grouper-table .collapse-btn').on('click', function(ev) {
         var btn = $(ev.currentTarget);
         if (btn.hasClass('collapsed')) {
-            btn.find('i').removeClass('fa-caret-right').addClass('fa-caret-down');
+            btn.find('em.material-icons').text('arrow_right');
         } else {
-            btn.find('i').removeClass('fa-caret-down').addClass('fa-caret-right');
+            btn.find('em.material-icons').text('arrow_drop_down');
         }
     });
 
     $('.collapse-wg-working-group-parent').on('hide.bs.collapse', function(ev) {
         $(this).siblings('.collapse-wg-working-group').collapse('hide');
-        $(this).parent().find('.collapse-btn .fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-right');
+        $(this).parent().find('.collapse-btn .material-icons').text('arrow_drop_down');
     });
 </script>
diff --git a/View/GrouperGroups/emaillistinfo.ctp b/View/GrouperGroups/emaillistinfo.ctp
@@ -13,12 +13,12 @@ $attrUrlBase = $baseUrl . $path . $attrOperation;
         <h2><strong><?php echo _txt('pl.grouperlite.group.info.page-heading'); ?></strong> <?php echo $groupergroupsdetail['displayName']; ?></h2>
         <div class="d-flex align-items-center">
             <?php if ($isuserowner === 'T') : ?>
-                <button class="btn btn-grouper btn btn-primary mr-2" data-toggle="modal" data-target="#subscribers"><?php echo _txt('pl.grouperlite.action.view-members'); ?> <i class="fa fa-group"></i></button>
-            <?php endif ?>
-            <a href="<?php echo $groupUrlBase . $groupergroupsdetail['uuid']; ?>" class="btn btn-grouper btn btn-primary btn btn-raised" target="_blank" role="button">
-                <?php echo _txt('pl.grouperlite.action.view-in-grouper'); ?> &nbsp;
-                <i class="fa fa-external-link"></i>
-            </a>
+                <button class="btn btn-grouper btn btn-primary mr-2" data-toggle="modal" data-target="#subscribers"><?php echo _txt('pl.grouperlite.action.view-members'); ?> <em class="material-icons mt-0" aria-hidden="true">group</em>
+                <?php endif ?>
+                <a href="<?php echo $groupUrlBase . $groupergroupsdetail['uuid']; ?>" class="btn btn-grouper btn btn-primary btn btn-raised" target="_blank" role="button">
+                    <?php echo _txt('pl.grouperlite.action.view-in-grouper'); ?> &nbsp;
+                    <em class="material-icons link" aria-hidden="true">group</em>
+                </a>
         </div>
     </div>
     <div class="row">

diff --git a/View/GrouperGroups/groupfields.inc b/View/GrouperGroups/groupfields.inc
@@ -75,7 +75,7 @@ $PRIVILEGES = array('READ', 'VIEW', 'OPTIN', 'OPTOUT', 'ATTRIBUTE_READ');
                     '<span class="sr-only">',
                     '<?php echo _txt('pl.grouperlite.action.remove') ?>',
                     '</span>',
-                    '<i class="fa fa-times"></i>',
+                    '<em class="material-icons" aria-hidden="true">close</em>',
                     '</button>'
                 ].join('');
 

diff --git a/View/GrouperGroups/groupinfo.ctp b/View/GrouperGroups/groupinfo.ctp
@@ -24,7 +24,7 @@ $attrUrlBase = $baseUrl . $path . $attrOperation;
                 <?php /* if ($isuserowner === 'T') : ?>
                     <button class="btn btn-grouper btn btn-primary btn btn-sm ml-4">
                         <?php echo _txt('pl.grouperlite.action.edit'); ?>
-                        <i class="fa fa-pencil fa-sm"></i>
+                        <em class="material-icons mt-0" aria-hidden="true">edit</em>
                     </button>
                 <?php endif; */ ?>
             </div>

diff --git a/View/GrouperGroups/groupmember.ctp b/View/GrouperGroups/groupmember.ctp
@@ -42,7 +42,7 @@ $collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
                     <td colspan="<?php echo $numColumns; ?>">
                         <button type="button" class="btn btn-link btn-text collapse-btn <?php echo $collapsed ? 'collapsed' : ''; ?> fw-bold m-0" data-toggle="collapse" data-target=".collapse-adhoc-group-parent" role="button" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>">
                             <?php echo $config['adHocHeading'] ?? 'Ad-hoc groups'; ?>
-                            <i class="fa <?php echo $collapsed ? 'fa-caret-right' : 'fa-caret-down' ?> fa-sm"></i>
+                            <em class="material-icons mt-0" aria-hidden="true"><?php echo $collapsed ? 'arrow_drop_down' : 'arrow_right' ?></em>
                         </button>
                     </td>
                 </tr>
@@ -65,21 +65,21 @@ $collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
                                     'group' => $group['name'],
                                     'idx' => $key
                                 )) : ''; ?>
-                                <button class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn" data-id="<?php echo urlencode($group['name']); ?>"><?php echo _txt('pl.grouperlite.action.members'); ?> <i class="fa fa-group"></i></button>
-                                <?php if ($isuserowner === 'T') : ?>
-                                    <?php
-                                    $baseUrl = $grouperbaseurl;
-                                    $path = '/grouper/grouperUi/app/UiV2Main.index';
-                                    $groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
-                                    $groupUrlBase = $baseUrl . $path . $groupOperation;
-                                    $attrOperation = '?operation=UiV2AttributeDefName.viewAttributeDefName&attributeDefNameId=';
-                                    $attrUrlBase = $baseUrl . $path . $attrOperation;
-                                    ?>
-                                    <a href="<?php echo $groupUrlBase . $group['uuid']; ?>" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
-                                        <?php echo _txt('pl.grouperlite.action.grouper'); ?> &nbsp;
-                                        <i class="fa fa-external-link"></i>
-                                    </a>
-                                <?php endif ?>
+                                <button class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn" data-id="<?php echo urlencode($group['name']); ?>"><?php echo _txt('pl.grouperlite.action.members'); ?> <em class="material-icons mt-0" aria-hidden="true">group</em>
+                                    <?php if ($isuserowner === 'T') : ?>
+                                        <?php
+                                        $baseUrl = $grouperbaseurl;
+                                        $path = '/grouper/grouperUi/app/UiV2Main.index';
+                                        $groupOperation = '?operation=UiV2Group.viewGroup&groupId=';
+                                        $groupUrlBase = $baseUrl . $path . $groupOperation;
+                                        $attrOperation = '?operation=UiV2AttributeDefName.viewAttributeDefName&attributeDefNameId=';
+                                        $attrUrlBase = $baseUrl . $path . $attrOperation;
+                                        ?>
+                                        <a href="<?php echo $groupUrlBase . $group['uuid']; ?>" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
+                                            <?php echo _txt('pl.grouperlite.action.grouper'); ?> &nbsp;
+                                            <em class="material-icons mt-0" aria-hidden="true">link</em>
+                                        </a>
+                                    <?php endif ?>
                             </span>
                         </td>
                     </tr>
@@ -90,21 +90,21 @@ $collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
                     <td colspan="<?php echo $numColumns; ?>">
                         <button type="button" class="btn btn-link btn-text <?php echo $collapsed ? 'collapsed' : ''; ?>  collapse-btn fw-bold m-0 work-group-heading-btn" data-toggle="collapse" data-target=".collapse-wg-working-group-parent" role="button" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>">
                             <?php echo $config['wgHeading'] ?? 'Working groups'; ?>
-                            <i class="fa <?php echo $collapsed ? 'fa-caret-right' : 'fa-caret-down' ?> fa-sm"></i>
+                            <em class="material-icons mt-0" aria-hidden="true"><?php echo $collapsed ? 'arrow_drop_down' : 'arrow_right' ?></em>
                         </button>
                     </td>
                 </tr>
                 <?php if (!count($wgmemberships)) : ?>
                     <tr class="table-light <?php echo $collapsed ? 'collapse' : 'show'; ?> collapse-wg-working-group-parent">
-                        <td colspan="<?php echo $numColumns; ?>" class="text-center">No working groups.</td>
+                        <td colspan="<?php echo $numColumns; ?>" class="text-center">None</td>
                     </tr>
                 <?php endif; ?>
                 <?php foreach ($wgmemberships as $wggroup) : ?>
                     <tr class="table-light <?php echo $collapsed ? 'collapse' : 'show'; ?> collapse-wg-working-group-parent">
                         <td colspan="<?php echo $numColumns - 2; ?>">
                             <button type="button" class="btn btn-link btn-text collapse-btn fw-bold m-0 <?php echo $collapsed ? 'collapsed' : ''; ?>" data-toggle="collapse" data-target=".collapse-wg-<?php echo $wggroup['WGName']; ?>" role="button" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>">
                                 <?php echo $wggroup['WGName'] ?? "No Name"; ?>
-                                <i class="fa <?php echo $collapsed ? 'fa-caret-right' : 'fa-caret-down' ?> fa-sm"></i>
+                                <em class="material-icons mt-0" aria-hidden="true"><?php echo $collapsed ? 'arrow_drop_down' : 'arrow_right' ?></em>
                             </button>
                         </td>
                         <td>
@@ -119,7 +119,7 @@ $collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
                                     'idx' => $key
                                 )) : ''; ?>
                                 <button class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn" data-id="<?php echo $wggroup['WGName']; ?>">
-                                    <?php echo _txt('pl.grouperlite.action.members'); ?> <i class="fa fa-group"></i>
+                                    <?php echo _txt('pl.grouperlite.action.members'); ?> <em class="material-icons mt-0" aria-hidden="true">group</em>
                                 </button>
                                 <?php if ($isuserowner === 'T') : ?>
                                     <?php
@@ -130,10 +130,6 @@ $collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
                                     $attrOperation = '?operation=UiV2AttributeDefName.viewAttributeDefName&attributeDefNameId=';
                                     $attrUrlBase = $baseUrl . $path . $attrOperation;
                                     ?>
-                                    <a href="<?php echo $groupUrlBase . $wggroup['workingGroupUUID']; ?>" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
-                                        <?php echo _txt('pl.grouperlite.action.grouper'); ?> &nbsp;
-                                        <i class="fa fa-external-link"></i>
-                                    </a>
                                 <?php endif ?>
                             </span>
                         </td>

diff --git a/View/GrouperGroups/groupoptin.ctp b/View/GrouperGroups/groupoptin.ctp
@@ -42,7 +42,7 @@ $collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
           <td colspan="<?php echo $numColumns; ?>">
             <button type="button" class="btn btn-link btn-text collapse-btn <?php echo $collapsed ? 'collapsed' : ''; ?> fw-bold m-0" data-toggle="collapse" data-target=".collapse-adhoc-group-parent" role="button" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>">
               <?php echo $config['adHocHeading'] ?? 'Ad-hoc groups'; ?>
-              <i class="fa <?php echo $collapsed ? 'fa-caret-right' : 'fa-caret-down' ?> fa-sm"></i>
+              <em class="material-icons mt-0" aria-hidden="true"><?php echo $collapsed ? 'arrow_drop_down' : 'arrow_right' ?></em>
             </button>
           </td>
         </tr>
@@ -70,7 +70,7 @@ $collapsed = $config['defaultCollapse'] === 'collapsed' ? true : false;
           <td colspan="<?php echo $numColumns; ?>">
             <button type="button" class="btn btn-link btn-text collapse-btn <?php echo $collapsed ? 'collapsed' : ''; ?> fw-bold m-0" data-toggle="collapse" data-target=".collapse-wg-working-group-parent" role="button" aria-expanded="<?php echo $collapsed ? 'false' : 'true'; ?>">
               <?php echo $config['wgHeading'] ?? 'Working groups'; ?>
-              <i class="fa <?php echo $collapsed ? 'fa-caret-right' : 'fa-caret-down' ?> fa-sm"></i>
+              <em class="material-icons mt-0" aria-hidden="true"><?php echo $collapsed ? 'arrow_drop_down' : 'arrow_right' ?></em>
             </button>
           </td>
         </tr>