@operato/context 2.0.0-alpha.13 → 2.0.0-alpha.131

package/src/layouts/ox-context-toolbar.ts

@@ -1,6 +1,6 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
-import { css, html, LitElement, nothing } from 'lit'
+import { css, html, LitElement, nothing, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
@@ -14,77 +14,106 @@ export class ContextToolbar extends connect(store)(LitElement) {
       css`
         :host {
           display: flex;
-          position: relative;
 
           background-color: var(--context-toolbar-background-color);
-          justify-content: space-between;
           box-shadow: var(--context-toolbar-shadow-line);
-        }
-        #front-end {
-          padding-left: var(--context-toolbar-side-padding);
-        }
-        #rear-end {
-          padding-right: var(--context-toolbar-side-padding);
-        }
-        #front-end mwc-icon,
-        #front mwc-icon {
-          background-color: var(--context-toolbar-function-button-background-color);
-          border: var(--context-toolbar-function-button-border);
-          height: var(--context-toolbar-function-button-height);
-          margin: var(--context-toolbar-button-margin);
-          padding: var(--context-toolbar-function-button-padding);
-          color: var(--context-toolbar-function-button-color);
-          line-height: var(--context-toolbar-function-button-lineheight);
-          cursor: pointer;
-        }
-        #front-end mwc-icon:first-child,
-        #front mwc-icon:first-child {
-          border-top-left-radius: var(--context-toolbar-function-button-radius);
-          border-bottom-left-radius: var(--context-toolbar-function-button-radius);
-        }
-        #front-end mwc-icon:last-child,
-        #front mwc-icon:last-child {
-          border-top-right-radius: var(--context-toolbar-function-button-radius);
-          border-bottom-right-radius: var(--context-toolbar-function-button-radius);
-        }
 
-        #front-end mwc-icon {
-          background-color: var(--primary-color);
-        }
-        #front-end mwc-icon:hover {
-          background-color: var(--context-toolbar-function-button-background-color);
-        }
-        #front mwc-icon:hover {
-          background-color: var(--context-toolbar-function-button-hover-background-color);
+          padding: 0;
+
+          --md-icon-size: 20px;
         }
 
-        #center {
+        div[container] {
           flex: 1;
-          align-items: center;
-          justify-content: end;
-        }
 
-        #center > * {
-          align-items: center;
-        }
-        #rear-end > *,
-        #rear > * {
-          margin: var(--context-toolbar-button-margin);
-        }
-        #rear-end {
-          align-items: start;
-        }
+          display: flex;
+          position: relative;
+          overflow: hidden;
+
+          justify-content: space-between;
 
-        div > * {
-          align-items: center;
+          gap: var(--padding-narrow);
+          padding: 6px 10px;
+
+          &:not(:has(> *)) {
+            padding: 0;
+          }
+
+          div {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+
+            align-items: center;
+            overflow: hidden;
+            padding: 0;
+          }
+
+          #front-end md-icon,
+          #front md-icon {
+            background-color: var(--context-toolbar-function-button-background-color);
+            border: var(--context-toolbar-function-button-border);
+            color: var(--context-toolbar-function-button-color);
+          }
+
+          #front-end md-icon {
+            background-color: var(--primary-color);
+          }
+          #front-end md-icon:hover {
+            background-color: var(--context-toolbar-function-button-background-color);
+          }
+          #front md-icon:hover {
+            background-color: var(--context-toolbar-function-button-hover-background-color);
+          }
+
+          md-icon {
+            background-color: var(--button-background-color, #fafbfc);
+            border: 1px solid rgba(var(--primary-color-rgb), 0.5);
+            border-radius: var(--button-border-radius);
+            padding: var(--iconbtn-padding, 2px);
+
+            color: var(--primary-color);
+
+            &:hover {
+              background-color: var(--primary-color);
+
+              color: var(--theme-white-color);
+            }
+          }
+
+          div md-icon {
+            border-radius: 0;
+          }
+
+          div md-icon:first-child {
+            border-top-left-radius: var(--context-toolbar-function-button-radius);
+            border-bottom-left-radius: var(--context-toolbar-function-button-radius);
+          }
+
+          div md-icon:last-child {
+            border-top-right-radius: var(--context-toolbar-function-button-radius);
+            border-bottom-right-radius: var(--context-toolbar-function-button-radius);
+          }
+
+          #center {
+            flex: 1;
+            justify-content: end;
+          }
         }
 
-        div {
-          display: flex;
-          flex-wrap: nowrap;
-          align-items: center;
-          overflow: hidden;
-          padding: 0;
+        @media only screen and (max-width: 460px) {
+          div[container] {
+            padding: 0;
+            gap: 0;
+          }
+
+          div[container] div md-icon {
+            border-radius: 0;
+          }
+
+          div[container] div md-icon:not(:last-child) {
+            border-right-width: 0;
+          }
         }
       `
     ]
@@ -93,6 +122,8 @@ export class ContextToolbar extends connect(store)(LitElement) {
   @state() private context: any
   @state() private tools?: any[]
 
+  @query('[container]') private container!: HTMLDivElement
+
   render() {
     if (this.context.toolbar === false) {
       return nothing
@@ -112,20 +143,58 @@ export class ContextToolbar extends connect(store)(LitElement) {
     let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
 
     return html`
-      <div id="front-end">${frontEndTools.map(tool => html` ${tool.template} `)}</div>
+      <div container>
+        ${frontEndTools.length > 0
+          ? html`<div id="front-end">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`
+          : nothing}
+        ${frontTools.length > 0
+          ? html`<div id="front">${frontTools.map(tool => html` ${tool.template} `)}</div>`
+          : nothing}
+        ${centerTools.length > 0
+          ? html`<div id="center">${centerTools.map(tool => html` ${tool.template} `)}</div>`
+          : nothing}
+        ${rearTools.length > 0
+          ? html`<div id="rear">${rearTools.map(tool => html` ${tool.template} `)}</div>`
+          : nothing}
+        ${rearEndTools.length > 0
+          ? html`<div id="rear-end">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`
+          : nothing}
+      </div>
+    `
+  }
 
-      <div id="front">${frontTools.map(tool => html` ${tool.template} `)}</div>
+  updated(changes: PropertyValues<this>) {
+    requestAnimationFrame(() => {
+      /*
+        하위 엘리먼트들이 실제로 보일 필요가 없을 때는, 이 엘리먼트도 숨김 처리함.
+        &:not(:has(> *)) 처리로 모두 해결되지 않으므로, 로직 처리로 보완함.
+        &:not(:has(> *)) 가 필요없으나, 남겨 두었음.
+      */
+      if (!this.container) {
+        return
+      }
 
-      <div id="center">${centerTools.map(tool => html` ${tool.template} `)}</div>
+      const children = this.container.querySelectorAll('*')
 
-      <div id="rear">${rearTools.map(tool => html` ${tool.template} `)}</div>
+      let zero = true
 
-      <div id="rear-end">${rearEndTools.map(tool => html` ${tool.template} `)}</div>
-    `
+      // 모든 하위 엘리먼트의 높이를 확인
+      for (const child of Array.from(children)) {
+        if ((child as HTMLElement).offsetHeight !== 0) {
+          zero = false
+          break
+        }
+      }
+
+      // 모든 하위 엘리먼트의 높이가 0이면 부모 엘리먼트의 display를 none으로 변경
+      this.container.style.padding = zero ? '0' : 'revert-layer'
+    })
   }
 
   stateChanged(state: any) {
-    this.tools = state.context.tools
-    this.context = state.route.context
+    if (state.context) {
+      this.tools = state.context.tools || []
+      this.context = state.route.context || {}
+    }
   }
 }

package/src/styles/ox-context-toolbar-overlay-style.ts

@@ -23,7 +23,7 @@ export const ContextToolbarOverlayStyle = css`
     padding: var(--context-ui-list-padding);
   }
 
-  li > mwc-icon {
+  li > md-icon {
     font-size: 1em;
 
     padding: var(--context-ui-padding);
@@ -37,7 +37,7 @@ export const ContextToolbarOverlayStyle = css`
     color: var(--context-ui-list-color);
   }
 
-  li:hover mwc-icon,
+  li:hover md-icon,
   li:hover span {
     color: #fff;
   }

package/src/tools/ox-page-action-context-bar.ts

@@ -1,8 +1,8 @@
-import '@material/mwc-button'
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/chips/assist-chip.js'
 import './ox-page-action-overlay-template.js'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { css, html, LitElement, nothing, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import throttle from 'lodash-es/throttle'
 import { connect } from 'pwa-helpers/connect-mixin'
@@ -10,63 +10,69 @@ import { connect } from 'pwa-helpers/connect-mixin'
 import { openOverlay } from '@operato/layout'
 import { store } from '@operato/shell'
 import { sleep } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('ox-page-action-context-bar')
 export class PageActionContextBar extends connect(store)(LitElement) {
   static get styles() {
     return [
+      ButtonContainerStyles,
       css`
         :host {
           display: flex;
-          overflow: hidden;
-          position: relative;
         }
 
         :host *:focus {
           outline: none;
         }
 
-        mwc-button {
-          white-space: nowrap;
-          margin: var(--context-action-bar-button-margin);
-          border-radius: var(--context-action-bar-more-button-border-radius);
-        }
+        [container] {
+          flex: 1;
 
-        [danger] {
-          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-          --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
+          display: flex;
+          overflow: hidden;
+          gap: var(--padding-narrow);
+          padding: 2px; /* only for button shadow */
+          align-items: center;
         }
 
         [more] {
           position: absolute;
           top: 0;
-          right: 38px;
+          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);
+          padding: 11px 10px;
           font-size: 2rem;
         }
 
-        mwc-icon {
-          background-color: var(--theme-white-color);
+        select {
+          background-color: var(--button-background-color, #fafbfc);
           border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-          padding: 1px 2px;
-          color: var(--primary-color);
+          border-radius: var(--button-border-radius);
+          padding: 0 var(--padding-narrow);
+
+          font-size: var(--fontsize-default);
+          color: var(--secondary-color);
+        }
+
+        md-icon[working] {
+          animation: rotate 1s linear infinite;
+        }
+
+        md-assist-chip[icon-only] {
+          --md-assist-chip-trailing-space: 0;
         }
 
         @media screen and (max-width: 460px) {
-          mwc-button {
-            --mdc-button-horizontal-padding: var(--padding-default);
-            --mdc-shape-small: var(--context-action-bar-more-button-border-radius);
+          :host {
+            gap: 0;
           }
 
           [more] {
-            position: absolute;
-            margin-top: -10px;
-            right: 0px;
-            padding: var(--padding-default);
-            font-size: 2rem;
+            margin-top: -7px;
           }
         }
 
@@ -82,7 +88,15 @@ export class PageActionContextBar extends connect(store)(LitElement) {
     ]
   }
 
-  @state() actions: any[] = []
+  @property({ type: Array }) actions: {
+    title: string
+    action: () => void
+    icon: string
+    type: string
+    select: string[]
+    href?: string
+    emphasis?: boolean
+  }[] = []
   @state() private overflown: boolean = false
 
   private overflownUpdaterThrottle: any
@@ -113,57 +127,66 @@ export class PageActionContextBar extends connect(store)(LitElement) {
   }
 
   render() {
-    return html`
-      ${this.renderActions()}
-      ${this.overflown ? html` <mwc-icon more @click=${this.showMore.bind(this)}>more_horiz</mwc-icon> ` : html``}
-    `
+    return this.actions.length > 0
+      ? html`
+          <div container>
+            ${this.renderActions()}
+            ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}
+          </div>
+        `
+      : nothing
   }
 
   renderActions() {
     return html`
       ${this.actions.map(($action, idx) => {
         let { type, title, icon, action, select, href, emphasis } = $action as any
-        let { outlined, raised, dense, danger } = emphasis || {}
+        let { raised, danger } = emphasis || {}
 
         return type == 'text'
           ? html` <span @click=${action}>${title}</span> `
           : type == 'select' || (select && select.length > 0)
-          ? html`
-              <select @change=${action}>
-                ${select.map((option: any) => html` <option>${option}</option> `)}
-              </select>
-            `
-          : type == 'link'
-          ? html` <a href=${href}>${title}</a> `
-          : type == 'icon'
-          ? html`<mwc-icon @click=${action}>${icon}</mwc-icon>`
-          : html`
-              <mwc-button
-                label=${title}
-                icon=${icon || 'done_all'}
-                ?dense=${dense}
-                ?raised=${raised}
-                ?outlined=${outlined}
-                ?danger=${danger}
-                @click=${async (e: MouseEvent) => {
-                  /* all actions should be bloked for a second */
-                  const button = e.currentTarget as any
-                  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')
-                  }
-                }}
-              ></mwc-button>
-            `
+            ? html`
+                <select @change=${action}>
+                  ${select.map((option: any) => html` <option>${option}</option> `)}
+                </select>
+              `
+            : type == 'link'
+              ? html` <a href=${href}>${title}</a> `
+              : html`
+                  <md-assist-chip
+                    ?icon-only=${type == 'icon' || !title}
+                    ?elevated=${raised}
+                    ?danger=${danger}
+                    label=${title}
+                    @click=${async (e: MouseEvent) => {
+                      /* all actions should be bloked for a second */
+                      const button = e.currentTarget as any
+                      const iconElement = button.querySelector('[slot="icon"]')
+                      if (iconElement) {
+                        iconElement.textContent = 'refresh'
+                        iconElement.setAttribute('working', true)
+                      }
+                      button.disabled = true
+
+                      try {
+                        await action()
+                      } finally {
+                        await sleep(1000) /* waiting for additionla 1 second */
+
+                        /* because icon can be changed after sleep, don't use closure 'icon'. */
+                        if (iconElement) {
+                          iconElement.textContent = this.actions[idx]?.icon
+                          iconElement.removeAttribute('working')
+                        }
+
+                        button.disabled = false
+                      }
+                    }}
+                  >
+                    <md-icon slot="icon">${icon || 'done_all'}</md-icon>
+                  </md-assist-chip>
+                `
       })}
     `
   }
@@ -175,7 +198,11 @@ export class PageActionContextBar extends connect(store)(LitElement) {
   }
 
   stateChanged(state: any) {
-    this.actions = state.route?.context?.actions?.filter((action: any) => !!action) || []
+    const { actions } = state.route?.context || {}
+
+    if (actions) {
+      this.actions = actions.filter((action: any) => !!action)
+    }
   }
 
   showMore() {

package/src/tools/ox-page-action-overlay-template.ts

@@ -1,11 +1,12 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+import '@material/web/chips/assist-chip.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers'
 
 import { store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 import { sleep } from '@operato/utils'
 
 import { ContextToolbarOverlayStyle } from '../styles/ox-context-toolbar-overlay-style.js'
@@ -15,32 +16,26 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
   static get styles() {
     return [
       ScrollbarStyles,
+      ButtonContainerStyles,
       ContextToolbarOverlayStyle,
       css`
         :host {
           display: flex;
           flex-wrap: wrap;
-          gap: var(--margin-narrow);
+          gap: var(--padding-narrow);
+          align-items: center;
         }
+
         :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);
+        md-icon[working] {
+          animation: rotate 1s linear infinite;
         }
 
-        @media screen and (max-width: 460px) {
-          mwc-button {
-            --mdc-button-horizontal-padding: var(--padding-default);
-            border-radius: 4px;
-          }
+        md-assist-chip[icon-only] {
+          --md-assist-chip-trailing-space: 0;
         }
 
         @keyframes rotate {
@@ -61,47 +56,51 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
     return html`
       ${this.actions.map(($action, idx) => {
         let { type, title, icon, action, select, href, emphasis } = $action as any
-        let { outlined, raised, dense, danger } = emphasis || {}
+        let { raised, danger } = emphasis || {}
 
         return type == 'text'
           ? html` <span>${title}</span> `
           : type == 'select' || (select && select.length > 0)
-          ? html`
-              <select @change=${action}>
-                ${select.map((option: any) => 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: MouseEvent) => {
-                  /* all actions should be bloked for a second */
-                  const button = e.currentTarget as any
-                  button.icon = 'rotate_right'
-                  button.setAttribute('working', true)
-                  button.disabled = true
+            ? html`
+                <select @change=${action}>
+                  ${select.map((option: any) => html` <option>${option}</option> `)}
+                </select>
+              `
+            : type == 'link'
+              ? html` <a href=${href}>${title}</a> `
+              : html`
+                  <md-assist-chip
+                    ?icon-only=${type == 'icon' || !title}
+                    ?elevated=${raised}
+                    ?danger=${danger}
+                    label=${title}
+                    @click=${async (e: MouseEvent) => {
+                      /* all actions should be bloked for a second */
+                      const button = e.currentTarget as any
+                      const iconElement = button.querySelector('[slot="icon"]')
+                      if (iconElement) {
+                        iconElement.textContent = 'refresh'
+                        iconElement.setAttribute('working', true)
+                      }
+                      button.disabled = true
 
-                  try {
-                    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')
+                      try {
+                        await action()
+                      } finally {
+                        await sleep(1000) /* waiting for additionla 1 second */
 
-                    window.history.back()
-                  }
-                }}
-              ></mwc-button>
-            `
+                        /* because icon can be changed after sleep, don't use closure 'icon'. */
+                        if (iconElement) {
+                          iconElement.textContent = this.actions[idx]?.icon
+                          iconElement.removeAttribute('working')
+                        }
+                        button.disabled = false
+                      }
+                    }}
+                  >
+                    <md-icon slot="icon">${icon || 'done_all'}</md-icon>
+                  </md-assist-chip>
+                `
       })}
     `
   }