@operato/context 2.0.0-alpha.9 → 2.0.0-alpha.92

package/src/tools/ox-page-action-overlay-template.ts

@@ -1,11 +1,11 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers'
 
 import { store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
 import { sleep } from '@operato/utils'
 
 import { ContextToolbarOverlayStyle } from '../styles/ox-context-toolbar-overlay-style.js'
@@ -15,34 +15,23 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
   static get styles() {
     return [
       ScrollbarStyles,
+      ButtonContainerStyles,
       ContextToolbarOverlayStyle,
       css`
         :host {
           display: flex;
           flex-wrap: wrap;
-          gap: var(--margin-narrow);
+          gap: var(--padding-narrow);
         }
         :host *:focus {
           outline: none;
         }
 
-        mwc-button {
+        button {
           background-color: var(--main-section-background-color);
           border-radius: var(--context-action-bar-more-button-border-radius);
         }
 
-        [danger] {
-          --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-          --mdc-button-outline-color: var(--mdc-danger-button-outline-color);
-        }
-
-        @media screen and (max-width: 460px) {
-          mwc-button {
-            --mdc-button-horizontal-padding: var(--padding-default);
-            border-radius: 4px;
-          }
-        }
-
         @keyframes rotate {
           from {
             transform: rotate(0deg);
@@ -61,47 +50,49 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
     return html`
       ${this.actions.map(($action, idx) => {
         let { type, title, icon, action, select, href, emphasis } = $action as any
-        let { outlined, raised, dense, danger } = emphasis || {}
+        let { outlined, raised, dense, danger, filled } = emphasis || {}
 
         return type == 'text'
           ? html` <span>${title}</span> `
           : type == 'select' || (select && select.length > 0)
-          ? html`
-              <select @change=${action}>
-                ${select.map((option: any) => html` <option>${option}</option> `)}
-              </select>
-            `
-          : type == 'link'
-          ? html` <a href=${href}>${title}</a> `
-          : html`
-              <mwc-button
-                label=${title}
-                icon=${icon || 'done_all'}
-                ?dense=${dense}
-                ?raised=${raised}
-                ?outlined=${outlined}
-                ?danger=${danger}
-                @click=${async (e: MouseEvent) => {
-                  /* all actions should be bloked for a second */
-                  const button = e.currentTarget as any
-                  button.icon = 'rotate_right'
-                  button.setAttribute('working', true)
-                  button.disabled = true
+            ? html`
+                <select @change=${action}>
+                  ${select.map((option: any) => html` <option>${option}</option> `)}
+                </select>
+              `
+            : type == 'link'
+              ? html` <a href=${href}>${title}</a> `
+              : html`
+                  <button
+                    ?dense=${dense}
+                    ?raised=${raised}
+                    ?outlined=${outlined}
+                    ?danger=${danger}
+                    ?filled=${filled}
+                    @click=${async (e: MouseEvent) => {
+                      /* all actions should be bloked for a second */
+                      const button = e.currentTarget as any
+                      button.icon = 'rotate_right'
+                      button.setAttribute('working', true)
+                      button.disabled = true
 
-                  try {
-                    action()
-                  } finally {
-                    await sleep(1000)
-                    button.disabled = false
-                    /* because icon can be changed after sleep, don't use closure 'icon'. */
-                    button.icon = this.actions[idx]?.icon || 'done_all'
-                    button.removeAttribute('working')
+                      try {
+                        action()
+                      } finally {
+                        await sleep(1000)
+                        button.disabled = false
+                        /* because icon can be changed after sleep, don't use closure 'icon'. */
+                        button.icon = this.actions[idx]?.icon || 'done_all'
+                        button.removeAttribute('working')
 
-                    window.history.back()
-                  }
-                }}
-              ></mwc-button>
-            `
+                        window.history.back()
+                      }
+                    }}
+                  >
+                    <md-icon>${icon || 'done_all'}</md-icon>
+                    ${title}
+                  </button>
+                `
       })}
     `
   }

package/src/tools/ox-page-title-bar.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-search.js'
 
 import { css, html, LitElement } from 'lit'
@@ -22,7 +22,7 @@ export class PageTitleBar extends connect(store)(LitElement) {
         --help-icon-opacity: 0.2;
         --help-icon-size: 20px;
 
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
 
         --input-search-padding: var(--padding-narrow);
         --input-search-font: normal 14px var(--theme-font);
@@ -92,10 +92,8 @@ export class PageTitleBar extends connect(store)(LitElement) {
     }
 
     return html`
-      ${title ? html` <div titler>${icon ? html`<mwc-icon>${icon}</mwc-icon>&nbsp;` : html``}${text}</div> ` : html``}
-      ${help && title
-        ? html` &nbsp;<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon> `
-        : html``}
+      ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon>&nbsp;` : html``}${text}</div> ` : html``}
+      ${help && title ? html` &nbsp;<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}
       ${searchable || filterable
         ? html`
             <div search>
@@ -110,9 +108,9 @@ export class PageTitleBar extends connect(store)(LitElement) {
                   ></ox-input-search>`
                 : html``}
               ${!title && help && searchable
-                ? html`<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon>`
+                ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`
                 : html``}
-              ${filterable ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler()}>unfold_more</mwc-icon>` : html``}
+              ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>unfold_more</md-icon>` : html``}
             </div>
           `
         : html``}

package/src/tools/ox-title-bar.ts

@@ -1,4 +1,4 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/input/ox-input-search.js'
 
 import { css, html, LitElement } from 'lit'
@@ -21,7 +21,7 @@ export class TitleBar extends connect(store)(LitElement) {
         --help-icon-opacity: 0.2;
         --help-icon-size: 20px;
 
-        --mdc-icon-size: 20px;
+        --md-icon-size: 20px;
 
         --input-search-padding: 7px;
         --input-search-border-bottom: none;
@@ -88,10 +88,8 @@ export class TitleBar extends connect(store)(LitElement) {
     }
 
     return html`
-      ${title ? html` <div titler>${icon ? html`<mwc-icon>${icon}</mwc-icon>&nbsp;` : html``}${text}</div> ` : html``}
-      ${help && title
-        ? html` &nbsp;<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon> `
-        : html``}
+      ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon>&nbsp;` : html``}${text}</div> ` : html``}
+      ${help && title ? html` &nbsp;<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}
       ${searchable || filterable
         ? html`
             <div search>
@@ -106,9 +104,9 @@ export class TitleBar extends connect(store)(LitElement) {
                   ></ox-input-search>`
                 : html``}
               ${!title && help && searchable
-                ? html`<mwc-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</mwc-icon>`
+                ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`
                 : html``}
-              ${filterable ? html`<mwc-icon @click=${(e: MouseEvent) => filterHandler()}>tune</mwc-icon>` : html``}
+              ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>tune</md-icon>` : html``}
             </div>
           `
         : html``}

package/stories/ox-context-page-toolbar-select-buttons.stories.ts

@@ -0,0 +1,141 @@
+import '@material/web/icon/icon.js'
+import '../src/layouts/ox-context-page-toolbar.js'
+import '../src/tools/ox-page-action-context-bar.js'
+import '@operato/input/ox-input-select-buttons.js'
+import { CommonHeaderStyles } from '@operato/styles'
+import { TOOL_POSITION } from '@operato/layout'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-page-toolbar select buttons',
+  component: 'ox-context-page-toolbar',
+  argTypes: {
+    label: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+}
+
+const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/material-theme.css" rel="stylesheet" />
+  
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+
+  <style>
+    body {
+      background-color: white;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div style="height:600px;">
+    <div class="header">
+      <div class="title">
+        ${label}
+      </div>
+
+      <div class="filters">
+        <label>Filter-X</label><input type="text" name="name"></input>
+        <ox-input-select-buttons
+        @change=${(e: Event) => {
+          console.log((e.target as HTMLInputElement).value)
+        }}
+        name="wearables"
+        .value=${'Gloves'}
+        .options=${[
+          { display: 'SHOOSE', value: 'Shoose' },
+          { display: 'CHOTHES', value: 'Clothes' },
+          { display: 'GLOVES', value: 'Gloves' }
+        ]}
+        multiple
+      ></ox-input-select-buttons>
+      </div>
+
+      <ox-context-page-toolbar class="actions" 
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy',
+                emphasis: {
+                  outlined: true
+                }
+              },
+              {
+                title: 'edit',
+                action: () => {},
+                icon: 'content_copy',
+                emphasis: {
+                  outlined: true
+                }
+              },
+              {
+                title: 'hoppaang',
+                action: () => {},
+                icon: '',
+                emphasis: {
+                  outlined: true
+                }
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete',
+                emphasis: {
+                  danger: true,
+                  filled: true
+                }
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: false
+      }}
+        
+      }> </ox-context-page-toolbar>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}

