@things-factory/board-ui 6.1.23 → 6.1.27

package/dist-client/setting-let/board-view-setting-let.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-view-setting-let.js","sourceRoot":"","sources":["../../client/setting-let/board-view-setting-let.ts"],"names":[],"mappings":";AAAA,OAAO,8BAA8B,CAAA;AACrC,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAC/B,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAG5D,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAapE,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;iCAKkB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC;;;wBAG3D,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;yBACpB,IAAI,CAAC,WAAW;;;;;KAKpC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,YAAY;;QAChB,MAAM,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAA;QACzF,IAAI,CAAC,WAAW,GAAG,WAAW,CAAA;IAChC,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,CAAC;;QACd,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA;QAEnC,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAA;QACjG,IAAI,IAAI,CAAC,WAAW,KAAK,cAAc,EAAE;YACvC,OAAM;SACP;QAED,IAAI;YACF,MAAM,kBAAkB,CAAC,GAAG,CAAC;gBAC3B,GAAG,EAAE,YAAY;gBACjB,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,CAAC,WAAW;iBAC9B;aACF,CAAC,CAAA;SACH;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;SACjB;IACH,CAAC;;AArDM,0BAAM,GAAG;IACd,GAAG,CAAA;;;;;;KAMF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;wDAAsB;AAXvC,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAuD/B;SAvDY,mBAAmB","sourcesContent":["import '@things-factory/setting-base'\nimport '@material/mwc-formfield'\nimport '@material/mwc-checkbox'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { clientSettingStore } from '@operato/shell/object-store.js'\n\n@customElement('board-view-setting-let')\nexport class BoardViewSettingLet extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      label {\n        font: var(--label-font);\n        color: var(--label-color);\n        text-transform: var(--label-text-transform);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) autoRefresh?: boolean\n\n  render() {\n    return html`\n      <setting-let>\n        <ox-i18n slot=\"title\" msgid=\"title.board view setting\"></ox-i18n>\n\n        <div slot=\"content\">\n          <mwc-formfield label=${String(i18next.t('label.auto refresh board view'))}>\n            <mwc-checkbox\n              id=\"auto-refresh\"\n              @change=${e => this.onChange(e)}\n              ?checked=${this.autoRefresh}\n            ></mwc-checkbox>\n          </mwc-formfield>\n        </div>\n      </setting-let>\n    `\n  }\n\n  async firstUpdated() {\n    const { autoRefresh = false } = (await clientSettingStore.get('board-view'))?.value || {}\n    this.autoRefresh = autoRefresh\n  }\n\n  async onChange(e) {\n    this.autoRefresh = e.target.checked\n\n    const { autoRefresh: valueFromStore } = (await clientSettingStore.get('board-view'))?.value || {}\n    if (this.autoRefresh === valueFromStore) {\n      return\n    }\n\n    try {\n      await clientSettingStore.put({\n        key: 'board-view',\n        value: {\n          autoRefresh: this.autoRefresh\n        }\n      })\n    } catch (e) {\n      console.error(e)\n    }\n  }\n}\n"]}

package/dist-client/themes/board-theme.css

