@operato/styles 2.0.0-alpha.0 → 2.0.0-alpha.100

package/src/common-grist-styles.ts

@@ -15,23 +15,31 @@ export const CommonGristStyles = css`
   [slot='headroom'] {
     display: flex;
     flex-direction: row;
+    gap: 0 10px;
     align-items: center;
     padding: var(--padding-default) var(--padding-wide);
-    background-color: var(--theme-white-color);
-    box-shadow: var(--box-shadow);
 
-    --mdc-icon-size: 24px;
+    --md-icon-size: 24px;
   }
 
   [slot='headroom']:empty {
     padding: 0;
   }
 
-  #sorters mwc-icon,
-  #modes mwc-icon {
-    --mdc-icon-size: 18px;
+  #sorters md-icon,
+  #modes md-icon {
+    --md-icon-size: 18px;
+  }
+
+  [slot='setting'] {
+    position: absolute;
+    right: 0;
   }
+
   #sorters {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
     margin-left: auto;
     margin-right: var(--margin-default);
     padding-left: var(--padding-narrow);
@@ -54,7 +62,7 @@ export const CommonGristStyles = css`
     cursor: pointer;
   }
 
-  #modes > mwc-icon[active] {
+  #modes > md-icon[active] {
     border-radius: 9px;
     background-color: rgba(var(--primary-color-rgb), 0.05);
     opacity: 1;
@@ -62,23 +70,27 @@ export const CommonGristStyles = css`
     cursor: default;
   }
 
-  #modes > mwc-icon:hover {
+  #modes > md-icon:hover {
     opacity: 1;
     color: var(--secondary-text-color);
   }
 
   #add {
-    width: 50px;
     text-align: right;
   }
 
   #add button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0px 10px;
+
     background-color: var(--primary-color);
     border: 0;
     border-radius: 50%;
     padding: 5px;
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
     cursor: pointer;
   }
 
@@ -87,8 +99,8 @@ export const CommonGristStyles = css`
     box-shadow: var(--box-shadow);
   }
 
-  #add button mwc-icon {
-    font-size: 2em;
+  #add button md-icon {
+    font-size: 1.5em;
     color: var(--theme-white-color);
   }
 
@@ -104,8 +116,19 @@ export const CommonGristStyles = css`
   }
 
   @media only screen and (max-width: 460px) {
+    [slot='headroom'] {
+      box-shadow: var(--box-shadow);
+      padding: 0;
+    }
+
     #modes {
       display: none;
     }
+
+    #add {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+    }
   }
 `

package/src/common-header-styles.ts

@@ -8,117 +8,118 @@ export const CommonHeaderStyles = css`
       'filters filters';
     gap: var(--padding-narrow) var(--padding-default);
     padding: calc(var(--padding-default) / 2) var(--padding-default);
-    background-color: transparent;
-    box-shadow: none;
-    font-size: 0.9em;
 
     align-items: center;
-    --mdc-icon-size: 24px;
-    --mdc-theme-primary: var(--primary-color);
-  }
-
-  .header:empty {
-    padding: 0;
-  }
-
-  .header .filters {
-    grid-area: filters;
-    border: 1px solid rgba(var(--primary-color-rgb), 0.3);
-    background-color: rgba(var(--primary-color-rgb), 0.1);
-    padding: var(--padding-default);
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--gap-inter-filter, 10px);
-  }
-
-  .header .filters:empty {
-    display: none;
-  }
-
-  .header .filter {
-    display: flex;
-    flex-direction: row;
 
-    align-items: center;
-    gap: var(--gap-intra-filter, 4px);
-  }
-
-  .header label {
-    font-weight: bold;
-    font-size: var(--fontsize-default);
-    color: var(--primary-text-color);
-  }
-
-  .header .title {
-    grid-area: title;
+    .title {
+      grid-area: title;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--padding-narrow);
 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--gap-intra-title, 4px);
-
-    font-weight: bold;
-    font-size: var(--fontsize-default);
-    color: var(--primary-text-color);
-  }
-
-  .header .title mwc-icon {
-    color: var(--primary-color);
-    font-size: var(--fontsize-large);
-  }
-
-  .header .actions {
-    grid-area: actions;
-    margin-left: auto;
-
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-    gap: var(--gap-inter-action, 6px);
-  }
-
-  .header .actions * {
-    cursor: pointer;
-  }
-
-  .header .textbtn {
-    background-color: var(--button-primary-background-color);
-    border: 0;
-    border-radius: 2px;
+      font: var(--subtitle-font);
+      color: var(--primary-text-color);
+      text-transform: capitalize;
+    }
 
-    color: var(--button-primary-color);
-    font-size: var(--fontsize-default);
-  }
+    .filters {
+      grid-area: filters;
+      border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+      border-radius: var(--border-radius);
+      background-color: rgba(var(--primary-color-rgb), 0.1);
+      padding: var(--padding-default);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--padding-wide);
+
+      .filter {
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+        gap: var(--padding-narrow);
+      }
+
+      label {
+        font: 600 var(--fontsize-default) var(--theme-font);
+        color: var(--label-color);
+      }
+    }
 
-  .header .textbtn:hover {
-    background-color: var(--button-primary-active-background-color);
-  }
+    .filters:empty {
+      display: none;
+    }
 
-  .header .iconbtn {
-    --mdc-icon-size: 20px;
-    background-color: var(--theme-white-color);
-    border: 1px solid rgba(var(--primary-color-rgb), 0.5);
-    padding: 1px;
-    color: var(--primary-color);
-  }
+    .actions {
+      grid-area: actions;
+      margin-left: auto;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+      gap: var(--padding-narrow);
+
+      * {
+        cursor: pointer;
+      }
+
+      .textbtn,
+      .iconbtn {
+        background-color: var(--button-background-color);
+        border: var(--button-border);
+        border-radius: var(--button-border-radius);
+        padding: var(--button-padding);
+
+        color: var(--button-color);
+        font: var(--button-font);
+
+        &:hover {
+          border: var(--button-activ-border);
+          background-color: var(--button-activ-background-color);
+          box-shadow: var(--button-active-box-shadow);
+
+          color: var(--button-activ-color);
+        }
+      }
+      .iconbtn {
+        padding: var(--iconbtn-padding);
+        line-height: 0.9;
+
+        md-icon {
+          --md-icon-size: var(--iconbtn-size);
+        }
+      }
+    }
 
-  .header .iconbtn:hover {
-    background-color: var(--button-primary-active-background-color);
-    color: var(--theme-white-color);
+    :empty {
+      padding: 0;
+    }
   }
 
   @media only screen and (max-width: 460px) {
     .header {
+      padding: 0;
+      gap: 0;
+
       grid-template-areas:
-        'title actions'
+        'actions'
         'filters';
-    }
 
-    .header .filters {
-      flex-direction: column;
-      align-items: start;
+      .title {
+        display: none;
+      }
+
+      .filters {
+        flex-wrap: wrap;
+        gap: var(--padding-default);
+        border: none;
+      }
+
+      .actions {
+        background-color: rgba(var(--primary-color-rgb), 0.1);
+        margin: 0;
+      }
     }
   }
 `

