@everchron/ec-shards 0.6.30 → 0.6.34

package/package.json

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

package/src/components/overlay/overlay.vue

@@ -12,20 +12,34 @@
         <div v-if="$slots.headercontrols" class="ecs-overlay-header-controls">
           <slot name="headercontrols"></slot>
         </div>
+        <ecs-button-toolbar v-if="$slots.sidebar && width <= 1400" @click="sidebarToggle" :icon="sidebarIcon" :title="showSidebar ? 'Hide ' + sidebarTitle : 'Show ' + sidebarTitle" :active="showSidebar" class="sidebar-button" />
         <ecs-button-toolbar @click="$emit('close')" icon="close">{{ closeText }}</ecs-button-toolbar>
       </div>
-      <div class="ecs-overlay-content scrollbar">
+      <div ref="content" class="ecs-overlay-content scrollbar">
         <div v-if="$slots.tabs" class="ecs-overlay-tabs scrollbar scrollbar-sml">
           <slot name="tabs"></slot>
         </div>
-        <div class="ecs-overlay-content-inner" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
-          <slot></slot>
+        <div class="ecs-overlay-content-inner">
+          <div class="ecs-overlay-content-inner-inner" :class="$slots.sidebar && !fullWidth && width > 1400  ? 'has-sidebar' : ' '" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
+            <slot></slot>
+          </div>
+          <div v-if="$slots.sidebar && width > 1400" class="ecs-overlay-sidebar ecs-overlay-sidebar-static">
+            <slot name="sidebar"></slot>
+          </div>
+          <transition name="slide">
+            <div v-if="$slots.sidebar && width <= 1400 && showSidebar" class="ecs-overlay-sidebar ecs-overlay-sidebar-float scrollbar scrollbar-sml">
+              <slot name="sidebar"></slot>
+            </div>
+          </transition>
         </div>
       </div>
       <div v-if="$slots.footer" class="ecs-overlay-footer">
-        <div v-if="$slots.tabs  && !fullWidth" class="spacer" />
-        <div class="ecs-overlay-footer-content" :style="{ width: contentWidth, maxWidth: contentMaxWidth }">
-          <slot name="footer"></slot>
+        <div v-if="$slots.tabs" class="spacer-tabs" />
+        <div class="ecs-overlay-footer-content">
+          <div class="ecs-overlay-footer-content-inner" :style="{ width: contentWidth, maxWidth: contentMaxWidth, minWidth: contentMinWidth }">
+            <slot name="footer"></slot>
+          </div>
+          <div v-if="$slots.sidebar && width > 1400" class="spacer-sidebar" />
         </div>
       </div>
     </div>
