@things-factory/integration-ui 7.0.1-rc.8 → 7.0.1

package/client/analysis/graph-viewer.ts

@@ -309,7 +309,7 @@ export class GraphViewer {
       .attr('pointer-events', 'none')
       .attr('text-anchor', 'middle')
       .attr('y', '24px')
-      .attr('font-family', 'Material Icons')
+      .attr('font-family', 'Material Symbols Outlined')
       .attr('font-size', '48px')
       .attr('text-anchor', 'middle')
       .attr('alignment-baseline', 'middle')

package/client/editors/things-editor-oracle-procedure.ts

@@ -42,14 +42,14 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        margin-bottom: var(--margin-wide);
+        margin-bottom: var(--spacing-large);
       }
 
       div {
         display: flex;
         flex-flow: row nowrap;
-        gap: var(--margin-default);
-        margin-bottom: var(--margin-narrow);
+        gap: var(--spacing-medium);
+        margin-bottom: var(--spacing-small);
       }
 
       pre {
@@ -72,7 +72,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         border: var(--button-border);
         border-radius: var(--border-radius);
         background-color: var(--button-background-color);
-        padding: var(--padding-narrow) var(--padding-default);
+        padding: var(--spacing-small) var(--spacing-medium);
         line-height: 0.8;
         color: var(--button-color);
         cursor: pointer;

package/client/pages/connection.ts

@@ -42,7 +42,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
       }
 
       #filters > * {
-        padding: var(--padding-default) var(--padding-wide);
+        padding: var(--spacing-medium) var(--spacing-large);
       }
     `
   ]

package/client/pages/integration-monitor.ts

@@ -44,11 +44,11 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
 
         overflow: hidden;
         background-color: var(--md-sys-color-background);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       integration-summary {
-        margin-bottom: var(--margin-wide);
+        margin-bottom: var(--spacing-large);
       }
 
       content {
@@ -65,15 +65,15 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
 
       scenarios-monitor {
         flex: 1;
-        margin: 0 var(--margin-wide) 0 0;
+        margin: 0 var(--spacing-large) 0 0;
       }
 
       @media screen and (max-width: 480px) {
         :host {
-          padding: var(--padding-default);
+          padding: var(--spacing-medium);
         }
         integration-summary {
-          margin-bottom: var(--margin-default);
+          margin-bottom: var(--spacing-medium);
         }
         content {
           display: block;
@@ -81,7 +81,7 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
         }
         scenarios-monitor {
           min-height: 350px;
-          margin: 0 0 var(--margin-default) 0;
+          margin: 0 0 var(--spacing-medium) 0;
         }
         connections-monitor {
           width: initial;

package/client/pages/scenario.ts

@@ -52,7 +52,7 @@ export class Scenario extends connect(store)(localize(i18next)(PageView)) {
         }
 
         #filters > * {
-          padding: var(--padding-default) var(--padding-wide);
+          padding: var(--spacing-medium) var(--spacing-large);
         }
       `
     ]

package/client/viewparts/connections-monitor.ts

