fix(table): add scroll shadow to table with one section

cft-group · Apr 21, 2021 · c9ccc55 · c9ccc55
1 parent 4fb5ecc
commit c9ccc55
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 27 deletions.
diff --git a/src/packages/core/src/table/advanced-table.html b/src/packages/core/src/table/advanced-table.html
@@ -2,8 +2,8 @@
   <div class="_e_tmenu">
     <div class="_e_tmenu__text">Выбран 1 файл на этой странице. <span class="_e_tmenu__link">Выбрать все 10</span></div>
   </div>
-  <div class="_e_table__sections _e_table__sections_shadow _e_table__sections_shadow_on">
-    <div class="_e_table__section _e_table__section_fixed _e_table__section_shadow" style="width: 328px;">
+  <div id="adv-table__sections" class="_e_table__sections _e_table__sections_shadow _e_table__sections_shadow_on">
+    <div id="adv-table__section_fixed" class="_e_table__section _e_table__section_fixed _e_table__section_shadow" style="width: 328px;">
       <div class="_e_thead">
         <div class="_e_thead__cell" style="flex-basis: 48px; flex-grow: 0;">
           <label class="_e_checkbox">
@@ -48,6 +48,7 @@
       </div>
     </div>
     <div
+      id="adv-table__section_scrollable"
       class="_e_table__section _e_table__section_scrollable"
       style="width: calc(100% - 328px);"
     >

