@things-factory/board-ui 8.0.0-beta.9 → 8.0.2

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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,81 @@
+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()
+  }
+}