@@ -23,7 +23,7 @@ export class ConnectionsMonitor extends LitElement {
       }
       h2 {
         margin: 0;
-        padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
+        padding: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
         border-bottom: var(--border-dim-color);
         font: var(--subtitle-font);
         color: var(--md-sys-color-secondary);
@@ -41,7 +41,7 @@ export class ConnectionsMonitor extends LitElement {
       [card] {
         display: flex;
         flex-direction: column;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         border-bottom: var(--border-dim-color);
         color: var(--md-sys-color-secondary);
       }
@@ -65,14 +65,14 @@ export class ConnectionsMonitor extends LitElement {
         height: 10px;
         border-radius: 50%;
         background-color: var(--md-sys-color-primary);
-        margin-left: var(--margin-narrow);
+        margin-left: var(--spacing-small);
       }
 
       [buttons] {
         --md-icon-size: 20px;
         border-top: 1px dashed rgba(0, 0, 0, 0.1);
-        margin: var(--margin-narrow) 0 0 0;
-        padding: var(--padding-narrow) 0 0 0;
+        margin: var(--spacing-small) 0 0 0;
+        padding: var(--spacing-small) 0 0 0;
         text-align: right;
       }
 
@@ -82,7 +82,7 @@ export class ConnectionsMonitor extends LitElement {
 
       @media screen and (max-width: 480px) {
         h2 {
-          padding: var(--padding-narrow);
+          padding: var(--spacing-small);
         }
 
         [card] span {

package/client/viewparts/monitoring-summary.ts

@@ -24,8 +24,8 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
 
       [card] {
         flex: 1;
-        margin: var(--margin-default);
-        padding: var(--padding-narrow) var(--padding-default);
+        margin: var(--spacing-medium);
+        padding: var(--spacing-small) var(--spacing-medium);
         border-right: var(--border-light-color);
       }
       :host :last-child {
@@ -38,7 +38,7 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
       }
       span {
         display: block;
-        margin-bottom: var(--margin-narrow);
+        margin-bottom: var(--spacing-small);
         font-size: var(--fontsize-small);
         text-transform: capitalize;
         opacity: 0.6;
@@ -53,8 +53,8 @@ export class IntegrationMonitoringSummary extends localize(i18next)(LitElement)
           font-size: 0.8em;
         }
         [card] {
-          margin: var(--margin-narrow);
-          padding: var(--padding-narrow);
+          margin: var(--spacing-small);
+          padding: var(--spacing-small);
         }
         [card]:nth-child(5),
         [card]:nth-child(6) {

package/client/viewparts/pending-q-monitor.ts

@@ -18,7 +18,7 @@ export class PendingQMonitor extends LitElement {
         flex-direction: column;
         background-color: var(--md-sys-color-surface);
         border-radius: var(--border-radius);
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
       }
 
       div[tags] {
@@ -27,7 +27,7 @@ export class PendingQMonitor extends LitElement {
       }
       [tags] md-icon {
         --md-icon-size: var(--fontsize-large);
-        margin: 0 var(--margin-narrow) 0 0;
+        margin: 0 var(--spacing-small) 0 0;
       }
 
       select {
@@ -51,7 +51,7 @@ export class PendingQMonitor extends LitElement {
 
       [pending-wrap] {
         flex: 1;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         padding-left: 30px;
         padding-right: 4px;
         font-size: 8px;
@@ -80,7 +80,7 @@ export class PendingQMonitor extends LitElement {
       }
       [timeline] table {
         border-collapse: collapse;
-        margin-top: var(--margin-default);
+        margin-top: var(--spacing-medium);
         width: 100%;
       }
       [timeline] th {

package/client/viewparts/scenario-instance-log-view.ts

@@ -20,7 +20,7 @@ export class ScenarioInstanceLogView extends connect(store)(LitElement) {
         display: flex;
         flex-direction: column;
         background-color: var(--md-sys-color-surface);
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       :host([active]) {

package/client/viewparts/scenario-instance-monitor.ts

@@ -24,7 +24,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
         display: block;
         overflow: hidden;
         position: relative;
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
         color: var(--md-sys-color-secondary);
       }
 
@@ -61,7 +61,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
       }
 
       [steps] {
-        padding: 0 0 0 var(--padding-narrow);
+        padding: 0 0 0 var(--spacing-small);
       }
 
       #progressbar {
@@ -75,7 +75,7 @@ export class ScenarioInstanceMonitor extends localize(i18next)(LitElement) {
         --md-icon-size: 18px;
 
         border-top: var(--border-dim-color);
-        padding: var(--padding-narrow) 0 0 0;
+        padding: var(--spacing-small) 0 0 0;
         text-align: right;
       }
 

package/client/viewparts/scenario-instance-view.ts

@@ -40,7 +40,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
 
       [tab] span {
         display: inline;
-        padding: var(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
+        padding: var(--spacing-large) var(--spacing-large) var(--spacing-small) var(--spacing-large);
         border-bottom: 3px solid transparent;
         color: var(--md-sys-color-secondary);
         text-transform: capitalize;
@@ -56,7 +56,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
         background-color: var(--md-sys-color-surface);
         border-top: var(--border-dim-color);
         overflow: hidden;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
 
       [detail] > * {
@@ -82,7 +82,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
         list-style: inside '- ';
       }
       [detail] li {
-        padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);
+        padding: var(--spacing-medium) var(--spacing-small) var(--spacing-small) var(--spacing-small);
         border-bottom: var(--border-dim-color);
       }
 
@@ -93,7 +93,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
       [value] {
         flex: 1;
         overflow: auto;
-        padding: var(--padding-wide);
+        padding: var(--spacing-large);
       }
       scenario-instance-log-view [active] {
         padding: 0;
@@ -104,7 +104,7 @@ export class ScenarioInstanceView extends connect(store)(LitElement) {
           display: block;
         }
         [detail] {
-          padding: var(--padding-default);
+          padding: var(--spacing-medium);
           overflow: auto;
         }
         [detail] > * {

package/client/viewparts/scenario-monitor.ts

@@ -37,7 +37,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         position: relative;
         display: flex;
         flex-direction: column;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
         color: var(--md-sys-color-secondary);
         font-size: var(--fontsize-small);
         width: 100%;
@@ -64,7 +64,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         display: block;
         position: absolute;
         top: 0px;
-        right: var(--padding-default);
+        right: var(--spacing-medium);
         font-size: 40px;
         font-weight: bold;
         text-align: right;
@@ -78,8 +78,8 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       [desc] [schedule] {
         background-color: #f1f1f1;
         border-radius: 20px;
-        margin: var(--margin-default) 0;
-        padding: var(--padding-narrow);
+        margin: var(--spacing-medium) 0;
+        padding: var(--spacing-small);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -95,7 +95,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
       [buttons] {
         border-top: var(--border-dim-color);
-        padding: var(--padding-narrow) 0 0 0;
+        padding: var(--spacing-small) 0 0 0;
         text-align: right;
       }
 
@@ -111,7 +111,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       }
 
       :host([mode='detail']) [schedule] {
-        margin: var(--margin-default) 0 0 0;
+        margin: var(--spacing-medium) 0 0 0;
       }
 
       :host([mode='detail']) [desc] {
@@ -125,7 +125,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
       :host([mode='detail']) [buttons] {
         border-top: none;
-        padding: var(--padding-default);
+        padding: var(--spacing-medium);
       }
 
       ul {
@@ -141,7 +141,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
       ul > li {
         position: relative;
-        margin: var(--margin-default);
+        margin: var(--spacing-medium);
         min-width: 140px;
         border: 1px solid black;
         border-radius: var(--border-radius);
@@ -158,11 +158,11 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
       @media screen and (max-width: 480px) {
         :host {
-          margin: var(--margin-narrow);
+          margin: var(--spacing-small);
         }
 
         [desc] {
-          padding: var(--padding-narrow);
+          padding: var(--spacing-small);
         }
 
         [desc] [detail-info] {

package/client/viewparts/scenarios-monitor.ts

@@ -23,8 +23,8 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
 
       [info] {
         display: flex;
-        margin-bottom: var(--margin-default);
-        padding: var(--padding-narrow) 0;
+        margin-bottom: var(--spacing-medium);
+        padding: var(--spacing-small) 0;
         flex-direction: row;
         align-items: center;
         border-bottom: 2px solid var(--md-sys-color-secondary);
@@ -43,13 +43,13 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
       }
       [info] input {
         margin: var(--input-margin);
-        padding: var(--padding-narrow);
+        padding: var(--spacing-small);
         border: var(--border-dim-color);
         border-radius: var(--border-radius);
         font: var(--input-font);
       }
       [info] md-icon {
-        margin-left: var(--margin-narrow);
+        margin-left: var(--spacing-small);
         color: var(--md-sys-color-secondary);
         line-height: 34px;
         cursor: pointer;

package/dist-client/analysis/graph-viewer.js

@@ -245,7 +245,7 @@ export class GraphViewer {
             .attr('pointer-events', 'none')
             .attr('text-anchor', 'middle')
             .attr('y', '24px')
-            .attr('font-family', 'Material Icons')
+            .attr('font-family', 'Material Symbols Outlined')
             .attr('font-size', '48px')
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')