@operato/data-grist 0.3.8 → 0.3.15

package/src/record-view/record-view.ts

@@ -1,66 +1,95 @@
 import '@material/mwc-icon'
 import './record-view-body'
+import '@operato/input/ox-input-file.js'
 
-import { ColumnConfig, GristRecord } from '../types'
-import { LitElement, css, html } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { ZERO_RECORD } from '../configure/zero-config'
+import { ScrollbarStyles } from '@operato/styles'
+
+import { ZERO_CONFIG, ZERO_RECORD } from '../configure/zero-config'
+import { ColumnConfig, GristConfig, GristRecord } from '../types'
 
 @customElement('ox-record-view')
 export class RecordView extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-    }
-
-    ox-record-view-body {
-      flex: 1;
-    }
-
-    [footer] {
-      display: flex;
-      text-align: right;
-      background-color: var(--record-view-footer-background);
-      box-shadow: var(--context-toolbar-shadow-line);
-      height: var(--record-view-footer-height);
-    }
-
-    [footer] button {
-      flex: 1;
-      background-color: transparent;
-      border: var(--record-view-footer-button-border);
-      border-width: var(--record-view-footer-button-border-width);
-      height: var(--record-view-footer-button-height);
-      color: var(--record-view-footer-button-color);
-      font-size: var(--record-view-footer-button-font);
-      line-height: 3;
-    }
-
-    [footer] button * {
-      vertical-align: middle;
-    }
-
-    [footer] button mwc-icon {
-      margin-top: -3px;
-      margin-right: 5px;
-      font-size: var(--record-view-footer-iconbutton-size);
-    }
-
-    [footer] button[ok] {
-      background-color: var(--record-view-footer-focus-background);
-    }
-  `
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--record-view-background-color);
+      }
+
+      ox-record-view-body {
+        flex: 1;
+      }
+
+      [content] {
+        flex: 1;
+
+        display: block;
+        overflow-y: auto;
+      }
+
+      [thumbnail] {
+        max-height: 50%;
+        overflow: hidden;
+
+        display: flex;
+        align-content: center;
+        justify-content: center;
+      }
+
+      ox-input-file {
+        width: 100%;
+      }
+
+      [footer] {
+        display: flex;
+        text-align: right;
+        background-color: var(--record-view-footer-background);
+        box-shadow: var(--context-toolbar-shadow-line);
+      }
+
+      [footer] button {
+        flex: 1;
+        background-color: transparent;
+        border: var(--record-view-footer-button-border);
+        border-width: var(--record-view-footer-button-border-width);
+        color: var(--record-view-footer-button-color);
+        font-size: var(--record-view-footer-button-font);
+        line-height: 3;
+      }
 
+      [footer] button * {
+        vertical-align: middle;
+      }
+
+      [footer] button mwc-icon {
+        margin-top: -3px;
+        margin-right: 5px;
+        font-size: var(--record-view-footer-iconbutton-size);
+      }
+
+      [footer] button[ok] {
+        background-color: var(--record-view-footer-focus-background);
+      }
+    `
+  ]
+
+  @property({ type: Object }) config: GristConfig = ZERO_CONFIG
   @property({ type: Array }) columns: ColumnConfig[] = []
   @property({ type: Object }) record: GristRecord = ZERO_RECORD
   @property({ type: Number }) rowIndex: number = -1
 
   render() {
     return html`
-      <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
-      </ox-record-view-body>
+      <div content>
+        <div thumbnail>${this.renderThumbnail()}</div>
+        <ox-record-view-body .columns=${this.columns} .record=${this.record} .rowIndex=${this.rowIndex}>
+        </ox-record-view-body>
+      </div>
       <div footer>
         <button @click=${this.onReset.bind(this)}><mwc-icon>refresh</mwc-icon>Reset</button>
         <button @click=${this.onCancel.bind(this)}><mwc-icon>clear</mwc-icon>Cancel</button>
@@ -69,6 +98,36 @@ export class RecordView extends LitElement {
     `
   }
 
