Skip to content

Commit b90cfb8

Browse files
Mutugiiidogi
Mutugiii
and
dogi
authored
courses: smoother steps toolbar buttons showing (fixes #9930) (#9938)
Co-authored-by: dogi <dogi@users.noreply.github.com>
1 parent ba022ef commit b90cfb8

4 files changed

Lines changed: 105 additions & 61 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "planet",
33
"license": "AGPL-3.0",
4-
"version": "0.22.85",
4+
"version": "0.22.86",
55
"myplanet": {
66
"latest": "v0.55.45",
77
"min": "v0.53.91"

‎src/app/courses/courses.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
<button class="menu" mat-icon-button [matMenuTriggerFor]="actionsMenu">
6060
<mat-icon>more_vert</mat-icon>
6161
</button>
62-
<mat-menu #actionsMenu="matMenu" class="ellipsis-menu">
62+
<mat-menu #actionsMenu="matMenu" class="actions-menu">
6363
<ng-container *ngTemplateOutlet="actionButtons"></ng-container>
6464
</mat-menu>
6565
</ng-container>
@@ -75,16 +75,16 @@
7575
<planet-tag-input [db]="dbName" [disabled]="selection?.selected?.length === 0" mode="add" labelType="change" [helperText]="false" [filteredData]="courses.data" [selectedIds]="selection.selected" (finalTags)="addTagsToSelected($event)"></planet-tag-input>
7676
</mat-form-field>
7777
</ng-container>
78-
<button mat-button [ngClass]="{'mat-menu-item': deviceType !== deviceTypes.DESKTOP }" [disabled]="selectedNotEnrolled === 0" (click)="enrollLeaveToggle(selection.selected, 'add')">
78+
<button mat-button [disabled]="selectedNotEnrolled === 0" (click)="enrollLeaveToggle(selection.selected, 'add')">
7979
<mat-icon aria-hidden="true" class="margin-lr-3">library_add</mat-icon><span i18n>Join Selected</span>
8080
<span *ngIf="selectedNotEnrolled > 0"> ({{selectedNotEnrolled}})</span>
8181
</button>
82-
<button mat-button [ngClass]="{'mat-menu-item': deviceType !== deviceTypes.DESKTOP }" [disabled]="selectedEnrolled === 0" (click)="enrollLeaveToggle(selection.selected, 'remove')">
82+
<button mat-button [disabled]="selectedEnrolled === 0" (click)="enrollLeaveToggle(selection.selected, 'remove')">
8383
<mat-icon aria-hidden="true" class="margin-lr-3">clear</mat-icon><span i18n>Leave Selected</span>
8484
<span *ngIf="selectedEnrolled > 0"> ({{selectedEnrolled}})</span>
8585
</button>
8686
<ng-container *ngIf="user.isUserAdmin">
87-
<button mat-button [ngClass]="{'mat-menu-item': deviceType !== deviceTypes.DESKTOP }" [matMenuTriggerFor]="managerMenu" *planetAuthorizedRoles="''" [disabled]="!selection.selected.length" i18n>Manager Actions</button>
87+
<button mat-button [matMenuTriggerFor]="managerMenu" *planetAuthorizedRoles="''" [disabled]="!selection.selected.length" i18n>Manager Actions</button>
8888
<mat-menu #managerMenu="matMenu">
8989
<!-- TODO: Need to figure out how to resolve conflicts when sending course back to parent -->
9090
<button *ngIf="planetType !== 'center' && planetConfiguration.registrationRequest === 'accepted'" mat-menu-item (click)="shareLocal(selection.selected)" [disabled]="selectedLocal === 0">

‎src/app/courses/step-view-courses/courses-step-view.component.html‎

Lines changed: 74 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,70 +5,91 @@
55
<div class="space-container">
66
<mat-toolbar class="primary-color font-size-1">
77
<h3 class="margin-lr-3 ellipsis-title"><ng-container i18n>Step</ng-container> {{stepNum}}<span *ngIf="stepDetail.stepTitle">: </span>{{stepDetail.stepTitle}}</h3>
8-
<button *ngIf="isOpenai && stepDetail?.description" mat-stroked-button class="margin-lr-3" (click)="showChat = !showChat" i18n>
9-
{{ showChat ? 'Hide Course Chat' : 'Show Course Chat' }}
10-
</button>
118
<span class="toolbar-fill"></span>
129
<div class="toolbar-actions">
1310
<button mat-icon-button *ngIf="resource?._attachments && !showChat" (click)="this.isGridView = !this.isGridView">
1411
<mat-icon>{{isGridView ? 'view_list' : 'view_column'}}</mat-icon>
1512
</button>
1613
<span class="margin-lr-10" *ngIf="attempts && !parent" i18n>Past attempts: {{attempts}}</span>
17-
<a
18-
mat-raised-button
19-
color="accent"
20-
class="margin-lr-10"
21-
*ngIf="attempts > 0"
22-
(click)="openReviewDialog()" i18n>
23-
Review Attempts
24-
</a>
25-
<a
26-
mat-raised-button
27-
color="accent"
28-
class="margin-lr-10"
29-
*ngIf="stepDetail?.exam?.questions.length && isUserEnrolled"
30-
(click)="goToExam()" i18n>
31-
{examText, select, take {Take Test} continue {Continue Test} retake {Retake Test}}
32-
</a>
33-
<a
34-
mat-raised-button
35-
color="accent"
36-
class="margin-lr-10"
37-
*ngIf="stepDetail?.survey?.questions.length && isUserEnrolled"
38-
(click)="goToExam('survey')" i18n>
39-
Take Survey
40-
</a>
41-
<button *ngIf="canManage && (stepDetail?.exam?.questions.length || stepDetail?.survey?.questions.length)" class="margin-lr-10" color="accent" mat-raised-button [matMenuTriggerFor]="previewMenu" (click)="menuTriggerButtonClick()" i18n>
42-
Preview
43-
</button>
44-
<mat-menu #previewMenu="matMenu">
45-
<a mat-menu-item
46-
*ngIf="stepDetail?.exam?.questions.length"
47-
(click)="goToExam('exam', true)" i18n>
48-
Preview Test
49-
</a>
50-
<a mat-menu-item
51-
*ngIf="stepDetail?.survey?.questions.length"
52-
(click)="goToExam('survey', true)" i18n>
53-
Preview Survey
54-
</a>
55-
</mat-menu>
56-
<a
57-
mat-raised-button
58-
color="accent"
59-
class="margin-lr-10"
60-
*ngIf="stepDetail.resources.length !== 0"
61-
[routerLink]="['/resources/view', resource._id]"
62-
target="_blank"
63-
i18n>
64-
View Resource Details
65-
</a>
14+
<ng-container *ngIf="!isMobile">
15+
<ng-container *ngTemplateOutlet="actionButtons"></ng-container>
16+
</ng-container>
17+
<ng-container *ngIf="isMobile && hasActionButtons">
18+
<button mat-icon-button [matMenuTriggerFor]="mobileActionsMenu">
19+
<mat-icon>more_vert</mat-icon>
20+
</button>
21+
<mat-menu #mobileActionsMenu="matMenu" class="actions-menu">
22+
<ng-container *ngTemplateOutlet="actionButtons"></ng-container>
23+
</mat-menu>
24+
</ng-container>
6625
<span>{{stepNum}}/{{maxStep}}</span>
6726
<button mat-icon-button *ngIf="maxStep !== 1" [disabled]="stepNum === 1 || isLoading" (click)="changeStep(-1)"><mat-icon>navigate_before</mat-icon></button>
6827
<button mat-icon-button *ngIf="stepNum !== maxStep" [disabled]="isLoading || !canProceedToNextStep()" (click)="changeStep(1)"><mat-icon>navigate_next</mat-icon></button>
69-
<button mat-raised-button color="accent" class="margin-lr-10" *ngIf="stepNum === maxStep" [disabled]="isLoading || !canProceedToNextStep()" (click)="backToCourseDetail()" i18n>Finish</button>
28+
<button mat-icon-button i18n-matTooltip matTooltip="Finish" *ngIf="stepNum === maxStep && isMobile" [disabled]="isLoading || !canProceedToNextStep()" (click)="backToCourseDetail()"><mat-icon>check</mat-icon></button>
29+
<button mat-raised-button color="accent" class="margin-lr-10" *ngIf="stepNum === maxStep && !isMobile" [disabled]="isLoading || !canProceedToNextStep()" (click)="backToCourseDetail()" i18n>Finish</button>
7030
</div>
7131
</mat-toolbar>
32+
33+
<ng-template #actionButtons>
34+
<button *ngIf="isOpenai && stepDetail?.description"
35+
mat-stroked-button
36+
[ngClass]="{ 'margin-lr-3': !isMobile }"
37+
(click)="showChat = !showChat" i18n>
38+
{{ showChat ? 'Hide Course Chat' : 'Show Course Chat' }}
39+
</button>
40+
<a
41+
mat-raised-button
42+
color="accent"
43+
[ngClass]="{ 'margin-lr-10': !isMobile }"
44+
*ngIf="attempts > 0"
45+
(click)="openReviewDialog()" i18n>
46+
Review Attempts
47+
</a>
48+
<a
49+
mat-raised-button
50+
color="accent"
51+
[ngClass]="{ 'margin-lr-10': !isMobile }"
52+
*ngIf="stepDetail?.exam?.questions.length && isUserEnrolled"
53+
(click)="goToExam()" i18n>
54+
{examText, select, take {Take Test} continue {Continue Test} retake {Retake Test}}
55+
</a>
56+
<a
57+
mat-raised-button
58+
color="accent"
59+
[ngClass]="{ 'margin-lr-10': !isMobile }"
60+
*ngIf="stepDetail?.survey?.questions.length && isUserEnrolled"
61+
(click)="goToExam('survey')" i18n>
62+
Take Survey
63+
</a>
64+
<button *ngIf="canManage && (stepDetail?.exam?.questions.length || stepDetail?.survey?.questions.length)"
65+
#previewTrigger="matMenuTrigger"
66+
[ngClass]="{ 'margin-lr-10': !isMobile }"
67+
color="accent" mat-raised-button [matMenuTriggerFor]="previewMenu" (click)="menuTriggerButtonClick()" i18n>
68+
Preview
69+
</button>
70+
<mat-menu #previewMenu="matMenu">
71+
<a mat-menu-item
72+
*ngIf="stepDetail?.exam?.questions.length"
73+
(click)="goToExam('exam', true)" i18n>
74+
Preview Test
75+
</a>
76+
<a mat-menu-item
77+
*ngIf="stepDetail?.survey?.questions.length"
78+
(click)="goToExam('survey', true)" i18n>
79+
Preview Survey
80+
</a>
81+
</mat-menu>
82+
<a
83+
mat-raised-button
84+
color="accent"
85+
[ngClass]="{ 'margin-lr-10': !isMobile }"
86+
*ngIf="stepDetail.resources.length !== 0"
87+
[routerLink]="['/resources/view', resource._id]"
88+
target="_blank"
89+
i18n>
90+
View Resource Details
91+
</a>
92+
</ng-template>
7293
<div class="view-container view-full-height" [ngClass]="{'grid-view': showChat, 'flex-view': !isGridView && !showChat}" *ngIf="stepDetail?.description || resource?._attachments; else emptyRecord">
7394
<planet-chat-window *ngIf="showChat" [context]="{type: 'coursestep', data: localizedStepInfo, resource: { id: resource?._id, attachments: resource?._attachments } }" [conversations]="conversations"></planet-chat-window>
7495
<ng-container *ngIf="showChat; else stepViewContent">

‎src/app/courses/step-view-courses/courses-step-view.component.ts‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
1+
import { Component, OnInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
22
import { CoursesService } from '../courses.service';
33
import { Router, ActivatedRoute, ParamMap, RouterLink } from '@angular/router';
44
import { MatDialog } from '@angular/material/dialog';
@@ -11,6 +11,7 @@ import { ResourcesService } from '../../resources/resources.service';
1111
import { DialogsSubmissionsComponent } from '../../shared/dialogs/dialogs-submissions.component';
1212
import { StateService } from '../../shared/state.service';
1313
import { ChatService } from '../../shared/chat.service';
14+
import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
1415
import {
1516
DialogsAnnouncementComponent, includedCodes, challengeCourseId, challengePeriod
1617
} from '../../shared/dialogs/dialogs-announcement.component';
@@ -61,7 +62,8 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
6162
showChat = false;
6263
isOpenai = false;
6364
isLoading = true;
64-
@ViewChild(MatMenuTrigger) previewButton: MatMenuTrigger;
65+
deviceType: DeviceType;
66+
@ViewChild('previewTrigger') previewButton: MatMenuTrigger;
6567

6668
constructor(
6769
private chatService: ChatService,
@@ -73,7 +75,28 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
7375
private stateService: StateService,
7476
private submissionsService: SubmissionsService,
7577
private userService: UserService,
76-
) {}
78+
private deviceInfoService: DeviceInfoService,
79+
) {
80+
this.deviceType = this.deviceInfoService.getDeviceType();
81+
}
82+
83+
@HostListener('window:resize') onResize() {
84+
this.deviceType = this.deviceInfoService.getDeviceType();
85+
}
86+
87+
get isMobile(): boolean {
88+
return this.deviceType === DeviceType.MOBILE || this.deviceType === DeviceType.SMALL_MOBILE;
89+
}
90+
91+
get hasActionButtons(): boolean {
92+
const hasExam = !!this.stepDetail?.exam?.questions.length;
93+
const hasSurvey = !!this.stepDetail?.survey?.questions.length;
94+
return (this.isOpenai && !!this.stepDetail?.description) ||
95+
this.attempts > 0 ||
96+
((hasExam || hasSurvey) && this.isUserEnrolled) ||
97+
(this.canManage && (hasExam || hasSurvey)) ||
98+
(this.stepDetail?.resources?.length || 0) !== 0;
99+
}
77100

78101
ngOnInit() {
79102
combineLatest(

0 commit comments

Comments
 (0)