@operato/context 2.0.0-alpha.64 → 2.0.0-alpha.65

package/src/layouts/ox-context-toolbar.ts

@@ -19,72 +19,52 @@ export class ContextToolbar extends connect(store)(LitElement) {
           background-color: var(--context-toolbar-background-color);
           justify-content: space-between;
           box-shadow: var(--context-toolbar-shadow-line);
+
+          padding: 6px 10px;
+          gap: 4px;
         }
-        #front-end {
-          padding-left: var(--context-toolbar-side-padding);
-        }
-        #rear-end {
-          padding-right: var(--context-toolbar-side-padding);
+
+        div {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+
+          align-items: center;
+          overflow: hidden;
+          padding: 0;
         }
-        #front-end mwc-icon,
-        #front mwc-icon {
+
+        #front-end md-icon,
+        #front md-icon {
           background-color: var(--context-toolbar-function-button-background-color);
           border: var(--context-toolbar-function-button-border);
-          height: var(--context-toolbar-function-button-height);
-          margin: var(--context-toolbar-button-margin);
-          padding: var(--context-toolbar-function-button-padding);
           color: var(--context-toolbar-function-button-color);
-          line-height: var(--context-toolbar-function-button-lineheight);
-          cursor: pointer;
-        }
-        #front-end mwc-icon:first-child,
-        #front mwc-icon:first-child {
-          border-top-left-radius: var(--context-toolbar-function-button-radius);
-          border-bottom-left-radius: var(--context-toolbar-function-button-radius);
-        }
-        #front-end mwc-icon:last-child,
-        #front mwc-icon:last-child {
-          border-top-right-radius: var(--context-toolbar-function-button-radius);
-          border-bottom-right-radius: var(--context-toolbar-function-button-radius);
         }
 
-        #front-end mwc-icon {
+        #front-end md-icon {
           background-color: var(--primary-color);
         }
-        #front-end mwc-icon:hover {
+        #front-end md-icon:hover {
           background-color: var(--context-toolbar-function-button-background-color);
         }
-        #front mwc-icon:hover {
+        #front md-icon:hover {
           background-color: var(--context-toolbar-function-button-hover-background-color);
         }
 
-        #center {
-          flex: 1;
-          align-items: center;
-          justify-content: end;
-        }
-
-        #center > * {
-          align-items: center;
-        }
-        #rear-end > *,
-        #rear > * {
-          margin: var(--context-toolbar-button-margin);
-        }
-        #rear-end {
-          align-items: start;
+        div md-icon:first-child {
+          border-radius: 0;
+          border-top-left-radius: var(--context-toolbar-function-button-radius);
+          border-bottom-left-radius: var(--context-toolbar-function-button-radius);
         }
