@things-factory/context-ui 4.1.27 → 5.0.0-alpha.2

package/client/bootstrap.js

@@ -1,13 +1,13 @@
+import './tools/title-bar'
+import './tools/page-action-context-bar'
+import './layouts/context-toolbar'
+
 import { html } from 'lit-html'
 
-import { store } from '@things-factory/shell'
-import { appendViewpart, VIEWPART_POSITION, TOOL_POSITION } from '@things-factory/layout-base'
 import { APPEND_APP_TOOL } from '@things-factory/apptool-base'
 import { APPEND_CONTEXT_TOOL } from '@things-factory/context-base'
-
-import './tools/title-bar'
-import './tools/page-action-context-bar'
-import './layouts/context-toolbar'
+import { appendViewpart, TOOL_POSITION, VIEWPART_POSITION } from '@things-factory/layout-base'
+import { store } from '@things-factory/shell'
 
 export default function bootstrap() {
   /* add title app-tool */
@@ -49,7 +49,7 @@ export default function bootstrap() {
     type: APPEND_CONTEXT_TOOL,
     tool: {
       template: html` <page-action-context-bar></page-action-context-bar> `,
-      position: TOOL_POSITION.REAR_END,
+      position: TOOL_POSITION.CENTER,
       context: 'actions'
     }
   })

package/client/layouts/context-toolbar.js

@@ -1,9 +1,9 @@
 import '@material/mwc-icon'
 
-import { LitElement, css, html } from 'lit-element'
+import { LitElement, css, html } from 'lit'
+import { connect } from 'pwa-helpers/connect-mixin.js'
 
 import { TOOL_POSITION } from '@things-factory/layout-base'
-import { connect } from 'pwa-helpers/connect-mixin.js'
 import { store } from '@things-factory/shell'
 
 class ContextToolbar extends connect(store)(LitElement) {
@@ -65,12 +65,11 @@ class ContextToolbar extends connect(store)(LitElement) {
 
         #center {
           flex: 1;
-          justify-content: center;
           align-items: center;
+          justify-content: end;
         }
 
         #center > * {
-          justify-content: center;
           align-items: center;
         }
         #rear-end > *,

package/client/styles/context-toolbar-overlay-style.js

@@ -1,4 +1,4 @@
-import { css } from 'lit-element'
+import { css } from 'lit'
 
 export const ContextToolbarOverlayStyle = css`
   :host {

package/client/themes/context-theme.css

@@ -41,6 +41,12 @@ body {
   --context-ui-button-background-color: #fff;
   --context-ui-button-background-hover-color: var(--primary-color);
 
+  --context-action-bar-button-margin: 5px 0 5px var(--margin-narrow);
+  --context-action-bar-more-button-background-color:var(--context-ui-background-color);
+  --context-action-bar-more-button-padding:6px var(--padding-default);
+  --context-action-bar-more-button-color:var(--theme-white-color);
+  --context-action-bar-more-button-border-radius:4px;
+
   /* button style */
   --button-background-color: var(--secondary-color);
   --button-active-background-color: var(--primary-color);
@@ -71,5 +77,8 @@ body {
     --context-toolbar-side-padding: 0;
     --context-toolbar-shadow-line: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
     --context-toolbar-button-padding: 0 10px 0 0;
+
+    --context-action-bar-button-margin: 0 0 0 -1px;
+    --context-action-bar-more-button-border-radius:0;
   }
 }

package/client/tools/page-action-context-bar.js

@@ -1,43 +1,60 @@
 import '@material/mwc-button'
+import '@material/mwc-icon'
+import './page-action-overlay-template'
 
-import { LitElement, css, html } from 'lit-element'
-
+import { css, html, LitElement } from 'lit'
+import throttle from 'lodash-es/throttle'
 import { connect } from 'pwa-helpers/connect-mixin'
-import { sleep } from '@things-factory/utils'
-import { store } from '@things-factory/shell'
+
+import { store } from '@operato/shell'
+import { sleep } from '@operato/utils'
+import { openOverlay } from '@things-factory/layout-base'
 
 class PageActionContextBar extends connect(store)(LitElement) {
   static get properties() {
     return {
-      _actions: Array
+      _actions: Array,
+      _overflown: Boolean
     }
   }
 
   static get styles() {
     return [
       css`
+        :host {
+          display: flex;
+          overflow: hidden;
+          position: relative;
+        }
+
         :host *:focus {
           outline: none;
         }
+
         mwc-button {
-          margin-left: var(--margin-narrow);
+          white-space: nowrap;
+          margin: var(--context-action-bar-button-margin);
+          border-radius: var(--context-action-bar-more-button-border-radius);
         }
+
         [danger] {
           --mdc-theme-primary: var(--mdc-danger-button-primary-color);
           --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
         }
+
+        [more] {
+          position: absolute;
+          right: 0;
+          background-color: var(--context-action-bar-more-button-background-color);
+          box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);
+          padding: var(--context-action-bar-more-button-padding);
+          color: var(--context-action-bar-more-button-color);
+        }
+
         @media screen and (max-width: 460px) {
-          :host {
-            border: 1px solid var(--primary-color);
-            border-width: 0 1px;
-          }
           mwc-button {
-            margin-left: -5px;
-            overflow: hidden;
-            max-width: 80px;
-            --mdc-shape-small: 0;
-            --mdc-typography-button-font-size: 0.6em;
             --mdc-button-horizontal-padding: var(--padding-default);
+            --mdc-shape-small: var(--context-action-bar-more-button-border-radius);
           }
         }
 
