@everchron/ec-shards 0.7.49 → 0.7.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "0.7.49",
+  "version": "0.7.52",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/button-more/button-more.vue

@@ -5,7 +5,7 @@
             ]"
     @click="$emit('click', $event)">
 
-    <ecs-icon v-if="type == 'ellipsis'" type="more" width="20" height="20" />
+    <ecs-icon v-if="type == 'ellipsis'" type="more" width="20" height="20" color="#FFF" />
     <slot></slot>
   </button>
 </template>

package/src/components/index.js

@@ -55,6 +55,7 @@ import EcsJumperIndex from "./jumper-index/jumper-index.vue"
 import EcsJumperPage from "./jumper-page/jumper-page.vue"
 import EcsLayoutIndex from "./layout-index/layout-index.vue"
 import EcsLayoutDirectory from "./layout-directory/layout-directory.vue"
+import EcsLayoutDataTable from "./layout-data-table/layout-data-table.vue"
 import EcsMap from "./map/map.vue"
 import EcsModal from "./modal/modal.vue"
 import EcsModalHeader from "./modal-header/modal-header.vue"
@@ -160,6 +161,7 @@ const Components = {
   EcsJumperPage,
   EcsLayoutIndex,
   EcsLayoutDirectory,
+  EcsLayoutDataTable,
   EcsMap,
   EcsModal,
   EcsModalHeader,

package/src/components/layout-data-table/layout-data-table.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="ecs-data-layout">
+    <div class="ecs-data-layout-content">
+      <div v-if="$slots.toolbar" class="ecs-data-layout-toolbar">
+        <slot name="toolbar"></slot>
+      </div>
+
+      <ecs-action-toolbar v-if="$slots.actionbar" v-show="showActionbar">
+        <slot name="actionbar"></slot>
+      </ecs-action-toolbar>
+
+      <div class="ecs-data-layout-data">
+        <slot></slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.sidebarcontent || $slots.sidebarheader" class="ecs-data-layout-sidebar" :class="sidebarExpanded ? 'expanded' : ''">
+      <div class="ecs-data-layout-sidebar-inner">
+        <div v-if="$slots.sidebarheader" class="ecs-data-layout-sidebar-header">
+          <slot name="sidebarheader"></slot>
+        </div>
+
+        <div class="ecs-data-layout-sidebar-content scrollbar scrollbar-sml">
+          <slot name="sidebarcontent"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import EcsActionToolbar from '../action-toolbar/action-toolbar'
+
+  export default {
+    components: { EcsActionToolbar },
+
+    props: {
+      sidebarExpanded: {
+        type: Boolean,
+        default: false
+      },
+      showActionbar: {
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+@import "../tokens/tokens";
+@import "../mixins/svg-uri";
+
+$bar-height: 41px;
+
+.ecs-data-layout{
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background: #FFF;
+  overflow: hidden;
+
+  &-toolbar{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 12px;
+    background: #FFF;
+    height: $bar-height;
+    border-bottom: 1px solid $gray-3;
+    position: relative;
+    z-index: 3;
+  }
+
+  &-content{
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    transition: .4s;
+  }
+
+  &-data{
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &-sidebar{
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
+    height: 100%;
+    background: #FFF;
+    border-left: 1px solid #FFF;
+    transition: .4s;
+
+    &.expanded{
+      min-width: 320px;
+      width: 25%;
+      max-width: 500px;
+      border-left-color: $gray-3;
+
+      .ecs-data-layout-sidebar-inner{
+        opacity: 1;
+      }
+    }
+
+    &-inner{
+      width: 100%;
+      min-width: 320px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      transition: .5s;
+      opacity: 0;
+    }
+
+    &-header{
+      height: $bar-height;
+      flex-shrink: 0;
+      border-bottom: 1px solid $gray-3;
+      display: flex;
+      align-items: center;
+      padding: 0 16px 0 20px;
+    }
+
+    &-content{
+      flex: 1;
+      padding: 20px;
+      overflow: auto;
+    }
+  }
+}
+</style>

package/src/components/modal-header/modal-header.vue

@@ -72,6 +72,7 @@
   }
 
   &-close{
+    cursor: pointer;
     width: 40px;
     height: 40px;
     border-radius: 3px;

package/src/components/party-entry/party-entry.vue

@@ -4,7 +4,8 @@
                 party,
                 shared ? 'shared' : '',
                 background ? 'ecs-party-entry-background' : ''
-              ]">
+              ]"
+      :style="annotationStyles">
     <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :width="iconSize" :height="iconSize" />
     <slot></slot>
     <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
@@ -23,8 +24,7 @@
       },
       party: {
         type: String,
-        validator: v => ['client', 'opposing', 'joint', 'other', 'court', 'unaffiliated'].includes(v),
-        required: true
+        validator: v => ['client', 'opposing', 'joint', 'other', 'court', 'unaffiliated'].includes(v)
       },
       background: {
         type: Boolean,
@@ -46,6 +46,10 @@
         type: String,
         default: '30px'
       },
+      annotationColor: {
+        type: Number,
+        default: null
+      },
     },
 
     computed: {
@@ -64,22 +68,85 @@
         }
       },
 