package/stories/ox-context-page-toolbar-select.stories.ts

@@ -0,0 +1,99 @@
+import '@material/web/icon/icon.js'
+import '../src/layouts/ox-context-page-toolbar.js'
+import '../src/tools/ox-page-action-context-bar.js'
+import { CommonHeaderStyles } from '@operato/styles'
+import { TOOL_POSITION } from '@operato/layout'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-page-toolbar-select',
+  component: 'ox-context-page-toolbar',
+  argTypes: {
+    label: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+}
+
+const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/material-theme.css" rel="stylesheet" />
+
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+
+  <style>
+    body {
+      background-color: white;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div style="height:600px;">
+    <div class="header">
+      <div class="title">
+        ${label}
+      </div>
+
+      <div class="filters">
+        <label>Filter</label><input type="text"></input>
+      </div>
+
+      <ox-context-page-toolbar class="actions" 
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'smile',
+                action: () => {},
+                select: ['', 'delete', 'hahaha', 'hohoho']
+              },
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: false
+      }}
+        
+      }> </ox-context-page-toolbar>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}

package/stories/ox-context-page-toolbar.stories.ts

@@ -0,0 +1,107 @@
+import '@material/web/icon/icon.js'
+import '../src/layouts/ox-context-page-toolbar.js'
+import '../src/tools/ox-page-action-context-bar.js'
+import { CommonHeaderStyles } from '@operato/styles'
+import { TOOL_POSITION } from '@operato/layout'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-page-toolbar',
+  component: 'ox-context-page-toolbar',
+  argTypes: {
+    label: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+}
+
+const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/material-theme.css" rel="stylesheet" />
+
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"  rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
+  
+  <style>
+    body {
+      background-color: white;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div style="height:600px;">
+    <div class="header">
+      <div class="title">
+        ${label}
+      </div>
+
+      <div class="filters">
+        <label>Filter</label><input type="text"></input>
+      </div>
+
+      <ox-context-page-toolbar class="actions" 
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          position: TOOL_POSITION.CENTER,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete',
+                emphasis: {
+                  danger: true
+                }
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: false
+      }}
+        
+      }> </ox-context-page-toolbar>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}