diff --git a/src/packages/core/src/table/advanced-table.js b/src/packages/core/src/table/advanced-table.js
diff --git a/src/packages/core/src/table/scrollable-table.html b/src/packages/core/src/table/scrollable-table.html
@@ -0,0 +1,68 @@
+<div class="_e_table">
+  <div id="scr-table__sections" class="_e_table__sections _e_table__sections_shadow _e_table__sections_left-shadow _e_table__sections_shadow_on">
+    <div
+      id="scr-table__section_scrollable"
+      class="_e_table__section _e_table__section_scrollable"
+      style="width: 100%;"
+    >
+      <div class="_e_thead">
+        <div class="_e_thead__cell" style="flex-basis: 100px; flex-grow: 1;">Критичность</div>
+        <div class="_e_thead__cell" style="flex-basis: 140px; flex-grow: 1;">Тип заявки</div>
+        <div class="_e_thead__cell" style="flex-basis: 200px; flex-grow: 1;">Состояние</div>
+        <div class="_e_thead__cell" style="flex-basis: 100px; flex-grow: 1;">Ожидание</div>
+        <div class="_e_thead__cell" style="flex-basis: 140px; flex-grow: 1;">Плановая сумма</div>
+        <div class="_e_thead__cell" style="flex-basis: 240px; flex-grow: 1;">Тема</div>
+        <div class="_e_thead__cell" style="flex-basis: 220px; flex-grow: 1;">Плановая дата завершения</div>
+        <div class="_e_thead__cell" style="flex-basis: 240px; flex-grow: 1;">Продукт</div>
+      </div>
+      <div class="_e_tbody">
+        <div class="_e_tbody__row">
+          <div class="_e_tbody__cell" style="flex-basis: 100px; flex-grow: 1;">Обычная</div>
+          <div class="_e_tbody__cell" style="flex-basis: 140px; flex-grow: 1;">Несоответствие</div>
+          <div class="_e_tbody__cell" style="flex-basis: 200px; flex-grow: 1;">Первичная обработка</div>
+          <div class="_e_tbody__cell" style="flex-basis: 100px; flex-grow: 1;">Нет</div>
+          <div class="_e_tbody__cell" style="flex-basis: 140px; flex-grow: 1;">10 000</div>
+          <div class="_e_tbody__cell" style="flex-basis: 240px; flex-grow: 1;">Ничего не работает, помогите</div>
+          <div class="_e_tbody__cell" style="flex-basis: 220px; flex-grow: 1;">12.03.2020 17:55</div>
+          <div class="_e_tbody__cell" style="flex-basis: 240px; flex-grow: 1;">ЕБС. Сервис «Расширенный»</div>
+        </div>
+        <div class="_e_tbody__row _e_tbody__row_selected">
+          <div class="_e_tbody__cell" style="flex-basis: 100px; flex-grow: 1;">Обычная</div>
+          <div class="_e_tbody__cell" style="flex-basis: 140px; flex-grow: 1;">Несоответствие</div>
+          <div class="_e_tbody__cell" style="flex-basis: 200px; flex-grow: 1;">Первичная обработка</div>
+          <div class="_e_tbody__cell" style="flex-basis: 100px; flex-grow: 1;">Нет</div>
+          <div class="_e_tbody__cell" style="flex-basis: 140px; flex-grow: 1;">10 000</div>
+          <div class="_e_tbody__cell" style="flex-basis: 240px; flex-grow: 1;">Ничего не работает, помогите</div>
+          <div class="_e_tbody__cell" style="flex-basis: 220px; flex-grow: 1;">12.03.2020 17:55</div>
+          <div class="_e_tbody__cell" style="flex-basis: 240px; flex-grow: 1;">ЕБС. Сервис «Расширенный»</div>
+        </div>
+        <div class="_e_tbody__row">
+          <div class="_e_tbody__cell" style="flex-basis: 100px; flex-grow: 1;">Обычная</div>
+          <div class="_e_tbody__cell" style="flex-basis: 140px; flex-grow: 1;">Несоответствие</div>
+          <div class="_e_tbody__cell" style="flex-basis: 200px; flex-grow: 1;">Первичная обработка</div>
+          <div class="_e_tbody__cell" style="flex-basis: 100px; flex-grow: 1;">Нет</div>
+          <div class="_e_tbody__cell" style="flex-basis: 140px; flex-grow: 1;">10 000</div>
+          <div class="_e_tbody__cell" style="flex-basis: 240px; flex-grow: 1;">Ничего не работает, помогите</div>
+          <div class="_e_tbody__cell" style="flex-basis: 220px; flex-grow: 1;">12.03.2020 17:55</div>
+          <div class="_e_tbody__cell" style="flex-basis: 240px; flex-grow: 1;">ЕБС. Сервис «Расширенный»</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="_e_tfoot">
+    <div></div>
+    <div class="_e_tpagination">
+      <span class="_e_tpagination__text">1—3 из 10</span>
+      <span class="_e_tpagination__action _e_tpagination__action_disabled">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M18.7915 11.005H7.62148L12.5015 6.12499C12.8915 5.73499 12.8915 5.09499 12.5015 4.70499C12.3147 4.51774 12.061 4.41251 11.7965 4.41251C11.532 4.41251 11.2783 4.51774 11.0915 4.70499L4.50148 11.295C4.11148 11.685 4.11148 12.315 4.50148 12.705L11.0915 19.295C11.4815 19.685 12.1115 19.685 12.5015 19.295C12.8915 18.905 12.8915 18.275 12.5015 17.885L7.62148 13.005H18.7915C19.3415 13.005 19.7915 12.555 19.7915 12.005C19.7915 11.455 19.3415 11.005 18.7915 11.005Z" />
+        </svg>        
+      </span>
+      <span class="_e_tpagination__action">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5.20898 13H16.379L11.499 17.88C11.109 18.27 11.109 18.91 11.499 19.3C11.889 19.69 12.519 19.69 12.909 19.3L19.499 12.71C19.889 12.32 19.889 11.69 19.499 11.3L12.919 4.69999C12.7322 4.51274 12.4785 4.40751 12.214 4.40751C11.9495 4.40751 11.6958 4.51274 11.509 4.69999C11.119 5.08999 11.119 5.71999 11.509 6.10999L16.379 11H5.20898C4.65898 11 4.20898 11.45 4.20898 12C4.20898 12.55 4.65898 13 5.20898 13Z" />
+        </svg>        
+      </span>
+    </div>
+  </div>
+</div>
diff --git a/src/packages/core/src/table/table-scripts.js b/src/packages/core/src/table/table-scripts.js
@@ -0,0 +1,47 @@
+window.setTimeout(function() {
+  /* scrollable-table.html perfect scrollbar */
+  const scrSections = document.querySelector('#scr-table__sections');
+  const scrScrollable = document.querySelector('#scr-table__section_scrollable');
+  const scrPs = new PerfectScrollbar(scrScrollable);
+
+  scrScrollable.addEventListener('ps-scroll-right', () => {
+    scrSections.classList.add('_e_table__section_left-shadow_on');
+  });
+
+  scrScrollable.addEventListener('ps-x-reach-start', () => {
+    scrSections.classList.remove('_e_table__section_left-shadow_on');
+  });
+
+  scrScrollable.addEventListener('ps-scroll-left', () => {
+    scrSections.classList.add('_e_table__sections_shadow_on');
+  });
+
+  scrScrollable.addEventListener('ps-x-reach-end', () => {
+    scrSections.classList.remove('_e_table__sections_shadow_on');
+  });
+
+  /* advanced-table.html perfect scrollbar */
+  const advSections = document.querySelector('#adv-table__sections');
+  const advFixed = document.querySelector('#adv-table__section_fixed');
+  const advScrollable = document.querySelector('#adv-table__section_scrollable');
+  const advPs = new PerfectScrollbar(advScrollable);
+
+  advScrollable.addEventListener('ps-scroll-right', () => {
+    advFixed.classList.add('_e_table__section_shadow_on');
+  });
+
+  advScrollable.addEventListener('ps-x-reach-start', () => {
+    advFixed.classList.remove('_e_table__section_shadow_on');
+  });
+
+  advScrollable.addEventListener('ps-scroll-left', () => {
+    advSections.classList.add('_e_table__sections_shadow_on');
+  });
+
+  advScrollable.addEventListener('ps-x-reach-end', () => {
+    advSections.classList.remove('_e_table__sections_shadow_on');
+  });
+
+  /* advanced-table.html indeterminate checkbox */
+  document.querySelector('#indeterminate-checkbox').indeterminate = true;
+}, 3000);
diff --git a/src/packages/core/src/table/table.css b/src/packages/core/src/table/table.css
@@ -19,6 +19,8 @@
   position: relative;
   display: flex;
   overflow: hidden;