-      iconColor() {
-        switch (this.party){
-          case 'client':
-            return '#227FD3'
-          case 'opposing':
-            return '#5DAF00'
-          case 'joint':
-            return '#A4927A'
-          case 'other':
-            return '#95989C'
-          case 'court':
-            return '#D78B21'
-          case 'unaffiliated':
-            return '#C1C2C4'
+      annotationBackgroundColor() {
+        switch (this.annotationColor){
+          case 1:
+            return 'rgba(249, 223, 0, 0.5)'
+          case 2:
+            return 'rgba(243, 161, 0, 0.5)'
+          case 3:
+            return 'rgba(183, 234, 128, 0.5)'
+          case 4:
+            return 'rgba(72, 228, 194, 0.5)'
+          case 5:
+            return 'rgba(72, 157, 255, 0.5)'
+          case 6:
+            return 'rgba(184, 119, 240, 0.5)'
+          case 7:
+            return 'rgba(253, 120, 253, 0.5)'
+          case 8:
+            return 'rgba(197, 148, 101, 0.5)'
+          case 9:
+            return 'rgba(133, 142, 159, 0.5)'
+          default:
+            return 'rgba(249, 223, 0, 0.5)'
+        }
+      },
+
+      annotationIconColor() {
+        switch (this.annotationColor){
+          case 1:
+            return '#B57100'
+          case 2:
+            return '#A95A00'
+          case 3:
+            return '#429700'
+          case 4:
+            return '#06956E'
+          case 5:
+            return '#0E4BBE'
+          case 6:
+            return '#6B1ABA'
+          case 7:
+            return '#BE15BF'
+          case 8:
+            return '#7B3F1B'
+          case 9:
+            return '#364258'
           default:
-            return '#C1C2C4'
+            return '#B57100'
+        }
+      },
+
+      iconColor() {
+        if( this.annotationColor ){
+          return this.annotationIconColor
+        } else {
+          switch (this.party){
+            case 'client':
+              return '#227FD3'
+            case 'opposing':
+              return '#5DAF00'
+            case 'joint':
+              return '#A4927A'
+            case 'other':
+              return '#95989C'
+            case 'court':
+              return '#D78B21'
+            case 'unaffiliated':
+              return '#C1C2C4'
+            default:
+              return '#C1C2C4'
+          }
+        }
+      },
+
+      annotationStyles() {
+        if (this.annotationColor){
+          return {
+            'background-color': this.annotationBackgroundColor,
+            'color': this.annotationIconColor
+          }
         }
       }
     }
@@ -115,6 +182,10 @@
     opacity: 1;
   }
 
+  &:not(.ecs-party-entry-background){
+    background: transparent !important;
+  }
+
   &.client{
     color: $party-client-text;
   }

package/src/stories/layout-data-table/layout-data-table.stories.js