@@ -0,0 +1,107 @@
+body {
+  --board-renderer-border: 1px solid rgba(0, 0, 0, 0.1);
+  --board-renderer-max-width: 120px;
+  --board-renderer-name-background-color: var(--secondary-text-color);
+  --board-renderer-name-font: normal 13px var(--theme-font);
+  --board-renderer-icon-size: 24px;
+  --board-renderer-icon-border-radius: 10px;
+  --board-renderer-font: bold 16px/25px var(--mdc-icon-font, 'Material Icons');
+  --board-renderer-icon-edit-background-color: #95d40f;
+  --board-renderer-icon-view-background-color: #27a1de;
+
+  /* list page style*/
+  --board-list-background-color: var(--main-section-background-color);
+  --board-list-border-radius: var(--border-radius);
+  --board-list-box-border: var(--margin-default) solid #fff;
+  --board-list-box-shadow: var(--box-shadow);
+  --board-list-margin: var(--margin-default);
+  --board-list-tile-background-color: #fff;
+  --board-list-tile-name-font: bold 14px/18px var(--theme-font);
+  --board-list-tile-name-color: var(--secondary-color);
+  --board-list-tile-description-font: 12px/14px var(--theme-font);
+  --board-list-tile-description-color: var(--secondary-text-color);
+  --board-list-tile-icon-color: var(--opacity-dark-color);
+  --board-list-star-color: var(--opacity-dark-color);
+  --board-list-star-active-color: var(--status-warning-color);
+
+  --card-list-template: repeat(3, minmax(auto, 100%));
+  --card-list-rows-height: 180px;
+  --card-list-background-color: rgba(0, 0, 0, 0.07);
+  --card-list-border-radius: var(--border-radius);
+  --card-list-flip-transform: rotateX(180deg);
+  --card-list-create-border: 1px dashed var(--primary-color);
+  --card-list-create-border-radius: var(--border-radius);
+  --card-list-create-icon-color: var(--primary-color);
+  --card-list-create-color: var(--secondary-color);
+  --card-list-create-form-padding: 15px;
+  --card-list-create-label-font: normal 14px var(--theme-font);
+  --card-list-create-label-color: var(--secondary-color);
+  --card-list-create-input-font: normal 14px var(--theme-font);
+  --card-list-create-input-color: var();
+  --card-list-create-input-border: 1px solid rgba(0, 0, 0, 0.2);
+  --card-list-create-input-border-radius: var(--border-radius);
+  --card-list-create-input-padding: 2px 9px;
+  --card-list-create-margin: 0 0 7px 0;
+
+  /* board modeler page style */
+  --edit-toolbar-background-color: var(--secondary-text-color);
+  --edit-toolbar-bigger-icon-size: 45px;
+  --edit-toolbar-bigger-icon-line: 1px solid rgba(0, 0, 0, 0.1);
+  --component-toolbar-background-color: var(--main-section-background-color);
+  --component-toolbar-icon-size: 45px;
+  --component-toolbar-border: 1px solid rgba(0, 0, 0, 0.1);
+  --component-menu-background-color: #fff;
+  --component-menu-border-color: var(--secondary-text-color);
+  --component-menu-title: bold 11px/16px var(--theme-font);
+  --component-menu-item-color: var(--secondary-color);
+  --component-menu-item-hover-color: var(--secondary-text-color);
+  --component-menu-item-icon-size: 20px;
+  --property-sidebar-background-color: #eceff1;
+  --property-sidebar-tab-icon-color: var(--secondary-color);
+  --property-sidebar-fieldset-border: 1px solid rgba(0, 0, 0, 0.2);
+  --property-sidebar-fieldset-label-color: var(--secondary-color);
+  --property-sidebar-fieldset-label: normal 12px/16px var(--theme-font);
+  --property-sidebar-fieldset-legend-color: var(--secondary-text-color);
+  --property-sidebar-fieldset-legend: bold 13px var(--theme-font);
+  --scene-inspector-color: var(--secondary-color);
+  --scene-inspector-selected-background-color: rgba(115, 188, 28, 0.2);
+  --scene-inspector-selected-border: 1px solid rgba(115, 188, 28, 1);
+  --scene-inspector-name-background-color: var(--primary-color);
+  --scene-inspector-eye-icon-color: var(--secondary-text-color);
+}
+
+@media only screen and (max-width: 460px) {
+  body {
+    --card-list-template: repeat(1, minmax(auto, 100%));
+  }
+}
+@media (min-width: 461px) and (max-width: 700px) {
+  body {
+    --card-list-template: repeat(2, minmax(auto, 100%));
+  }
+}
+@media (min-width: 461px) and (max-width: 1024px) {
+  body {
+    --card-list-create-form-padding: 7px;
+  }
+}
+@media (min-width: 1025px) and (max-width: 1400px) {
+  body {
+    --card-list-template: repeat(4, minmax(auto, 100%));
+  }
+}
+@media (min-width: 1401px) and (max-width: 1800px) {
+  body {
+    --card-list-template: repeat(5, minmax(auto, 100%));
+  }
+}
+@media (min-width: 1801px) and (max-width: 2200px) {
+  body {
+    --card-list-template: repeat(6, minmax(auto, 100%));
+  }
+}
+@media only screen and (min-width: 2201px) {
+  body {
+    --card-list-template: repeat(7, minmax(auto, 100%));
+  }
+}