@operato/context 8.0.0-alpha.8 → 8.0.0-beta.1

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

@@ -1,119 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, TemplateResult, nothing } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { TOOL_POSITION } from '@operato/layout'
-import { store } from '@operato/shell'
-
-@customElement('ox-context-page-toolbar')
-export class ContextPageToolbar extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          flex-direction: row-reverse;
-          gap: var(--spacing-medium);
-
-          position: relative;
-
-          justify-content: end;
-          align-items: center;
-
-          --context-action-bar-button-margin: var(--spacing-none);
-          --context-action-bar-more-button-border-radius: 2px;
-
-          --md-icon-size: 20px;
-        }
-
-        :host > div {
-          display: flex;
-          flex-direction: row;
-
-          align-items: center;
-          gap: var(--spacing-small);
-        }
-
-        md-icon {
-          width: 32px;
-          height: 32px;
-          box-sizing: border-box;
-
-          color: var(--md-sys-color-on-primary-container);
-          background-color: var(--md-sys-color-primary-container);
-          border: 1px solid var(--md-sys-color-primary-container);
-          border-radius: var(--md-sys-shape-corner-small);
-          padding: var(--spacing-small);
-
-          &:hover {
-            color: var(--md-sys-color-on-primary);
-            background-color: var(--md-sys-color-primary);
-            border-color: var(--md-sys-color-primary);
-          }
-        }
-
-        @media screen and (max-width: 460px) {
-          :host {
-            gap: 0;
-          }
-
-          :host > div {
-            gap: 0;
-          }
-
-          md-icon {
-            border-radius: 0;
-          }
-        }
-      `
-    ]
-  }
-
-  @property({ type: Object }) context: any
-  @property({ type: Array }) tools?: {
-    position: TOOL_POSITION
-    template: TemplateResult
-    context?: string
-  }[]
-
-  render() {
-    let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])
-    let tools = (this.tools || []).filter(tool => {
-      if (!tool.context || contextKeys.includes(tool.context)) {
-        return tool
-      }
-    })
-
-    let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
-    let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
-    let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)
-    let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)
-    let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
-
-    return html`
-      <slot name="front"></slot>
-      ${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}
-      <slot name="rear"></slot>
-    `
-  }
-
-  stateChanged(state: any) {
-    if (state.context) {
-      this.tools = state.context?.tools
-    }
-  }
-}

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

@@ -1,208 +0,0 @@
-import '@material/web/icon/icon.js'
-
-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'
-
-import { TOOL_POSITION } from '@operato/layout'
-import { store } from '@operato/shell'
-
-@customElement('ox-context-toolbar')
-export class ContextToolbar extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-
-          color: var(--context-toolbar-background-color, var(--md-sys-color-on-secondary-container));
-          background-color: var(--context-toolbar-background-color, var(--md-sys-color-secondary-container));
-          box-shadow: var(--context-toolbar-shadow-line);
-
-          padding: 0;
-
-          --md-icon-size: 20px;
-        }
-
-        div[container] {
-          flex: 1;
-
-          display: flex;
-          position: relative;
-          overflow: hidden;
-
-          justify-content: space-between;
-
-          gap: var(--spacing-medium);
-          padding: var(--spacing-small) var(--spacing-medium);
-
-          &: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 {
-            border: var(--context-toolbar-function-button-border, none);
-          }
-
-          #front-end md-icon {
-            color: var(--md-sys-color-on-primary-container);
-            background-color: var(--md-sys-color-on-primary-container);
-          }
-
-          #front-end md-icon:hover {
-            color: var(--md-sys-color-on-primary);
-            background-color: var(--md-sys-color-primary);
-          }
-
-          #front md-icon {
-            color: var(--md-sys-color-on-secondary-container);
-            background-color: var(--md-sys-color-secondary-container);
-          }
-
-          #front md-icon:hover {
-            color: var(--md-sys-on-color-secondary);
-            background-color: var(--md-sys-color-secondary);
-          }
-
-          md-icon {
-            color: var(--md-sys-color-on-primary-container);
-            background-color: var(--md-sys-color-primary-container);
-            border: 1px solid var(--md-sys-color-primary-container);
-            border-radius: var(--md-sys-shape-corner-small);
-            padding: var(--spacing-small);
-
-            &:hover {
-              color: var(--md-sys-color-on-primary);
-              background-color: var(--md-sys-color-primary);
-            }
-          }
-
-          div md-icon {
-            border-radius: 0;
-          }
-
-          div md-icon:first-child {
-            border-top-left-radius: var(--md-sys-shape-corner-small);
-            border-bottom-left-radius: var(--md-sys-shape-corner-small);
-          }
-
-          div md-icon:last-child {
-            border-top-right-radius: var(--md-sys-shape-corner-small);
-            border-bottom-right-radius: var(--md-sys-shape-corner-small);
-          }
-
-          #center {
-            flex: 1;
-            justify-content: end;
-          }
-        }
-
-        @media only screen and (max-width: 460px) {
-          div[container] {
-            padding: 0;
-            gap: 0;
-            --md-assist-chip-container-shape: 0;
-          }
-
-          div[container] div md-icon {
-            border-radius: 0 !important;
-          }
-
-          div[container] div md-icon:not(:last-child) {
-            border-right-width: 0;
-          }
-        }
-      `
-    ]
-  }
-
-  @state() private context: any
-  @state() private tools?: any[]
-
-  @query('[container]') private container!: HTMLDivElement
-
-  render() {
-    if (this.context.toolbar === false) {
-      return nothing
-    }
-
-    let contextKeys = Object.keys(this.context).filter(key => !!this.context[key])
-    let tools = (this.tools || []).filter(tool => {
-      if (!tool.context || contextKeys.includes(tool.context)) {
-        return tool
-      }
-    })
-
-    let frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
-    let frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
-    let centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)
-    let rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)
-    let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
-
-    return html`
-      <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>
-    `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    requestAnimationFrame(() => {
-      /*
-        하위 엘리먼트들이 실제로 보일 필요가 없을 때는, 이 엘리먼트도 숨김 처리함.
-        &:not(:has(> *)) 처리로 모두 해결되지 않으므로, 로직 처리로 보완함.
-        &:not(:has(> *)) 가 필요없으나, 남겨 두었음.
-      */
-      if (!this.container) {
-        return
-      }
-
-      const children = this.container.querySelectorAll('*')
-
-      let zero = true
-
-      // 모든 하위 엘리먼트의 높이를 확인
-      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) {
-    if (state.context) {
-      this.tools = state.context.tools || []
-      this.context = state.route.context || {}
-    }
-  }
-}

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

