@everchron/ec-shards 4.1.0 → 4.1.2

package/package.json

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

package/src/components/data-grid/data-grid-row.vue

@@ -56,6 +56,7 @@
 
   &.selected{
     border-bottom-color: $color-blue-3;
+    background-color: #F4F9FF;
 
     &:hover:before{
       background-color: $color-blue-5;
@@ -65,6 +66,7 @@
 
   &.opened{
     border-bottom-color: $color-blue-3;
+    background-color: $color-blue-2;
 
     &:hover:before{
       background-color: $color-blue-5;
@@ -78,6 +80,7 @@
 
   &.droppable{
     border-bottom-color: $color-green-4;
+    background-color: $color-green-2;
     cursor: copy;
 
     &:hover:before{
@@ -97,4 +100,3 @@
   }
 }
 </style>
-

package/src/components/data-grid/data-grid.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-data-grid scrollbar" :class="$slots.empty  ? 'empty' : ' '">
-    <div class="ecs-data-grid-head">
+    <div class="ecs-data-grid-head" :class="sidebarOverlay ? 'sidebar-space' : ''">
       <!-- @slot Slot for the table head row cells. -->
       <slot name="head"></slot>
     </div>
@@ -10,7 +10,7 @@
       <slot name="empty"></slot>
     </div>
 
-    <div v-else class="ecs-data-grid-rows" :class="striped ? 'striped' : ''">
+    <div v-else class="ecs-data-grid-rows" :class="[striped ? 'striped' : '', sidebarOverlay ? 'sidebar-space' : '']">
       <!-- @slot Default slot for the table rows. -->
       <slot></slot>
     </div>
@@ -24,6 +24,11 @@
       striped: {
         type: Boolean,
         default: true
+      },
+      /** If there is a sidebar overlaying this table, use this prop to add some forced padding on the right side, to avoid the sidebar blocking any actual content of the table rows. */
+      sidebarOverlay: {
+        type: Boolean,
+        default: false
       }
     },
 
@@ -72,16 +77,38 @@
     position: sticky;
     top: 0;
     box-shadow: 0 1px 0 rgba($color-gray-6, .4);
+
+    &.sidebar-space{
+      padding-right: 54px;
+    }
   }
 
   &-rows{
     flex: 1;
     min-width: fit-content;
+
+    &.sidebar-space .ecs-data-grid-row{
+      padding-right: 54px;
+    }
   }
 
   &-empty{
     flex: 1;
   }
 }
+
+.ecs-data-grid-rows.striped{
+  .ecs-data-grid-row.default:nth-child(even){
+    background-color: #FBFBFC;
+  }
+
+  .ecs-data-grid-row.added:nth-child(even){
+    animation: highlight-to-gray 8s ease forwards;
+  }
+
+  .ecs-data-grid-row.added:nth-child(odd){
+    animation: highlight-to-white 8s ease forwards;
+  }
+}
 </style>
 

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

@@ -12,7 +12,6 @@
     </div>
 
     <ecs-button-more v-if="moreButton" @click.stop="handleMoreButtonClick" type="ellipsis" :title="moreButtonTitle" />
-    <ecs-icon :type="hoverIcon" size="14" class="hover-icon" />
   </div>
 </template>
 
@@ -30,11 +29,6 @@
       icon: {
         type: String
       },
-      /** If set, an icon will be added to the right of the button on mouse over. This is used to indicate what's going to happen when clicking the hovered element (e.g. opens document in new tab). The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-      hoverIcon: {
-        type: String,
-        default: 'open-external'
-      },
       /** The text content of the link. */
       label: {
         type: String,
@@ -90,7 +84,7 @@
   transition: .2s color, .2s background, .2s box-shadow, .2s opacity;
   white-space: nowrap;
   cursor: pointer;
-  z-index: 1;
+  z-index: 0;
   flex-shrink: 0;
   max-width: 100%;
   color: $color-gray-15;
@@ -114,11 +108,6 @@
       transform: scale(1);
     }
 
-    .hover-icon{
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-
     .entry-icon{
       color: $color-gray-7;
     }
@@ -136,7 +125,7 @@
 
   .entry-icon{
     color: $color-gray-6;
-    margin-right: $spacing-5;
+    margin: 0 $spacing-5 0 -2px;
   }
 
   &-label{
@@ -151,22 +140,8 @@
     }
   }
 
-  .hover-icon{
-    transform: translateX(-50%) scale(.5);
-    opacity: 0;
-    transition: .3s;
-    margin-left: $spacing-5;
-    color: $color-gray-8;
-  }
-
   .ecs-button-more-ellipsis{
     margin: 0 $spacing-5 0 $spacing-10;
-
-    &:hover + .hover-icon{
-      transform: translateX(-50%) scale(.5);
-      opacity: 0;
-      margin-right: -20px;
-    }
   }
 
   .prepend{

package/src/stories/data-grid/data-grid-row.stories.js

@@ -13,7 +13,7 @@ export default {
 export const states = () => ({
   components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
   template: `<div style="width: 100%; height: 500px">
-              <ecs-data-grid striped>
+              <ecs-data-grid striped sidebar-overlay>
                 <template slot="head">
                   <ecs-data-grid-head-cell name="First Column" :width="400" fixed-left fixed-left-last />
                   <ecs-data-grid-head-cell name="Second Column" :width="500" />
@@ -68,7 +68,7 @@ export const newRowStates = () => ({
   template: `<div style="width: 100%; height: 400px">
               <ecs-button @click="addRows" style="position:absolute; bottom: 16px; left: 16px;">Add Rows</ecs-button>
 
-              <ecs-data-grid>
+              <ecs-data-grid sidebar-overlay>
                 <template slot="head">
                   <ecs-data-grid-head-cell name="First Column" :width="400" fixed-left fixed-left-last />
                   <ecs-data-grid-head-cell name="Second Column" :width="500" />

package/src/stories/data-grid/data-grid.stories.js

@@ -46,3 +46,22 @@ export const gridStriped = () => ({
               </ecs-data-grid>
             </div>`,
 });
+
+export const gridSidebarPadding = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%; height: 500px">
+              <ecs-data-grid striped sidebar-overlay>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First Column" :min-width="200" :width="400" fixed-left fixed-left-last />
+                  <ecs-data-grid-head-cell name="Second Column" :min-width="300" :width="500" />
+                  <ecs-data-grid-head-cell name="Third Column" :min-width="140" :width="200" />
+                </template>
+
+                <ecs-data-grid-row v-for="index in 100" :key="index">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});

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

@@ -20,11 +20,6 @@ export const entryLinkMoreButton = () => ({
   template: `<ecs-entry-link icon="transcript" emphasized label="Entry Link Headline" more-button />`,
 });
 
-export const entryLinkHoverIcon = () => ({
-  components: { EcsEntryLink },
-  template: `<ecs-entry-link hover-icon="view" label="Change the :hover icon" />`,
-});
-
 export const entryLinkEscaping = () => ({
   components: { EcsEntryLink },
   template: `<div style="width:500px">