@things-factory/board-ui 7.0.1-alpha.5 → 7.0.1-alpha.55

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

@@ -0,0 +1,57 @@
+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);
+    }
+
+    &[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,17 @@
 import '@material/mwc-icon'
 
-import { css, html, nothing, LitElement } from 'lit'
+import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import ScrollBooster from 'scrollbooster'
 
 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

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

@@ -1,70 +1,15 @@
 import '@material/mwc-icon'
 
-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 { 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,7 +28,7 @@ export default class PlayGroupBar extends LitElement {
           `
         )}
 
-        <li padding></li>
+        <li padding>&nbsp;</li>
 
         <li add>
           <mwc-icon @click=${e => this._infoGroup()}>add</mwc-icon>

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>
         `
   }
 

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

@@ -1,5 +1,6 @@
 import './things-scene-components.import'
 import '@operato/board/ox-board-viewer.js'
+import '@operato/oops'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -49,7 +50,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
         flex: 1;
       }
 
-      oops-spinner {
+      ox-oops-spinner {
         display: none;
         position: absolute;
         left: 50%;
@@ -57,11 +58,11 @@ export class BoardViewerPage 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%;
@@ -102,7 +103,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
     var oops = !this._showSpinner && !this._board && 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-viewer
             .board=${this._board}
@@ -111,7 +112,7 @@ export class BoardViewerPage extends connect(store)(PageView) {
             ?hide-navigation=${this._interactive}
             .data=${this.data}
           ></ox-board-viewer>
-          <oops-spinner ?show=${this._showSpinner}></oops-spinner>
+          <ox-oops-spinner ?show=${this._showSpinner}></ox-oops-spinner>
         `
   }
 

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

@@ -1,5 +1,6 @@
-import '@material/mwc-fab'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/fab/fab.js'
+
 import '../viewparts/play-group-info'
 import '../board-list/board-tile-list'
 import '../board-list/play-group-bar'
@@ -18,15 +19,7 @@ import { ScrollbarStyles } from '@operato/styles'
 import { pulltorefresh } from '@operato/pull-to-refresh'
 import { swipe, isMobileDevice } from '@things-factory/utils'
 
-import {
-  createPlayGroup,
-  deletePlayGroup,
-  fetchPlayGroup,
-  fetchPlayGroupList,
-  leavePlayGroup,
-  updateBoard,
-  updatePlayGroup
-} from '../graphql'
+import { createPlayGroup, deletePlayGroup, fetchPlayGroup, fetchPlayGroupList, leavePlayGroup, updateBoard, updatePlayGroup } from '../graphql'
 
 @customElement('play-list-page')
 export class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
@@ -78,12 +71,7 @@ export class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
 
   render() {
     return html`
-      <play-group-bar
-        .groups=${this.groups}
-        .groupId=${this.groupId}
-        target-page="play-list"
-        @info-play-group=${e => this.onInfoPlayGroup(e.detail)}
-      ></play-group-bar>
+      <play-group-bar .groups=${this.groups} .groupId=${this.groupId} target-page="play-list" @info-play-group=${e => this.onInfoPlayGroup(e.detail)}></play-group-bar>
 
       <board-tile-list
         .favorites=${this.favorites}
@@ -97,7 +85,9 @@ export class PlayListPage extends localize(i18next)(connect(store)(PageView)) {
       ></board-tile-list>
 
       <a id="play" .href=${'board-player/' + this.groupId}>
-        <mwc-fab icon="play_arrow" title="play"> </mwc-fab>
+        <md-fab title="play">
+          <md-icon slot="icon">play_arrow</md-icon>
+        </md-fab>
       </a>
     `
   }

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

@@ -99,7 +99,7 @@ export class ThemeListPage extends connect(store)(localize(i18next)(ScopedElemen
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -107,7 +107,7 @@ export class ThemeListPage extends connect(store)(localize(i18next)(ScopedElemen
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -115,9 +115,10 @@ export class ThemeListPage extends connect(store)(localize(i18next)(ScopedElemen
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
           </div>
         </div>
       </ox-grist>

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

@@ -0,0 +1 @@
+export declare const GroupBarStyles: import("lit").CSSResult;

package/dist-client/board-list/group-bar-styles.js

@@ -0,0 +1,57 @@
+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);
+    }
+
+    &[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);
+    }
+  }
+`;
+//# sourceMappingURL=group-bar-styles.js.map

package/dist-client/board-list/group-bar-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-bar-styles.js","sourceRoot":"","sources":["../../client/board-list/group-bar-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDhC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const GroupBarStyles = css`\n  :host {\n    background-color: var(--group-bar-background-color);\n\n    overflow-x: hidden;\n  }\n\n  ul {\n    display: flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n  }\n\n  li {\n    display: inline-block;\n\n    box-sizing: border-box;\n    border-bottom: var(--group-bar-line);\n    align-self: auto;\n    min-height: 43px;\n    padding: 4px 8px;\n\n    * {\n      vertical-align: text-top;\n    }\n\n    a {\n      display: block;\n      text-decoration: none;\n      font: var(--group-bar-textbutton);\n      color: rgba(255, 255, 255, 0.8);\n    }\n\n    &[active] {\n      border-color: var(--group-bar-active-line-color);\n\n      a {\n        font: var(--group-bar-textbutton-active);\n        color: rgba(255, 255, 255, 1);\n      }\n    }\n\n    &[padding] {\n      flex: 1;\n    }\n\n    &[add] * {\n      color: rgba(255, 255, 255, 0.5);\n    }\n  }\n`\n"]}

package/dist-client/board-list/group-bar.js

@@ -1,10 +1,11 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import ScrollBooster from 'scrollbooster';
 import { privileged } from '@things-factory/auth-base/dist-client';
 import { longpressable } from '@things-factory/utils';
+import { GroupBarStyles } from './group-bar-styles';
 let GroupBar = class GroupBar extends LitElement {
     render() {
         return html `
@@ -69,63 +70,7 @@ let GroupBar = class GroupBar extends LitElement {
         });
     }
 };
-GroupBar.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;
-      }
-    `
-];
+GroupBar.styles = [GroupBarStyles];
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)

package/dist-client/board-list/group-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-bar.js","sourceRoot":"","sources":["../../client/board-list/group-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, nothing, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport ScrollBooster from 'scrollbooster'\n\nimport { privileged } from '@things-factory/auth-base/dist-client'\nimport { longpressable } from '@things-factory/utils'\n\n@customElement('group-bar')\nexport default class GroupBar extends LitElement {\n  static styles = [\n    css`\n      :host {\n        background-color: var(--group-bar-background-color);\n\n        overflow-x: hidden;\n      }\n\n      ul {\n        display: flex;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        white-space: nowrap;\n      }\n\n      li {\n        display: inline-block;\n        padding: 0px 3px;\n\n        border-bottom: var(--group-bar-line);\n      }\n\n      li[active] {\n        border-color: var(--group-bar-active-line-color);\n      }\n\n      li a {\n        display: block;\n        padding: 5px 4px 1px 4px;\n        text-decoration: none;\n        font: var(--group-bar-textbutton);\n        color: rgba(255, 255, 255, 0.8);\n      }\n\n      li[active] a {\n        font: var(--group-bar-textbutton-active);\n        color: rgba(255, 255, 255, 1);\n      }\n\n      li[padding] {\n        flex: 1;\n      }\n\n      li[add] {\n        padding: 5px 4px 1px 4px;\n      }\n\n      li[add] * {\n        color: rgba(255, 255, 255, 0.5);\n      }\n\n      mwc-icon {\n        vertical-align: middle;\n      }\n    `\n  ]\n\n  @property({ type: Array }) groups?: any[]\n  @property({ type: String }) groupId?: string\n  @property({ type: String }) targetPage?: string\n\n  private __sb?: ScrollBooster\n\n  render() {\n    return html`\n      <ul>\n        <li ?active=${!this.groupId}>\n          <a href=${this.targetPage || ''}><mwc-icon>dashboard</mwc-icon></a>\n        </li>\n\n        <li ?active=${this.groupId === 'favor'}>\n          <a href=\"${this.targetPage}/favor\"><mwc-icon>star</mwc-icon></a>\n        </li>\n\n        ${privileged(\n          { privilege: 'mutation', category: 'board' },\n          html`<li ?active=${this.groupId === 'mywork'}>\n            <a href=\"${this.targetPage}/mywork\"><mwc-icon>engineering</mwc-icon></a>\n          </li>`\n        )}\n        ${(this.groups || []).map(\n          group => html`\n            <li ?active=${this.groupId === group.id} @long-press=${e => this.infoGroup(group.id)}>\n              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>\n            </li>\n          `\n        )}\n\n        <li padding></li>\n\n        <li add>\n          <mwc-icon @click=${e => this.infoGroup()}>add</mwc-icon>\n        </li>\n      </ul>\n    `\n  }\n\n  infoGroup(groupId?: string) {\n    this.dispatchEvent(\n      new CustomEvent('info-group', {\n        detail: groupId\n      })\n    )\n  }\n\n  onWheelEvent(e) {\n    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))\n    this.scrollLeft -= delta * 40\n\n    e.preventDefault()\n  }\n\n  updated(change) {\n    if (change.has('groups')) {\n      /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */\n      this.__sb && this.__sb.updateMetrics()\n    }\n\n    if (change.has('groupId')) {\n      var active = this.renderRoot.querySelector('li[active]')\n      active && active.scrollIntoView()\n    }\n  }\n\n  firstUpdated() {\n    var scrollTarget = this.renderRoot.querySelector('ul')\n\n    /* long-press */\n    longpressable(scrollTarget)\n\n    scrollTarget!.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)\n\n    this.__sb = new ScrollBooster({\n      viewport: this,\n      content: scrollTarget,\n      mode: 'x',\n      onUpdate: data => {\n        this.scrollLeft = data.position.x\n      }\n    })\n  }\n}\n"]}
+{"version":3,"file":"group-bar.js","sourceRoot":"","sources":["../../client/board-list/group-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport ScrollBooster from 'scrollbooster'\n\nimport { privileged } from '@things-factory/auth-base/dist-client'\nimport { longpressable } from '@things-factory/utils'\nimport { GroupBarStyles } from './group-bar-styles'\n\n@customElement('group-bar')\nexport default class GroupBar extends LitElement {\n  static styles = [GroupBarStyles]\n\n  @property({ type: Array }) groups?: any[]\n  @property({ type: String }) groupId?: string\n  @property({ type: String }) targetPage?: string\n\n  private __sb?: ScrollBooster\n\n  render() {\n    return html`\n      <ul>\n        <li ?active=${!this.groupId}>\n          <a href=${this.targetPage || ''}><mwc-icon>dashboard</mwc-icon></a>\n        </li>\n\n        <li ?active=${this.groupId === 'favor'}>\n          <a href=\"${this.targetPage}/favor\"><mwc-icon>star</mwc-icon></a>\n        </li>\n\n        ${privileged(\n          { privilege: 'mutation', category: 'board' },\n          html`<li ?active=${this.groupId === 'mywork'}>\n            <a href=\"${this.targetPage}/mywork\"><mwc-icon>engineering</mwc-icon></a>\n          </li>`\n        )}\n        ${(this.groups || []).map(\n          group => html`\n            <li ?active=${this.groupId === group.id} @long-press=${e => this.infoGroup(group.id)}>\n              <a href=${`${this.targetPage}/${group.id}`}>${group.name}</a>\n            </li>\n          `\n        )}\n\n        <li padding></li>\n\n        <li add>\n          <mwc-icon @click=${e => this.infoGroup()}>add</mwc-icon>\n        </li>\n      </ul>\n    `\n  }\n\n  infoGroup(groupId?: string) {\n    this.dispatchEvent(\n      new CustomEvent('info-group', {\n        detail: groupId\n      })\n    )\n  }\n\n  onWheelEvent(e) {\n    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))\n    this.scrollLeft -= delta * 40\n\n    e.preventDefault()\n  }\n\n  updated(change) {\n    if (change.has('groups')) {\n      /* groups가 바뀔 때마다, contents의 폭이 달라지므로, 다시 폭을 계산해준다. */\n      this.__sb && this.__sb.updateMetrics()\n    }\n\n    if (change.has('groupId')) {\n      var active = this.renderRoot.querySelector('li[active]')\n      active && active.scrollIntoView()\n    }\n  }\n\n  firstUpdated() {\n    var scrollTarget = this.renderRoot.querySelector('ul')\n\n    /* long-press */\n    longpressable(scrollTarget)\n\n    scrollTarget!.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)\n\n    this.__sb = new ScrollBooster({\n      viewport: this,\n      content: scrollTarget,\n      mode: 'x',\n      onUpdate: data => {\n        this.scrollLeft = data.position.x\n      }\n    })\n  }\n}\n"]}

package/dist-client/board-list/play-group-bar.js

@@ -1,9 +1,10 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import ScrollBooster from 'scrollbooster';
 import { longpressable } from '@things-factory/utils';
+import { GroupBarStyles } from './group-bar-styles';
 let PlayGroupBar = class PlayGroupBar extends LitElement {
     constructor() {
         super(...arguments);
@@ -20,7 +21,7 @@ let PlayGroupBar = class PlayGroupBar extends LitElement {
             </li>
           `)}
 
-        <li padding></li>
+        <li padding>&nbsp;</li>
 
         <li add>
           <mwc-icon @click=${e => this._infoGroup()}>add</mwc-icon>
@@ -66,63 +67,7 @@ let PlayGroupBar = class PlayGroupBar extends LitElement {
         });
     }
 };
-PlayGroupBar.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;
-      }
-    `
-];
+PlayGroupBar.styles = [GroupBarStyles];
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)