package/stories/button-container-styles.stories.ts

@@ -0,0 +1,67 @@
+import '@material/web/icon/icon.js'
+import { ButtonContainerStyles } from '../src/button-container-styles.js'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'button-container-styles-pure',
+  component: 'div',
+  argTypes: {}
+}
+
+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/form-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;
+    }
+
+    ${ButtonContainerStyles.cssText}
+  </style>
+  <div style="height:400px; background-color: black; padding: 10px; display: flex; flex-direction: column;gap: 10px;">
+    <div class="button-container" style="background-color: white;">
+      <button raised><md-icon>save</md-icon>save</button>
+      <button outlined><md-icon>launch</md-icon>remove</button>
+      <button danger><md-icon>delete</md-icon>delete</button>
+    </div>
+
+    <div class="button-container" style="background-color: white;">
+      <button danger><md-icon>cancel</md-icon>cancel</button>
+      <button><md-icon>done</md-icon>confirm</button>
+    </div>
+
+    <div class="button-container" style="background-color: white;margin-left: unset;">
+      <button danger><md-icon>restart_alt</md-icon>reset</button>
+      <div filler></div>
+      <button danger><md-icon>cancel</md-icon>cancel</button>
+      <button><md-icon>done</md-icon>confirm</button>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/stories/common-header-styles-actions.stories.ts

@@ -0,0 +1,97 @@
+import '@material/web/icon/icon.js'
+import '@operato/context/ox-context-page-toolbar.js'
+
+import { CommonHeaderStyles } from '../src/common-header-styles.js'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'common-header-styles-actions',
+  component: 'div',
+  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/form-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" .context=${{
+        exportable: {
+          // name: i18next.t('title.data-set list'),
+          // data: this.exportHandler.bind(this)
+        },
+        importable: {
+          // handler: this.importHandler.bind(this)
+        },
+        actions: [
+          {
+            title: 'save',
+            // action: this._updateDataSet.bind(this),
+            icon: 'save'
+          },
+          {
+            title: 'copy',
+            // action: this._copyDataSet.bind(this),
+            icon: 'content_copy'
+          },
+          {
+            title: 'delete',
+            // action: this._deleteDataSet.bind(this),
+            icon: 'delete'
+          }
+        ],
+        toolbar: false
+      }}
+        
+      }> </ox-context-page-toolbar>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}

package/stories/common-header-styles-pure.stories.ts

@@ -0,0 +1,73 @@
+import '@material/web/icon/icon.js'
+import { CommonHeaderStyles } from '../src/common-header-styles.js'
+
+import { css, html, render, TemplateResult } from 'lit'
+
+export default {
+  title: 'common-header-styles-pure',
+  component: 'div',
+  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/form-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">
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
+        <div class="filter"><label>Filter</label><input type="text"></input></div>
+      </div>
+
+      <div class="actions">
+        <div class="textbtn">Action</div>
+        <div class="iconbtn"><md-icon>save</md-icon></div>
+        <div class="iconbtn"><md-icon>delete</md-icon></div>
+      </div>
+    </div>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}