@@ -1,58 +0,0 @@
-import { css } from 'lit'
-
-export const ContextToolbarOverlayStyle = css`
-  :host {
-    display: block;
-
-    background-color: var(--context-ui-background-color);
-    box-shadow: var(--context-ui-box-shadow);
-    padding: var(--context-ui-padding);
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    overflow-y: auto;
-  }
-
-  li {
-    display: flex;
-
-    border-bottom: var(--context-ui-list-border-bottom);
-    padding: var(--context-ui-list-padding);
-  }
-
-  li > md-icon {
-    font-size: 1em;
-
-    padding: var(--context-ui-padding);
-    color: var(--context-ui-list-color);
-  }
-
-  li > span {
-    margin: auto 0;
-    flex: 1;
-
-    color: var(--context-ui-list-color);
-  }
-
-  li:hover md-icon,
-  li:hover span {
-    color: #fff;
-  }
-
-  li:hover {
-    cursor: pointer;
-
-    border-bottom: var(--context-ui-list-border-hover-bottom);
-  }
-
-  @media (max-width: 460px) {
-    :host {
-      min-width: 100%;
-      box-shadow: none;
-      border-radius: 0;
-    }
-  }
-`

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

@@ -1,220 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/chips/assist-chip.js'
-import './ox-page-action-overlay-template.js'
-
-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'
-
-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;
-          position: relative;
-          overflow-x: clip;
-          overflow-y: hidden;
-        }
-
-        :host *:focus {
-          outline: none;
-        }
-
-        [container] {
-          flex: 1;
-
-          display: flex;
-          overflow: hidden;
-          gap: var(--spacing-small);
-          padding: 2px; /* only for button shadow */
-          align-items: center;
-        }
-
-        [more] {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          color: var(--md-sys-color-inverse-on-surface);
-          background-color: var(--md-sys-color-inverse-surface);
-          box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);
-          padding: var(--context-action-bar-more-button-padding, 11px 10px);
-          font-size: 2rem;
-          z-index: 10;
-        }
-
-        select,
-        input[type='text'] {
-          box-sizing: border-box;
-          padding: 0 var(--spacing-small);
-          height: var(--form-element-height-medium);
-          border: 1px solid var(--md-sys-color-outline);
-          border-radius: var(--md-sys-shape-corner-small);
-          color: var(--md-sys-color-on-primary);
-          background-color: var(--md-sys-color-on-primary);
-          font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-          outline: none;
-        }
-
-        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) {
-          [container] {
-            padding: 0;
-            gap: 0;
-            --md-assist-chip-container-shape: 0;
-          }
-        }
-
-        @keyframes rotate {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      `
-    ]
-  }
-
-  @property({ type: Array }) actions: {
-    title: string
-    action: () => void
-    icon: string
-    type: string
-    select: string[]
-    href?: string
-    emphasis?: boolean
-  }[] = []
-
-  @state() private overflown: boolean = false
-  @query('[container]') container?: HTMLDivElement
-
-  private overflownUpdaterThrottle: any
-  private resizeCallback: any
-
-  get overflownUpdater() {
-    if (!this.overflownUpdaterThrottle) {
-      this.overflownUpdaterThrottle = throttle(() => {
-        this.overflown = !!this.container && this.container.scrollWidth > this.container.clientWidth
-      }, 100)
-    }
-
-    return this.overflownUpdaterThrottle
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.resizeCallback = () => this.overflownUpdater()
-
-    window.addEventListener('resize', this.resizeCallback)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    window.removeEventListener('resize', this.resizeCallback)
-  }
-
-  render() {
-    return this.actions.length > 0
-      ? html`
-          <div container>${this.renderActions()}</div>
-          ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}
-        `
-      : nothing
-  }
-
-  renderActions() {
-    return html`
-      ${this.actions.map(($action, idx) => {
-        let { type, title, icon, action, select, href, emphasis } = $action as any
-        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> `
-              : 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) {
-                        icon = this.actions[idx].icon
-                        this.actions[idx].icon = 'refresh'
-                        this.requestUpdate()
-                        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) {
-                          this.actions[idx].icon = icon
-                          this.requestUpdate()
-                          iconElement.removeAttribute('working')
-                        }
-
-                        button.disabled = false
-                      }
-                    }}
-                  >
-                    <md-icon slot="icon">${this.actions[idx].icon}</md-icon>
-                  </md-assist-chip>
-                `
-      })}
-    `
-  }
-
-  async updated(changed: PropertyValues<this>) {
-    if (changed.has('actions')) {
-      requestAnimationFrame(this.overflownUpdater)
-    }
-  }
-
-  stateChanged(state: any) {
-    const { actions } = state.route?.context || {}
-
-    if (actions) {
-      this.actions = actions.filter((action: any) => !!action)
-    }
-  }
-
-  showMore() {
-    openOverlay('context-toolbar-overlay', {
-      template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`
-    })
-  }
-}