From 4d282500de445b637d0b8071f51258eaa1a3f934 Mon Sep 17 00:00:00 2001
From: "jvanboxtel@wisc.edu" <jvanboxtel@wisc.edu>
Date: Wed, 20 Feb 2019 12:25:54 -0600
Subject: [PATCH] ROENROLL-1396
---
.../degree-planner.component.ts | 21 ++++++++++++++-----
.../modify-plan-dialog.component.html | 18 +++-------------
.../course-item/course-item.component.ts | 1 +
.../term-container.component.html | 10 +++------
.../term-container.component.scss | 10 +++++++++
.../confirm-dialog.component.html | 13 +++++-------
.../confirm-dialog.component.scss | 5 -----
src/app/shared/dialogs/dialogs.scss | 8 +++++--
.../prompt-dialog.component.html | 6 +++---
.../prompt-dialog.component.scss | 0
10 files changed, 47 insertions(+), 45 deletions(-)
delete mode 100644 src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss
delete mode 100644 src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.scss
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index f8d98c8..747a889 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -1,3 +1,4 @@
+import { ConfirmDialogComponent } from '@app/shared/dialogs/confirm-dialog/confirm-dialog.component';
import {
filter,
map,
@@ -138,10 +139,15 @@ export class DegreePlannerComponent implements OnInit {
public onMakePrimayClick(_currentPlan: DegreePlan) {
const data: DialogMode = { mode: 'makePrimary' };
this.dialog
- .open(ModifyPlanDialogComponent, { data })
+ .open(ConfirmDialogComponent, {
+ data: {
+ text:
+ "This will change your primary plan and replace the current courses in your cart with the courses in this plan's term.",
+ },
+ })
.afterClosed()
- .subscribe((result: { areYouSure: true } | undefined) => {
- if (result !== undefined && result.areYouSure === true) {
+ .subscribe((result: { confirmed: true } | undefined) => {
+ if (result !== undefined && result.confirmed === true) {
const action = new MakePlanPrimary();
this.store.dispatch(action);
}
@@ -156,11 +162,16 @@ export class DegreePlannerComponent implements OnInit {
const data: DialogMode = { mode: 'delete', name: currentPlan.name };
this.dialog
- .open(ModifyPlanDialogComponent, { data })
+ .open(ConfirmDialogComponent, {
+ data: {
+ text:
+ 'This will delete this plan and course information related to this plan.',
+ },
+ })
.afterClosed()
.pipe(withLatestFrom(this.store))
.subscribe(([result, state]) => {
- if (typeof result === 'object' && result.areYouSure === true) {
+ if (result.confirmed) {
const { roadmapId } = currentPlan;
const deleteAction = new DeletePlan({ roadmapId });
this.store.dispatch(deleteAction);
diff --git a/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
index 5b13369..8015c45 100644
--- a/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
+++ b/src/app/degree-planner/dialogs/modify-plan-dialog/modify-plan-dialog.component.html
@@ -7,8 +7,6 @@
<mat-toolbar color="primary" class="dialog-toolbar">
<span class="dialog-toolbar-title" [ngSwitch]="data.mode">
- <span *ngSwitchCase="'makePrimary'">Set as the primary plan</span>
- <span *ngSwitchCase="'delete'">Delete plan</span>
<span *ngSwitchCase="'rename'">Rename plan</span>
<span *ngSwitchCase="'create'">Create plan</span>
</span>
@@ -19,16 +17,10 @@
<mat-dialog-content class="mat-typography dialog-with-toolbar">
<ng-container [ngSwitch]="data.mode">
- <div class="delete-plan-content" *ngSwitchCase="'delete'">
- <mat-dialog-content>
- <p>Are you sure you want to delete the degree plan named <strong>{{data.name}}</strong>?</p>
- </mat-dialog-content>
- </div>
-
<div class="rename-plan-content" *ngSwitchCase="'rename'">
<mat-dialog-content [formGroup]="form">
<mat-form-field class="form-field-stretch">
- <input matInput placeholder="Name" formControlName="planName">
+ <input matInput placeholder="Name" formControlName="planName" cdkFocusInitial>
</mat-form-field>
</mat-dialog-content>
</div>
@@ -36,21 +28,17 @@
<div class="create-plan-content" *ngSwitchCase="'create'">
<mat-dialog-content [formGroup]="form">
<mat-form-field class="form-field-stretch">
- <input matInput placeholder="Name" formControlName="planName">
+ <input matInput placeholder="Name" formControlName="planName" cdkFocusInitial>
</mat-form-field>
</mat-dialog-content>
</div>
</ng-container>
<mat-dialog-actions align="end">
- <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close note dialog" (click)="onCancel()">
- Cancel
- </button>
+ <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close dialog" (click)="onCancel()">Cancel</button>
<button mat-rasied-button class="btn-primary mat-button" [disabled]="form.invalid" (click)="onSubmit()">
<ng-container [ngSwitch]="data.mode">
- <span *ngSwitchCase="'makePrimary'">Set as the primary plan</span>
- <span *ngSwitchCase="'delete'">Delete this plan</span>
<span *ngSwitchCase="'rename'">Rename plan</span>
<span *ngSwitchCase="'create'">Create plan</span>
</ng-container>
diff --git a/src/app/degree-planner/shared/course-item/course-item.component.ts b/src/app/degree-planner/shared/course-item/course-item.component.ts
index 3183bb8..07e090f 100644
--- a/src/app/degree-planner/shared/course-item/course-item.component.ts
+++ b/src/app/degree-planner/shared/course-item/course-item.component.ts
@@ -222,6 +222,7 @@ export class CourseItemComponent implements OnInit {
.getCourseDetails(course.subjectCode, course.courseId)
.subscribe(courseDetails => {
const dialogRef = this.dialog.open(CourseDetailsDialogComponent, {
+ maxWidth: '800px',
data: { courseDetails: courseDetails },
});
});
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 28e20d0..0f75aab 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -2,7 +2,7 @@
<div class="term-inner">
<div fxLayout="row" class="term-header" fxLayoutAlign="space-between center">
<h2>{{ termCode | getTermDescription }}</h2>
- <div fxLayout="row" fxLayoutAlign="end center">
+ <div fxLayout="row" fxLayoutAlign="space-between center">
<p class="text-right semi-bold credits">{{ credits$ | async }} Cr</p>
<button mat-icon-button>
<ng-container *ngIf="(note$ | async) as note; else newNote">
@@ -28,9 +28,7 @@
</button>
</div>
</div>
- <div
- id="term-{{termCode}}"
- cdkDropList
+ <div id="term-{{termCode}}" class="term-body" cdkDropList
[cdkDropListData]="(term$ | async).termCode"
[cdkDropListConnectedTo]="dropZoneIds$ | async"
(cdkDropListDropped)="drop($event)">
@@ -44,9 +42,7 @@
</ng-container>
<!-- Render list of courses in this term -->
- <div
- class="course-wrapper"
- *ngFor="let course of courses$ | async"
+ <div class="course-wrapper" *ngFor="let course of courses$ | async"
cdkDrag
[cdkDragDisabled]="(isPastTerm$ | async) || course.id === null"
[cdkDragData]="course">
diff --git a/src/app/degree-planner/term-container/term-container.component.scss b/src/app/degree-planner/term-container/term-container.component.scss
index c721ae2..fe49c67 100644
--- a/src/app/degree-planner/term-container/term-container.component.scss
+++ b/src/app/degree-planner/term-container/term-container.component.scss
@@ -1,8 +1,14 @@
@import 'assets/material-theme.scss';
.term-container {
+ height: 100%;
background-color: #eef1f3;
padding: 0;
+ transition: all 0.2s ease-out;
+}
+
+.term-body {
+ padding-bottom: 50px;
}
.add-course-button {
@@ -48,6 +54,10 @@
.add-new-wrapper {
border-top: solid #e0e4e7 1px;
padding: 8px;
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ box-sizing: border-box;
button {
width: 100%;
diff --git a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html
index a9c1b14..1728d95 100644
--- a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html
+++ b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html
@@ -1,13 +1,10 @@
-<mat-toolbar class="dialog-toolbar">
- <h1 class="dialog-toolbar-title">{{title}}</h1>
- <button mat-button mat-dialog-close class="close-btn" aria-label="Close note dialog"><i class="material-icons">clear</i></button>
-</mat-toolbar>
-<mat-dialog-content id="confirmation-dialog" class="mat-typography dialog-with-toolbar">
+<div id="confirmation-dialog" class="mat-dialog-content mat-typography">
+ <h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
<p class="dialog-text" *ngFor="let line of text">{{line}}</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
- <button mat-button (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
- <button mat-button [color]="confirmColor" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
+ <button mat-button (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
+ <button mat-button [color]="confirmColor" class="mat-button" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
</mat-dialog-actions>
-</mat-dialog-content>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss
deleted file mode 100644
index 9a4c055..0000000
--- a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.dialog-text {
- color: #7e7e7e;
- font-size: 16px;
- margin-top: 1.2em;
-}
diff --git a/src/app/shared/dialogs/dialogs.scss b/src/app/shared/dialogs/dialogs.scss
index 9a4c055..27d1b9b 100644
--- a/src/app/shared/dialogs/dialogs.scss
+++ b/src/app/shared/dialogs/dialogs.scss
@@ -1,5 +1,9 @@
.dialog-text {
color: #7e7e7e;
- font-size: 16px;
- margin-top: 1.2em;
+}
+
+#confirmation-dialog {
+ padding: 24px;
+ margin: 0;
+ width: 400px;
}
diff --git a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
index f3f169b..492a7ea 100644
--- a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
+++ b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar class="dialog-toolbar">
+<mat-toolbar color="primary" class="dialog-toolbar">
<h1 class="dialog-toolbar-title">{{title}}</h1>
<button mat-button mat-dialog-close class="close-btn" aria-label="Close note dialog"><i class="material-icons">clear</i></button>
</mat-toolbar>
@@ -13,7 +13,7 @@
</form>
</mat-dialog-content>
<mat-dialog-actions align="end">
- <button mat-button (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
- <button mat-button [color]="confirmColor" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
+ <button mat-button class="btn-secondary" (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
+ <button mat-button class="btn-primary mat-button" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
</mat-dialog-actions>
</mat-dialog-content>
\ No newline at end of file
diff --git a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.scss b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.scss
deleted file mode 100644
index e69de29..0000000
--
GitLab