@things-factory/board-ui 7.0.1-alpha.1 → 7.0.1-alpha.100

package/client/apptools/favorite-tool.ts

@@ -1,13 +1,14 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { store } from '@operato/shell'
 import { client } from '@operato/graphql'
-import { UPDATE_FAVORITES } from '@things-factory/fav-base'
+
+import { UPDATE_FAVORITES } from '@things-factory/fav-base/client'
 
 @customElement('favorite-tool')
 export class FavoriteTool extends connect(store)(LitElement) {
@@ -36,11 +37,11 @@ export class FavoriteTool extends connect(store)(LitElement) {
 
     return renderable
       ? html`
-          <mwc-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}
-            >${this.favored ? 'star' : 'star_border'}</mwc-icon
+          <md-icon @click=${this.onClick.bind(this)} ?favorable=${!this.favored}
+            >${this.favored ? 'star' : 'star_border'}</md-icon
           >
         `
-      : html``
+      : nothing
   }
 
   updated(changes) {

package/client/board-list/board-tile-list.ts

@@ -1,5 +1,5 @@
+import '@material/web/icon/icon.js'
 import '@operato/board/ox-board-creation-card.js'
-import '@material/mwc-icon'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement, PropertyValues, nothing } from 'lit'
@@ -7,6 +7,7 @@ import { customElement, property, state, query } from 'lit/decorators.js'
 import { keyed } from 'lit/directives/keyed.js'
 
 import { client } from '@operato/graphql'
+
 import { privileged } from '@things-factory/auth-base/dist-client'
 
 @customElement('board-tile-list')
@@ -17,6 +18,7 @@ export class BoardTileList extends LitElement {
         overflow: auto;
         padding: var(--popup-content-padding);
         display: grid;
+        background-color: var(--md-sys-color-background);
 
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
         grid-auto-rows: var(--card-list-rows-height);
@@ -37,6 +39,7 @@ export class BoardTileList extends LitElement {
 
       [card] > a {
         display: flex;
+        clip-path: border-box;
       }
 
       [card]:hover {
@@ -49,32 +52,29 @@ export class BoardTileList extends LitElement {
         overflow: hidden;
         margin-top: var(--margin-narrow);
         width: calc(100% - 45px);
-        color: var(--primary-text-color);
+        color: var(--md-sys-color-on-background);
         font-weight: bolder;
         font-size: var(--fontsize-small);
       }
 
       img {
-        display: block;
-
-        margin: auto;
-        max-width: 100%;
-        max-height: 100%;
+        flex: 1;
+        object-fit: contain;
       }
 
-      mwc-icon[iconBtn] {
+      md-icon[iconBtn] {
         float: right;
         margin-top: -20px;
         margin-left: 2px;
         color: var(--board-list-star-color);
         font-size: 1.4em;
       }
-      mwc-icon[info] {
-        color: var(--primary-color);
+      md-icon[info] {
+        color: var(--md-sys-color-primary);
       }
 
-      mwc-icon[iconBtn][favored],
-      mwc-icon[info]:hover {
+      md-icon[iconBtn][favored],
+      md-icon[info]:hover {
         color: var(--board-list-star-active-color);
       }
 
@@ -174,36 +174,41 @@ export class BoardTileList extends LitElement {
         ? privileged(
             { privilege: 'mutation', category: 'board' },
             html`
-              <ox-board-creation-card .groups=${this.groups} .defaultGroup=${this.group} @create-board=${e => this.onCreateBoard(e)} card create></ox-board-creation-card>
+              <ox-board-creation-card
+                .groups=${this.groups}
+                .defaultGroup=${this.group}
+                @create-board=${e => this.onCreateBoard(e)}
+                card
+                create
+              ></ox-board-creation-card>
             `
           )
         : nothing}
       ${keyed(
         Date.now(),
         boards.map(
-          board =>
-            html`
-              <div card draggable="true" id=${board.id}>
-                <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
-
-                <div name>${board.name}</div>
-                <!-- <div description>${board.description}</div> -->
-
-                <mwc-icon
-                  iconBtn
-                  info
-                  @click=${e => {
-                    this.infoBoard(board)
-                    e.preventDefault()
-                  }}
-                  >info</mwc-icon
-                >
-
-                ${(this.favorites || []).includes(board.id)
-                  ? html` <mwc-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</mwc-icon> `
-                  : html` <mwc-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</mwc-icon> `}
-              </div>
-            `
+          board => html`
+            <div card draggable="true" id=${board.id}>
+              <a href="board-viewer/${board.id}"> <img src=${board.thumbnail} /> </a>
+
+              <div name>${board.name}</div>
+              <!-- <div description>${board.description}</div> -->
+
+              <md-icon
+                iconBtn
+                info
+                @click=${e => {
+                  this.infoBoard(board)
+                  e.preventDefault()
+                }}
+                >info</md-icon
+              >
+
+              ${(this.favorites || []).includes(board.id)
+                ? html` <md-icon iconBtn favored @click=${e => this.removeFavorite(board.id)}>star</md-icon> `
+                : html` <md-icon iconBtn @click=${e => this.addFavorite(board.id)}>star_border</md-icon> `}
+            </div>
+          `
         )
       )}
     `

package/client/board-list/group-bar-styles.ts

@@ -0,0 +1,61 @@
+import { css } from 'lit'
+
+export const GroupBarStyles = css`
+  :host {
+    background-color: var(--group-bar-background-color);
+
+    overflow-x: hidden;
+  }
+
+  ul {
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  li {
+    display: inline-block;
+
+    box-sizing: border-box;
+    border-bottom: var(--group-bar-line);
+    align-self: auto;
+    min-height: 43px;
+    padding: 4px 8px;
+
+    * {
+      vertical-align: text-top;
+    }
+
+    a {
+      display: block;
+      text-decoration: none;
+      font: var(--group-bar-textbutton);
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    a md-icon {
+      font-variation-settings: 'FILL' 1;
+    }
+
+    &[active] {
+      border-color: var(--group-bar-active-line-color);
+
+      a {
+        font: var(--group-bar-textbutton-active);
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+
+    &[padding] {
+      flex: 1;
+    }
+
+    &[add] * {
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+`

package/client/board-list/group-bar.ts

@@ -1,72 +1,16 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
-import { css, html, nothing, LitElement } from 'lit'
+import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-
 import ScrollBooster from 'scrollbooster'
 
+import { longpressable } from '@operato/utils'
 import { privileged } from '@things-factory/auth-base/dist-client'
-import { longpressable } from '@things-factory/utils'
+import { GroupBarStyles } from './group-bar-styles'
 
 @customElement('group-bar')
 export default class GroupBar extends LitElement {
-  static styles = [
-    css`
-      :host {
-        background-color: var(--group-bar-background-color);
-
-        overflow-x: hidden;
-      }
-
-      ul {
-        display: flex;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        white-space: nowrap;
-      }
-
-      li {
-        display: inline-block;
-        padding: 0px 3px;
-
-        border-bottom: var(--group-bar-line);
-      }
-
-      li[active] {
-        border-color: var(--group-bar-active-line-color);
-      }
-
-      li a {
-        display: block;
-        padding: 5px 4px 1px 4px;
-        text-decoration: none;
-        font: var(--group-bar-textbutton);
-        color: rgba(255, 255, 255, 0.8);
-      }
-
-      li[active] a {
-        font: var(--group-bar-textbutton-active);
-        color: rgba(255, 255, 255, 1);
-      }
-
-      li[padding] {
-        flex: 1;
-      }
-
-      li[add] {
-        padding: 5px 4px 1px 4px;
-      }
-
-      li[add] * {
-        color: rgba(255, 255, 255, 0.5);
-      }
-
-      mwc-icon {
-        vertical-align: middle;
-      }
-    `
-  ]
+  static styles = [GroupBarStyles]
 
   @property({ type: Array }) groups?: any[]
   @property({ type: String }) groupId?: string
@@ -78,17 +22,17 @@ export default class GroupBar extends LitElement {
     return html`
       <ul>
         <li ?active=${!this.groupId}>
-          <a href=${this.targetPage || ''}><mwc-icon>dashboard</mwc-icon></a>
+          <a href=${this.targetPage || ''}><md-icon>dashboard</md-icon></a>
         </li>
 
         <li ?active=${this.groupId === 'favor'}>
-          <a href="${this.targetPage}/favor"><mwc-icon>star</mwc-icon></a>
+          <a href="${this.targetPage}/favor"><md-icon>star</md-icon></a>
         </li>
 
         ${privileged(
           { privilege: 'mutation', category: 'board' },
           html`<li ?active=${this.groupId === 'mywork'}>
-            <a href="${this.targetPage}/mywork"><mwc-icon>engineering</mwc-icon></a>
+            <a href="${this.targetPage}/mywork"><md-icon>engineering</md-icon></a>
           </li>`
         )}
         ${(this.groups || []).map(
@@ -102,7 +46,7 @@ export default class GroupBar extends LitElement {
         <li padding></li>
 
         <li add>
-          <mwc-icon @click=${e => this.infoGroup()}>add</mwc-icon>
+          <md-icon @click=${e => this.infoGroup()}>add</md-icon>
         </li>
       </ul>
     `
@@ -139,7 +83,7 @@ export default class GroupBar extends LitElement {
     var scrollTarget = this.renderRoot.querySelector('ul')
 
     /* long-press */
-    longpressable(scrollTarget)
+    longpressable(scrollTarget!)
 
     scrollTarget!.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
 

package/client/board-list/play-group-bar.ts

@@ -1,70 +1,15 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
 import ScrollBooster from 'scrollbooster'
 
-import { longpressable } from '@things-factory/utils'
+import { longpressable } from '@operato/utils'
+import { GroupBarStyles } from './group-bar-styles'
 
 @customElement('play-group-bar')
 export default class PlayGroupBar extends LitElement {
-  static styles = [
-    css`
-      :host {
-        background-color: var(--group-bar-background-color);
-
-        overflow-x: hidden;
-      }
-
-      ul {
-        display: flex;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        white-space: nowrap;
-      }
-
-      li {
-        display: inline-block;
-        padding: 0px 3px;
-
-        border-bottom: var(--group-bar-line);
-      }
-
-      li[active] {
-        border-color: var(--group-bar-active-line-color);
-      }
-
-      li a {
-        display: block;
-        padding: 5px 4px 1px 4px;
-        text-decoration: none;
-        font: var(--group-bar-textbutton);
-        color: rgba(255, 255, 255, 0.8);
-      }
-
-      li[active] a {
-        font: var(--group-bar-textbutton-active);
-        color: rgba(255, 255, 255, 1);
-      }
-
-      li[padding] {
-        flex: 1;
-      }
-
-      li[add] {
-        padding: 5px 4px 1px 4px;
-      }
-
-      li[add] * {
-        color: rgba(255, 255, 255, 0.5);
-      }
-
-      mwc-icon {
-        vertical-align: middle;
-      }
-    `
-  ]
+  static styles = [GroupBarStyles]
 
   @property({ type: Array }) groups: { id: string; name: string }[] = []
   @property({ type: String }) groupId: string = ''
@@ -83,10 +28,10 @@ export default class PlayGroupBar extends LitElement {
           `
         )}
 
-        <li padding></li>
+        <li padding>&nbsp;</li>
 
         <li add>
-          <mwc-icon @click=${e => this._infoGroup()}>add</mwc-icon>
+          <md-icon @click=${e => this._infoGroup()}>add</md-icon>
         </li>
       </ul>
     `
@@ -127,7 +72,7 @@ export default class PlayGroupBar extends LitElement {
     var scrollTarget = this.renderRoot.querySelector('ul')
 
     /* long-press */
-    longpressable(scrollTarget)
+    longpressable(scrollTarget!)
 
     scrollTarget!.addEventListener('mousewheel', this._onWheelEvent.bind(this), false)
 

package/client/data-grist/board-renderer.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit'
@@ -49,7 +49,7 @@ class BoardRendererElement extends LitElement {
         max-width: 100%;
         max-height: 100%;
       }
-      mwc-icon {
+      md-icon {
         position: absolute;
         top: 0;
         text-align: center;
@@ -59,13 +59,13 @@ class BoardRendererElement extends LitElement {
         height: var(--board-renderer-icon-size);
         font: var(--board-renderer-font);
       }
-      mwc-icon[edit] {
+      md-icon[edit] {
         right: 0;
 
         border-bottom-left-radius: var(--board-renderer-icon-border-radius);
         background-color: var(--board-renderer-icon-edit-background-color);
       }
-      mwc-icon[view] {
+      md-icon[view] {
         left: 0;
 
         border-bottom-right-radius: var(--board-renderer-icon-border-radius);
@@ -105,8 +105,8 @@ class BoardRendererElement extends LitElement {
       ? html`
           <span>${name}</span>
           <img src=${thumbnail} alt="no thumbnail!" />
-          <mwc-icon view @mousedown=${e => this.onClickViewer(e, id)}>search</mwc-icon>
-          <mwc-icon edit @mousedown=${e => this.onClickModeler(e, id)}>edit</mwc-icon>
+          <md-icon view @mousedown=${e => this.onClickViewer(e, id)}>search</md-icon>
+          <md-icon edit @mousedown=${e => this.onClickModeler(e, id)}>edit</md-icon>
         `
       : html` choose board.. `
   }

package/client/pages/board-list-page.ts

@@ -1,4 +1,3 @@
-import '@material/mwc-icon'
 import '../viewparts/board-info'
 import '../viewparts/group-info'
 import '../board-list/board-tile-list'
@@ -83,7 +82,13 @@ export class BoardListPage extends localize(i18next)(connect(store)(InfiniteScro
     return {
       title: {
         icon: 'dashboard',
-        text: group ? 'Group ' + group.name : groupId == 'favor' ? 'Favorite' : groupId == 'mywork' ? 'My works' : 'Board List'
+        text: group
+          ? 'Group ' + group.name
+          : groupId == 'favor'
+            ? 'Favorite'
+            : groupId == 'mywork'
+              ? 'My works'
+              : 'Board List'
       },
       search: {
         handler: search => {
@@ -104,7 +109,12 @@ export class BoardListPage extends localize(i18next)(connect(store)(InfiniteScro
 
   render() {
     return html`
-      <group-bar .groups=${this.groups} .groupId=${this.groupId} targetPage="board-list" @info-group=${e => this.onInfoGroup(e.detail)}></group-bar>
+      <group-bar
+        .groups=${this.groups}
+        .groupId=${this.groupId}
+        targetPage="board-list"
+        @info-group=${e => this.onInfoGroup(e.detail)}
+      ></group-bar>
 
       <board-tile-list
         id="list"
@@ -321,7 +331,9 @@ export class BoardListPage extends localize(i18next)(connect(store)(InfiniteScro
             list.style.transition = 'transform 0.3s'
             list.style.transform = `translate3d(${d < 0 ? '-100%' : '100%'}, 0, 0)`
 
-            navigate(`${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}${this.searchText ? '?search=' + this.searchText : ''}`)
+            navigate(
+              `${this.page}/${groups[currentIndex + (d < 0 ? 1 : -1)].id}${this.searchText ? '?search=' + this.searchText : ''}`
+            )
           }
         }
       }
@@ -501,7 +513,8 @@ export class BoardListPage extends localize(i18next)(connect(store)(InfiniteScro
         }
       })
 
-      data && this._notify('info', i18next.t('text.joined into play-group', { board: board.name, playGroup: playGroup.name }))
+      data &&
+        this._notify('info', i18next.t('text.joined into play-group', { board: board.name, playGroup: playGroup.name }))
     } catch (ex) {
       this._notify('error', ex, ex)
     }
@@ -523,7 +536,8 @@ export class BoardListPage extends localize(i18next)(connect(store)(InfiniteScro
         }
       })
 
-      data && this._notify('info', i18next.t('text.leaved from play-group', { board: board.name, playGroup: playGroup.name }))
+      data &&
+        this._notify('info', i18next.t('text.leaved from play-group', { board: board.name, playGroup: playGroup.name }))
     } catch (ex) {
       this._notify('error', ex, ex)
     }

package/client/pages/board-modeller-page.ts

@@ -1,5 +1,6 @@
 import './things-scene-components.import'
 import '@operato/board/ox-board-modeller.js'
+import '@operato/oops'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -55,11 +56,11 @@ export class BoardModellerPage extends connect(store)(PageView) {
         position: relative;
       }
 
-      board-modeller {
+      ox-board-modeller {
         flex: 1;
       }
 
-      oops-note {
+      ox-oops-note {
         display: block;
         position: absolute;
         left: 50%;
@@ -190,7 +191,7 @@ export class BoardModellerPage extends connect(store)(PageView) {
     var oops = !this.preparing && !this.model && this.oopsNote
 
     return oops
-      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
+      ? html` <ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></ox-oops-note> `
       : html`
           <ox-board-modeller
             .mode=${this.mode}

package/client/pages/board-player-page.ts

@@ -1,5 +1,6 @@
 import './things-scene-components.import'
 import '@operato/board/ox-board-player.js'
+import '@operato/oops'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -45,7 +46,7 @@ export class BoardPlayerPage extends connect(store)(PageView) {
         flex: 1;
       }
 
-      oops-spinner {
+      ox-oops-spinner {
         display: none;
         position: absolute;
         left: 50%;
@@ -53,11 +54,11 @@ export class BoardPlayerPage extends connect(store)(PageView) {
         transform: translate(-50%, -50%);
       }
 
-      oops-spinner[show] {
+      ox-oops-spinner[show] {
         display: block;
       }
 
-      oops-note {
+      ox-oops-note {
         display: block;
         position: absolute;
         left: 50%;
@@ -179,10 +180,10 @@ export class BoardPlayerPage extends connect(store)(PageView) {
     var oops = !this.showSpinner && !this.playGroup && this.oopsNote
 
     return oops
-      ? html` <oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></oops-note> `
+      ? html` <ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></ox-oops-note> `
       : html`
           <ox-board-player .boards=${this.boards} .data=${this.data} .provider=${this.provider}></ox-board-player>
-          <oops-spinner ?show=${this.showSpinner}></oops-spinner>
+          <ox-oops-spinner ?show=${this.showSpinner}></ox-oops-spinner>
         `
   }