@things-factory/more-ui 8.0.0-beta.1 → 8.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/more-ui",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.2",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "@operato/layout": "^8.0.0-beta",
-    "@things-factory/apptool-base": "^8.0.0-beta.1",
-    "@things-factory/more-base": "^8.0.0-beta.1"
+    "@things-factory/apptool-base": "^8.0.0-beta.2",
+    "@things-factory/more-base": "^8.0.0-beta.2"
   },
-  "gitHead": "36c494e587640c1490318ef7b95adab02606e0c2"
+  "gitHead": "f03431a09435511b2595515658f9cb8f78ba4ebb"
 }

package/client/bootstrap.ts

@@ -1,38 +0,0 @@
-import '@material/web/icon/icon.js'
-import './layout/more-panel'
-
-import { html } from 'lit-html'
-
-import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
-import { store } from '@operato/shell'
-
-import { APPEND_APP_TOOL } from '@things-factory/apptool-base/client'
-
-export default function bootstrap() {
-  appendViewpart({
-    name: 'more',
-    viewpart: {
-      show: false,
-      hovering: 'edge',
-      template: html` <more-panel></more-panel> `
-    },
-    position: VIEWPART_POSITION.ASIDEBAR
-  })
-
-  store.dispatch({
-    type: APPEND_APP_TOOL,
-    tool: {
-      name: 'more',
-      template: html`
-        <md-icon
-          @click=${e =>
-            toggleOverlay('more', {
-              backdrop: true
-            })}
-          >more_vert</md-icon
-        >
-      `,
-      position: TOOL_POSITION.REAR_END
-    }
-  })
-}

package/client/layout/more-let.ts

@@ -1,95 +0,0 @@
-import { TOOL_POSITION } from '@operato/layout'
-import { css, html, nothing, LitElement, TemplateResult } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-@customElement('more-let')
-class MoreLet extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        padding: var(--morelet-padding);
-
-        min-width: var(--morelet-min-width);
-        color: var(--morelet-title-color, var(--md-sys-color-on-secondary-fixed, rgb(211 233 254)));
-        border-bottom: var(--morelet-border-bottom);
-        font: var(--morelet-title-font);
-      }
-
-      #morelet {
-        display: none;
-        width: calc(100% - 18px);
-        margin-top: 5px;
-        padding: 5px 9px;
-        border-bottom-right-radius: 7px;
-        border-bottom-left-radius: 7px;
-
-        border-top: var(--morelet-focus-border-top);
-        background-color: var(--morelet-background-color);
-        color: var(--morelet-color, var(--md-sys-color-on-secondary-fixed, rgb(211 233 254)));
-        font: var(--morelet-font);
-
-        [opened] {
-          display: block;
-        }
-      }
-
-      [header] {
-        opacity: 0.8;
-
-        &:hover {
-          opacity: 1;
-          cursor: pointer;
-        }
-
-        [icon] {
-          --md-icon-size: 1.2em;
-          vertical-align: middle;
-        }
-
-        [titler] {
-          text-transform: capitalize;
-        }
-      }
-    `
-  ]
-
-  @property({ type: Object }) morenda?: {
-    position: TOOL_POSITION
-    icon: string
-    name: string
-    template: TemplateResult
-    action?: () => void
-  }
-
-  @query('#morelet') morelet?: HTMLDivElement
-
-  render() {
-    const morenda = this.morenda
-
-    if (!morenda) {
-      return nothing
-    }
-
-    return html`
-      <div @click=${e => this.onTitleClick()} header>
-        <span icon> ${morenda.icon ? morenda.icon : html``} </span>
-
-        <span titler>${morenda.name}</span>
-      </div>
-
-      ${morenda.template ? html` <div id="morelet">${morenda.template}</div> ` : html``}
-    `
-  }
-
-  private onTitleClick() {
-    const morenda = this.morenda!
-
-    if (morenda.template) {
-      this.morelet?.toggleAttribute('opened')
-    } else if (morenda.action) {
-      morenda.action()
-    }
-  }
-}

package/client/layout/more-panel.ts

@@ -1,90 +0,0 @@
-import './more-let'
-
-import { css, html, LitElement, TemplateResult } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { store } from '@operato/shell'
-import { TOOL_POSITION } from '@operato/layout'
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('more-panel')
-class MorePanel extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        height: 100%;
-        min-width: var(--more-panel-min-width);
-        user-select: none;
-      }
-
-      :host(:focus) {
-        outline: none;
-      }
-
-      div[body] {
-        flex: 1;
-        overflow-y: auto;
-        background-color: var(--more-panel-background-color, var(--md-sys-color-secondary-fixed-dim, rgb(47 88 128)));
-        padding: var(--spacing-medium);
-      }
-
-      div[head] {
-        background-color: var(--more-panel-head-color, var(--md-sys-color-secondary-fixed-dim, rgb(47 88 128)));
-      }
-
-      div[tail] {
-        margin-top: auto;
-        background-color: var(--more-panel-tail-color, var(--md-sys-color-secondary-fixed-dim, rgb(47 88 128)));
-      }
-
-      @media only screen and (max-width: 460px) {
-        :host {
-          min-width: 90vw;
-        }
-      }
-    `
-  ]
-
-  @state() private more?: {
-    morendas: {
-      position: TOOL_POSITION
-      icon: string
-      name: string
-      template: TemplateResult
-      action?: () => void
-    }[]
-    heads: {
-      template: TemplateResult
-    }[]
-    tails: {
-      template: TemplateResult
-    }[]
-  }
-
-  render() {
-    var { morendas, heads, tails } = this.more || {}
-
-    morendas = [
-      ...(morendas || []).filter(morenda => morenda.position == TOOL_POSITION.FRONT_END),
-      ...(morendas || []).filter(morenda => morenda.position == TOOL_POSITION.FRONT),
-      ...(morendas || []).filter(morenda => !morenda.position || morenda.position == TOOL_POSITION.CENTER),
-      ...(morendas || []).filter(morenda => morenda.position == TOOL_POSITION.REAR),
-      ...(morendas || []).filter(morenda => morenda.position == TOOL_POSITION.REAR_END)
-    ]
-
-    return html`
-      <div head>${(heads || []).map(template => template)}</div>
-      <div body>${(morendas || []).map(morenda => html` <more-let .morenda=${morenda}></more-let> `)}</div>
-      <div tail>${(tails || []).map(template => template)}</div>
-    `
-  }
-
-  stateChanged(state) {
-    this.more = state.more
-  }
-}

package/client/themes/more-theme.css

@@ -1,24 +0,0 @@
-body {
-  --more-panel-background-color: var(--md-sys-color-secondary-fixed-dim);
-  --more-panel-head-color: var(--more-panel-background-color);
-  --more-panel-tail-color: var(--more-panel-background-color);
-  --more-panel-min-width: 200px;
-
-  --morelet-min-width: 200px;
-  --morelet-title-color: var(--md-sys-color-on-secondary-fixed);
-  --morelet-title-font: normal 14px var(--theme-font);
-  --morelet-border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-  --morelet-focus-border-top: 3px solid var(--md-sys-color-primary);
-  --morelet-background-color: var(--md-sys-color-surface);
-  --morelet-padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-default);
-  --morelet-color: var(--md-sys-color-on-secondary-fixed);
-  --morelet-font: normal 0.9em/1.4em var(--theme-font);
-  --morelet-icon-color: var(--md-sys-color-on-primary);
-}
-
-@media screen and (max-width: 460px) {
-  body {
-    --morelet-padding: var(--padding-wide);
-    --morelet-font: normal 1em/0.9em var(--theme-font);
-  }
-}