@@ -0,0 +1,19 @@
+import EcsLayoutDataTable from '@components/layout-data-table/layout-data-table';
+
+export default {
+  title: 'Layouts/Data Table',
+  component: EcsLayoutDataTable
+};
+
+export const dataTable = () => ({
+  components: { EcsLayoutDataTable },
+  template: `<ecs-layout-data-table sidebar-expanded>
+              <template slot="toolbar">toolbar</template>
+              <template slot="actionbar">actionbar</template>
+
+              table
+
+              <template slot="sidebarheader">sidebarheader</template>
+              <template slot="sidebarcontent">sidebar</template>
+            </ecs-layout-data-table>`,
+});

package/src/stories/layout-data-table/layout-data-table.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
+import EcsLayoutDataTable from '@components/layout-data-table/layout-data-table';
+import * as stories from './layout-data-table.stories.js';
+
+<Meta
+  title="Layouts/Data Table"
+  component={EcsLayoutDataTable} />
+
+# Data Table `EcsLayoutDataTable`
+
+The data table layout is commonly used in App Settings pages. It always features a larger content area (which is most of the time filled by a full width data table component) and an optional sidebar that can expand or collapse.
+
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Data Table" height="900px">
+    {stories.dataTable()}
+  </Story>
+</Canvas>
+
+
+```js
+<ecs-layout-data-table sidebar-expanded>
+  <template slot="toolbar">toolbar</template>
+  <template slot="actionbar">actionbar</template>
+
+  table
+
+  <template slot="sidebarheader">sidebarheader</template>
+  <template slot="sidebarcontent">sidebar</template>
+</ecs-layout-data-table>
+```
+
+
+## Props and Slots
+
+<ArgsTable of={EcsLayoutDataTable} />

package/src/stories/party-entry/party-entry.stories.js

@@ -45,3 +45,18 @@ export const partyEntryWithBackground = () => ({
               <ecs-party-entry background icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
             </main>`,
 });
+
+export const partyEntryAnnotations = () => ({
+  components: { EcsPartyEntry },
+  template: `<main>
+              <ecs-party-entry background icon="marker" :annotation-color="1">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" :annotation-color="2">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" :annotation-color="3">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" :annotation-color="4">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" :annotation-color="5">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" :annotation-color="6">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" :annotation-color="7">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" :annotation-color="8">Annotation</ecs-party-entry>
+              <ecs-party-entry background icon="marker" :annotation-color="9">Annotation</ecs-party-entry>
+            </main>`,
+});

package/src/stories/party-entry/party-entry.stories.mdx

@@ -71,6 +71,38 @@ Use the `party` attribute to set the party side. The following sides are availab
 <ecs-party-entry icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
 ```
 
+## Annotations
+
+By not using the `party` prop, but `annotation-color` prop instead, you can show the entry tag with a defined annotation mark color. Note that the annotation colors must be a `Number` between `1` and `9` - mapping to the Everchron mark colors table.
+
++ Yellow: `1`
++ Orange: `2`
++ Lime: `3`
++ Cyan: `4`
++ Blue: `5`
++ Indigo: `6`
++ Pink: `7`
++ Brown: `8`
++ Grey: `9`
+
+<Canvas withSource="none" withToolbar={true}>
+  <Story name="Party Entry Annotations" height="80px">
+    {stories.partyEntryAnnotations()}
+  </Story>
+</Canvas>
+
+```js
+<ecs-party-entry background icon="marker" :annotation-color="1">Annotation</ecs-party-entry>
+<ecs-party-entry background icon="marker" :annotation-color="2">Annotation</ecs-party-entry>
+<ecs-party-entry background icon="marker" :annotation-color="3">Annotation</ecs-party-entry>
+<ecs-party-entry background icon="marker" :annotation-color="4">Annotation</ecs-party-entry>
+<ecs-party-entry background icon="marker" :annotation-color="5">Annotation</ecs-party-entry>
+<ecs-party-entry background icon="marker" :annotation-color="6">Annotation</ecs-party-entry>
+<ecs-party-entry background icon="marker" :annotation-color="7">Annotation</ecs-party-entry>
+<ecs-party-entry background icon="marker" :annotation-color="8">Annotation</ecs-party-entry>
+<ecs-party-entry background icon="marker" :annotation-color="9">Annotation</ecs-party-entry>
+```
+
 ## Props and Slots
 
 <ArgsTable of={EcsPartyEntry} />