From 859eba190b238a3c672dc6aec395929134e64e0b Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Fri, 26 Oct 2018 11:00:30 -0500
Subject: [PATCH] Create sidenav with DG Menu and Course Key section
---
.../degree-planner.component.html | 91 ++++++++++++-------
.../degree-planner.component.scss | 13 +++
.../sidenav-menu-item.component.html | 35 +++++++
.../sidenav-menu-item.component.scss | 58 ++++++++++++
.../sidenav-menu-item.component.spec.ts | 25 +++++
.../sidenav-menu-item.component.ts | 16 ++++
src/app/shared/shared.module.ts | 11 ++-
src/assets/material-theme.scss | 6 --
src/assets/sass/general.scss | 32 +++++++
9 files changed, 247 insertions(+), 40 deletions(-)
create mode 100644 src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
create mode 100644 src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss
create mode 100644 src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.spec.ts
create mode 100644 src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index c47ad1c..1b4c392 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -10,35 +10,64 @@
</div>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
- <mat-accordion>
- <mat-expansion-panel class="year-container" [expanded]="true">
- <mat-expansion-panel-header>
- <mat-panel-title>
- Past: 2017-2018
- </mat-panel-title>
- </mat-expansion-panel-header>
- <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
- <mat-card class="term-container" fxFlex="33%">
- <div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>Fall 2017</h2><p class="text-right semi-bold">14 Credits</p>
- </div>
- <div style="background-color: #fff">
- <app-term-container></app-term-container>
- </div>
- </mat-card>
- <mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
- <div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>Spring 2018</h2><p class="text-right semi-bold">14 Credits</p>
- </div>
- <div style="background-color: #fff">Courses go here....</div>
- </mat-card>
- <mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
- <div fxLayout="row" fxLayoutAlign="space-between stretch">
- <h2>Summer 2018</h2><p class="text-right semi-bold">14 Credits</p>
- </div>
- <div style="background-color: #fff">Courses go here....</div>
- </mat-card>
+
+
+<mat-sidenav-container id="plans-container">
+
+ <mat-sidenav #sidenav position="end" mode="side" [fixedTopGap]="500" opened disableClose>
+ <app-sidenav-menu-item></app-sidenav-menu-item>
+ </mat-sidenav>
+
+ <mat-sidenav-content>
+ <div fxLayout="row" fxLayout.sm="column" fxLayoutGap="20px" fxLayoutAlign="space-between center" style="margin: 24px 0px 24px 24px;">
+ <div fxFlex="70">
+ <mat-form-field>
+ <mat-select placeholder="Degree Plans" [disableOptionCentering]=true [value]="selectedDegreePlan">
+ <mat-option *ngFor="let degreePlan of degreePlans" [value]="degreePlan.roadmapId">
+ {{degreePlan.name}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
</div>
- </mat-expansion-panel>
- </mat-accordion>
-</div>
\ No newline at end of file
+ <div fxFlex="20"><button mat-button class="btn-primary">Check Plan (DARS)</button></div>
+ <div fxFlex><button id="menu-toggle-btn" mat-button (click)="sidenav.toggle()">
+ <i *ngIf="sidenav.opened" class="material-icons">chevron_right</i>
+ <i *ngIf="!sidenav.opened" class="material-icons">chevron_left</i>
+ </button></div>
+ </div>
+ <div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
+
+ <mat-accordion>
+ <mat-expansion-panel class="year-container" [expanded]="true">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ Past: 2017-2018
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+ <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
+ <mat-card class="term-container" fxFlex="33%">
+ <div fxLayout="row" fxLayoutAlign="space-between stretch">
+ <h2>Fall 2017</h2><p class="text-right semi-bold">14 Credits</p>
+ </div>
+ <div style="background-color: #fff">
+ <app-term-container></app-term-container>
+ </div>
+ </mat-card>
+ <mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
+ <div fxLayout="row" fxLayoutAlign="space-between stretch">
+ <h2>Spring 2018</h2><p class="text-right semi-bold">14 Credits</p>
+ </div>
+ <div style="background-color: #fff">Courses go here....</div>
+ </mat-card>
+ <mat-card class="term-container" fxFlex="33%" fxFlexOrder="3">
+ <div fxLayout="row" fxLayoutAlign="space-between stretch">
+ <h2>Summer 2018</h2><p class="text-right semi-bold">14 Credits</p>
+ </div>
+ <div style="background-color: #fff">Courses go here....</div>
+ </mat-card>
+ </div>
+ </mat-expansion-panel>
+ </mat-accordion>
+ </div>
+ </mat-sidenav-content>
+</mat-sidenav-container>
diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner.component.scss
index 1418724..7097a14 100644
--- a/src/app/degree-planner/degree-planner.component.scss
+++ b/src/app/degree-planner/degree-planner.component.scss
@@ -1,3 +1,10 @@
+#plans-container {
+ height: 100vh;
+}
+
+mat-sidenav {
+ width: 280px;
+}
.term-container {
background-color: #E1E1E1;
@@ -6,4 +13,10 @@
.term-container h2 {
color: #2879A8;
font-weight: 400;
+}
+
+#menu-toggle-btn {
+ border-radius: 50% 0 0 50%;
+ padding: 8px;
+ background-color: #F0F0F0;
}
\ No newline at end of file
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
new file mode 100644
index 0000000..ddd2f5a
--- /dev/null
+++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
@@ -0,0 +1,35 @@
+<div id="sidenav-container" fxLayout="column" fxLayout.sm="column">
+
+ <mat-expansion-panel id="menu-items-container" expanded="true">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <h3>Menu</h3>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+ <div>
+ <button mat-button class="sidenav-link-btn"><i class="material-icons">add_box</i> Add Degree Plan</button>
+ <button mat-button class="sidenav-link-btn"><i class="material-icons">note_add </i>Add Note</button>
+ <button mat-button class="sidenav-link-btn"><i class="material-icons">email</i> Share Plan</button>
+ <button mat-button class="sidenav-link-btn"><i class="material-icons">print</i>Print</button>
+ <button mat-button class="sidenav-link-btn"><i class="material-icons">settings</i> Plan Settings</button>
+ </div>
+ </mat-expansion-panel>
+
+ <mat-expansion-panel id="course-keys-container" expanded="true">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ <h3>Course Key</h3>
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+ <ul id="course-key-list">
+ <li><i class="material-icons complete-icon">check_circle</i> Course is complete</li>
+ <li><i class="material-icons in-progress-icon">check_circle</i> Course is currently in progress</li>
+ <li><i class="material-icons problem-icon">report_problem</i> Course is waitlisted</li>
+ <li><i class="material-icons error-icon">error</i> Course is incomplete</li>
+ <li><i class="material-icons help-icon">help</i> Course is likely to be offered based on course history</li>
+ <li><span class="not-offered">―</span>Course no longer offered</li>
+ <li><i class="material-icons favorite-icon">favorite_border</i> Course is a favorite</li>
+ </ul>
+ </mat-expansion-panel>
+
+</div>
\ No newline at end of file
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss
new file mode 100644
index 0000000..69421e2
--- /dev/null
+++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.scss
@@ -0,0 +1,58 @@
+@import '~@angular/material/theming';
+@import '~src/assets/material-theme.scss';
+
+#sidenav-container {
+ height: 100vh;
+ .mat-expansion-panel {
+ border-radius: 0px;
+ }
+ h3 {
+ font-weight: 400;
+ }
+}
+
+#menu-items-container {
+ div {
+ border-top: 1px solid rgba(0, 0, 0, 0.54);
+ padding-top: 20px;
+ }
+}
+
+.sidenav-link-btn {
+ width: 90%;
+ text-align: left;
+ border: 1px solid #b7b7b7;
+ border-radius: 4px;
+ padding: 1px 10px;
+ text-transform: uppercase;
+ color: map-get($uw-primary, 500);
+ font-weight: 500;
+ margin-bottom: 6px !important;
+ .material-icons {
+ padding-right: 8px;
+ }
+}
+
+#course-key-list {
+ list-style-type: none;
+ padding: 20px 0 0px 0;
+ margin-top: 0px;
+ border-top: 1px solid rgba(0, 0, 0, 0.54);
+ li {
+ font-size: 14px;
+ padding-bottom: 12px;
+ position: relative;
+ padding-left: 2.6em;
+ .material-icons, .not-offered {
+ font-size: 15px;
+ position: absolute;
+ left: 6px;
+ top: 2px;
+
+ }
+ }
+}
+
+.not-offered {
+ top: 0 !important;
+}
\ No newline at end of file
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.spec.ts b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.spec.ts
new file mode 100644
index 0000000..22c8185
--- /dev/null
+++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidenavMenuItemComponent } from './sidenav-menu-item.component';
+
+describe('SidenavMenuItemComponent', () => {
+ let component: SidenavMenuItemComponent;
+ let fixture: ComponentFixture<SidenavMenuItemComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SidenavMenuItemComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SidenavMenuItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts
new file mode 100644
index 0000000..eb207a5
--- /dev/null
+++ b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-sidenav-menu-item',
+ templateUrl: './sidenav-menu-item.component.html',
+ styleUrls: ['./sidenav-menu-item.component.scss']
+})
+export class SidenavMenuItemComponent implements OnInit {
+ events: string[] = [];
+ opened: boolean;
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index ea9c63d..faa0e99 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -10,8 +10,10 @@ import {
MatExpansionModule,
MatCardModule,
MatSelectModule } from '@angular/material';
+import { MatSidenavModule } from '@angular/material/sidenav';
import { TermContainerComponent } from '../degree-planner/term-container/term-container.component';
+import { SidenavMenuItemComponent } from '../degree-planner/sidenav-menu-item/sidenav-menu-item.component';
const modules = [
CommonModule,
@@ -24,12 +26,15 @@ const modules = [
MatExpansionModule,
MatCardModule,
MatSelectModule,
- FlexLayoutModule
+ FlexLayoutModule,
+ MatSidenavModule
];
@NgModule({
imports: [ modules ],
- exports: [ modules ],
- declarations: [ ],
+ exports: [ modules, TermContainerComponent, SidenavMenuItemComponent ],
+ declarations: [
+ TermContainerComponent, SidenavMenuItemComponent
+ ],
})
export class SharedModule { }
diff --git a/src/assets/material-theme.scss b/src/assets/material-theme.scss
index e99ff52..2318b36 100644
--- a/src/assets/material-theme.scss
+++ b/src/assets/material-theme.scss
@@ -113,9 +113,3 @@ $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
button {
text-transform: uppercase;
}
-
-.btn-primary {
- background-color: map-get($uw-primary, 500);
- color: #fff;
- font-weight: 400;
-}
\ No newline at end of file
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index f43bc86..b627189 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -1,3 +1,5 @@
+@import '~src/assets/material-theme.scss';
+
body {
background-color: #ccc;
margin: 0px;
@@ -9,4 +11,34 @@ body {
.semi-bold {
font-weight: 700;
+}
+
+.btn-primary {
+ background-color: map-get($uw-primary, 500);
+ color: #fff;
+ font-weight: 400;
+}
+
+.complete-icon{
+ color: #457A3B;
+}
+
+.in-progress-icon {
+ color: #9CBA99;
+}
+
+.problem-icon {
+ color: #F7C376;
+}
+
+.error-icon {
+ color: map-get($uw-accent, 600);
+}
+
+.help-icon {
+ color: map-get($uw-primary, 500);
+}
+
+.favorite-icon {
+ color: map-get($uw-accent, 600);
}
\ No newline at end of file
--
GitLab