@things-factory/meta-ui 7.0.1-alpha.24 → 7.0.1-alpha.29

package/client/actions/main.js

@@ -1,4 +1,5 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+
 import '../viewparts/dynamic-menu-part'
 
 import gql from 'graphql-tag'
@@ -43,12 +44,12 @@ export async function setupMenuPart(options) {
       HAMBURGER = {
         name: 'hamburger',
         template: html`
-          <mwc-icon
+          <md-icon
             @click=${e =>
               toggleOverlay('dynamic-menu-part', {
                 backdrop: true
               })}
-            >view_headline</mwc-icon
+            >view_headline</md-icon
           >
         `,
         position: TOOL_POSITION.FRONT_END

package/client/bootstrap.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import { html } from 'lit-html'
 
 import { navigate, store } from '@operato/shell'
@@ -81,7 +83,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>auto_fix_high</mwc-icon>`,
+        icon: html`<md-icon>auto_fix_high</md-icon>`,
         name: html`<ox-i18n msgid="title.dynamic_menu"></ox-i18n>`,
         action: () => {
           navigate('dynamic-menu')
@@ -93,7 +95,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>filter_tilt_shift</mwc-icon>`,
+        icon: html`<md-icon>filter_tilt_shift</md-icon>`,
         name: html`<ox-i18n msgid="title.entity"></ox-i18n>`,
         action: () => {
           navigate('config-entity')
@@ -105,7 +107,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>speaker_notes</mwc-icon>`,
+        icon: html`<md-icon>speaker_notes</md-icon>`,
         name: html`<ox-i18n msgid="title.terminology"></ox-i18n>`,
         action: () => {
           navigate('config-terminology')
@@ -117,7 +119,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>code</mwc-icon>`,
+        icon: html`<md-icon>code</md-icon>`,
         name: html`<ox-i18n msgid="title.code_management"></ox-i18n>`,
         action: () => {
           navigate('codes')
@@ -129,7 +131,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>business_center</mwc-icon>`,
+        icon: html`<md-icon>business_center</md-icon>`,
         name: html`<ox-i18n msgid="title.meta_activity_list"></ox-i18n>`,
         action: () => {
           navigate('meta-activity-list')
@@ -140,7 +142,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>margin</mwc-icon>`,
+        icon: html`<md-icon>margin</md-icon>`,
         name: html`<ox-i18n msgid="title.meta_activity_define"></ox-i18n>`,
         action: () => {
           navigate('meta-activity-define')
@@ -151,7 +153,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html`<mwc-icon>work</mwc-icon>`,
+        icon: html`<md-icon>work</md-icon>`,
         name: html`<ox-i18n msgid="title.activity_list"></ox-i18n>`,
         action: () => {
           navigate('activity-list')
@@ -162,7 +164,7 @@ export default async function bootstrap(module) {
     store.dispatch({
       type: ADD_MORENDA,
       morenda: {
-        icon: html` <mwc-icon>dataset</mwc-icon> `,
+        icon: html` <md-icon>dataset</md-icon> `,
         name: html` <ox-i18n msgid="text.attribute management"></ox-i18n> `,
         action: () => {
           navigate('attributes')

package/client/component/popup/code-input-editor-popup.js

@@ -1,7 +1,9 @@
+import '@material/web/icon/icon.js'
+
 import { css, html, LitElement } from 'lit'
 import { CommonGristStyles, ButtonContainerStyles } from '@operato/styles'
-import { TermsUtil } from '../../utils/terms-util';
-import { MetaApi } from "../../utils/meta-api"
+import { TermsUtil } from '../../utils/terms-util'
+import { MetaApi } from '../../utils/meta-api'
 import '@operato/input/ox-input-code.js'
 import { closePopup } from '@operato/popup'
 
@@ -24,47 +26,36 @@ export class CodeInputEditorPopup extends LitElement {
       }
 
       ox-input-code {
-        margin:10px;
+        margin: 10px;
         overflow-y: auto;
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
     `
   ]
 
-  async connectedCallback(){
-    
-    if(typeof this.value === 'object'){
-      this.codeVlaue = JSON.stringify(this.value, 0, 2);
+  async connectedCallback() {
+    if (typeof this.value === 'object') {
+      this.codeVlaue = JSON.stringify(this.value, 0, 2)
     } else {
-      this.codeVlaue = this.value;
-
+      this.codeVlaue = this.value
     }
 
-    await super.connectedCallback();
+    await super.connectedCallback()
   }
 
-  async firstUpdated(){
-    await super.firstUpdated();
+  async firstUpdated() {
+    await super.firstUpdated()
   }
 
-  render(){
+  render() {
     return html`
       <ox-input-code mode="javascript" value=${this.codeVlaue} tab-size="2" tab-as-space="true"></ox-input-code>
-      <div id="button-container" class="button-container">
-        <mwc-button raised label="${TermsUtil.tButton('empty')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickEmpty.bind(this)}>
-        </mwc-button>
-        <mwc-button raised label="${TermsUtil.tButton('cancel')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickCancel.bind(this)}>
-        </mwc-button>
-        <mwc-button raised label="${TermsUtil.tButton('confirm')}" style="margin-left:7px;margin-top:7px;"
-          @click=${this.clickConfirm.bind(this)}>
-        </mwc-button>
+
+      <div id="button-container" class="button-container" style="margin-left:unset;">
+        <button @click=${this.clickEmpty.bind(this)}><md-icon>clear_box_outline_blank</md-icon>${TermsUtil.tButton('empty')}</button>
+        <div filler></div>
+        <button @click=${this.clickCancel.bind(this)}><md-icon>cancel</md-icon>${TermsUtil.tButton('cancel')}</button>
+        <button @click=${this.clickConfirm.bind(this)}><md-icon>done</md-icon>${TermsUtil.tButton('confirm')}</button>
       </div>
     `
   }
@@ -76,42 +67,42 @@ export class CodeInputEditorPopup extends LitElement {
   /**
    * @description 비우기
    ***************************
-   * @returns 
+   * @returns
    */
-  async clickEmpty(e){
+  async clickEmpty(e) {
     this.confirmCallback && this.confirmCallback(null)
     closePopup(this)
   }
   /**
-   * @description 취소 
+   * @description 취소
    ***************************
-   * @returns 
+   * @returns
    */
-  async clickCancel(e){
+  async clickCancel(e) {
     closePopup(this)
   }
   /**
-   * @description 확인 
+   * @description 확인
    ***************************
-   * @returns 
+   * @returns
    */
-  async clickConfirm(e){
-    if(this.codeVlaue === this.codeEditor.value){
-      MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'));
-      return;
+  async clickConfirm(e) {
+    if (this.codeVlaue === this.codeEditor.value) {
+      MetaApi.showToast('info', TermsUtil.tText('NOTHING_CHANGED'))
+      return
     }
-    this.changedValue(this.codeEditor.value);
+    this.changedValue(this.codeEditor.value)
   }
 
   /**
-   * @description 확정  
+   * @description 확정
    ***************************
-   * @param {*} record 
+   * @param {*} record
    */
-  async changedValue(value){
+  async changedValue(value) {
     this.confirmCallback && this.confirmCallback(value)
     closePopup(this)
   }
 }
-  
-customElements.define('code-input-editor-popup', CodeInputEditorPopup)
+
+customElements.define('code-input-editor-popup', CodeInputEditorPopup)

package/client/component/popup/file-upload-popup.js

@@ -1,19 +1,22 @@
+import '@material/web/icon/icon.js'
+
 import { client, gqlContext } from '@things-factory/shell'
 import { css, html, LitElement } from 'lit'
 import { SingleColumnFormStyles } from '@things-factory/form-ui'
 import { CommonGristStyles, ButtonContainerStyles } from '@operato/styles'
 import gql from 'graphql-tag'
-import { TermsUtil } from '../../utils/terms-util';
+import { TermsUtil } from '../../utils/terms-util'
 import { ValueUtil } from '../../utils/value-util'
 import { ServiceUtil } from '../../utils/service-util'
-import { MetaApi } from "../../utils/meta-api"
-import { MetaUiUtil } from "../../utils/meta-ui-util"
+import { MetaApi } from '../../utils/meta-api'
+import { MetaUiUtil } from '../../utils/meta-ui-util'
 import { isMobileDevice } from '@operato/utils'
 import { closePopup } from '@operato/popup'
 
 class FileUploadPopup extends LitElement {
   static get styles() {
     return [
+      ButtonContainerStyles,
       SingleColumnFormStyles,
       css`
         :host {
@@ -23,27 +26,10 @@ class FileUploadPopup extends LitElement {
           overflow-x: overlay;
           background-color: var(--main-section-background-color);
         }
+
         .input-container {
           display: flex;
         }
-        .button-container {
-          padding: 10px 0 12px 0;
-          text-align: center;
-        }
-        .button-container > button {
-          background-color: var(--button-background-color);
-          border: var(--button-border);
-          border-radius: var(--button-border-radius);
-          margin: var(--button-margin);
-          padding: var(--button-padding);
-          color: var(--button-color);
-          font: var(--button-font);
-          text-transform: var(--button-text-transform);
-        }
-        .button-container > button:hover,
-        .button-container > button:active {
-          background-color: var(--button-background-focus-color);
-        }
       `
     ]
   }
@@ -84,7 +70,7 @@ class FileUploadPopup extends LitElement {
       </div>
 
       <div class="button-container">
-        <mwc-button raised @click="${this._createAttachment}" label="${TermsUtil.tButton('create')}"></mwc-button>
+        <button @click=${this._createAttachment}><md-icon>attach_file_add</md-icon>${TermsUtil.tButton('create')}</button>
       </div>
     `
   }