@things-factory/integration-ui 7.0.0-alpha.4 → 7.0.0-alpha.5

package/client/viewparts/scenario-monitor.ts

@@ -23,7 +23,6 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       :host {
         display: flex;
         flex-direction: row;
-        margin: var(--margin-default);
 
         border: var(--border-dark-color);
         background-color: var(--theme-white-color);
@@ -34,11 +33,11 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       }
 
       [desc] {
+        flex: 1;
         position: relative;
         display: flex;
         flex-direction: column;
         padding: var(--padding-default);
-        width: 200px;
         color: var(--secondary-color);
         font-size: var(--fontsize-small);
       }
@@ -114,9 +113,15 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         margin: var(--margin-default) 0 0 0;
       }
 
+      :host([mode='detail']) [desc] {
+        flex: unset;
+        width: 200px;
+      }
+
       :host([mode='detail']) [desc] [buttons] {
         display: none;
       }
+
       :host([mode='detail']) [buttons] {
         border-top: none;
         padding: var(--padding-default);
@@ -137,7 +142,6 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
         position: relative;
         margin: var(--margin-default);
         min-width: 140px;
-        max-width: 180px;
         border: 1px solid black;
         border-radius: var(--border-radius);
         font-size: 12px;
@@ -154,21 +158,12 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       @media screen and (max-width: 480px) {
         :host {
           margin: var(--margin-narrow);
-          max-width: 46%;
-        }
-
-        :host([mode='detail']) {
-          max-width: initial;
         }
 
         [desc] {
           padding: var(--padding-narrow);
         }
 
-        :host([mode='detail']) > [desc] {
-          max-width: 125px;
-        }
-
         [desc] [detail-info] {
           height: 38px;
         }
@@ -230,17 +225,8 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       <div buttons ?detail=${this.mode == 'detail'}>
         <mwc-icon-button @click=${e => this.popupLogView(scenario)} icon="text_snippet"></mwc-icon-button>
         ${!scenarioInstance
-          ? html` <mwc-icon-button
-              icon="play_circle_outline"
-              @click=${e => this.startScenario(scenario)}
-            ></mwc-icon-button>`
-          : html`
-              <mwc-icon-button
-                icon="pause_circle_outline"
-                @click=${e => this.stopScenario(scenario)}
-                stop
-              ></mwc-icon-button>
-            `}
+          ? html` <mwc-icon-button icon="play_circle_outline" @click=${e => this.startScenario(scenario)}></mwc-icon-button>`
+          : html` <mwc-icon-button icon="pause_circle_outline" @click=${e => this.stopScenario(scenario)} stop></mwc-icon-button> `}
       </div>
     `
   }
@@ -268,9 +254,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
     notify({
       level: 'info',
-      message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${
-        scenario.name
-      }`
+      message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`
     })
   }
 
@@ -290,9 +274,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
 
     notify({
       level: 'info',
-      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${
-        scenario.name
-      }`
+      message: `${IS_SCENARIO_RUNNING(response.data.stopScenario.state) ? 'fail' : 'success'} to stop instance : ${scenario.name}`
     })
   }
 }

package/client/viewparts/scenarios-monitor.ts

@@ -8,10 +8,6 @@ import { customElement, property, query } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
-function IS_SCENARIO_RUNNING(state) {
-  return state && state !== 'UNLOADED'
-}
-
 @customElement('scenarios-monitor')
 export class ScenariosMonitor extends localize(i18next)(LitElement) {
   static styles = [
@@ -84,12 +80,17 @@ export class ScenariosMonitor extends localize(i18next)(LitElement) {
       [scenarios] [flowbox] {
         display: flex;
         flex-direction: column;
-        min-height: min-content;
+        padding: 10px;
+        gap: 12px;
       }
 
       [scenarios][mode='brief'] [flowbox] {
-        flex-flow: row wrap;
-        align-self: start;
+        overflow: auto;
+        display: grid;
+
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-auto-rows: max-content;
+        grid-gap: 12px;
       }
 
       scenario-monitor {