use loader component. Add small margin amgong text and icon in a button.

internet2 · Feb 23, 2024 · a411bfc · a411bfc
1 parent ee6bc31
commit a411bfc
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 26 deletions.
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'); ?> <em class="material-icons mt-0" aria-hidden="true">link</em>
+                            <?php echo _txt('pl.grouperlite.action.view'); ?> <em class="material-icons mt-0 ml-1" aria-hidden="true">link</em>
                         </a>
                     </td>
                 </tr>

diff --git a/View/Elements/Components/optAction.ctp b/View/Elements/Components/optAction.ctp
@@ -7,6 +7,6 @@
 <?php print $this->Form->hidden('GroupDisplayName', array('default' => $groupDisplay, 'id' => 'groupDisplayName.' . $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;
-  <em class="material-icons mt-0" aria-hidden="true"><?php echo $member ? 'person_off' : 'person'; ?></em>
+  <em class="material-icons mt-0 ml-1" aria-hidden="true"><?php echo $member ? 'person_off' : 'person'; ?></em>
 </button>
 <?php echo $this->Form->end(); ?>
diff --git a/View/Elements/Components/subscriberList.ctp b/View/Elements/Components/subscriberList.ctp
@@ -35,8 +35,6 @@
                             <label class="sr-only" for="addUser"><?php echo _txt('pl.grouperlite.search.tags.text'); ?></label>
                             <div class="input-group">
                                 <?php echo $this->Form->input("addUser", array('label' => false, 'class' => 'form-control', 'value' => isset($searchcriteria) ? $searchcriteria : '')) ?>
-                                <!--<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">
                                         <em class="material-icons lg" aria-hidden="true">add</em>

diff --git a/View/Elements/Components/vue-table.ctp b/View/Elements/Components/vue-table.ctp
@@ -121,7 +121,7 @@
                     class="btn btn-sm btn-block text-nowrap m-1 btn-success" type="submit">
                     {{ actionform.actionlabel }}
                     &nbsp;
-                    <em class="material-icons mt-0" aria-hidden="true">{{ actionform.actionicon }}</em>
+                    <em class="material-icons mt-0 ml-1" aria-hidden="true">{{ actionform.actionicon }}</em>
                 </button>
                 <?= $this->Form->end(null); ?>
             </template>

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'); ?>
-                        <em class="material-icons mt-0" aria-hidden="true">edit</em>
+                        <em class="material-icons mt-0 ml-1" aria-hidden="true">edit</em>
                     </button>
                 <?php endif; */ ?>
             </div>

diff --git a/webroot/js/autocomplete.js b/webroot/js/autocomplete.js
@@ -58,7 +58,7 @@ export default {
                        name="display"
                        class="form-control" 
                        v-model="search"
-                       :placeholder="[[ txt.peoplePickerPlaceHolder ]]"
+                       :placeholder="txt.peoplePickerPlaceHolder"
                        autofocus/>
                 <span class="co-loading-mini"><span></span><span></span><span></span></span>
             </span>

diff --git a/webroot/js/groups-table.js b/webroot/js/groups-table.js
@@ -36,7 +36,7 @@ export default {
                                     :disabled="group.loading">
                                     {{ txt.join }}
                                     &nbsp;
-                                    <em class="material-icons mt-0" aria-hidden="true">{{ person }}</em>
+                                    <em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person }}</em>
                                 </button>
                                 <button
                                     v-if="$attrs.onLeaveGroup"
@@ -45,19 +45,19 @@ export default {
                                     :disabled="group.loading">
                                     {{ txt.leave }}
                                     &nbsp;
-                                    <em class="material-icons mt-0" aria-hidden="true">{{ person_off }}</em>
+                                    <em class="material-icons mt-0 ml-1" aria-hidden="true">{{ person_off }}</em>
                                 </button>
                             </template>
                             <button 
                                 v-if="$attrs.onShowSubscribers"
                                 class="btn btn-grouper btn-block btn-primary btn-sm m-1 text-nowrap members-btn"
                                 @click="$emit('showSubscribers', group)"
                                 :data-id="encodeURIComponent(group.name)"
-                                :data-name="group.displayExtension">{{ txt.members }}<em class="material-icons mt-0" aria-hidden="true">group</em>
+                                :data-name="group.displayExtension">{{ txt.members }}<em class="material-icons mt-0 ml-1" aria-hidden="true">group</em>
                             </button>
                             <a v-if="grouper && owner" :href="grouperUrl + group.uuid" class="btn btn-grouper btn-block btn-sm btn-success mt-0 text-nowrap" target="_blank" role="button">
                                 {{ txt.grouper }} &nbsp;
-                                <em class="material-icons mt-0" aria-hidden="true">link</em>
+                                <em class="material-icons mt-0 ml-1" aria-hidden="true">link</em>
                             </a>
                         </span>
                         <span v-else>
@@ -75,7 +75,7 @@ export default {
                             role="button"
                             :aria-expanded="!show ? 'false' : 'true'">
                             {{ config.wgHeading || 'Working groups' }}
-                            <em class="material-icons mt-0" aria-hidden="true">{{ !show ? 'arrow_right' : 'arrow_drop_down'}}</em>
+                            <em class="material-icons mt-0 ml-1" aria-hidden="true">{{ !show ? 'arrow_right' : 'arrow_drop_down'}}</em>
                         </button>
                     </td>
                 </tr>
@@ -89,7 +89,7 @@ export default {
                                 <button @click="toggle" type="button" class="btn btn-link btn-text collapse-btn fw-bold m-0" role="button" :aria-expanded="show ? 'false' : 'true'">  
                                     <span class="grpr-popover-toggle">
                                         {{ wggroup.WGShowName || "No Name" }}
-                                        <em class="material-icons mt-0" aria-hidden="true">{{ show ? 'arrow_drop_down' : 'arrow_right' }}</em>
+                                        <em class="material-icons mt-0 ml-1" aria-hidden="true">{{ show ? 'arrow_drop_down' : 'arrow_right' }}</em>
                                     </span>
                                 </button>
                             </td>
@@ -136,7 +136,7 @@ export default {
                             role="button"
                             :aria-expanded="[!show ? 'false' : 'true']">
                             {{ txt.adhocHeading }}
-                            <em class="material-icons mt-0" aria-hidden="true">{{ !show ? 'arrow_right' : 'arrow_drop_down' }}</em>
+                            <em class="material-icons mt-0 ml-1" aria-hidden="true">{{ !show ? 'arrow_right' : 'arrow_drop_down' }}</em>
                         </button>
                     </td>
                 </tr>

diff --git a/webroot/js/loader.js b/webroot/js/loader.js
@@ -3,16 +3,19 @@ export default {
         active: {
             type: Boolean,
             default: false,
+        },
+        classList: {
+            type: String,
+            default: "counter d-flex justify-content-start align-items-center rounded-0"
         }
     },
     template: /*html*/`
-        <div v-if="active" class="counter d-flex justify-content-start align-items-center rounded-0">
+        <div v-if="active" :class="classList">
             <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>
     `

diff --git a/webroot/js/members.js b/webroot/js/members.js
@@ -25,6 +25,8 @@
  */
 
 import Autocomplete from './autocomplete.js';
+import Loader from './loader.js';
+
 
 export default {
     props: {
@@ -34,6 +36,7 @@ export default {
     },
     inject: ['txt', 'api'],
     components: {
+        Loader,
         Autocomplete
     },
     data () {
@@ -148,15 +151,8 @@ export default {
               </button>
             </div>
             <div className="modal-body">
-                <div v-if="loading">
-                    <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 v-else>
+                <Loader :active="loading"/>
+                <div v-if="!loading">
                     <div v-if="canAdd">
                         <div class="d-flex mb-4">
                             <form id="add-user-form" class="add-user-form w-100">

diff --git a/webroot/js/nested-table.js b/webroot/js/nested-table.js
@@ -42,7 +42,7 @@ export default {
                                 <button @click="toggle" type="button" class="btn btn-link btn-text collapse-btn fw-bold m-0" role="button" :aria-expanded="show ? 'false' : 'true'">  
                                     <span class="grpr-popover-toggle">
                                         {{ wggroup.WGShowName || "No Name" }}
-                                        <em class="material-icons mt-0" aria-hidden="true">{{ show ? 'arrow_drop_down' : 'arrow_right' }}</em>
+                                        <em class="material-icons mt-0 ml-1 ml-1" aria-hidden="true">{{ show ? 'arrow_drop_down' : 'arrow_right' }}</em>
                                     </span>
                                 </button>
                             </td>