@operato/board 2.0.0-alpha.7 → 2.0.0-alpha.71

package/src/ox-board-player.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-fab'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './player/ox-board-wrapper'
 import './player/ox-board-player-carousel'
 
@@ -43,11 +42,10 @@ export class BoardPlayer extends LitElement {
           ? html`
               <ox-board-player-carousel axis="y" .rows=${this.rows} .columns=${this.columns} player>
                 ${this.boards.map(
-                  item =>
-                    html`
-                      <ox-board-wrapper page .board=${item} .data=${this.data} .provider=${this.provider}>
-                      </ox-board-wrapper>
-                    `
+                  item => html`
+                    <ox-board-wrapper page .board=${item} .data=${this.data} .provider=${this.provider}>
+                    </ox-board-wrapper>
+                  `
                 )}
               </ox-board-player-carousel>
             `
@@ -56,18 +54,18 @@ export class BoardPlayer extends LitElement {
 
       <div id="control" @mouseover=${() => this.onMouseoverControl()} hidden>
         <div id="joystick">
-          <mwc-icon id="up" @click=${() => this.moveUp()}>keyboard_arrow_up</mwc-icon>
-          <mwc-icon id="left" @click=${() => this.moveLeft()}>keyboard_arrow_left</mwc-icon>
-          <mwc-icon id="play" @click=${() => this.play()} ?hidden=${this.playing}>play_arrow</mwc-icon>
-          <mwc-icon id="pause" @click=${() => this.pause()} ?hidden=${!this.playing}>pause</mwc-icon>
-          <mwc-icon id="right" @click=${() => this.moveRight()}>keyboard_arrow_right</mwc-icon>
-          <mwc-icon id="down" @click=${() => this.moveDown()}>keyboard_arrow_down</mwc-icon>
+          <md-icon id="up" @click=${() => this.moveUp()}>keyboard_arrow_up</md-icon>
+          <md-icon id="left" @click=${() => this.moveLeft()}>keyboard_arrow_left</md-icon>
+          <md-icon id="play" @click=${() => this.play()} ?hidden=${this.playing}>play_arrow</md-icon>
+          <md-icon id="pause" @click=${() => this.pause()} ?hidden=${!this.playing}>pause</md-icon>
+          <md-icon id="right" @click=${() => this.moveRight()}>keyboard_arrow_right</md-icon>
+          <md-icon id="down" @click=${() => this.moveDown()}>keyboard_arrow_down</md-icon>
         </div>
 
         <div id="setting-container">
           <div id="setting">
             <label id="schedule-container">
-              <mwc-icon id="schedule">schedule</mwc-icon>
+              <md-icon id="schedule">schedule</md-icon>
               <input
                 .value=${String(this.playtime)}
                 @change=${(e: Event) => {
@@ -82,7 +80,7 @@ export class BoardPlayer extends LitElement {
               sec.
             </label>
             <div id="grid-setting-container">
-              <mwc-icon id="view_module">view_module</mwc-icon>
+              <md-icon id="view_module">view_module</md-icon>
               <select
                 .value=${String(this.rows)}
                 @change=${(e: Event) => {
@@ -114,13 +112,13 @@ export class BoardPlayer extends LitElement {
           </div>
 
           <div id="etc">
-            <mwc-icon id="fullscreen" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}
-              >fullscreen</mwc-icon
+            <md-icon id="fullscreen" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}
+              >fullscreen</md-icon
             >
-            <mwc-icon id="fullscreen-exit" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}
-              >fullscreen_exit</mwc-icon
+            <md-icon id="fullscreen-exit" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}
+              >fullscreen_exit</md-icon
             >
-            <mwc-icon id="close" @click=${() => this.onTapClose()}>close</mwc-icon>
+            <md-icon id="close" @click=${() => this.onTapClose()}>close</md-icon>
           </div>
         </div>
       </div>

package/src/ox-board-viewer.ts

@@ -1,5 +1,5 @@
-import '@material/mwc-fab'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
 import './ox-board-component-info.js'
 
 import { css, html, LitElement, PropertyValues } from 'lit'
@@ -67,7 +67,7 @@ export class BoardViewer extends LitElement {
       }
 
       /* navigation buttons */
-      mwc-icon {
+      md-icon {
         z-index: 10;
         position: absolute;
         top: 45%;
@@ -79,14 +79,14 @@ export class BoardViewer extends LitElement {
         color: #fff;
         user-select: none;
 
-        --mdc-icon-size: 3em;
+        --md-icon-size: 3em;
       }
 
-      mwc-icon[hidden] {
+      md-icon[hidden] {
         display: none;
       }
 
-      mwc-icon:hover {
+      md-icon:hover {
         background-color: rgba(0, 0, 0, 0.2);
         border-radius: 50%;
       }
@@ -110,8 +110,8 @@ export class BoardViewer extends LitElement {
       }
 
       @media print {
-        mwc-fab,
-        mwc-icon {
+        md-fab,
+        md-icon {
           display: none;
         }
       }
@@ -146,39 +146,40 @@ export class BoardViewer extends LitElement {
     var fullscreen =
       !isIOS() && !this.hideFullscreen
         ? html`
-            <mwc-fab
+            <md-fab
               id="fullscreen"
-              .icon=${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}
               @click=${(e: Event) => this.onTapFullscreen()}
               @mouseover=${(e: Event) => this.transientShowButtons(true)}
               @mouseout=${(e: Event) => this.transientShowButtons()}
               title="fullscreen"
-            ></mwc-fab>
+            >
+              <md-icon slot="icon">${document.fullscreenElement ? 'fullscreen_exit' : 'fullscreen'}</md-icon>
+            </md-fab>
           `
         : html``
 
     var prev = !this.hideNavigation
       ? html`
-          <mwc-icon
+          <md-icon
             id="prev"
             @click=${(e: Event) => this.onTapPrev()}
             @mouseover=${(e: Event) => this.transientShowButtons(true)}
             @mouseout=${(e: Event) => this.transientShowButtons()}
             hidden
-            >keyboard_arrow_left</mwc-icon
+            >keyboard_arrow_left</md-icon
           >
         `
       : html``
 
     var next = !this.hideNavigation
       ? html`
-          <mwc-icon
+          <md-icon
             id="next"
             @click=${(e: Event) => this.onTapNext()}
             @mouseover=${(e: Event) => this.transientShowButtons(true)}
             @mouseout=${(e: Event) => this.transientShowButtons()}
             hidden
-            >keyboard_arrow_right</mwc-icon
+            >keyboard_arrow_right</md-icon
           >
         `
       : html``

package/src/ox-editor-board-selector.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './selector/ox-board-selector'
 
 import { css, html, LitElement } from 'lit'
@@ -28,7 +28,7 @@ export class BoardSelector extends LitElement {
           border: 1px solid rgba(0, 0, 0, 0.2);
         }
 
-        mwc-icon {
+        md-icon {
           position: absolute;
           top: 0;
           right: 0;
@@ -46,7 +46,7 @@ export class BoardSelector extends LitElement {
     return html`
       <input id="text" type="text" .value=${this.value || ''} @change=${(e: Event) => this._onInputChanged(e)} />
 
-      <mwc-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</mwc-icon>
+      <md-icon @click=${(e: MouseEvent) => this.openSelector()}>dashboard</md-icon>
     `
   }
 

package/src/selector/board-thumbnail-card.ts

@@ -51,7 +51,7 @@ export class BoardThumbnailCard extends localize(i18next)(LitElement) {
           text-transform: capitalize;
         }
 
-        [front] mwc-icon {
+        [front] md-icon {
           margin-top: 15%;
           display: block;
           font-size: 3.5em;
@@ -110,7 +110,7 @@ export class BoardThumbnailCard extends localize(i18next)(LitElement) {
     var groups = this.groups || []
 
     return html`
-      <div @click=${(e: Event) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create board</div>
+      <div @click=${(e: Event) => this.onClickFlip(e)} front><md-icon>add_circle_outline</md-icon>create board</div>
 
       <div @click=${(e: Event) => this.onClickFlip(e)} back>
         <form @submit=${(e: Event) => this.onClickSubmit(e)}>

package/src/selector/ox-board-creation-card.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './board-creation-popup'
 
 import { css, html, LitElement } from 'lit'
@@ -24,13 +24,17 @@ export class BoardCreationCard extends localize(i18next)(LitElement) {
         }
 
         div {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
           text-align: center;
           font-size: 0.8em;
           color: var(--card-list-create-color);
           text-transform: capitalize;
         }
 
-        mwc-icon {
+        md-icon {
+          --md-icon-size: 42px;
           display: block;
           font-size: 3.5em;
           color: var(--card-list-create-icon-color);
@@ -46,7 +50,7 @@ export class BoardCreationCard extends localize(i18next)(LitElement) {
   private popup: any
 
   render() {
-    return html`<div @click=${(e: Event) => this.onClick()}><mwc-icon>add_circle_outline</mwc-icon>create board</div> `
+    return html`<div @click=${(e: Event) => this.onClick()}><md-icon>add_circle_outline</md-icon>create board</div> `
   }
 
   onClick() {