feat: add basic left case support

phodal · Mar 12, 2020 · 57c7c3f · 57c7c3f
1 parent ddbecae
commit 57c7c3f
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/src/app/presentation/case-study/case-study.component.html b/src/app/presentation/case-study/case-study.component.html
@@ -1,6 +1,11 @@
-<div class="markdown title center">
- <h1>案例学习</h1>
-</div>
-
-<component-markdown-render [src]="'assets/docs/casestudies/daocloud.md'"></component-markdown-render>
-<component-markdown-render [src]="'assets/docs/casestudies/cmb.md'"></component-markdown-render>
+<mat-drawer-container class="case-study">
+ <mat-drawer mode="side" opened class="left-drawer">
+ <h2>案例（源自互联网收集）</h2>
+ <ul>
+ <li *ngFor="let case of cases" (click)="clickCase(case.source)">{{case.displayName}}</li>
+ </ul>
+ </mat-drawer>
+ <mat-drawer-content>
+ <component-markdown-render [src]="src"></component-markdown-render>
+ </mat-drawer-content>
+</mat-drawer-container>
diff --git a/src/app/presentation/case-study/case-study.component.scss b/src/app/presentation/case-study/case-study.component.scss
@@ -0,0 +1,23 @@
+.case-study {
+ min-height: 600px;
+ height: 100%;
+}
+
+.left-drawer {
+ width: 15%;
+ min-width: 200px;
+ padding-left: 20px;
+ min-height: 100vh;
+ height: 100vh;
+
+ h2 {
+ margin-top: 20px;
+ text-align: center;
+ }
+
+ li {
+ font-size: 1.2rem;
+ padding: 1rem;
+ display: block;
+ }
+}
diff --git a/src/app/presentation/case-study/case-study.component.ts b/src/app/presentation/case-study/case-study.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 
 @Component({
@@ -7,6 +7,12 @@ import {Title} from '@angular/platform-browser';
  styleUrls: ['./case-study.component.scss']
 })
 export class CaseStudyComponent implements OnInit {
+ cases = [
+ {displayName: 'DaoCloud', source: 'daocloud'},
+ {displayName: '美团外卖', source: 'meituan'},
+ {displayName: '招商银行', source: 'cmb'},
+ ];
+ src = `assets/docs/casestudies/meituan.md`;
 
  constructor(title: Title) {
  title.setTitle('DevOps 学习平台 Ledge - 案例学习');
@@ -15,4 +21,7 @@ export class CaseStudyComponent implements OnInit {
  ngOnInit(): void {
  }
 
+ clickCase(source: string) {
+ this.src = `assets/docs/casestudies/${source}.md`;
+ }
 }
diff --git a/src/app/shared/custom-material.module.ts b/src/app/shared/custom-material.module.ts
@@ -4,13 +4,15 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSliderModule} from '@angular/material/slider';
+import {MatDrawer, MatSidenavModule} from '@angular/material/sidenav';
 
 const modules = [
  MatToolbarModule,
  MatButtonModule,
  MatMenuModule,
  MatProgressSpinnerModule,
  MatSliderModule,
+ MatSidenavModule
 ];
 
 @NgModule({