Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

team: new action icons and responsive icon-only mode (fixes #7169) #7173

Merged
merged 5 commits into from
Jul 19, 2023
Merged

team: new action icons and responsive icon-only mode (fixes #7169) #7173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9ac4c97
Make teams action buttons to display icons in mobile screens && add t…
Mutugiii Jun 26, 2023
265cd87
Remove the commented out parts
Mutugiii Jun 26, 2023
2569e64
Merge branch 'master' into 7169-teams-action-buttons-mobile
Mutugiii Jul 5, 2023
4fc1388
Use the update device-info service in place of the removed check-mobi…
Mutugiii Jul 5, 2023
2a46c9c
Refactor the buttons conditions
Mutugiii Jul 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 30 additions & 12 deletions src/app/teams/teams.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,21 +64,39 @@ <h3>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef i18n>Action</mat-header-cell>
<mat-cell *matCellDef="let element">
<button *planetAuthorizedRoles="''" mat-raised-button color="primary" class="margin-lr-3" (click)="archiveClick(element.doc); $event.stopPropagation()" i18n><mat-icon>delete_forever</mat-icon> Delete</button>
<ng-container [ngSwitch]="element.userStatus" *ngIf="user.isUserAdmin || user.roles.length">
<ng-container *ngSwitchCase="'member'">
<ng-container *ngIf="!element.isLeader">
<button mat-raised-button color="primary" class="margin-lr-3" (click)="openLeaveDialog(element.doc, element.membershipDoc); $event.stopPropagation()" i18n><mat-icon>remove_circle</mat-icon> Leave</button>
<mat-cell *matCellDef="let element" class>
<div [ngClass]="{'horizontal-align': isMobile, 'button-container': isMobile}">
<button *planetAuthorizedRoles="''" mat-raised-button color="primary" class="margin-lr-3" (click)="archiveClick(element.doc); $event.stopPropagation()">
<mat-icon>delete_forever</mat-icon>
<label *ngIf="!isMobile" i18n> Delete </label>
</button>
<ng-container [ngSwitch]="element.userStatus" *ngIf="user.isUserAdmin || user.roles.length">
<ng-container *ngSwitchCase="'member'">
<ng-container *ngIf="!element.isLeader">
<button mat-raised-button color="primary" class="margin-lr-3" (click)="openLeaveDialog(element.doc, element.membershipDoc); $event.stopPropagation()">
<mat-icon>remove_circle</mat-icon>
<label *ngIf="!isMobile" i18n> Leave </label>
</button>
</ng-container>
<button *ngIf="element.isLeader" mat-raised-button color="primary" (click)="addTeam(element.doc); $event.stopPropagation()">
<mat-icon>edit</mat-icon>
<label *ngIf="!isMobile" i18n> Edit </label>
</button>
</ng-container>
<button *ngIf="element.isLeader" mat-raised-button color="primary" (click)="addTeam(element.doc); $event.stopPropagation()" i18n><mat-icon>edit</mat-icon> Edit</button>
<button *ngSwitchCase="'unrelated'" mat-raised-button color="primary" class="margin-lr-3" (click)="requestToJoin(element.doc); $event.stopPropagation()">
<mat-icon>add_circle</mat-icon>
<label *ngIf="!isMobile" i18n> Request to Join </label>
</button>
<button *ngSwitchCase="'requesting'" mat-raised-button color="primary" disabled>
<mat-icon>hourglass_empty</mat-icon>
<label *ngIf="isMobile" i18n> Request pending </label>
</button>
</ng-container>
<button *ngSwitchCase="'unrelated'" mat-raised-button color="primary" class="margin-lr-3" (click)="requestToJoin(element.doc); $event.stopPropagation()">
<ng-container i18n>Request to Join</ng-container>
<button mat-raised-button color="primary" planetFeedback [feedbackOf]="{'state': mode + 's', 'item': element.doc._id}" (click)="$event.stopPropagation()">
<mat-icon>feedback</mat-icon>
<label *ngIf="!isMobile" i18n> Feedback </label>
</button>
<button *ngSwitchCase="'requesting'" mat-raised-button color="primary" disabled i18n>Request pending</button>
</ng-container>
<button mat-raised-button color="primary" planetFeedback [feedbackOf]="{'state': mode + 's', 'item': element.doc._id}" (click)="$event.stopPropagation()" i18n><mat-icon>feedback</mat-icon> Feedback</button>
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
Expand Down
37 changes: 16 additions & 21 deletions src/app/teams/teams.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, OnInit, ViewChild, AfterViewInit, Input, EventEmitter, Output } from '@angular/core';
import { Component, OnInit, ViewChild, AfterViewInit, Input, EventEmitter, Output, HostListener } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
Expand All @@ -15,30 +15,14 @@ import {
import { TeamsService } from './teams.service';
import { DialogsLoadingService } from '../shared/dialogs/dialogs-loading.service';
import { StateService } from '../shared/state.service';
import { DeviceInfoService, DeviceType } from '../shared/device-info.service';
import { DialogsPromptComponent } from '../shared/dialogs/dialogs-prompt.component';
import { toProperCase } from '../shared/utils';
import { attachNamesToPlanets, codeToPlanetName } from '../manager-dashboard/reports/reports.utils';

@Component({
templateUrl: './teams.component.html',
styles: [ `
/* Column Widths */
.mat-column-doc-teamType {
max-width: 150px;
padding-right: 0.5rem;
}
.mat-column-visitLog-visitCount {
max-width: 80px;
padding-right: 0.5rem;
}
.mat-column-visitLog-lastVisit {
max-width: 180px;
padding-right: 0.5rem;
}
mat-row {
cursor: pointer;
}
` ],
styleUrls: [ './teams.scss' ],
selector: 'planet-teams'
})
export class TeamsComponent implements OnInit, AfterViewInit {
Expand Down Expand Up @@ -75,6 +59,8 @@ export class TeamsComponent implements OnInit, AfterViewInit {
displayedColumns = [ 'doc.name', 'visitLog.lastVisit', 'visitLog.visitCount', 'doc.teamType' ];
childPlanets = [];
filter: string;
deviceType: DeviceType;
isMobile: boolean;

constructor(
private userService: UserService,
Expand All @@ -85,8 +71,12 @@ export class TeamsComponent implements OnInit, AfterViewInit {
private dialogsLoadingService: DialogsLoadingService,
private dialog: MatDialog,
private stateService: StateService,
private route: ActivatedRoute
) {}
private route: ActivatedRoute,
private deviceInfoService: DeviceInfoService
) {
this.deviceType = this.deviceInfoService.getDeviceType();
this.isMobile = this.deviceType === DeviceType.MOBILE;
}

ngOnInit() {
this.getTeams();
Expand All @@ -101,6 +91,11 @@ export class TeamsComponent implements OnInit, AfterViewInit {
[ 'doc.name', 'visitLog.lastVisit', 'visitLog.visitCount', 'doc.teamType', 'action' ];
}

@HostListener('window:resize') onResize() {
this.deviceType = this.deviceInfoService.getDeviceType();
this.isMobile = this.deviceType === DeviceType.MOBILE;
}

getTeams() {
const thirtyDaysAgo = time => {
const date = new Date(time);
Expand Down
36 changes: 36 additions & 0 deletions src/app/teams/teams.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
@import "../variables.scss";

:host {
/* Column Widths */
.mat-column-doc-teamType {
max-width: 150px;
padding-right: 0.5rem;
}

.mat-column-visitLog-visitCount {
max-width: 80px;
padding-right: 0.5rem;
}
.mat-column-visitLog-lastVisit {
max-width: 180px;
padding-right: 0.5rem;
}
mat-row {
cursor: pointer;
}
.button-container {
display: flex;
flex-direction: row;
align-items: center;
}
.horizontal-align {
justify-content: center;
}

@media screen and (max-width: #{$screen-sm}) {
mat-cell button {
min-width: 0;
padding: 0 3px;
}
}
}
Loading