fix(ui): read-only input style, some fixes (#4324)

ovh · May 23, 2019 · 254a451 · 254a451
1 parent eb86fb7
commit 254a451
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 59 deletions.
diff --git a/ui/src/app/shared/workflow/node/hook/details/hook.details.component.html b/ui/src/app/shared/workflow/node/hook/details/hook.details.component.html
@@ -46,7 +46,7 @@ <h3>{{'workflow_hook_log_title' | translate}}</h3>
                       <codemirror
                         [ngModel]="task.webhook.request_body"
                         [config]="codeMirrorConfig"
-                        #bodyCode>
+                        #code>
                       </codemirror>
                     </div>
                 </ng-container>

diff --git a/ui/src/app/shared/workflow/node/hook/details/hook.details.component.scss b/ui/src/app/shared/workflow/node/hook/details/hook.details.component.scss
@@ -1,7 +1,3 @@
-input:read-only {
-  background-color: #dedede !important;
-}
-
 codemirror {
   width: 100%;
 }
diff --git a/ui/src/app/shared/workflow/node/hook/details/hook.details.component.ts b/ui/src/app/shared/workflow/node/hook/details/hook.details.component.ts
@@ -1,48 +1,63 @@
-import {Component, ViewChild} from '@angular/core';
-import {cloneDeep} from 'lodash';
-import {ModalTemplate, SuiModalService, TemplateModalConfig} from 'ng2-semantic-ui';
-import {ActiveModal} from 'ng2-semantic-ui/dist';
-import {TaskExecution} from '../../../../../model/workflow.hook.model';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { TaskExecution } from 'app/model/workflow.hook.model';
+import { ThemeStore } from 'app/service/services.module';
+import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
+import { cloneDeep } from 'lodash';
+import { ModalTemplate, SuiModalService, TemplateModalConfig } from 'ng2-semantic-ui';
+import { ActiveModal } from 'ng2-semantic-ui/dist';
+import { Subscription } from 'rxjs';
 
 @Component({
-    selector: 'app-workflow-node-hook-details',
-    templateUrl: './hook.details.component.html',
-    styleUrls: ['./hook.details.component.scss']
+  selector: 'app-workflow-node-hook-details',
+  templateUrl: './hook.details.component.html',
+  styleUrls: ['./hook.details.component.scss']
 })
-export class WorkflowNodeHookDetailsComponent {
-    codeMirrorConfig: any;
+@AutoUnsubscribe()
+export class WorkflowNodeHookDetailsComponent implements OnInit {
+  @ViewChild('code') codemirror: any;
 
-    // Ng semantic modal
-    @ViewChild('nodeHookDetailsModal')
-    public nodeHookDetailsModal: ModalTemplate<boolean, boolean, void>;
-    modal: ActiveModal<boolean, boolean, void>;
-    modalConfig: TemplateModalConfig<boolean, boolean, void>;
+  @ViewChild('nodeHookDetailsModal') nodeHookDetailsModal: ModalTemplate<boolean, boolean, void>;
+  modal: ActiveModal<boolean, boolean, void>;
+  modalConfig: TemplateModalConfig<boolean, boolean, void>;
 
-    task: TaskExecution;
+  task: TaskExecution;
+  codeMirrorConfig: any;
+  themeSubscription: Subscription;
 
-    constructor(private _modalService: SuiModalService) {
-        this.codeMirrorConfig = {
-            matchBrackets: true,
-            autoCloseBrackets: true,
-            mode: 'application/json',
-            lineWrapping: true,
-            autoRefresh: true,
-            readOnly: true
-        };
-    }
+  constructor(
+    private _modalService: SuiModalService,
+    private _theme: ThemeStore
+  ) {
+    this.codeMirrorConfig = {
+      matchBrackets: true,
+      autoCloseBrackets: true,
+      mode: 'application/json',
+      lineWrapping: true,
+      autoRefresh: true,
+      readOnly: true
+    };
+  }
 
-    show(taskExec: TaskExecution): void {
-        this.task = cloneDeep(taskExec);
-        if (this.task.webhook && this.task.webhook.request_body) {
-          let body = atob(this.task.webhook.request_body);
-          try {
-            this.task.webhook.request_body = JSON.stringify(JSON.parse(body), null, 4);
-          } catch (e) {
-            this.task.webhook.request_body = body;
-          }
+  ngOnInit(): void {
+    this.themeSubscription = this._theme.get().subscribe(t => {
+      this.codeMirrorConfig.theme = t === 'night' ? 'darcula' : 'default';
+      if (this.codemirror && this.codemirror.instance) {
+          this.codemirror.instance.setOption('theme', this.codeMirrorConfig.theme);
+      }
+  });
+  }
 
-        }
-        this.modalConfig = new TemplateModalConfig<boolean, boolean, void>(this.nodeHookDetailsModal);
-        this.modal = this._modalService.open(this.modalConfig);
+  show(taskExec: TaskExecution): void {
+    this.task = cloneDeep(taskExec);
+    if (this.task.webhook && this.task.webhook.request_body) {
+      let body = atob(this.task.webhook.request_body);
+      try {
+        this.task.webhook.request_body = JSON.stringify(JSON.parse(body), null, 4);
+      } catch (e) {
+        this.task.webhook.request_body = body;
+      }
     }
+    this.modalConfig = new TemplateModalConfig<boolean, boolean, void>(this.nodeHookDetailsModal);
+    this.modal = this._modalService.open(this.modalConfig);
+  }
 }
diff --git a/ui/src/app/shared/workflow/wizard/hook/hook.form.scss b/ui/src/app/shared/workflow/wizard/hook/hook.form.scss
@@ -13,10 +13,6 @@ codemirror {
   }
 }
 
-input:read-only {
-  background-color: #dedede !important;
-}
-
 .mb15 {
   margin-bottom: 15px;
 }

diff --git a/ui/src/app/views/settings/workflow-template/add/workflow-template.add.html b/ui/src/app/views/settings/workflow-template/add/workflow-template.add.html
@@ -7,18 +7,6 @@
                     {{'workflow_template_help_add_from' | translate: {projectKey: projectKey, workflowName:
                     workflowName} }}
                 </div>
-                <div *ngIf="projectKey && workflowName" class="ui green message">
-                    {{'workflow_template_help_add_from' | translate: {projectKey: projectKey, workflowName:
-                    workflowName} }}
-                </div>
-                <div *ngIf="projectKey && workflowName" class="ui orange message">
-                    {{'workflow_template_help_add_from' | translate: {projectKey: projectKey, workflowName:
-                    workflowName} }}
-                </div>
-                <div *ngIf="projectKey && workflowName" class="ui red message">
-                    {{'workflow_template_help_add_from' | translate: {projectKey: projectKey, workflowName:
-                    workflowName} }}
-                </div>
                 <app-workflow-template-form mode="add" [loading]="loading" [workflowTemplate]="workflowTemplate"
                     [groups]="groups" [errors]="errors" (save)="saveWorkflowTemplate($event)"></app-workflow-template-form>
             </div>

diff --git a/ui/src/theme.scss b/ui/src/theme.scss
@@ -192,6 +192,10 @@ a.ui.card:hover,
     color: inherit;
 }
 
+input:read-only {
+    opacity: 0.45
+}
+
 .ui.form input,
 .ui.form textarea,
 .ui.input input {
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,10 +13,6 @@ codemirror { @@
       }
     }
-    input:read-only {
-      background-color: #dedede !important;
-    }
     .mb15 {
       margin-bottom: 15px;
     }
@@ Expand Down @@