@things-factory/board-ui 7.0.1-alpha.9 → 7.0.1-alpha.90

package/dist-client/viewparts/board-basic-info.d.ts

@@ -1,4 +1,10 @@
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/select/outlined-select';
+import '@material/web/button/elevated-button.js';
+import '@material/web/chips/chip-set.js';
+import '@material/web/chips/assist-chip.js';
+import '@material/web/chips/filter-chip.js';
 import { LitElement } from 'lit';
 declare const BoardInfo_base: (new (...args: any[]) => {
     _storeUnsubscribe: import("redux").Unsubscribe;

package/dist-client/viewparts/board-basic-info.js

@@ -1,5 +1,11 @@
 import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon';
+import '@material/web/icon/icon.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@material/web/select/outlined-select';
+import '@material/web/button/elevated-button.js';
+import '@material/web/chips/chip-set.js';
+import '@material/web/chips/assist-chip.js';
+import '@material/web/chips/filter-chip.js';
 import gql from 'graphql-tag';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -9,6 +15,7 @@ import { client } from '@operato/graphql';
 import { navigate, store } from '@operato/shell';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { hasPrivilege } from '@things-factory/auth-base/dist-client';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 let BoardInfo = class BoardInfo extends connect(store)(LitElement) {
     constructor() {
         super(...arguments);
@@ -20,7 +27,7 @@ let BoardInfo = class BoardInfo extends connect(store)(LitElement) {
         this.targetGroups = [];
     }
     render() {
-        var _a;
+        var _a, _b;
         var board = this.board || { name: '', description: '', playGroups: [] };
         var boardGroupList = this.boardGroupList || [];
         var playGroupList = (this.playGroupList || []).map(group => {
@@ -35,25 +42,26 @@ let BoardInfo = class BoardInfo extends connect(store)(LitElement) {
         return html `
       ${board.thumbnail ? html ` <img src=${board.thumbnail} /> ` : html ``}
 
-      <form>
+      <form class="md-typescale-body-medium">
         <fieldset>
-          <legend>${i18next.t('label.information')}</legend>
-          <label>${i18next.t('label.name')}</label>
+          <legend class="md-typescale-label-large-prominent">${i18next.t('label.information')}</legend>
           <div oneline>
-            <input
+            <md-filled-text-field
+              label=${String(i18next.t('label.name'))}
               type="text"
               .value=${board.name}
               @change=${e => (this.board = Object.assign(Object.assign({}, this.board), { name: e.target.value }))}
               ?disabled=${!this.enableModeller}
-            />
+            ></md-filled-text-field>
+
             ${this.enableModeller
             ? html `
-                  <mwc-icon
+                  <md-icon
                     @click=${() => {
                 this.showTarget = !this.showTarget;
             }}
                     tail
-                    >${this.showTarget ? 'arrow_drop_up' : 'arrow_drop_down'}</mwc-icon
+                    >${this.showTarget ? 'arrow_drop_up' : 'arrow_drop_down'}</md-icon
                   >
                 `
             : nothing}
@@ -61,43 +69,46 @@ let BoardInfo = class BoardInfo extends connect(store)(LitElement) {
           ${this.showTarget
             ? html `
                 <div fullwidth target>
-                  <label>${i18next.t('label.board-copy')}</label>
+                  <label class="md-typescale-label-meium-prominent">${i18next.t('label.board-copy')}</label>
                   <div oneline>
-                    <select
+                    <md-outlined-select
+                      label=${String(i18next.t('label.domain'))}
                       @change=${e => {
                 this.targetSubdomain = e.target.value;
                 this.getGroupsByDomain(this.targetSubdomain);
             }}
-                      placeholder="choose domain ..."
-                      .value=${this.targetSubdomain}
+                      .value=${this.targetSubdomain || ''}
                       ?disabled=${!this.enableModeller}
                     >
-                      <option value=""></option>
+                      <md-select-option aria-label="blank"></md-select-option>
                       ${this.targetDomains.map(domain => html `
-                            <option .value=${domain.subdomain} ?selected=${domain.subdomain == this.targetSubdomain}>
-                              ${domain.name}
-                            </option>
-                          `)}
-                    </select>
-
-                    <select
+                          <md-select-option
+                            value=${domain.subdomain}
+                            ?selected=${domain.subdomain == this.targetSubdomain}
+                          >
+                            <div slot="headline">${domain.name}</div>
+                          </md-select-option>
+                        `)}
+                    </md-outlined-select>
+
+                    <md-outlined-select
+                      label=${String(i18next.t('label.group'))}
                       @change=${e => (this.targetGroupId = e.target.value)}
-                      placeholder="choose group ..."
-                      .value=${this.targetGroupId}
+                      .value=${this.targetGroupId || ''}
                       ?disabled=${!this.enableModeller}
                     >
-                      <option value=""></option>
+                      <md-select-option aria-label="blank"></md-select-option>
                       ${this.targetGroups.map(group => html `
-                            <option .value=${group.id} ?selected=${group.id == this.targetGroupId}>
-                              ${group.name}
-                            </option>
-                          `)}
-                    </select>
+                          <md-select-option value=${group.id} ?selected=${group.id == this.targetGroupId}>
+                            <div slot="headline">${group.name}</div>
+                          </md-select-option>
+                        `)}
+                    </md-outlined-select>
                   </div>
-                  <div oneline>
-                    <mwc-button
-                      dense
-                      raised
+
+                  <md-chip-set oneline>
+                    <md-assist-chip
+                      elevated
                       label=${String(i18next.t('button.copy'))}
                       ?disabled=${!this.enableModeller ||
                 !((_a = this.original) === null || _a === void 0 ? void 0 : _a.name) ||
@@ -105,109 +116,129 @@ let BoardInfo = class BoardInfo extends connect(store)(LitElement) {
                 !this.targetSubdomain ||
                 (this.original.name == this.board.name && this.subdomain == this.targetSubdomain)}
                       @click=${this.cloneBoard.bind(this)}
-                      icon="content_copy"
                       right
-                    ></mwc-button>
-                    <mwc-button
-                      dense
-                      raised
+                    >
+                      <md-icon slot="icon">content_copy</md-icon>
+                    </md-assist-chip>
+
+                    <md-assist-chip
+                      elevated
                       label=${String(i18next.t('button.export'))}
                       @click=${this.exportBoard.bind(this)}
-                      icon="download"
-                    ></mwc-button>
-                  </div>
+                    >
+                      <md-icon slot="icon">download</md-icon>
+                    </md-assist-chip>
+                  </md-chip-set>
                 </div>
               `
-            : html ``}
+            : nothing}
 
-          <label>${i18next.t('label.description')}</label>
-          <input
-            type="text"
+          <md-filled-text-field
+            oneline
+            label=${String(i18next.t('label.description'))}
             .value=${board.description}
             @change=${e => (this.board = Object.assign(Object.assign({}, this.board), { description: e.target.value }))}
             ?disabled=${!this.enableModeller}
-          />
+          ></md-filled-text-field>
 
-          <label>${i18next.t('label.group')}</label>
-          <select
+          <md-outlined-select
+            oneline
+            label=${String(i18next.t('label.group'))}
             @change=${e => (this.board = Object.assign(Object.assign({}, this.board), { groupId: e.target.value }))}
             .value=${this.groupId || ''}
+            .displayText=${(_b = boardGroupList === null || boardGroupList === void 0 ? void 0 : boardGroupList.find(item => item.id == this.groupId)) === null || _b === void 0 ? void 0 : _b.name}
             ?disabled=${!this.enableModeller}
           >
-            <option value="" ?selected=${'' == this.groupId}></option>
-            ${boardGroupList.map(item => html ` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `)}
-          </select>
-          <label>${i18next.t('label.creator')}</label>
-          <span>
-            <mwc-icon>person</mwc-icon> ${(board.creator && board.creator.name) || 'anonymous'}
-            <mwc-icon>schedule</mwc-icon> ${new Date(board.createdAt).toLocaleString()}
-          </span>
-
-          <label>${i18next.t('label.updater')}</label>
-          <span>
-            <mwc-icon>person</mwc-icon> ${(board.updater && board.updater.name) || 'anonymouse'}
-            <mwc-icon>schedule</mwc-icon> ${new Date(board.updatedAt).toLocaleString()}
-          </span>
-
-          <label>${i18next.t('label.state')}</label>
-          <span state>
-            <div oneline>
-              <mwc-icon>signpost</mwc-icon> ${(board.state || '').toUpperCase()}
-              <mwc-icon>pin</mwc-icon> ${board.version}
-            </div>
-            <mwc-button
-              dense
-              raised
-              label=${String(i18next.t('button.release'))}
-              ?disabled=${!this.enableModeller || !this.isReleasable}
-              @click=${this.releaseBoard.bind(this)}
-              icon="new_releases"
-            ></mwc-button>
-          </span>
-
-          <div buttons>
-            <mwc-button
-              dense
-              raised
+            <md-select-option aria-label="blank"></md-select-option>
+            ${boardGroupList.map(item => html `
+                <md-select-option value=${item.id} ?selected=${item.id == this.groupId}>
+                  <div slot="headline">${item.name}</div>
+                </md-select-option>
+              `)}
+          </md-outlined-select>
+
+          <md-chip-set oneline>
+            <md-assist-chip
               danger
-              label=${String(i18next.t('button.delete'))}
+              elevated
               ?disabled=${!this.enableModeller}
+              label=${String(i18next.t('button.delete'))}
               @click=${this.deleteBoard.bind(this)}
-              icon="delete_outline"
-            ></mwc-button>
-            <mwc-button
-              dense
-              raised
-              label=${String(i18next.t('button.save'))}
+            >
+              <md-icon slot="icon">delete_outline</md-icon>
+            </md-assist-chip>
+
+            <md-assist-chip
+              elevated
               ?disabled=${!this.enableModeller}
+              label=${String(i18next.t('button.save'))}
               @click=${this.updateBoard.bind(this)}
-              icon="save"
-            ></mwc-button>
-            <mwc-button
-              dense
-              raised
-              label=${String(i18next.t('button.edit'))}
+              right
+            >
+              <md-icon slot="icon">save</md-icon>
+            </md-assist-chip>
+            <md-assist-chip
+              elevated
               ?disabled=${!this.enableModeller}
+              label=${String(i18next.t('button.edit'))}
               @click=${() => navigate(`${'board-modeller/' + this.boardId}`)}
-              icon="drive_file_rename_outline"
-            ></mwc-button>
+            >
+              <md-icon slot="icon">drive_file_rename_outline</md-icon>
+            </md-assist-chip>
+          </md-chip-set>
+        </fieldset>
+
+        <fieldset>
+          <legend class="md-typescale-label-large-prominent">${i18next.t('label.status')}</legend>
+          <div oneline>
+            <label class="md-typescale-label-meium">${i18next.t('label.creator')}</label>
+            <md-icon dim>person</md-icon>
+            <div name title=${(board.creator && board.creator.name) || 'anonymous'}>
+              ${(board.creator && board.creator.name) || 'anonymous'}
+            </div>
+            <md-icon dim>schedule</md-icon> ${new Date(board.createdAt).toLocaleString()}
+          </div>
+
+          <div oneline>
+            <label class="md-typescale-label-meium">${i18next.t('label.updater')}</label>
+            <md-icon dim>person</md-icon>
+            <div name title=${(board.updater && board.updater.name) || 'anonymouse'}>
+              ${(board.updater && board.updater.name) || 'anonymouse'}
+            </div>
+            <md-icon dim>schedule</md-icon> ${new Date(board.updatedAt).toLocaleString()}
+          </div>
+
+          <div oneline>
+            <label class="md-typescale-label-meium">${i18next.t('label.state')}</label>
+            <md-icon dim>signpost</md-icon> ${(board.state || '').toUpperCase()}
+            <md-icon dim>pin</md-icon> ${board.version}
+            <md-chip-set>
+              <md-assist-chip
+                elevated
+                label=${String(i18next.t('button.release'))}
+                ?disabled=${!this.enableModeller || !this.isReleasable}
+                @click=${this.releaseBoard.bind(this)}
+                right
+              >
+                <md-icon slot="icon">new_releases</md-icon>
+              </md-assist-chip>
+            </md-chip-set>
           </div>
         </fieldset>
 
         <fieldset>
-          <legend>${i18next.t('label.play-group')}</legend>
-
-          ${playGroupList.map(item => html `
-              <input
-                type="checkbox"
-                value=${item.id}
-                .checked=${item.checked}
-                @change=${e => {
-            e.target.checked ? this.joinPlayGroup(item) : this.leavePlayGroup(item);
+          <legend class="md-typescale-label-large-prominent">${i18next.t('label.play-group')}</legend>
+          <md-chip-set oneline>
+            ${playGroupList.map(item => html `
+                <md-filter-chip
+                  label=${item.name}
+                  ?selected=${item.checked}
+                  @click=${e => {
+            e.target.selected ? this.joinPlayGroup(item) : this.leavePlayGroup(item);
         }}
-              />
-              <label>${item.name}</label>
-            `)}
+                ></md-filter-chip>
+              `)}
+          </md-chip-set>
         </fieldset>
       </form>
     `;
@@ -421,22 +452,27 @@ let BoardInfo = class BoardInfo extends connect(store)(LitElement) {
     }
 };
 BoardInfo.styles = [
+    MDTypeScaleStyles,
     css `
       :host {
-        display: block;
-        background-color: var(--main-section-background-color);
         position: relative;
-
-        --form-grid-gap: 2px 0;
-        --input-field-padding: var(--padding-default);
-        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
-        --mdc-button-horizontal-padding: var(--padding-default);
+        display: block;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+
+        --md-filled-field-top-space: 12px;
+        --md-filled-field-bottom-space: 12px;
+        --md-filled-field-leading-space: 12px;
+        --md-filled-field-trailing-space: 12px;
+
+        --md-outlined-field-top-space: 12px;
+        --md-outlined-field-bottom-space: 12px;
+        --md-outlined-field-leading-space: 12px;
+        --md-outlined-field-trailing-space: 12px;
       }
 
       img {
-        display: block;
-
-        margin: auto;
+        object-fit: contain;
         max-width: 100%;
         max-height: 100%;
         border-bottom: 2px solid rgba(0, 0, 0, 0.1);
@@ -445,26 +481,23 @@ BoardInfo.styles = [
       form {
         display: grid;
         grid-template-columns: repeat(12, 1fr);
-        grid-gap: var(--form-grid-gap);
+        grid-gap: 10px 0;
         grid-auto-rows: minmax(24px, auto);
         padding: var(--padding-wide);
         align-items: center;
       }
 
-      [buttons] {
-        grid-column: span 12;
-        padding: var(--padding-default) 0;
-        text-align: right;
-      }
-
-      [buttons] * {
-        margin: 0 0 0 var(--margin-narrow);
+      md-outlined-select,
+      md-filled-text-field {
+        flex: 1;
+        padding: 4px 0;
+        min-width: unset;
       }
 
-      [danger] {
-        float: left;
-        margin: 0 var(--margin-narrow) 0 0;
-        --mdc-theme-primary: var(--status-danger-color);
+      md-chip-set {
+        flex: 1;
+        display: flex;
+        gap: 4px;
       }
 
       fieldset {
@@ -474,108 +507,54 @@ BoardInfo.styles = [
       legend {
         grid-column: span 12;
         padding: var(--legend-padding);
-        font: var(--legend-font);
-        color: var(--legend-text-color);
+        color: var(--md-sys-color-primary);
         text-transform: capitalize;
       }
 
       label {
-        grid-column: span 12;
         text-transform: capitalize;
-        color: var(--label-color);
-        font: var(--label-font);
       }
 
-      span {
-        grid-column: span 12;
-        border-bottom: var(--border-dark-color);
-        margin-bottom: var(--margin-default);
-        padding-bottom: var(--padding-narrow);
-        font: var(--input-field-font);
-      }
-
-      span[state] {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+      md-icon[dim] {
+        font-variation-settings: 'FILL' 1;
+        --md-icon-size: 14px;
+        color: var(--md-sys-color-outline-variant);
       }
 
-      span mwc-icon {
-        vertical-align: middle;
-        font-size: var(--fontsize-large);
-        color: var(--primary-color);
+      [name] {
+        max-width: 70px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      input,
-      table,
-      select,
-      textarea,
-      [custom-input] {
-        grid-column: span 12;
-
-        border: var(--input-field-border);
-        border-radius: var(--input-field-border-radius);
-        margin-bottom: var(--margin-default);
-        padding: var(--input-field-padding);
-        font: var(--input-field-font);
-      }
-
-      mwc-icon[tail] {
-        margin-bottom: var(--margin-default);
-      }
-
-      input[type='checkbox'],
-      input[type='radio'] {
-        place-self: center;
-        margin: 0;
-        grid-column: 1;
-      }
-
-      input[type='checkbox'] + label,
-      input[type='radio'] + label {
-        text-align: left;
-        grid-column: span 11 / auto;
-
-        font: var(--form-sublabel-font);
-        color: var(--form-sublabel-color);
-      }
-
-      input:focus {
-        outline: none;
-        border: 1px solid var(--focus-background-color);
+      [danger] {
+        --md-assist-chip-elevated-container-color: var(--md-sys-color-error);
+        --md-assist-chip-label-text-color: var(--md-sys-color-on-error);
+        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-error);
       }
 
-      div[fullwidth] {
+      [fullwidth] {
         grid-column: span 12 / auto;
-        border-bottom: var(--border-dark-color);
-
         display: flex;
         flex-direction: column;
-        align-items: stretch;
-        gap: var(--margin-default);
+        gap: 4px;
       }
 
-      div[oneline] {
+      [oneline] {
         grid-column: span 12 / auto;
-
         display: flex;
+        flex-direction: row;
+        gap: 4px;
         align-items: center;
-        gap: var(--margin-default);
-      }
-
-      div[oneline] input {
-        flex: 1;
       }
 
-      div[oneline] select {
+      [oneline] md-filled-text-field,
+      [oneline] select {
         flex: 1;
       }
 
-      div[oneline] mwc-button {
-        margin-bottom: var(--margin-default);
-      }
-
-      mwc-button[right] {
+      [right] {
         margin-left: auto;
       }