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

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')
@@ -37,6 +38,7 @@ export class BoardTileList extends LitElement {
 
       [card] > a {
         display: flex;
+        clip-path: border-box;
       }
 
       [card]:hover {
@@ -55,26 +57,23 @@ export class BoardTileList extends LitElement {
       }
 
       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] {
+      md-icon[info] {
         color: var(--primary-color);
       }
 
-      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 +173,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

@@ -37,6 +37,10 @@ export const GroupBarStyles = css`
       color: rgba(255, 255, 255, 0.8);
     }
 
+    a md-icon {
+      font-variation-settings: 'FILL' 1;
+    }
+
     &[active] {
       border-color: var(--group-bar-active-line-color);
 

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

@@ -1,12 +1,11 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 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')
@@ -23,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(
@@ -47,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>
     `
@@ -84,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,10 +1,10 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.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')
@@ -31,7 +31,7 @@ export default class PlayGroupBar extends LitElement {
         <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>
     `
@@ -72,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/setting-let/board-view-setting-let.ts

@@ -1,7 +1,6 @@
-import '@things-factory/setting-base'
-import '@material/mwc-formfield'
-import '@material/mwc-checkbox'
+import '@material/web/checkbox/checkbox.js'
 import '@operato/i18n/ox-i18n.js'
+import '@things-factory/setting-base'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
@@ -14,6 +13,10 @@ export class BoardViewSettingLet extends localize(i18next)(LitElement) {
   static styles = [
     css`
       label {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+
         font: var(--label-font);
         color: var(--label-color);
         text-transform: var(--label-text-transform);
@@ -29,9 +32,10 @@ export class BoardViewSettingLet extends localize(i18next)(LitElement) {
         <ox-i18n slot="title" msgid="title.board view setting"></ox-i18n>
 
         <div slot="content">
-          <mwc-formfield label=${String(i18next.t('label.auto refresh board view'))}>
-            <mwc-checkbox id="auto-refresh" @change=${e => this.onChange(e)} ?checked=${this.autoRefresh}></mwc-checkbox>
-          </mwc-formfield>
+          <label>
+            <md-checkbox id="auto-refresh" @change=${e => this.onChange(e)} ?checked=${this.autoRefresh}></md-checkbox>
+            ${String(i18next.t('label.auto refresh board view'))}
+          </label>
         </div>
       </setting-let>
     `