+  renderThumbnail() {
+    return html``
+
+    // const { thumbnail } = this.config.list
+    // const thumbnailColumn = thumbnail ? this.columns.find(column => column.name == thumbnail) : undefined
+    // const dirtyFields = this.record['__dirtyfields__'] || {}
+
+    // if (thumbnailColumn?.record.editable) {
+    //   return html`
+    //     <ox-input-file
+    //       name="image"
+    //       accept="*/*"
+    //       hide-filelist
+    //       @change=${async (e: CustomEvent) => {
+    //         // await uploader(e.detail, this.record, this.rowIndex)
+    //       }}
+    //     ></ox-input-file>
+    //     <ox-grid-field
+    //       .rowIndex=${this.rowIndex}
+    //       .column=${thumbnailColumn}
+    //       .record=${this.record}
+    //       .value=${this.record[thumbnail!]}
+    //       ?dirty=${!!dirtyFields[thumbnail!]}
+    //     ></ox-grid-field>
+    //   `
+    // } else {
+    //   return html``
+    // }
+  }
+
   onReset() {
     this.dispatchEvent(
       new CustomEvent('reset', {

package/src/renderers/image-renderer.ts

@@ -1,12 +1,15 @@
-import { FieldRenderer } from '../types'
 import { html } from 'lit'
 
-export const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {
-  if (!value) return html``
+import { FieldRenderer } from '../types'
 
+const IMAGE_FALLBACK = new URL('../../../assets/images/no-image.png', import.meta.url).href
+
+export const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {
   let src: string
 
-  if (typeof value === 'string') {
+  if (!value) {
+    src = IMAGE_FALLBACK
+  } else if (typeof value === 'string') {
     src = value
   } else {
     src = URL.createObjectURL(value)
@@ -15,5 +18,11 @@ export const ImageRenderer: FieldRenderer = (value, column, record, rowIndex, fi
 
   const { width, height } = column.record.options || {}
 
-  return html` <img src=${src} alt="upload image" width=${width} height=${height} />`
+  return html` <img
+    src=${src}
+    width=${width}
+    height=${height}
+    style="max-width: 100%;"
+    onerror="this.src !== '${IMAGE_FALLBACK}' && (this.src = '${IMAGE_FALLBACK}')"
+  />`
 }

package/src/types.ts

@@ -135,7 +135,6 @@ export type FieldEditor = (
   rowIndex: number,
   field: DataGridField
 ) => Element
-export type FieldThumbnailRenderer = (record: GristRecord, rowIndex: number) => TemplateResult | string | void
 export type FilterSelectRenderer = (column: ColumnConfig, owner: Element) => TemplateResult | string | void
 
 export type GristEventHandlerSet = {
@@ -144,7 +143,7 @@ export type GristEventHandlerSet = {
 }
 
 export type ListConfig = {
-  thumbnail: FieldThumbnailRenderer
+  thumbnail?: string
   fields: string[]
   details: string[]
 }

package/themes/grist-theme.css

@@ -3,7 +3,6 @@ body {
   --grid-container-border-width: 1px 0;
 
   --grist-background-color: var(--main-section-background-color);
-  --grist-padding: var(--padding-wide);
   --grist-title-margin: 0 0 0 10px;
   --grist-title-border: none;
   --grist-title-font: bold 16px var(--theme-font);
@@ -137,38 +136,19 @@ body {
   --record-view-edit-border-bottom: 2px solid var(--primary-color);
   --record-view-item-padding: var(--padding-default);
 
-  --record-view-footer-height: 36px;
   --record-view-footer-background: #586272;
   --record-view-footer-button-border: 1px solid rgba(0, 0, 0, 0.3);
   --record-view-footer-button-border-width: 0 0 0 1px;
-  --record-view-footer-button-height: 36px;
   --record-view-footer-button-font: 17px;
   --record-view-footer-button-color: var(--theme-white-color);
-  --record-view-footer-iconbutton-size: var(--fontsize-large);
+  --record-view-footer-iconbutton-size: 35px;
   --record-view-footer-focus-background: var(--primary-color);
 }
 
 @media only screen and (max-width: 460px) {
   body {
-    --grist-padding: 0;
+    --record-view-label-font: bold 15px/32px var(--theme-font);
     --record-view-font: normal 15px/32px var(--theme-font);
-    --record-view-footer-height: 50px;
-    --record-view-footer-button-height: var(--record-view-footer-height);
-    --record-view-footer-iconbutton-size: 35px;
-    --record-view-footer-iconbutton-margin: -2px;
-    --record-view-footer-iconbutton-display: block;
-  }
-}
-
-@media (min-width: 461px) and (max-width: 1024px) {
-  body {
-    --grist-padding: 0;
-
-    --record-view-footer-height: 50px;
-    --record-view-footer-button-height: var(--record-view-footer-height);
-    --record-view-footer-iconbutton-size: 35px;
-    --record-view-footer-iconbutton-margin: -2px;
-    --record-view-footer-iconbutton-display: block;
   }
 }