From 61177e1ab510af62c88807cb3da46da5a92d6984 Mon Sep 17 00:00:00 2001 From: Michael Wurster Date: Fri, 22 Nov 2019 10:57:20 +0100 Subject: [PATCH] Add Markdown editor for Winery's README files Co-authored-by: Lukas Harzenetter Signed-off-by: Michael Wurster --- .../plans/plans.component.html | 2 +- .../wineryMarkdown.component.css | 103 ++++++++++++++++++ .../wineryMarkdown.component.html | 12 ++ .../wineryMarkdown.component.ts | 57 ++++++++++ .../wineryMarkdown.module.ts | 28 +++++ .../wineryReadme.component.css | 4 + .../wineryReadme.component.html | 55 +++++++++- .../wineryReadmeModule/wineryReadme.module.ts | 2 + .../package-lock.json | 62 +++++++++++ org.eclipse.winery.frontends/package.json | 1 + 10 files changed, 319 insertions(+), 7 deletions(-) create mode 100644 org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.css create mode 100644 org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.html create mode 100644 org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.ts create mode 100644 org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.module.ts diff --git a/org.eclipse.winery.frontends/app/tosca-management/src/app/instance/serviceTemplates/plans/plans.component.html b/org.eclipse.winery.frontends/app/tosca-management/src/app/instance/serviceTemplates/plans/plans.component.html index 757684a145..f058668eaa 100644 --- a/org.eclipse.winery.frontends/app/tosca-management/src/app/instance/serviceTemplates/plans/plans.component.html +++ b/org.eclipse.winery.frontends/app/tosca-management/src/app/instance/serviceTemplates/plans/plans.component.html @@ -30,7 +30,7 @@ (ioBtnClicked)="onEditPlanIOParameters($event);">
diff --git a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.css b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.css new file mode 100644 index 0000000000..f0eac5774f --- /dev/null +++ b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.css @@ -0,0 +1,103 @@ +/** +* SPDX-License-Identifier: MIT +* +* Taken from: https://github.com/dimpu/angular2-markdown/blob/1c36831d2c9f48ddd7183db33e886ed9ab0a3345/demo/src/app/home/home.component.ts#L11 +*/ + +#textbox { + width: 100%; + height: 100vh; +} + +table.table2 { + font-size: 14px; + color: #212121; + margin: 0 auto; + border-collapse: collapse; +} + +table.table2 thead th { + font-size: 20px; + color: #212121; + height: 40px; + border: 1px solid #e6e6e6; + border-top: 0; + border-right: 0; + border-left: 0; +} + +table.table2 tbody tr:nth-child(odd) { + background-color: #f6f6f6; +} + +table.table2 td { + height: 40px; + width: 230px; + border-bottom: 1px solid #e6e6e6; + border-right: 1px solid #e6e6e6; +} + +table.table2 td:last-of-type { + border-right: 0; +} + +/* From https://codepen.io/maxds/pen/DcveB */ +blockquote.king-quote { + display: block; + background: #fff; + padding: 15px 20px 15px 45px; + margin: 0 0 20px; + position: relative; + + /*Font*/ + font-family: Georgia, serif; + font-size: 16px; + line-height: 1.2; + color: #666; + text-align: justify; + + /*Borders - (Optional)*/ + border-left: 15px solid #c76c0c; + border-right: 2px solid #c76c0c; + + /*Box Shadow - (Optional)*/ + -moz-box-shadow: 2px 2px 15px #ccc; + -webkit-box-shadow: 2px 2px 15px #ccc; + box-shadow: 2px 2px 15px #ccc; +} + +blockquote.king-quote::before { + content: "\201C"; /*Unicode for Left Double Quote*/ + + /*Font*/ + font-family: Georgia, serif; + font-size: 60px; + font-weight: bold; + color: #999; + + /*Positioning*/ + position: absolute; + left: 10px; + top: 5px; +} + +blockquote.king-quote::after { + /*Reset to make sure*/ + content: ""; +} + +blockquote.king-quote a { + text-decoration: none; + background: #eee; + cursor: pointer; + padding: 0 3px; + color: #c76c0c; +} + +blockquote.king-quote a:hover { + color: #666; +} + +blockquote.king-quote em { + font-style: italic; +} diff --git a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.html b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.html new file mode 100644 index 0000000000..8569c992d3 --- /dev/null +++ b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.html @@ -0,0 +1,12 @@ + + + diff --git a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.ts b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.ts new file mode 100644 index 0000000000..ffb936118f --- /dev/null +++ b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.component.ts @@ -0,0 +1,57 @@ +/** + * Copyright (c) 2017 University of Stuttgart. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v2.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v20.html + * and http://www.apache.org/licenses/LICENSE-2.0 + */ + +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { MarkdownService } from 'angular2-markdown'; + +@Component({ + selector: 'winery-markdown', + encapsulation: ViewEncapsulation.None, + templateUrl: './wineryMarkdown.component.html', + providers: [], + styleUrls: ['wineryMarkdown.component.css'], + +}) +export class WineryMarkdownComponent implements OnInit { + + @Input() markdownContent = ''; + + constructor(private _markdown: MarkdownService) { + } + + ngOnInit() { + this._markdown.setMarkedOptions({}); + this._markdown.setMarkedOptions({ + gfm: true, + tables: true, + breaks: false, + pedantic: false, + sanitize: false, + smartLists: true, + smartypants: false + }); + + this._markdown.renderer.table = (header: string, body: string) => { + return ` + + + ${header} + + + ${body} + +
+ `; + }; + this._markdown.renderer.blockquote = (quote: string) => { + return `
${quote}
`; + }; + } + +} diff --git a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.module.ts b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.module.ts new file mode 100644 index 0000000000..3b44425c18 --- /dev/null +++ b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryMarkdownComponent/wineryMarkdown.module.ts @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2017 University of Stuttgart. + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Eclipse Public License v2.0 + * and the Apache License 2.0 which both accompany this distribution, + * and are available at http://www.eclipse.org/legal/epl-v20.html + * and http://www.apache.org/licenses/LICENSE-2.0 + */ +import { NgModule } from '@angular/core'; + +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { WineryMarkdownComponent } from './wineryMarkdown.component'; +import { MarkdownModule } from 'angular2-markdown'; + +@NgModule({ + imports: [ + FormsModule, + BrowserModule, + MarkdownModule.forRoot(), + + ], + exports: [WineryMarkdownComponent], + declarations: [WineryMarkdownComponent], + providers: [], +}) +export class WineryMarkdownModule { +} diff --git a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.component.css b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.component.css index 5926996721..51f804b549 100644 --- a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.component.css +++ b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.component.css @@ -25,3 +25,7 @@ background-image: linear-gradient(#79d858, #569e3d); border-color: #569e3d; } + +.pad-6px { + padding: 6px; +} diff --git a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.component.html b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.component.html index 49d24cefa9..39ce118724 100644 --- a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.component.html +++ b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.component.html @@ -23,22 +23,65 @@
-
-
- + +
-
+
- +
+ + +
+
+ +
+
+ + + +
+ +
+ + + +
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+ + +
+ +
diff --git a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.module.ts b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.module.ts index 95117cd63a..e2ddfa7dae 100644 --- a/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.module.ts +++ b/org.eclipse.winery.frontends/app/tosca-management/src/app/wineryReadmeModule/wineryReadme.module.ts @@ -18,12 +18,14 @@ import {FormsModule} from '@angular/forms'; import {WineryLoaderModule} from '../wineryLoader/wineryLoader.module'; import {TabsModule} from 'ngx-bootstrap'; import {WineryPipesModule} from '../wineryPipes/wineryPipes.module'; +import {WineryMarkdownModule} from '../wineryMarkdownComponent/wineryMarkdown.module'; @NgModule({ imports: [ CommonModule, WineryLoaderModule, FormsModule, + WineryMarkdownModule, TabsModule, WineryPipesModule ], diff --git a/org.eclipse.winery.frontends/package-lock.json b/org.eclipse.winery.frontends/package-lock.json index 9eb691e76a..b9533ffb04 100644 --- a/org.eclipse.winery.frontends/package-lock.json +++ b/org.eclipse.winery.frontends/package-lock.json @@ -1235,6 +1235,22 @@ "mousetrap": "^1.6.0" } }, + "angular2-markdown": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/angular2-markdown/-/angular2-markdown-1.6.0.tgz", + "integrity": "sha1-hja/narXD8NWMxJnB/+zPmhPurE=", + "requires": { + "marked": "^0.3.6", + "prismjs": "^1.6.0" + }, + "dependencies": { + "marked": { + "version": "0.3.19", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz", + "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==" + } + } + }, "angular2-uuid": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/angular2-uuid/-/angular2-uuid-1.1.1.tgz", @@ -2206,6 +2222,17 @@ "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", "dev": true }, + "clipboard": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz", + "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==", + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "cliui": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", @@ -2777,6 +2804,12 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "optional": true + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -4299,6 +4332,15 @@ "minimatch": "~3.0.2" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "graceful-fs": { "version": "4.1.15", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz", @@ -7150,6 +7192,14 @@ "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", "dev": true }, + "prismjs": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz", + "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==", + "requires": { + "clipboard": "^2.0.0" + } + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -7915,6 +7965,12 @@ } } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "optional": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -9071,6 +9127,12 @@ "setimmediate": "^1.0.4" } }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "optional": true + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/org.eclipse.winery.frontends/package.json b/org.eclipse.winery.frontends/package.json index 9fe6dd4f89..a79cf04f52 100644 --- a/org.eclipse.winery.frontends/package.json +++ b/org.eclipse.winery.frontends/package.json @@ -37,6 +37,7 @@ "@angular/router": "7.2.7", "angular2-hotkeys": "2.1.3", "angular-in-memory-web-api": "0.6.1", + "angular2-markdown": "1.6.0", "angular2-uuid": "1.1.1", "angular2-websocket": "0.9.7", "bootstrap": "4.1.3",