-
-        div > * {
-          align-items: center;
+        div md-icon:last-child {
+          border-radius: 0;
+          border-top-right-radius: var(--context-toolbar-function-button-radius);
+          border-bottom-right-radius: var(--context-toolbar-function-button-radius);
         }
 
-        div {
-          display: flex;
-          flex-wrap: nowrap;
-          align-items: center;
-          overflow: hidden;
-          padding: 0;
+        #center {
+          flex: 1;
+          justify-content: end;
         }
 
         * {
@@ -105,6 +85,13 @@ export class ContextToolbar extends connect(store)(LitElement) {
             color: var(--theme-white-color);
           }
         }
+
+        @media only screen and (max-width: 460px) {
+          :host {
+            padding: 0;
+            gap: 0;
+          }
+        }
       `
     ]
   }
@@ -131,15 +118,19 @@ export class ContextToolbar extends connect(store)(LitElement) {
     let rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
 
     return html`
-      <div id="front-end">${frontEndTools.map(tool => html` ${tool.template} `)}</div>
-
-      <div id="front">${frontTools.map(tool => html` ${tool.template} `)}</div>
-
-      <div id="center">${centerTools.map(tool => html` ${tool.template} `)}</div>
-
-      <div id="rear">${rearTools.map(tool => html` ${tool.template} `)}</div>
-
-      <div id="rear-end">${rearEndTools.map(tool => html` ${tool.template} `)}</div>
+      ${frontEndTools.length > 0
+        ? html`<div id="front-end">${frontEndTools.map(tool => html` ${tool.template} `)}</div>`
+        : nothing}
+      ${frontTools.length > 0
+        ? html`<div id="front">${frontTools.map(tool => html` ${tool.template} `)}</div>`
+        : nothing}
+      ${centerTools.length > 0
+        ? html`<div id="center">${centerTools.map(tool => html` ${tool.template} `)}</div>`
+        : nothing}
+      ${rearTools.length > 0 ? html`<div id="rear">${rearTools.map(tool => html` ${tool.template} `)}</div>` : nothing}
+      ${rearEndTools.length > 0
+        ? html`<div id="rear-end">${rearEndTools.map(tool => html` ${tool.template} `)}</div>`
+        : nothing}
     `
   }
 

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

@@ -18,8 +18,7 @@ export class PageActionContextBar extends connect(store)(LitElement) {
         :host {
           display: flex;
           overflow: hidden;
-          position: relative;
-          gap:var(--padding-narrow);
+          gap: var(--padding-narrow);
         }
 
         :host *:focus {
@@ -29,32 +28,30 @@ export class PageActionContextBar extends connect(store)(LitElement) {
         button {
           display: flex;
           align-items: center;
-          background-color: var(--button-background-color,#fafbfc);
+          background-color: var(--button-background-color, #fafbfc);
           border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-          border-radius:var(--button-border-radius);
-          
-          font-size:var(--fontsize-default);
-          color:var(--secondary-color);
+          border-radius: var(--button-border-radius);
+
+          font-size: var(--fontsize-default);
+          color: var(--secondary-color);
 
           md-icon {
-            margin:4px 1px;
+            margin: 4px 1px;
 
-            --md-icon-size:18px;
+            --md-icon-size: 18px;
             color: var(--primary-color);
           }
-          &:hover{
+          &:hover {
             background-color: var(--primary-color);
 
             color: var(--theme-white-color);
 
-            md-icon{
+            md-icon {
               color: var(--white-theme-color);
             }
           }
         }
 
-        
-
         [filled] {
           font-variation-settings: 'FILL' 1;
         }
@@ -66,34 +63,34 @@ export class PageActionContextBar extends connect(store)(LitElement) {
           md-icon {
             color: var(--mdc-danger-button-primary-color);
           }
-          &:hover{
-            background-color:var(--mdc-danger-button-primary-color);
+          &:hover {
+            background-color: var(--mdc-danger-button-primary-color);
           }
         }
 
         [more] {
           position: absolute;
           top: 0;
-          right: 38px;
+          right: 0;
           background-color: var(--context-action-bar-more-button-background-color);
           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: 10px;
           font-size: 2rem;
         }
 
         @media screen and (max-width: 460px) {
-          button {
-            --mdc-button-horizontal-padding: var(--padding-default);
-            --mdc-shape-small: var(--context-action-bar-more-button-border-radius);
+          :host {
+            gap: 0;
           }
 
           [more] {
-            position: absolute;
             margin-top: -10px;
-            right: 0px;
-            padding: var(--padding-default);
-            font-size: 2rem;
+          }
+
+          button {
+            border-radius: 0;
           }
         }
 

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

@@ -45,7 +45,7 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
   <div style="height:600px;">
     <div class="header">
       <div class="title">
-        <md-icon>summarize</md-icon>
+        <md-icon>apps</md-icon>
         ${label}
       </div>
 

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

@@ -44,7 +44,7 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
   <div style="height:600px;">
     <div class="header">
       <div class="title">
-        <md-icon>summarize</md-icon>
+        <md-icon>apps</md-icon>
         ${label}
       </div>
 

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

@@ -44,7 +44,7 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
   <div style="height:600px;">
     <div class="header">
       <div class="title">
-        <md-icon>summarize</md-icon>
+        <md-icon>apps</md-icon>
         ${label}
       </div>
 

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

@@ -0,0 +1,158 @@
+import '@material/web/icon/icon.js'
+import '../src/layouts/ox-context-toolbar.js'
+import '../src/tools/ox-page-action-context-bar.js'
+import { TOOL_POSITION } from '@operato/layout'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-toolbar complex',
+  component: 'ox-context-toolbar',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = () => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/context-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;
+    }
+  </style>
+
+  <div style="height:100px; padding: 10px; background-color: black;">
+    <ox-context-toolbar
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT_END,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.FRONT_END,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        },
+        {
+          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'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        },
+        {
+          position: TOOL_POSITION.REAR,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        },
+        {
+          position: TOOL_POSITION.REAR_END,
+          template: html`<ox-page-action-context-bar
+            .actions=${[
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        },
+        {
+          position: TOOL_POSITION.REAR_END,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          position: TOOL_POSITION.REAR_END,
+          template: html` <md-icon>upload</md-icon> `,
+          context: 'importable'
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -0,0 +1,139 @@
+import '@material/web/icon/icon.js'
+import '../src/layouts/ox-context-toolbar.js'
+import '../src/tools/ox-page-action-context-bar.js'
+import { TOOL_POSITION } from '@operato/layout'
+
+import '@operato/styles'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-context-toolbar overflow',
+  component: 'ox-context-toolbar',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = () => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/context-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;
+    }
+  </style>
+
+  <div style="height:100px; padding: 10px; background-color: yellow;">
+    <ox-context-toolbar
+      .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'
+              },
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete'
+              },
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete'
+              },
+              {
+                title: 'save',
+                action: () => {},
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy'
+              },
+              {
+                title: 'delete',
+                action: () => {},
+                icon: 'delete'
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}

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

@@ -1,7 +1,6 @@
 import '@material/web/icon/icon.js'
 import '../src/layouts/ox-context-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'
@@ -11,9 +10,7 @@ import { css, html, render, TemplateResult } from 'lit'
 export default {
   title: 'ox-context-toolbar',
   component: 'ox-context-toolbar',
-  argTypes: {
-    label: { control: 'string' }
-  }
+  argTypes: {}
 }
 
 interface Story<T> {
@@ -22,37 +19,33 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {
-  label?: string
-}
+interface ArgTypes {}
 
-const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = () => html`
   <link href="/themes/app-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">
-  
+  <link href="/themes/context-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">
-        <md-icon>summarize</md-icon>
-        ${label}
-      </div>
-
-      <div class="filters">
-        <label>Filter</label><input type="text"></input>
-      </div>
-
-      <ox-context-toolbar class="actions" 
+  <div style="height:100px; padding: 10px; background-color: black;">
+    <ox-context-toolbar
       .tools=${[
         {
           position: TOOL_POSITION.FRONT,
@@ -90,15 +83,12 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
       .context=${{
         exportable: true,
         importable: true,
-        toolbar: false
+        toolbar: true
       }}
-        
-      }> </ox-context-toolbar>
-    </div>
+    >
+    </ox-context-toolbar>
   </div>
 `
 
 export const Regular = Template.bind({})
-Regular.args = {
-  label: 'common header styles'
-}
+Regular.args = {}