@operato/app 7.0.53 → 7.0.56

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/app",
   "description": "WebApplication production supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "7.0.53",
+  "version": "7.0.56",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -136,17 +136,17 @@
     "@graphql-tools/delegate": "^10.0.1",
     "@graphql-tools/wrap": "^8.5.0",
     "@material/web": "^1.5.0",
-    "@operato/attachment": "^7.0.53",
-    "@operato/data-grist": "^7.0.53",
-    "@operato/font": "^7.0.53",
-    "@operato/form": "^7.0.53",
+    "@operato/attachment": "^7.0.56",
+    "@operato/data-grist": "^7.0.56",
+    "@operato/font": "^7.0.56",
+    "@operato/form": "^7.0.56",
     "@operato/graphql": "^7.0.53",
     "@operato/i18n": "^7.0.53",
-    "@operato/input": "^7.0.53",
-    "@operato/layout": "^7.0.53",
-    "@operato/property-editor": "^7.0.53",
-    "@operato/shell": "^7.0.53",
-    "@operato/styles": "^7.0.53",
+    "@operato/input": "^7.0.56",
+    "@operato/layout": "^7.0.56",
+    "@operato/property-editor": "^7.0.56",
+    "@operato/shell": "^7.0.56",
+    "@operato/styles": "^7.0.56",
     "@operato/utils": "^7.0.53",
     "cm6-graphql": "^0.0.14",
     "codemirror": "^6.0.1",
@@ -188,5 +188,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "1b56b8daa9f91c79055a41fccd9a072358fee823"
+  "gitHead": "739d3191f3ceec33de0600958d434b9207864274"
 }

package/src/property-editor/ox-property-editor-resource-object.ts

@@ -82,12 +82,15 @@ export class OxPropertyEditorResourceObject extends OxPropertyEditor {
         ? {
             ...(columns || [])
               .map((field: any) => field.name)
-              .reduce((obj: { [field: string]: any }, fieldName: string) => {
-                return (obj = {
-                  ...obj,
-                  [fieldName]: selected[fieldName]
-                })
-              }, {} as { [field: string]: any }),
+              .reduce(
+                (obj: { [field: string]: any }, fieldName: string) => {
+                  return (obj = {
+                    ...obj,
+                    [fieldName]: selected[fieldName]
+                  })
+                },
+                {} as { [field: string]: any }
+              ),
             [idField]: selected[idField],
             [nameField]: selected[nameField],
             [descriptionField]: selected[descriptionField]

package/src/selector/ox-selector-resource-object.ts

@@ -18,12 +18,12 @@ import { client, gqlContext } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { closePopup } from '@operato/popup'
 import { adjustFilters, isMobileDevice } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonHeaderStyles } from '@operato/styles'
 
 @customElement('ox-selector-resource-object')
 export class OxSelectorResourceObject extends LitElement {
   static styles = [
-    ButtonContainerStyles,
+    CommonHeaderStyles,
     css`
       :host {
         display: flex;
@@ -39,14 +39,12 @@ export class OxSelectorResourceObject extends LitElement {
         flex: 1;
       }
 
-      #filters {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+      .header {
+        grid-template-areas: 'filters actions';
       }
 
-      #filters > * {
-        padding: var(--padding-default) var(--spacing-large);
+      [filler] {
+        margin-left: auto;
       }
     `
   ]
@@ -88,18 +86,22 @@ export class OxSelectorResourceObject extends LitElement {
         .fetchHandler=${this.fetchHandler.bind(this)}
         .selectedRecords=${this.selectedRecords}
       >
-        <div id="filters" slot="headroom">
-          <ox-filters-form autofocus without-search></ox-filters-form>
+        <div class="header" slot="headroom">
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
+          </div>
         </div>
       </ox-grist>
 
-      <div class="button-container" style="margin-left: unset;">
+      <div class="footer">
         <button @click=${this.onEmpty.bind(this)}>
           <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
         </button>
+
         <div filler></div>
+
         <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
-        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
+        <button @click=${this.onConfirm.bind(this)} done><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }