@things-factory/board-ui 8.0.0-beta.0 → 8.0.0-beta.2

package/client/viewparts/play-group-info-link.ts

@@ -1,46 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next } from '@operato/i18n'
-import { client } from '@operato/graphql'
-
-import './link-builder.js'
-
-@customElement('play-group-info-link')
-export class PlayGroupInfoLink extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        background-color: var(--md-sys-color-surface);
-        position: relative;
-        text-align: center;
-        color: var(--md-sys-color-on-surface);
-        font: var(--label-font);
-      }
-
-      link-builder {
-        flex: 1;
-        text-align: start;
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) playGroup?: { id: string; name: string }
-
-  render() {
-    return html`
-      <link-builder
-        command="headless-player"
-        target-id=${this.playGroup?.id || ''}
-        target-name=${this.playGroup?.name || ''}
-      ></link-builder>
-    `
-  }
-}

package/client/viewparts/play-group-info.ts

@@ -1,81 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-import './play-group-info-basic'
-import './play-group-info-link'
-
-@customElement('play-group-info')
-export class PlayGroupInfo extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        height: 100%;
-        min-width: 360px;
-
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        background-color: var(--md-sys-color-surface);
-      }
-
-      [tab] {
-        width: 100%;
-        display: flex;
-      }
-
-      [tab] > * {
-        flex: 1;
-      }
-
-      [content] {
-        flex: 1;
-        overflow-y: auto;
-      }
-
-      span {
-        padding: 5px 4px 1px;
-        font: var(--group-bar-textbutton);
-        background-color: var(--md-sys-color-secondary);
-        color: rgba(255, 255, 255, 0.8);
-        text-align: center;
-        text-transform: uppercase;
-      }
-
-      span[active] {
-        background-color: var(--md-sys-color-primary);
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          width: 100vw;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) playGroup?: { id: string; name: string }
-
-  @state() tab: string = 'basic'
-
-  render() {
-    return html`
-      <div tab>
-        <span @click=${() => (this.tab = 'basic')} ?active=${this.tab == 'basic'}>basic</span>
-        <span @click=${() => (this.tab = 'link')} ?active=${this.tab == 'link'}>link</span>
-      </div>
-      <div content>
-        ${this.tab == 'basic'
-          ? html`<play-group-info-basic playGroupId=${ifDefined(this.playGroup?.id)}></play-group-info-basic>`
-          : html`<play-group-info-link .playGroup=${this.playGroup}></play-group-info-link>`}
-      </div>
-    `
-  }
-
-  close() {
-    history.back()
-  }
-}