@things-factory/context-ui 8.0.0-beta.1 → 8.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/context-ui",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.4",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -30,7 +30,7 @@
     "@material/web": "^2.0.0",
     "@operato/context": "^8.0.0-beta",
     "@operato/layout": "^8.0.0-beta",
-    "@things-factory/apptool-base": "^8.0.0-beta.1"
+    "@things-factory/apptool-base": "^8.0.0-beta.4"
   },
-  "gitHead": "36c494e587640c1490318ef7b95adab02606e0c2"
+  "gitHead": "d83d12ed4ba07177dff1dac26e37be347d156b43"
 }

package/client/actions/context.ts

@@ -1,2 +0,0 @@
-export const APPEND_CONTEXT_TOOL = 'APPEND_CONTEXT_TOOL'
-export const REMOVE_CONTEXT_TOOL = 'REMOVE_CONTEXT_TOOL'

package/client/bootstrap.ts

@@ -1,9 +0,0 @@
-import { store } from '@operato/shell'
-
-import context from './reducers/context'
-
-export default function bootstrap() {
-  store.addReducers({
-    context
-  })
-}

package/client/index.ts

@@ -1,111 +0,0 @@
-export * from './actions/context'
-
-import '@operato/context/ox-title-bar.js'
-import '@operato/context/ox-page-title-bar.js'
-import '@operato/context/ox-page-action-context-bar.js'
-import '@operato/context/ox-context-toolbar.js'
-
-import { html } from 'lit-html'
-
-import { store, clientSettingStore } from '@operato/shell'
-import { appendViewpart, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
-import { isMobileDevice } from '@operato/utils'
-
-import {
-  APPEND_APP_TOOL,
-  APPEND_PAGE_TOOL,
-  REMOVE_APP_TOOL,
-  REMOVE_PAGE_TOOL
-} from '@things-factory/apptool-base/client'
-import { APPEND_CONTEXT_TOOL } from './actions/context.js'
-
-export async function setupContextUIPart({
-  titlebar = 'header',
-  contextToolbar = 'page-footer'
-}: {
-  titlebar?: 'header' | 'page-header'
-  contextToolbar?: 'footer' | 'page-header' | 'page-footer'
-}) {
-  if (!isMobileDevice()) {
-    const show = ((await clientSettingStore.get('title-on-page-header'))?.value || {}).show
-    if (show) {
-      titlebar = 'page-header'
-    }
-  }
-
-  if (titlebar) {
-    if (titlebar == 'page-header') {
-      store.dispatch({
-        type: REMOVE_APP_TOOL,
-        name: 'title-bar'
-      })
-
-      store.dispatch({
-        type: APPEND_PAGE_TOOL,
-        tool: {
-          name: 'title-bar',
-          template: html` <ox-page-title-bar></ox-page-title-bar> `,
-          position: TOOL_POSITION.CENTER
-        }
-      })
-    } else {
-      store.dispatch({
-        type: REMOVE_PAGE_TOOL,
-        name: 'title-bar'
-      })
-
-      /* add title app-tool */
-      store.dispatch({
-        type: APPEND_APP_TOOL,
-        tool: {
-          name: 'title-bar',
-          template: html` <ox-title-bar></ox-title-bar> `,
-          position: TOOL_POSITION.CENTER
-        }
-      })
-    }
-  }
-
-  /*
-   * footerbar 에 append 하는 순서가 중요하다.
-   * footerbar는 아래에서 위로 올라가는 stack 형태의 순서이므로,
-   * context-toolbar가 먼저, 그리고 context-toolbar-overlay 가 나중에 올라간다.
-   */
-  if (contextToolbar) {
-    const position =
-      contextToolbar == 'footer'
-        ? VIEWPART_POSITION.FOOTERBAR
-        : contextToolbar == 'page-header'
-          ? VIEWPART_POSITION.PAGE_HEADERBAR
-          : VIEWPART_POSITION.PAGE_FOOTERBAR
-
-    appendViewpart({
-      name: 'context-toolbar',
-      viewpart: {
-        show: true,
-        template: html` <ox-context-toolbar></ox-context-toolbar> `
-      },
-      position
-    })
-
-    appendViewpart({
-      name: 'context-toolbar-overlay',
-      viewpart: {
-        show: false,
-        hovering: 'next',
-        backdrop: true,
-        template: html``
-      },
-      position
-    })
-
-    store.dispatch({
-      type: APPEND_CONTEXT_TOOL,
-      tool: {
-        template: html` <ox-page-action-context-bar></ox-page-action-context-bar> `,
-        position: TOOL_POSITION.CENTER,
-        context: 'actions'
-      }
-    })
-  }
-}

package/client/reducers/context.ts

@@ -1,26 +0,0 @@
-import { APPEND_CONTEXT_TOOL, REMOVE_CONTEXT_TOOL } from '../actions/context'
-
-const INITIAL_STATE = {
-  tools: []
-}
-
-const context = (state = INITIAL_STATE, action) => {
-  switch (action.type) {
-    case APPEND_CONTEXT_TOOL:
-      return {
-        ...state,
-        tools: [...state.tools, action.tool]
-      }
-
-    case REMOVE_CONTEXT_TOOL:
-      return {
-        ...state,
-        tools: state.tools.filter(i => i !== action.tool)
-      }
-
-    default:
-      return state
-  }
-}
-
-export default context

package/client/themes/context-theme.css

@@ -1,74 +0,0 @@
-body {
-  --context-toolbar-background-color: var(--md-sys-color-background);
-  --context-toolbar-button-background-color: #fff;
-  --context-toolbar-border: 1px solid rgba(57, 78, 100, 0.5);
-  --context-toolbar-border-hover: 1px solid var(--md-sys-color-primary);
-  --context-toolbar-button-max-width: auto;
-  --context-toolbar-button-height: 36px;
-  --context-toolbar-button-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
-  --context-toolbar-button-padding: 0 9px;
-  --context-toolbar-button: normal 13px var(--theme-font);
-  --context-toolbar-button-color: var(--md-sys-color-secondary);
-  --context-toolbar-iconbutton-color: var(--primary-text-color);
-  --context-toolbar-iconbutton-size: 16px;
-  --context-toolbar-function-button-height: 34px;
-  --context-toolbar-function-button-radius: 5px;
-  --context-toolbar-function-button-background-color: #446281;
-  --context-toolbar-function-button-hover-background-color: var(--md-sys-color-primary);
-  --context-toolbar-function-iconbutton-size: 28px;
-  --context-toolbar-function-iconbutton-color: var(--primary-background-color);
-  --context-toolbar-function-button-lineheight: 36px;
-  --context-toolbar-function-button-color: #fff;
-  --context-toolbar-function-button-padding: 0 10px;
-  --context-toolbar-function-button-border: 1px solid rgba(0, 0, 0, 0.1);
-  --context-toolbar-list-background-color: var(--primary-background-color);
-  --context-toolbar-list-text: bold 18px var(--theme-font);
-  --context-toolbar-list-icon-size: var(--icon-default-size);
-  --context-toolbar-side-padding: 15px;
-  --context-toolbar-shadow-line: none;
-  --context-toolbar-title: bold 19px var(--theme-font);
-
-  --context-ui-background-color: rgba(40, 54, 68, 0.9);
-  --context-ui-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
-  --context-ui-border-radius: 10px;
-  --context-ui-padding: 10px;
-  --context-ui-list-color: #d0fdee;
-  --context-ui-list-border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-  --context-ui-list-border-hover-bottom: 1px solid var(--md-sys-color-primary);
-  --context-ui-list-padding: 5px;
-  --context-ui-button-color: var(--secondary-text-color);
-  --context-ui-button-hover-color: #fff;
-  --context-ui-button-background-color: #fff;
-  --context-ui-button-background-hover-color: var(--md-sys-color-primary);
-
-  --context-action-bar-button-margin: var(--margin-narrow) 0 var(--margin-wide) 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(--md-sys-color-on-primary);
-  --context-action-bar-more-button-border-radius: 4px;
-}
-
-@media only screen and (max-width: 460px) {
-  body {
-    --context-toolbar-button: normal 9px var(--theme-font);
-    --context-toolbar-button-max-width: 60px;
-    --context-toolbar-button-height: 50px;
-    --context-toolbar-iconbutton-size: 30px;
-    --context-toolbar-border: none;
-    --context-toolbar-border-hover: none;
-    --context-toolbar-iconbutton-display: block;
-    --context-toolbar-iconbutton-margin: -2px;
-    --context-toolbar-button-background-color: transparent;
-    --context-toolbar-button-margin: 0;
-    --context-toolbar-function-button-height: 34px;
-    --context-toolbar-function-button-lineheight: 34px;
-    --context-toolbar-function-button-radius: 0;
-    --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;
-    --context-action-bar-more-button-border-radius: 0;
-    --context-action-bar-more-button-padding: 6px var(--padding-wide);
-  }
-}

package/client/title-on-page-header-setting-let.ts

@@ -1,68 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-import '@material/web/checkbox/checkbox.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { clientSettingStore } from '@operato/shell'
-import { setupContextUIPart } from './index'
-
-@customElement('title-on-page-header-setting-let')
-export class TitleOnPageHeaderSettingLet extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      label {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-
-        font: var(--label-font);
-        color: var(--md-sys-color-on-primary-container);
-        text-transform: var(--label-text-transform);
-      }
-    `
-  ]
-
-  @property({ type: Boolean }) show: boolean = false
-
-  render() {
-    const checked = this.show === true
-
-    return html`
-      <setting-let>
-        <ox-i18n slot="title" msgid="title.title-on-page-header setting"></ox-i18n>
-
-        <div slot="content">
-          <label>
-            <md-checkbox @change=${e => this.onChangeContextOnPage(e)} ?checked=${checked}></md-checkbox>
-            ${i18next.t('label.show-title-on-page-header')}
-          </label>
-        </div>
-      </setting-let>
-    `
-  }
-
-  async firstUpdated() {
-    this.show = ((await clientSettingStore.get('title-on-page-header'))?.value || {}).show
-  }
-
-  async onChangeContextOnPage(e) {
-    const show = e.currentTarget.checked
-
-    try {
-      await clientSettingStore.put({
-        key: 'title-on-page-header',
-        value: {
-          show
-        }
-      })
-    } catch (e) {
-      console.error(e)
-    }
-
-    setupContextUIPart({
-      titlebar: show ? 'page-header' : 'header'
-    })
-  }
-}