members: smoother action buttons (fixes #8052)

open-learning-exchange · Jan 7, 2025 · d088064 · d088064
1 parent c0c6167
commit d088064
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/app/users/users-table.component.html b/src/app/users/users-table.component.html
@@ -104,30 +104,30 @@
         <div [ngClass]="{'horizontal-align button-container': isMobile}">
           <span *ngIf="isUserAdmin && filterType === 'local' && !isDialog">
             <span *ngIf="!element.doc.isUserAdmin">
-              <button mat-raised-button color="primary" *ngIf="element.doc.roles.length === 0" (click)="setRoles(element.doc, element.doc.oldRoles || ['learner'], $event)">
+              <button class="action-button" mat-raised-button color="primary" *ngIf="element.doc.roles.length === 0" (click)="setRoles(element.doc, element.doc.oldRoles || ['learner'], $event)">
                 <mat-icon>lock_open</mat-icon>
                 <label *ngIf="!isMobile">Activate</label>
               </button>
-              <button mat-raised-button color="primary" *ngIf="element.doc.roles.length > 0" (click)="setRoles(element.doc, [], $event)">
+              <button class="action-button" mat-raised-button color="primary" *ngIf="element.doc.roles.length > 0" (click)="setRoles(element.doc, [], $event)">
                 <mat-icon>lock</mat-icon>
                 <label *ngIf="!isMobile">Deactivate</label>
               </button>
             </span>
-            <button mat-raised-button color="primary" (click)="deleteClick(element.doc, $event)" *ngIf="!element.doc.isUserAdmin || element.doc.roles.length > 0" i18n>
+            <button class="action-button" mat-raised-button color="primary" (click)="deleteClick(element.doc, $event)" *ngIf="!element.doc.isUserAdmin || element.doc.roles.length > 0" i18n>
               <mat-icon>delete</mat-icon>
               <label *ngIf="!isMobile"> Delete </label>
             </button>
-            <button *ngIf="!element.doc.isUserAdmin && filterType === 'local'" (click)="toggleStatus($event, element.doc, 'admin', false)" mat-raised-button color="primary" i18n>
+            <button class="action-button" *ngIf="!element.doc.isUserAdmin && filterType === 'local'" (click)="toggleStatus($event, element.doc, 'admin', false)" mat-raised-button color="primary" i18n>
               <mat-icon>vertical_align_top</mat-icon>
               <label *ngIf="!isMobile"> Promote </label>
             </button>
-            <button *ngIf="element.doc.isUserAdmin && filterType === 'local' && (element.doc.name + '@' + configuration.code) !== configuration.adminName"
+            <button class="action-button" *ngIf="element.doc.isUserAdmin && filterType === 'local' && (element.doc.name + '@' + configuration.code) !== configuration.adminName"
               (click)="toggleStatus($event, element.doc, element.doc.roles.length === 0 ? 'admin' : 'manager', true)" mat-raised-button color="primary" i18n>
               <mat-icon>vertical_align_bottom</mat-icon>
               <label *ngIf="!isMobile"> Demote </label>
             </button>
           </span>
-          <button (click)="gotoProfileView(element.doc.name)" mat-raised-button color="primary" i18n>
+          <button class="action-button" (click)="gotoProfileView(element.doc.name)" mat-raised-button color="primary" i18n>
             <mat-icon>visibility</mat-icon>
             <label *ngIf="!isMobile"> View Profile </label>
           </button>

diff --git a/src/app/users/users-table.scss b/src/app/users/users-table.scss
@@ -32,6 +32,17 @@ button-container {
   text-overflow: ellipsis;
 }
 
+.action-button{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  mat-icon{
+    margin-right: 4px;
+  }
+}
+
+
 @media(max-width: $screen-md) {
   .mat-column-visitCount, .mat-column-joinDate, .mat-column-lastLogin {
     max-width: 70px;
@@ -42,4 +53,12 @@ button-container {
   .mat-cell button, .mat-cell div button[mat-raised-button] {
     width: 50px;
   }
+
+  .action-button{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+  }
+
 }