@@ -53,7 +70,38 @@ class PageActionContextBar extends connect(store)(LitElement) {
     ]
   }
 
+  get overflownUpdater() {
+    if (!this._overflownUpdater) {
+      this._overflownUpdater = throttle(() => {
+        this._overflown = this.scrollWidth > this.clientWidth
+      }, 100)
+    }
+
+    return this._overflownUpdater
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this._resizeCallback = () => this.overflownUpdater()
+
+    window.addEventListener('resize', this._resizeCallback)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    window.removeEventListener('resize', this._resizeCallback)
+  }
+
   render() {
+    return html`
+      ${this.renderActions()}
+      ${this._overflown ? html` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-icon> ` : html``}
+    `
+  }
+
+  renderActions() {
     return html`
       ${this._actions.map(($action, idx) => {
         let { type, title, icon, action, select, href, emphasis } = $action
@@ -100,9 +148,21 @@ class PageActionContextBar extends connect(store)(LitElement) {
     `
   }
 
+  updated(changed) {
+    if (changed.has('_actions')) {
+      requestAnimationFrame(this.overflownUpdater)
+    }
+  }
+
   stateChanged(state) {
     this._actions = state.route?.context?.actions?.filter(action => !!action) || []
   }
+
+  showMore() {
+    openOverlay('context-toolbar-overlay', {
+      template: html`<page-action-overlay-template></page-action-overlay-template>`
+    })
+  }
 }
 
 customElements.define('page-action-context-bar', PageActionContextBar)

package/client/tools/page-action-overlay-template.js

@@ -0,0 +1,115 @@
+import '@material/mwc-icon'
+
+import { css, html, LitElement } from 'lit-element'
+import { connect } from 'pwa-helpers'
+
+import { store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+import { sleep } from '@operato/utils'
+import { ContextToolbarOverlayStyle } from '@things-factory/context-ui'
+
+class PageActionOverlayTemplate extends connect(store)(LitElement) {
+  static get properties() {
+    return {
+      _actions: Array
+    }
+  }
+
+  static get styles() {
+    return [
+      ScrollbarStyles,
+      ContextToolbarOverlayStyle,
+      css`
+        :host {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--margin-narrow);
+        }
+        :host *:focus {
+          outline: none;
+        }
+
+        mwc-button {
+          background-color: var(--main-section-background-color);
+          border-radius: var(--context-action-bar-more-button-border-radius);
+        }
+
+        [danger] {
+          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
+          --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
+        }
+
+        @media screen and (max-width: 460px) {
+          mwc-button {
+            --mdc-button-horizontal-padding: var(--padding-default);
+            border-radius: 4px;
+          }
+        }
+
+        @keyframes rotate {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+      `
+    ]
+  }
+
+  render() {
+    return html`
+      ${this._actions.map(($action, idx) => {
+        let { type, title, icon, action, select, href, emphasis } = $action
+        let { outlined, raised, dense, danger } = emphasis || {}
+
+        return type == 'text'
+          ? html` <span>${title}</span> `
+          : type == 'select' || (select && select.length > 0)
+          ? html`
+              <select @change=${action}>
+                ${select.map(option => html` <option>${option}</option> `)}
+              </select>
+            `
+          : type == 'link'
+          ? html` <a href=${href}>${title}</a> `
+          : html`
+              <mwc-button
+                label=${title}
+                icon=${icon || 'done_all'}
+                ?dense=${dense}
+                ?raised=${raised}
+                ?outlined=${outlined}
+                ?danger=${danger}
+                @click=${async e => {
+                  /* all actions should be bloked for a second */
+                  const button = e.currentTarget
+                  button.icon = 'rotate_right'
+                  button.setAttribute('working', true)
+                  button.disabled = true
+
+                  try {
+                    await action()
+                  } finally {
+                    await sleep(1000)
+                    button.disabled = false
+                    /* because icon can be changed after sleep, don't use closure 'icon'. */
+                    button.icon = this._actions[idx]?.icon || 'done_all'
+                    button.removeAttribute('working')
+
+                    window.history.back()
+                  }
+                }}
+              ></mwc-button>
+            `
+      })}
+    `
+  }
+
+  stateChanged(state) {
+    this._actions = state.route?.context?.actions?.filter(action => !!action) || []
+  }
+}
+
+window.customElements.define('page-action-overlay-template', PageActionOverlayTemplate)

package/client/tools/title-bar.js

@@ -1,6 +1,6 @@
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit-element'
+import { css, html, LitElement } from 'lit'
 import { connect } from 'pwa-helpers'
 
 import { openHelp } from '@operato/help'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/context-ui",
-  "version": "4.1.27",
+  "version": "5.0.0-alpha.2",
   "main": "dist-server/index.js",
   "browser": "client/index.js",
   "things-factory": true,
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@material/mwc-icon": "^0.25.3",
-    "@operato/help": "^0.3.28",
-    "@things-factory/apptool-base": "^4.1.27",
-    "@things-factory/context-base": "^4.1.27",
-    "@things-factory/layout-ui": "^4.1.27"
+    "@operato/help": "^0.4.3",
+    "@things-factory/apptool-base": "^5.0.0-alpha.2",
+    "@things-factory/context-base": "^5.0.0-alpha.2",
+    "@things-factory/layout-ui": "^5.0.0-alpha.2"
   },
-  "gitHead": "d2bcc934a52e1a2f68738ec8b56ad72503172f6f"
+  "gitHead": "055536f981d229d51ae63f46585036b35fa86602"
 }