@operato/context 2.0.0-alpha.99 → 2.0.0-beta.0

package/src/tools/ox-page-action-context-bar.ts

@@ -1,7 +1,8 @@
 import '@material/web/icon/icon.js'
+import '@material/web/chips/assist-chip.js'
 import './ox-page-action-overlay-template.js'
 
-import { css, html, LitElement, PropertyValues } from 'lit'
+import { css, html, LitElement, nothing, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import throttle from 'lodash-es/throttle'
 import { connect } from 'pwa-helpers/connect-mixin'
@@ -19,35 +20,52 @@ export class PageActionContextBar extends connect(store)(LitElement) {
       css`
         :host {
           display: flex;
-          overflow: hidden;
-          gap: var(--padding-narrow);
         }
 
         :host *:focus {
           outline: none;
         }
 
+        [container] {
+          flex: 1;
+
+          display: flex;
+          overflow: hidden;
+          gap: var(--spacing-small);
+          padding: 2px; /* only for button shadow */
+          align-items: center;
+        }
+
         [more] {
           position: absolute;
           top: 0;
           right: 0;
-          background-color: var(--context-action-bar-more-button-background-color);
+          background-color: var(--md-sys-color-inverse-surface);
           box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);
-          padding: var(--context-action-bar-more-button-padding);
-          color: var(--context-action-bar-more-button-color);
-          padding: 11px 10px;
+          padding: var(--context-action-bar-more-button-padding, 11px 10px);
+          color: var(--md-sys-color-inverse-on-surface);
           font-size: 2rem;
         }
 
         select,
         input[type='text'] {
-          background-color: var(--button-background-color, #fafbfc);
-          border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-          border-radius: var(--button-border-radius);
-          padding: 0 var(--padding-narrow);
+          box-sizing: border-box;
+          padding: 0 var(--spacing-small);
+          height: var(--form-element-height-medium);
+          border: 1px solid var(--md-sys-color-outline);
+          border-radius: var(--md-sys-shape-corner-small);
+          background-color: var(--md-sys-color-on-primary);
+          font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+          color: var(--md-sys-color-on-primary-container);
+          outline: none;
+        }
+
+        md-icon[working] {
+          animation: rotate 1s linear infinite;
+        }
 
-          font-size: var(--fontsize-default);
-          color: var(--secondary-color);
+        md-assist-chip[icon-only] {
+          --md-assist-chip-trailing-space: 0;
         }
 
         @media screen and (max-width: 460px) {
@@ -111,17 +129,21 @@ export class PageActionContextBar extends connect(store)(LitElement) {
   }
 
   render() {
-    return html`
-      ${this.renderActions()}
-      ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}
-    `
+    return this.actions.length > 0
+      ? html`
+          <div container>
+            ${this.renderActions()}
+            ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}
+          </div>
+        `
+      : nothing
   }
 
   renderActions() {
     return html`
       ${this.actions.map(($action, idx) => {
         let { type, title, icon, action, select, href, emphasis } = $action as any
-        let { outlined, raised, dense, danger, filled } = emphasis || {}
+        let { raised, danger } = emphasis || {}
 
         return type == 'text'
           ? html` <span @click=${action}>${title}</span> `
@@ -133,37 +155,43 @@ export class PageActionContextBar extends connect(store)(LitElement) {
               `
             : type == 'link'
               ? html` <a href=${href}>${title}</a> `
-              : type == 'icon'
-                ? html`<md-icon @click=${action}>${icon}</md-icon>`
-                : 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 {
-                          await 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')
+              : html`
+                  <md-assist-chip
+                    ?icon-only=${type == 'icon' || !title}
+                    ?elevated=${raised}
+                    ?danger=${danger}
+                    label=${title}
+                    @click=${async (e: MouseEvent) => {
+                      /* all actions should be bloked for a second */
+                      const button = e.currentTarget as any
+                      const iconElement = button.querySelector('[slot="icon"]')
+                      if (iconElement) {
+                        icon = this.actions[idx].icon
+                        this.actions[idx].icon = 'refresh'
+                        this.requestUpdate()
+                        iconElement.setAttribute('working', true)
+                      }
+                      button.disabled = true
+
+                      try {
+                        await action()
+                      } finally {
+                        await sleep(1000) /* waiting for additionla 1 second */
+
+                        /* because icon can be changed after sleep, don't use closure 'icon'. */
+                        if (iconElement) {
+                          this.actions[idx].icon = icon
+                          this.requestUpdate()
+                          iconElement.removeAttribute('working')
                         }
-                      }}
-                    >
-                      <md-icon>${icon || 'done_all'}</md-icon>
-                      ${title}
-                    </button>
-                  `
+
+                        button.disabled = false
+                      }
+                    }}
+                  >
+                    <md-icon slot="icon">${this.actions[idx].icon}</md-icon>
+                  </md-assist-chip>
+                `
       })}
     `
   }

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

@@ -1,4 +1,5 @@
 import '@material/web/icon/icon.js'
+import '@material/web/chips/assist-chip.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
@@ -21,15 +22,20 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
         :host {
           display: flex;
           flex-wrap: wrap;
-          gap: var(--padding-narrow);
+          gap: var(--spacing-small);
+          align-items: center;
         }
+
         :host *:focus {
           outline: none;
         }
 
-        button {
-          background-color: var(--main-section-background-color);
-          border-radius: var(--context-action-bar-more-button-border-radius);
+        md-icon[working] {
+          animation: rotate 1s linear infinite;
+        }
+
+        md-assist-chip[icon-only] {
+          --md-assist-chip-trailing-space: 0;
         }
 
         @keyframes rotate {
@@ -50,7 +56,7 @@ 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, filled } = emphasis || {}
+        let { raised, danger } = emphasis || {}
 
         return type == 'text'
           ? html` <span>${title}</span> `
@@ -63,35 +69,37 @@ export class PageActionOverlayTemplate extends connect(store)(LitElement) {
             : type == 'link'
               ? html` <a href=${href}>${title}</a> `
               : html`
-                  <button
-                    ?dense=${dense}
-                    ?raised=${raised}
-                    ?outlined=${outlined}
+                  <md-assist-chip
+                    ?icon-only=${type == 'icon' || !title}
+                    ?elevated=${raised}
                     ?danger=${danger}
-                    ?filled=${filled}
+                    label=${title}
                     @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)
+                      const iconElement = button.querySelector('[slot="icon"]')
+                      if (iconElement) {
+                        iconElement.textContent = 'refresh'
+                        iconElement.setAttribute('working', true)
+                      }
                       button.disabled = true
 
                       try {
-                        action()
+                        await 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')
+                        await sleep(1000) /* waiting for additionla 1 second */
 
-                        window.history.back()
+                        /* because icon can be changed after sleep, don't use closure 'icon'. */
+                        if (iconElement) {
+                          iconElement.textContent = this.actions[idx]?.icon
+                          iconElement.removeAttribute('working')
+                        }
+                        button.disabled = false
                       }
                     }}
                   >
