From ee47bd22c6a7b0966a695f30b9003a52df6c7d32 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sat, 22 Jun 2019 19:57:43 +0200 Subject: [PATCH] COntinued with UI. --- src/Squidex/app-config/webpack.config.js | 86 ++++++++----------- .../workflows/workflow-step.component.html | 26 +++--- .../workflows/workflow-step.component.scss | 11 +++ .../workflows/workflow-step.component.ts | 9 +- .../workflows/workflows-page.component.html | 8 +- .../workflows/workflows-page.component.ts | 31 +++++-- .../angular/forms/color-picker.component.html | 14 +-- .../angular/forms/color-picker.component.ts | 55 ++++++++++-- .../angular/forms/dropdown.component.html | 10 +-- .../angular/forms/dropdown.component.scss | 7 +- .../angular/forms/dropdown.component.ts | 15 ++-- .../app/framework/angular/panel.component.ts | 24 ++++-- .../app/shared/services/workflows.service.ts | 12 ++- 13 files changed, 205 insertions(+), 103 deletions(-) diff --git a/src/Squidex/app-config/webpack.config.js b/src/Squidex/app-config/webpack.config.js index 6b9fcb4d0..b072231ea 100644 --- a/src/Squidex/app-config/webpack.config.js +++ b/src/Squidex/app-config/webpack.config.js @@ -1,5 +1,5 @@ const webpack = require('webpack'), - path = require('path'); + path = require('path'); const appRoot = path.resolve(__dirname, '..'); @@ -28,12 +28,12 @@ const plugins = { TsLintPlugin: require('tslint-webpack-plugin') }; -module.exports = function(env) { +module.exports = function (env) { const isDevServer = path.basename(require.main.filename) === 'webpack-dev-server.js'; const isProduction = env && env.production; const isTests = env && env.target === 'tests'; const isCoverage = env && env.coverage; - const isJit = env && env.jit; + const isAot = isProduction; const config = { mode: isProduction ? 'production' : 'development', @@ -56,7 +56,7 @@ module.exports = function(env) { * * See: https://webpack.js.org/configuration/resolve/#resolve-extensions */ - extensions: ['.js', '.mjs', '.ts', '.css', '.scss'], + extensions: ['.ts', '.js', '.mjs', '.css', '.scss'], modules: [ root('app'), root('app', 'theme'), @@ -103,7 +103,7 @@ module.exports = function(env) { use: [{ loader: 'file-loader?name=[name].[hash].[ext]', options: { - outputPath: 'assets', + outputPath: 'assets', /* * Use custom public path as ./ is not supported by fonts. */ @@ -122,9 +122,9 @@ module.exports = function(env) { test: /\.css$/, use: [ plugins.MiniCssExtractPlugin.loader, - { - loader: 'css-loader' - }] + { + loader: 'css-loader' + }] }, { test: /\.scss$/, use: [{ @@ -172,7 +172,7 @@ module.exports = function(env) { failOnError: true }), ], - + devServer: { headers: { 'Access-Control-Allow-Origin': '*' @@ -181,8 +181,6 @@ module.exports = function(env) { } }; - console.log(JSON.stringify(config, null, 2)); - if (!isTests) { /** * The entry point for the bundle. Our Angular app. @@ -202,16 +200,16 @@ module.exports = function(env) { * See: https://webpack.js.org/configuration/output/#output-path */ path: root('wwwroot/build/'), - + publicPath: './build/', - + /** * Specifies the name of each output file on disk. * * See: https://webpack.js.org/configuration/output/#output-filename */ filename: '[name].js', - + /** * The filename of non-entry chunks as relative path inside the output.path directory. * @@ -222,7 +220,7 @@ module.exports = function(env) { } else { config.output = { filename: '[name].js', - + /** * Set the public path, because we are running the website from another port (5000). */ @@ -258,6 +256,15 @@ module.exports = function(env) { waitForLinting: isProduction }) ); + + config.plugins.push( + new plugins.NgToolsWebpack.AngularCompilerPlugin({ + entryModule: 'app/app.module#AppModule', + sourceMap: !isProduction, + skipSourceGeneration: !isAot, + tsConfigPath: './tsconfig.json' + }) + ); } if (isProduction) { @@ -280,18 +287,12 @@ module.exports = function(env) { }; config.performance = { - hints: false + hints: false }; } - if (!isCoverage) { - config.module.rules.push({ - test: /\.ts$/, - use: [{ - loader: 'awesome-typescript-loader', options: { useCache: true, useBabel: true } - }] - }) - } else { + if (isCoverage) { + // Do not instrument tests. config.module.rules.push({ test: /\.ts$/, use: [{ @@ -300,7 +301,7 @@ module.exports = function(env) { include: [/\.(e2e|spec)\.ts$/], }); - // Use instrument loader for all normal builds. + // Use instrument loader for all normal files. config.module.rules.push({ test: /\.ts$/, use: [{ @@ -310,6 +311,13 @@ module.exports = function(env) { }], exclude: [/\.(e2e|spec)\.ts$/] }); + } else { + config.module.rules.push({ + test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, + use: [{ + loader: plugins.NgToolsWebpack.NgToolsLoader + }] + }) } if (isProduction) { @@ -322,11 +330,11 @@ module.exports = function(env) { */ use: [ plugins.MiniCssExtractPlugin.loader, - { - loader: 'css-loader' - }, { - loader: 'sass-loader' - }], + { + loader: 'css-loader' + }, { + loader: 'sass-loader' + }], /* * Do not include component styles. */ @@ -349,23 +357,5 @@ module.exports = function(env) { }); } - if (!isJit) { - config.module.rules.push({ - test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, - use: [{ - loader: '@ngtools/webpack' - }] - }); - - config.plugins.push( - new plugins.NgToolsWebpack.AngularCompilerPlugin({ - entryModule: 'app/app.module#AppModule', - sourceMap: !isProduction, - skipSourceGeneration: false, - tsConfigPath: './tsconfig.json' - }) - ); - } - return config; }; \ No newline at end of file diff --git a/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html b/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html index 3a6b20f9f..70f05540d 100644 --- a/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html +++ b/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.html @@ -2,8 +2,10 @@
+ (ngModelChange)="changeColor($event)" + [disabled]="step.isLocked">
@@ -20,18 +22,22 @@
-
+
-
In Progress +
+
{{transition.to}} +
- +
-
@@ -42,17 +48,15 @@
- + - -
{{target.name}} - +
{{target.name}}
-
diff --git a/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.scss b/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.scss index 415e44a21..a51dd500f 100644 --- a/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.scss +++ b/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.scss @@ -12,6 +12,10 @@ display: inline-block; } +.dashed { + border-style: dashed; +} + .transition { & { padding-left: 1rem; @@ -19,6 +23,13 @@ margin-bottom: .5rem; line-height: 2rem; } + + &-to { + padding: .5rem .75rem; + background: transparent; + border: 1px solid transparent; + line-height: 1.2rem; + } } .step { diff --git a/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.ts b/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.ts index 4da32e3c5..afbb45169 100644 --- a/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.ts +++ b/src/Squidex/app/features/settings/pages/workflows/workflow-step.component.ts @@ -27,6 +27,9 @@ export class WorkflowStepComponent implements OnChanges { @Input() public step: WorkflowStep; + @Output() + public transitionAdd = new EventEmitter(); + @Output() public transitionRemove = new EventEmitter(); @@ -39,13 +42,17 @@ export class WorkflowStepComponent implements OnChanges { @Output() public remove = new EventEmitter(); + public onBlur = { updateOn: 'blur' }; + public openSteps: WorkflowStep[]; + public openStep: WorkflowStep; public transitions: WorkflowTransitionView[]; public ngOnChanges(changes: SimpleChanges) { - if (changes['workflow'] || changes['step']) { + if (changes['workflow'] || changes['step'] || false) { this.openSteps = this.workflow.getOpenSteps(this.step); + this.openStep = this.openSteps[0]; this.transitions = this.workflow.getTransitions(this.step); } diff --git a/src/Squidex/app/features/settings/pages/workflows/workflows-page.component.html b/src/Squidex/app/features/settings/pages/workflows/workflows-page.component.html index 31430d112..c5782052b 100644 --- a/src/Squidex/app/features/settings/pages/workflows/workflows-page.component.html +++ b/src/Squidex/app/features/settings/pages/workflows/workflows-page.component.html @@ -20,12 +20,14 @@ - + (remove)="removeStep(step)" + (transitionAdd)="addTransiton(step, $event)" + (transitionRemove)="removeTransition(step, $event)" + (update)="updateStep(step, $event)">