@things-factory/board-ui 7.0.1-alpha.60 → 7.0.1-alpha.69

package/client/viewparts/board-basic-info.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 gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
@@ -11,25 +17,32 @@ 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'
+
 @customElement('board-basic-info')
 export class BoardInfo extends connect(store)(LitElement) {
   static 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);
@@ -38,26 +51,23 @@ export class BoardInfo extends connect(store)(LitElement) {
       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 {
@@ -67,108 +77,54 @@ export class BoardInfo extends connect(store)(LitElement) {
       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);
+      md-icon[dim] {
+        font-variation-settings: 'FILL' 1;
+        --md-icon-size: 14px;
+        color: var(--md-sys-color-outline-variant);
       }
 
-      span[state] {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+      [name] {
+        max-width: 70px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
-      span mwc-icon {
-        vertical-align: middle;
-        font-size: var(--fontsize-large);
-        color: var(--primary-color);
-      }
-
-      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 {
+      [oneline] md-filled-text-field,
+      [oneline] select {
         flex: 1;
       }
 
-      div[oneline] select {
-        flex: 1;
-      }
-
-      div[oneline] mwc-button {
-        margin-bottom: var(--margin-default);
-      }
-
-      mwc-button[right] {
+      [right] {
         margin-left: auto;
       }
 
@@ -216,25 +172,26 @@ export 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 = { ...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}
@@ -242,49 +199,50 @@ export 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>
-                          `
+                        domain => html`
+                          <md-select-option
+                            value=${domain.subdomain}
+                            ?selected=${domain.subdomain == this.targetSubdomain}
+                          >
+                            <div slot="headline">${domain.name}</div>
+                          </md-select-option>
+                        `
                       )}
-                    </select>
+                    </md-outlined-select>
 
-                    <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>
-                          `
+                        group => html`
+                          <md-select-option value=${group.id} ?selected=${group.id == this.targetGroupId}>
+                            <div slot="headline">${group.name}</div>
+                          </md-select-option>
+                        `
                       )}
-                    </select>
+                    </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 ||
                       !this.original?.name ||
@@ -292,113 +250,133 @@ export 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 = { ...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 = { ...this.board, groupId: e.target.value })}
             .value=${this.groupId || ''}
+            .displayText=${boardGroupList?.find(item => item.id == this.groupId)?.name}
             ?disabled=${!this.enableModeller}
           >
-            <option value="" ?selected=${'' == this.groupId}></option>
+            <md-select-option aria-label="blank"></md-select-option>
             ${boardGroupList.map(
-              item => html` <option .value=${item.id} ?selected=${item.id == this.groupId}>${item.name}</option> `
+              item => html`
+                <md-select-option value=${item.id} ?selected=${item.id == this.groupId}>
+                  <div slot="headline">${item.name}</div>
+                </md-select-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-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)
-                }}
-              />
-              <label>${item.name}</label>
-            `
-          )}
+          <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)
+                  }}
+                ></md-filter-chip>
+              `
+            )}
+          </md-chip-set>
         </fieldset>
       </form>
     `

package/client/viewparts/board-info-link.ts

@@ -13,7 +13,7 @@ export class BoardInfoLink extends LitElement {
       :host {
         display: flex;
         flex-direction: column;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-surface);
         position: relative;
         text-align: center;
         color: var(--label-color);

package/client/viewparts/board-info.ts

@@ -20,7 +20,7 @@ export class BoardInfo extends LitElement {
         display: flex;
         flex-direction: column;
         position: relative;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-surface);
       }
 
       [tab] {
@@ -73,8 +73,8 @@ export class BoardInfo extends LitElement {
         ${this.tab == 'basic'
           ? html`<board-basic-info boardId=${ifDefined(this.board?.id)}></board-basic-info>`
           : this.tab == 'versions'
-          ? html`<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`
-          : html`<board-info-link .board=${this.board}></board-info-link>`}
+            ? html`<board-versions boardId=${ifDefined(this.board?.id)}></board-versions>`
+            : html`<board-info-link .board=${this.board}></board-info-link>`}
       </div>
     `
   }

package/client/viewparts/board-template-builder.ts

@@ -1,4 +1,3 @@
-import '@material/mwc-icon'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'

package/client/viewparts/board-versions.ts

@@ -1,4 +1,5 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/chips/assist-chip.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -6,6 +7,7 @@ import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next } from '@operato/i18n'
 import { client } from '@operato/graphql'
+
 import { privileged } from '@things-factory/auth-base/dist-client'
 
 @customElement('board-versions')
@@ -14,7 +16,7 @@ export class BoardVersions extends LitElement {
     css`
       :host {
         display: block;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-surface);
         position: relative;
         text-align: center;
         color: var(--label-color);
@@ -51,17 +53,23 @@ export class BoardVersions extends LitElement {
         gap: 5px;
       }
 
-      span mwc-icon {
+      span md-icon {
+        font-variation-settings: 'FILL' 1;
+
         vertical-align: middle;
         font-size: var(--fontsize-large);
         color: var(--primary-color);
       }
 
-      mwc-button {
+      md-assist-chip {
         position: absolute;
         right: 3px;
         top: 3px;
         opacity: 0.8;
+
+        --md-assist-chip-elevated-container-color: var(--md-sys-color-primary);
+        --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);
+        --md-assist-chip-leading-icon-color: var(--md-sys-color-on-primary);
       }
 
       @media screen and (max-width: 460px) {
@@ -86,23 +94,23 @@ export class BoardVersions extends LitElement {
                 <div card>
                   <img src=${version.thumbnail} />
                   <div info>
-                    <mwc-icon>pin</mwc-icon> ${version.version}
+                    <md-icon>pin</md-icon> ${version.version}
                     <span>
-                      <mwc-icon>person</mwc-icon> ${(version.updater && version.updater.name) || 'anonymouse'}
-                      <mwc-icon>schedule</mwc-icon> ${new Date(version.updatedAt).toLocaleString()}
+                      <md-icon>person</md-icon> ${(version.updater && version.updater.name) || 'anonymouse'}
+                      <md-icon>schedule</md-icon> ${new Date(version.updatedAt).toLocaleString()}
                     </span>
                   </div>
 
                   ${privileged(
                     { privilege: 'mutation', category: 'board' },
                     html`
-                      <mwc-button
-                        dense
-                        raised
+                      <md-assist-chip
+                        elevated
                         label=${String(i18next.t('button.revert-board-version'))}
                         @click=${() => this.revertBoardVersion(version.version)}
-                        icon="recycling"
-                      ></mwc-button>
+                      >
+                        <md-icon slot="icon">recycling</md-icon>
+                      </md-assist-chip>
                     `
                   )}
                 </div>