-                    <md-icon>${icon || 'done_all'}</md-icon>
-                    ${title}
-                  </button>
+                    <md-icon slot="icon">${icon || 'done_all'}</md-icon>
+                  </md-assist-chip>
                 `
       })}
     `

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

@@ -17,20 +17,21 @@ export class PageTitleBar extends connect(store)(LitElement) {
         display: flex;
         align-items: center;
 
-        --help-icon-color: var(--primary-text-color);
-        --help-icon-hover-color: var(--secondary-text-color);
+        --help-icon-color: var(--md-sys-color-on-surface);
+        --help-icon-hover-color: var(--md-sys-color-on-surface-variant);
         --help-icon-opacity: 0.2;
         --help-icon-size: 20px;
 
         --md-icon-size: 20px;
 
-        --input-search-padding: var(--padding-narrow);
+        --input-search-padding: var(--spacing-small);
         --input-search-font: normal 14px var(--theme-font);
       }
 
       [titler] {
         display: flex;
-        padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);
+        padding: var(--spacing-small);
+        padding-top: var(--spacing-medium);
         font: var(--context-toolbar-title);
         color: var(--title-text-color);
       }
@@ -52,7 +53,7 @@ export class PageTitleBar extends connect(store)(LitElement) {
       }
 
       [search] [help] {
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
       }
 
       [search] {
@@ -61,11 +62,11 @@ export class PageTitleBar extends connect(store)(LitElement) {
         align-items: center;
 
         align-self: center;
-        color: var(--secondary-color);
+        color: var(--md-sys-color-on-secondary-container);
         background-color: var(--opacity-light-color);
-        border-radius: 999em;
+        border-radius: var(--md-sys-shape-corner-full);
         margin-left: auto;
-        padding: 0 10px;
+        padding: 0 var(--spacing-medium);
       }
 
       [search] > * {

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

@@ -16,15 +16,14 @@ export class TitleBar extends connect(store)(LitElement) {
         display: flex;
         align-items: center;
 
-        --help-icon-color: #fff;
-        --help-icon-hover-color: #fff;
+        --help-icon-color: var(--md-sys-color-primary);
+        --help-icon-hover-color: var(--md-sys-color-primary);
         --help-icon-opacity: 0.2;
         --help-icon-size: 20px;
 
         --md-icon-size: 20px;
 
-        --input-search-padding: 7px;
-        --input-search-border-bottom: none;
+        --input-search-padding: var(--spacing-medium);
         --input-search-focus-border-bottom: none;
         --input-search-font: normal 16px var(--theme-font);
       }
@@ -50,25 +49,27 @@ export class TitleBar extends connect(store)(LitElement) {
         color: var(--help-icon-hover-color);
       }
 
-      [search] [help] {
-        color: var(--secondary-color);
-      }
-
       [search] {
         display: flex;
         justify-content: space-between;
         align-items: center;
 
         align-self: center;
-        color: var(--secondary-color);
-        background-color: var(--opacity-light-color);
-        border-radius: 999em;
-        padding: 0 10px;
+        color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-on-primary);
+        border-radius: var(--md-sys-shape-corner-full);
+        padding: 0 var(--spacing-medium);
       }
 
       [search] > * {
         align-self: center;
       }
+
+      ox-input-search {
+        color: var(--md-sys-color-primary);
+        background-color: var(--md-sys-color-on-primary);
+        border-radius: var(--md-sys-shape-corner-full);
+      }
     `
   ]
 

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

@@ -8,12 +8,14 @@ import { TOOL_POSITION } from '@operato/layout'
 import '@operato/styles'
 
 import { css, html, render, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
   title: 'ox-context-page-toolbar select buttons',
   component: 'ox-context-page-toolbar',
   argTypes: {
-    label: { control: 'string' }
+    label: { control: 'string' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -25,112 +27,141 @@ interface Story<T> {
 
 interface ArgTypes {
   label?: string
+  theme?: 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">
+const Template: Story<ArgTypes> = ({ label = '', theme = 'light' }: ArgTypes) => html`
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.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>
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
   <style>
-    body {
-      background-color: white;
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+
+      padding: 20px;
     }
 
-    ${CommonHeaderStyles.cssText}
+    ox-buttons-radio {
+      padding: 20px;
+    }
   </style>
 
-  <div style="height:600px;">
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
     <div class="header">
-      <div class="title">
-        ${label}
-      </div>
+      <div class="title">${label}</div>
 
       <div class="filters">
-        <label>Filter-X</label><input type="text" name="name"></input>
+        <label>Filter-X</label><input type="text" name="name" />
         <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>
+          @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
+      <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
+                  }
                 }
-              },
-              {
-                title: 'hoppaang',
-                action: () => {},
-                icon: '',
-                emphasis: {
-                  outlined: true
-                }
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete',
-                emphasis: {
-                  danger: true,
-                  filled: true
-                }
-              }
-            ]}
-          ></ox-page-action-context-bar>`
+              ]}
+            ></ox-page-action-context-bar>`
+          }
+        ]}
+        .context=${{
+          exportable: true,
+          importable: true,
+          toolbar: false
+        }}
         }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: false
-      }}
-        
-      }> </ox-context-page-toolbar>
+      >
+      </ox-context-page-toolbar>
     </div>
   </div>
 `