feat: #12 add circle list-style support

phodal · Apr 3, 2020 · 7a8be71 · 7a8be71
1 parent cc768d2
commit 7a8be71
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 6 deletions.
diff --git a/src/app/presentation/ledge-helper/ledge-helper.component.ts b/src/app/presentation/ledge-helper/ledge-helper.component.ts
@@ -9,6 +9,26 @@ export class LedgeHelperComponent implements OnInit {
  content = `
 # Syntax Test
 
+\`\`\`list-style
+ - 开源工具采用
+ - 商业采购
+ - 自研研发交通平台
+
+config: {"type": "circle"}
+\`\`\`
+
+\`\`\`list-style
+ - 基于开源方案遇到困难
+ - 性能瓶颈
+ - 业务需求⽇益多元化，但团队规模有限
+ - 扩展更多的能力
+ - 更多元化的代码质量检查
+ - 审计需求
+ - 二进制、镜像安全扫描
+
+config: {"type": "group-square"}
+\`\`\`
+
 \`\`\`echarts
 {
 "series": [

diff --git a/src/app/shared/ledge-render/ledge-render.component.html b/src/app/shared/ledge-render/ledge-render.component.html
@@ -80,6 +80,14 @@
  </div>
  </div>
 
+ <div *ngSwitchCase="'list-style'">
+ <div class="list-style list-style-{{item.config.type}}">
+ <div *ngFor="let listItem of item.data;let index = index;" class="list-style-item item-{{index}}">
+ {{listItem.name}}
+ </div>
+ </div>
+ </div>
+
  <div *ngSwitchCase="'heading'">
  <h1 *ngIf="item.depth === 1">{{item.text}}</h1>
  <h2 *ngIf="item.depth === 2">{{item.text}}</h2>

diff --git a/src/app/shared/ledge-render/ledge-render.component.ts b/src/app/shared/ledge-render/ledge-render.component.ts
@@ -126,6 +126,15 @@ export class LedgeRenderComponent implements OnInit, AfterViewInit, OnChanges {
  case 'echarts':
  this.markdownData.push({ type: 'echarts', data: codeBlock.text });
  break;
+ case 'list-style':
+ const listData = LedgeMarkdownConverter.toJson(codeBlock.text);
+ console.log(listData.lists);
+ this.markdownData.push({
+ type: 'list-style',
+ data: listData.lists[0].children,
+ config: listData.config,
+ });
+ break;
  default:
  this.markdownData.push(token);
  break;

diff --git a/src/styles/mdstyles/_list-style.scss b/src/styles/mdstyles/_list-style.scss
@@ -7,9 +7,10 @@
  text-align: center;
 
  .list-style-item {
- &.item-1 {background: #A1763A;}
- &.item-2 {background: #1c4c78;}
- &.item-3 {background: #994538;}
+ &.item-0 {background: #A1763A;}
+ &.item-1 {background: #1c4c78;}
+ &.item-2 {background: #994538;}
+ &.item-3 {background: red;}
 
  width: 200px;
  height: 200px;
@@ -25,9 +26,10 @@
  text-align: center;
 
  > .list-style-item {
- &.item-1 {background: #A1763A;}
- &.item-2 {background: #1c4c78;}
- &.item-3 {background: #994538;}
+ &.item-0 {background: #A1763A;}
+ &.item-1 {background: #1c4c78;}
+ &.item-2 {background: #994538;}
+ &.item-3 {background: red;}
 
  width: 320px;
  height: 240px;