@things-factory/meta-ui 7.0.1-alpha.36 → 7.0.1-alpha.38

package/dist-client/utils/meta-ui-util.js

@@ -1,6 +1,6 @@
 import '@material/web/icon/icon.js';
 import moment from 'moment-timezone';
-import { css, html, render } from 'lit';
+import { css, html, render, nothing } from 'lit';
 import { getEditor, getRenderer } from '@operato/data-grist';
 import { getValueGenerators } from '@operato/time-calculator';
 import { ScrollbarStyles, CommonGristStyles, CommonButtonStyles, ButtonContainerStyles } from '@operato/styles';
@@ -1753,27 +1753,14 @@ export class MetaUiUtil {
     static getGristPersonalizedStyles() {
         return [
             css `
-        #grist-personal {
-          padding: 5px 6px 0px 0px;
-          margin: 0px;
-          user-select: none;
-          align-self: end;
-          height: var(--padding-narrow);
-        }
-
-        #grist-personal > md-icon {
-          --md-icon-size: 16px;
-          padding: 2px;
-          margin: 0;
-          background-color: rgba(var(--secondary-color-rgb), 0.8);
-          color: var(--theme-white-color);
-          vertical-align: bottom;
+        [slot='setting'] {
+          --md-icon-size: 18px;
+          color: rgba(var(--secondary-color-rgb), 0.8);
           cursor: pointer;
-          border-radius: 50%;
         }
 
-        #grist-personal > md-icon:hover {
-          background-color: var(--primary-color);
+        [slot='setting']:hover {
+          color: var(--primary-color);
         }
       `
         ];
@@ -2848,45 +2835,43 @@ export class MetaUiUtil {
         let recordCreationCallback = pageView.recordCreationCallback;
         let useSortButton = JSON.parse((pageView.etcConfig || {}).use_grid_sort_button || 'false');
         useFilterAddButton = useFilterAddButton === true && useAddButton === true;
-        return useFilterForm == false
+        return html `
+      ${useFilterForm
             ? html `
-          <div slot="headroom" style="flex-direction: column;padding: 0px;border-top: none;box-shadow: none;background: none;align-items: stretch;">
-            ${this.getGridColumnPersonalizeButton(pageView)}
-          </div>
-        `
-            : html `
-          <div slot="headroom" style="flex-direction: column;padding: 0px;border-top: none;box-shadow: none;background: none;align-items: stretch;">
-            <div slot="headroom">
-              <div id="filters"><ox-filters-form></ox-filters-form></div>
-              ${useSortButton
+            <div slot="headroom" style="flex-direction: column;padding: 0px;border-top: none;box-shadow: none;background: none;align-items: stretch;">
+              <div slot="headroom">
+                <div id="filters"><ox-filters-form></ox-filters-form></div>
+                ${useSortButton
                 ? html `
-                    <div id="sorters">
-                      <md-icon
-                        @click=${e => {
+                      <div id="sorters">
+                        <md-icon
+                          @click=${e => {
                     const target = e.currentTarget;
                     target.nextElementSibling.open({
                         right: 0,
                         top: target.offsetTop + target.offsetHeight
                     });
                 }}
-                        >sort</md-icon
-                      >
-                      <ox-popup id="sorter-control">
-                        <ox-sorters-control></ox-sorters-control>
-                      </ox-popup>
-                    </div>
-                  `
+                          >sort</md-icon
+                        >
+                        <ox-popup id="sorter-control">
+                          <ox-sorters-control></ox-sorters-control>
+                        </ox-popup>
+                      </div>
+                    `
                 : html ``}
-              ${MetaUiUtil.getGridViewOption(pageView)}
-              <ox-record-creator id="add" ?hidden="${!useFilterAddButton}" .callback=${recordCreationCallback}>
-                <button style="display: flex; justify-content: center">
-                  <md-icon>add</md-icon>
-                </button>
-              </ox-record-creator>
+                ${MetaUiUtil.getGridViewOption(pageView)}
+                <ox-record-creator id="add" ?hidden="${!useFilterAddButton}" .callback=${recordCreationCallback}>
+                  <button style="display: flex; justify-content: center">
+                    <md-icon>add</md-icon>
+                  </button>
+                </ox-record-creator>
+              </div>
             </div>
-            ${this.getGridColumnPersonalizeButton(pageView)}
-          </div>
-        `;
+          `
+            : nothing}
+      ${this.getGridColumnPersonalizeButton(pageView)}
+    `;
     }
     /**
      * @description 그리드 컬럼 개인화 팝업 버튼을 그린다.
@@ -2900,17 +2885,16 @@ export class MetaUiUtil {
         }
         if (pageView.is_activity !== true) {
             return html `
-        <div id="grist-personal">
-          <md-icon
-            @click=${e => {
+        <md-icon
+          slot="setting"
+          @click=${e => {
                 let element = MetaApi.createCustomElement('personal-column-selector', 'personal-column-selector');
-                element.configGrist = e.currentTarget.parentElement.parentElement.parentElement;
+                element.configGrist = e.currentTarget.closest('ox-grist');
                 element.menuId = pageView.menuId;
                 MetaApi.openPopupByElement(TermsUtil.tTitle('grid-column-personalize'), 'midium', element, false);
             }}
-            >settings</md-icon
-          >
-        </div>
+          >tune</md-icon
+        >
       `;
         }
         else {