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

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

@@ -18,7 +18,7 @@ export class PageActionContextBar extends connect(store)(LitElement) {
         :host {
           display: flex;
           overflow: hidden;
-          position: relative;
+          gap: var(--padding-narrow);
         }
 
         :host *:focus {
@@ -26,16 +26,30 @@ export class PageActionContextBar extends connect(store)(LitElement) {
         }
 
         button {
-          white-space: nowrap;
-          margin: var(--context-action-bar-button-margin);
-          border-radius: var(--context-action-bar-more-button-border-radius);
-        }
-
-        md-icon {
-          background-color: var(--theme-white-color);
+          display: flex;
+          align-items: center;
+          background-color: var(--button-background-color, #fafbfc);
           border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-          padding: 1px 2px;
-          color: var(--primary-color);
+          border-radius: var(--button-border-radius);
+
+          font-size: var(--fontsize-default);
+          color: var(--secondary-color);
+
+          md-icon {
+            margin: 4px 1px;
+
+            --md-icon-size: 18px;
+            color: var(--primary-color);
+          }
+          &:hover {
+            background-color: var(--primary-color);
+
+            color: var(--theme-white-color);
+
+            md-icon {
+              color: var(--white-theme-color);
+            }
+          }
         }
 
         [filled] {
@@ -45,31 +59,38 @@ export class PageActionContextBar extends connect(store)(LitElement) {
         [danger] {
           color: var(--mdc-danger-button-primary-color);
           border-color: var(--mdc-danger-button-outline-color);
+
+          md-icon {
+            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/src/tools/ox-title-bar.ts

@@ -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;

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>
 
@@ -85,24 +85,40 @@ const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
               {
                 title: 'save',
                 action: () => {},
-                icon: 'save',
+                icon: 'save'
+              },
+              {
+                title: 'copy',
+                action: () => {},
+                icon: 'content_copy',
                 emphasis: {
-                  danger: true,
-                  filled: true
+                  outlined: true
                 }
               },
               {
-                title: 'copy',
+                title: 'edit',
                 action: () => {},
                 icon: 'content_copy',
                 emphasis: {
                   outlined: true
                 }
               },
+              {
+                title: 'hoppaang',
+                action: () => {},
+                icon: '',
+                emphasis: {
+                  outlined: true
+                }
+              },
               {
                 title: 'delete',
                 action: () => {},
-                icon: 'delete'
+                icon: 'delete',
+                emphasis: {
+                  danger: true,
+                  filled: true
+                }
               }
             ]}
           ></ox-page-action-context-bar>`

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

@@ -0,0 +1,94 @@
+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',
+  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,
+          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>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/themes/context-theme.css

@@ -0,0 +1,74 @@
+body {
+  --context-toolbar-background-color: var(--main-section-background-color);
+  --context-toolbar-button-background-color: #fff;
+  --context-toolbar-border: 1px solid rgba(57, 78, 100, 0.5);
+  --context-toolbar-border-hover: 1px solid var(--primary-color);
+  --context-toolbar-button-max-width: auto;
+  --context-toolbar-button-height: 36px;
+  --context-toolbar-button-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
+  --context-toolbar-button-padding: 0 9px;
+  --context-toolbar-button: normal 13px var(--theme-font);
+  --context-toolbar-button-color: var(--secondary-color);
+  --context-toolbar-iconbutton-color: var(--primary-text-color);
+  --context-toolbar-iconbutton-size: 16px;
+  --context-toolbar-function-button-height: 34px;
+  --context-toolbar-function-button-radius: 5px;
+  --context-toolbar-function-button-background-color: #446281;
+  --context-toolbar-function-button-hover-background-color: var(--primary-color);
+  --context-toolbar-function-iconbutton-size: 28px;
+  --context-toolbar-function-iconbutton-color: var(--primary-background-color);
+  --context-toolbar-function-button-lineheight: 36px;
+  --context-toolbar-function-button-color: #fff;
+  --context-toolbar-function-button-padding: 0 10px;
+  --context-toolbar-function-button-border: 1px solid rgba(0, 0, 0, 0.1);
+  --context-toolbar-list-background-color: var(--primary-background-color);
+  --context-toolbar-list-text: bold 18px var(--theme-font);
+  --context-toolbar-list-icon-size: var(--icon-default-size);
+  --context-toolbar-side-padding: 15px;
+  --context-toolbar-shadow-line: none;
+  --context-toolbar-title: bold 19px var(--theme-font);
+
+  --context-ui-background-color: rgba(40, 54, 68, 0.9);
+  --context-ui-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
+  --context-ui-border-radius: 10px;
+  --context-ui-padding: 10px;
+  --context-ui-list-color: #d0fdee;
+  --context-ui-list-border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  --context-ui-list-border-hover-bottom: 1px solid var(--primary-color);
+  --context-ui-list-padding: 5px;
+  --context-ui-button-color: var(--secondary-text-color);
+  --context-ui-button-hover-color: #fff;
+  --context-ui-button-background-color: #fff;
+  --context-ui-button-background-hover-color: var(--primary-color);
+
+  --context-action-bar-button-margin: var(--margin-narrow) 0 var(--margin-wide) var(--margin-narrow);
+  --context-action-bar-more-button-background-color: var(--context-ui-background-color);
+  --context-action-bar-more-button-padding: 6px var(--padding-default);
+  --context-action-bar-more-button-color: var(--theme-white-color);
+  --context-action-bar-more-button-border-radius: 4px;
+}
+
+@media only screen and (max-width: 460px) {
+  body {
+    --context-toolbar-button: normal 9px var(--theme-font);
+    --context-toolbar-button-max-width: 60px;
+    --context-toolbar-button-height: 50px;
+    --context-toolbar-iconbutton-size: 30px;
+    --context-toolbar-border: none;
+    --context-toolbar-border-hover: none;
+    --context-toolbar-iconbutton-display: block;
+    --context-toolbar-iconbutton-margin: -2px;
+    --context-toolbar-button-background-color: transparent;
+    --context-toolbar-button-margin: 0;
+    --context-toolbar-function-button-height: 34px;
+    --context-toolbar-function-button-lineheight: 34px;
+    --context-toolbar-function-button-radius: 0;
+    --context-toolbar-side-padding: 0;
+    --context-toolbar-shadow-line: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+    --context-toolbar-button-padding: 0 10px 0 0;
+
+    --context-action-bar-button-margin: 0;
+    --context-action-bar-more-button-border-radius: 0;
+    --context-action-bar-more-button-padding: 6px var(--padding-wide);
+  }
+}