@@ -68,19 +82,30 @@
       offsetTop: {
         type: Number,
         default: 41
-      }
+      },
+      //Props for additional slide-in sidbar
+      sidebarIcon: {
+        type: String,
+        default: 'bell'
+      },
+      sidebarTitle: {
+        type: String,
+        default: 'Notifications'
+      },
     },
 
     data () {
       return {
-        isShown: this.show
+        isShown: this.show,
+        showSidebar: false,
+        width: window.innerWidth,
       }
     },
 
     computed:{
       contentWidth(){
         if(this.fullWidth && this.$slots.tabs){
-          return 'calc(100% - 260px)'
+          return 'calc(100vw - 260px)'
         } else{
           return '100%'
         }
@@ -95,19 +120,44 @@
       },
 
       contentMinWidth(){
-        if(this.fullWidth && this.$slots.tabs){
-          return 'calc(100% - 260px)'
+        if(this.$slots.tabs && this.$slots.sidebar){
+          return 'calc(100vw - 260px - 400px)'
+        } else if(this.fullWidth && this.$slots.tabs){
+          return 'calc(100vw - 260px)'
         } else {
           return '780px'
         }
       }
     },
 
-    methods : {
+    mounted(){
+      this.$nextTick(() => {
+        window.addEventListener('resize', this.windowWidth)
+      })
+    },
+
+    beforeDestroy() {
+      window.removeEventListener('resize', this.windowWidth)
+    },
+
+    methods :{
       toggleShow(){
         this.isShown = !this.isShown
         this.$emit('toggled', this.id, this.isShown)
-      }
+      },
+
+      windowWidth() {
+        this.width = window.innerWidth
+      },
+
+      sidebarToggle(){
+        this.showSidebar = !this.showSidebar
+        this.$refs.content.classList.add('overflow-hidden')
+        setTimeout(() => {
+          this.$refs.content.classList.remove('overflow-hidden')
+        }, 360);
+        
+      },
     },
 
     watch: {
@@ -143,16 +193,40 @@
     &-controls{
       margin-right: 24px;
     }
+
+    .sidebar-button{
+      margin-right: 24px;
+    }
   }
 
   &-content{
     flex: 1;
     display: flex;
     overflow: auto;
+    position: relative;
+
+    &.overflow-hidden{
+      overflow: hidden;
+    }
   }
 
   &-content-inner{
     margin: 0 auto;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: min-content;
+    position: relative;
+
+    &-inner{
+      position: relative;
+      height: min-content;
+      margin: 0 auto;
+
+      &.has-sidebar{
+        margin: 0 0 0 auto;
+      }
+    }
   }
 
   &-tabs{
@@ -164,6 +238,28 @@
     flex-shrink: 0;
   }
 
+  &-sidebar{
+    flex-shrink: 0;
+  }
+
+  &-sidebar-static{
+    padding: 0 15px 0 30px;
+    width: 400px;
+    margin: 0 auto 0 0;
+  }
+
+  &-sidebar-float{
+    padding: 0 15px 0 20px;
+    width: 400px;
+    overflow: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: #FFF;
+    box-shadow: 0 0 20px rgba(0,0,0,.12);
+  }
+
   &-footer{
     flex-shrink: 0;
     background: #FFF;
@@ -175,17 +271,26 @@
       padding: 30px;
     }
 
-    .spacer{
+    .spacer-tabs{
       width: 260px;
       flex-shrink: 0;
     }
 
+    .spacer-sidebar{
+      min-width: 400px;
+    }
+
     &-content{
+      width: 100%;
+      display: flex;
+
+      &-inner{
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
     }
+    }
   }
 
   &-titles{
@@ -231,5 +336,20 @@
 .fade-leave-to{
   opacity: 0;
 }
+
+.slide-enter-active,
+.slide-leave-active{
+  transition: all .3s;
+}
+
+.slide-enter{
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.slide-leave-to{
+  opacity: 0;
+  transform: translateX(100%);
+}
 </style>
 

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

@@ -73,13 +73,13 @@ export default {
   }
 }
 
-.expansion-enter-active {
-  animation: expansion-in .25s;
+.expansion-enter-active{
+  animation: expansion-in .3s ease;
   overflow: hidden;
 }
 
-.expansion-leave-active {
-  animation: expansion-in .25s reverse;
+.expansion-leave-active{
+  animation: expansion-in .3s ease reverse;
   overflow: hidden;
 }
 
@@ -88,7 +88,7 @@ export default {
     max-height: 0;
   }
   100% {
-    max-height: 55px;
+    max-height: 46px;
   }
 }
 </style>
@@ -106,6 +106,23 @@ export default {
 }
 
 .ecs-sidebar-header-row{
+  > *{
+    opacity: 1;
+    transition: opacity .2s ease;
+  }
+
+  &.expansion-enter-active{
+    > *{
+      opacity: 0;
+    }
+  }
+
+  &.expansion-leave-active{
+    > *{
+      opacity: 0;
+    }
+  }
+
   .ecs-tab-bar{
     width: 100%;
   }

package/src/stories/overlay/overlay.stories.js

@@ -78,3 +78,42 @@ export const overlayFullWidthTabs = () => ({
                 </ecs-overlay>
               </div>`,
 });
+
+export const overlaySidebar = () => ({
+  components: { EcsOverlay },
+  data() {
+    return {
+      showOverlay: false
+    }
+  },
+  template: `<div>
+                <button @click="showOverlay = true">Show Overlay</button>
+                <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321" >
+                  
+                  <div style="height:700px;background:gray">content area</div>
+
+                  <template slot="footer">footer area</template>
+                  <template slot="sidebar"><div style="height:500px;background:gray">sidebar area</div></template>
+                </ecs-overlay>
+              </div>`,
+});
+
+export const overlayTabsSidebar = () => ({
+  components: { EcsOverlay },
+  data() {
+    return {
+      showOverlay: false
+    }
+  },
+  template: `<div>
+                <button @click="showOverlay = true">Show Overlay</button>
+                <ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
+
+                  content area
+
+                  <template slot="tabs">tab area</template>
+                  <template slot="sidebar"><div style="height:500px;background:gray">sidebar area</div></template>
+                  <template slot="footer">footer area</template>
+                </ecs-overlay>
+              </div>`,
+});

package/src/stories/sidebar-header/sidebar-header.stories.js

@@ -28,7 +28,7 @@ export const headerWithSubheaderExpanded = () => ({
                 <ecs-button type="secondary" icon-only icon="search" />
                 <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
               </template>
-              <template slot="sub-header">
+              <template slot="subheader">
                 <ecs-tab-bar type="segment">
                   <ecs-tab-button show>Locations</ecs-tab-button>
                   <ecs-tab-button>Family</ecs-tab-button>
@@ -40,13 +40,18 @@ export const headerWithSubheaderExpanded = () => ({
 
 export const headerWithSubheader = () => ({
   components: { EcsSidebarHeader, EcsButton, EcsTabBar, EcsTabButton },
-  template: `<ecs-sidebar-header>
+  data() {
+    return {
+      expand: false
+    }
+  },
+  template: `<ecs-sidebar-header :sub-header-expanded="expand">
               <h3 class="headline-2">Sidebar</h3>
               <template slot="primary-controls">
-                <ecs-button type="secondary" icon-only icon="search" />
+                <ecs-button @click="expand = !expand" type="secondary" icon-only icon="search" />
                 <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
               </template>
-              <template slot="sub-header">
+              <template slot="subheader">
                 <ecs-tab-bar type="segment">
                   <ecs-tab-button show>Locations</ecs-tab-button>
                   <ecs-tab-button>Family</ecs-tab-button>

package/src/stories/sidebar-header/sidebar-header.stories.mdx

@@ -35,13 +35,13 @@ The sidebar header is a required sub component of EcsSidebar. It always needs to
 </Canvas>
 
 ```js
-<ecs-sidebar-header>
+<ecs-sidebar-header :sub-header-expanded="expand">
   <h3 class="headline-2">Sidebar</h3>
   <template slot="primary-controls">
-    <ecs-button type="secondary" icon-only icon="search" />
+    <ecs-button @click="expand = !expand" type="secondary" icon-only icon="search" />
     <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
   </template>
-  <template slot="sub-header">
+  <template slot="subheader">
     <ecs-tab-bar type="segment">
       <ecs-tab-button show>Locations</ecs-tab-button>
       <ecs-tab-button>Family</ecs-tab-button>
@@ -66,7 +66,7 @@ The sidebar header is a required sub component of EcsSidebar. It always needs to
     <ecs-button type="secondary" icon-only icon="search" />
     <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
   </template>
-  <template slot="sub-header">
+  <template slot="subheader">
     <ecs-tab-bar type="segment">
       <ecs-tab-button show>Locations</ecs-tab-button>
       <ecs-tab-button>Family</ecs-tab-button>
@@ -78,4 +78,4 @@ The sidebar header is a required sub component of EcsSidebar. It always needs to
 
 ## Props and Slots
 
-<ArgsTable of={EcsSidebarHeader} />
+<ArgsTable of={EcsSidebarHeader} />