Merge pull request #64 from SoftwareAG/develop

Changed styles of json editor to adapt to branding changes
Cumulocity-IoT · Dec 15, 2023 · 656cc8b · 656cc8b
2 parents 39938d9 + 0b72e07
commit 656cc8b
Show file tree

Hide file tree

Showing 12 changed files with 33,920 additions and 170 deletions.
diff --git a/dynamic-mapping-ui/package-lock.json b/dynamic-mapping-ui/package-lock.json
diff --git a/dynamic-mapping-ui/package.json b/dynamic-mapping-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dynamic-mapping",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Cumulocity plugin to map custom JSON payloads to C8Y payloads.The plugin support both directions: inbound/outbound.",
   "repository": {
     "type": "git",

diff --git a/dynamic-mapping-ui/src/mapping/grid/mapping.component.html b/dynamic-mapping-ui/src/mapping/grid/mapping.component.html
@@ -24,14 +24,6 @@
 <!-- <mapping-help src="/apps/mqtt-mapping/assets/help/help-mapping.html"></mapping-help> -->
 <!-- <mapping-help src="."></mapping-help> -->
 <c8y-action-bar-item [placement]="'right'">
-  <button
-    class="btn btn-link"
-    title="{{ 'Refresh' | translate }}"
-    (click)="loadMappings()"
-  >
-    <i c8yIcon="refresh"></i>
-    {{ "Refresh" | translate }}
-  </button>
   <button
     class="btn btn-link"
     title="{{ 'Add mapping' | translate }}"
@@ -73,6 +65,14 @@
     <i c8yIcon="upload"></i>
     {{ "Import mappings" | translate }}
   </button>
+  <button
+  class="btn btn-link"
+  title="{{ 'Refresh' | translate }}"
+  (click)="loadMappings()"
+>
+  <i c8yIcon="refresh"></i>
+  {{ "Refresh" | translate }}
+</button>
 </c8y-action-bar-item>
 <div class="card">
   <div class="card-block">

diff --git a/dynamic-mapping-ui/src/mapping/shared/mapping.style.css b/dynamic-mapping-ui/src/mapping/shared/mapping.style.css
@@ -51,25 +51,15 @@ json-editor > div {
 
 .column-left-border {
   border-left: 1px solid;
-  border-color: var(
-    --legend-color,
-    var(
-      --component-legend-color,
-      var(--root-component-legend-color, var(--gray-5, #677680))
-    )
-  );
+  border-color: var(--c8y-form-legend-color);
   margin-left: -1px;
+  /* border-color: var(--c8y-root-component-separator-color); */
 }
 
 .column-right-border {
   border-right: 1px solid;
-  border-color: var(
-    --legend-color,
-    var(
-      --component-legend-color,
-      var(--root-component-legend-color, var(--gray-5, #677680))
-    )
-  );
+  border-color: var(--c8y-form-legend-color);
+  /* border-color: var(--c8y-root-component-separator-color); */
 }
 
 .reduced-top {
@@ -82,15 +72,15 @@ json-editor > div {
 
 .animate-background {
   animation-name: background-color;
-  animation-duration: 1s;
+  animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-direction: alternate-reverse;
   animation-timing-function: ease;
 }
 
 @keyframes background-color {
   from {
-    background-color: #8adbd5;
+    background-color: var(--brand-light, var(--c8y-brand-light));
   }
   to {
     background-color: white;

diff --git a/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.html b/dynamic-mapping-ui/src/mapping/step-main/mapping-stepper.component.html
@@ -127,7 +127,7 @@
                     <c8y-messages class="text-left">
                       <c8y-message
                         *ngIf="
-                          templateModel.currentSubstitution.pathSource == ''
+                        substitutionModel.pathSource == ''
                         "
                         translate
                         ><span class="text-warning"
@@ -271,7 +271,7 @@
                     <c8y-messages class="text-right">
                       <c8y-message
                         *ngIf="
-                          templateModel.currentSubstitution.pathTarget == ''
+                        substitutionModel.pathTarget == ''
                         "
                         translate
                         ><span class="text-warning"
@@ -283,19 +283,14 @@
                 </div>
               </div>
             </div>
-            <div [formGroup]="templateFormly">
+            <div [formGroup]="substitutionFormly">
               <div class="row">
                 <formly-form
-                  [form]="templateFormly"
-                  [fields]="templateFormlyFields"
-                  [model]="templateModel"
+                  [form]="substitutionFormly"
+                  [fields]="substitutionFormlyFields"
+                  [model]="substitutionModel"
                 ></formly-form>
               </div>
-            </div>
-            <div [formGroup]="templateForm">
-              <div class="legend form-block col-lg-10 col-lg-offset-1">
-                Substitutions
-              </div>
               <div class="row">
                 <div class="col-lg-2 col-lg-offset-1">
                   <button
@@ -340,6 +335,12 @@
                   </button>
                 </div>
               </div>
+            </div>
+            <div [formGroup]="templateForm">
+              <div class="legend form-block col-lg-10 col-lg-offset-1">
+                Substitutions
+              </div>
+
               <div class="row">
                 <div class="col-lg-10 col-lg-offset-1">
                   <div style="min-height: 32px">