+  border-top-left-radius: var(--S4);
+  border-top-right-radius: var(--S4);
 }
 
 /* 
@@ -137,6 +139,25 @@
   }
 }
 
+
+._e_table__sections_left-shadow {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    display: block;
+    width: var(--S24);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.0) 100%);
+    z-index: 1;
+    border-top-left-radius: var(--S4);
+    opacity: 0;
+    transition: opacity 100ms ease-out;
+    pointer-events: none;
+  }
+}
+
 /*
   If there's no footer, sections shadow should
   have bottom right border-radius.
@@ -154,6 +175,12 @@
   }
 }
 
+._e_table__section_left-shadow_on {
+  &::before {
+    opacity: 1;
+  }
+}
+
 ._e_thead {
   display: flex;
 }

diff --git a/src/packages/core/src/table/table.stories.mdx b/src/packages/core/src/table/table.stories.mdx
@@ -2,8 +2,9 @@ import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
 import pretty from 'pretty';
 
 import table from './table.html';
+import scrollableTable from './scrollable-table.html';
 import advancedTable from './advanced-table.html';
-import './advanced-table.js';
+import './table-scripts.js';
 
 <Meta title='Core/Table' />
 
@@ -15,6 +16,12 @@ import './advanced-table.js';
   </Story>
 </Preview>
 
+<Preview>
+  <Story name="scrollable" height="240px" parameters={{ docs: { source: { code: pretty(scrollableTable) } } }}>
+    { () => scrollableTable }
+  </Story>
+</Preview>
+
 <Preview>
   <Story name="advanced" height="320px" parameters={{ docs: { source: { code: pretty(advancedTable) } } }}>
     { () => advancedTable }