feat: table component state synchronizing

FromDoppler · Jul 16, 2019 · b151378 · b151378
1 parent 4405625
commit b151378
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/assets/scss/modules/_tables.scss b/assets/scss/modules/_tables.scss
@@ -85,25 +85,65 @@
 
     tbody {
       tr {
+        border-bottom: 1px solid $dp-color-silver;
 
-        &:nth-of-type(odd) {
-            background: $bg-color-zebra;
+        &:nth-child(odd) {
+          background: $bg-color-zebra;
+        }
+
+        &:nth-child(even) {
+          background: $dp-color-white;
         }
 
         &:hover {
           background: $bg-color-hover;
         }
       }
 
+
       td {
         color: $dp-color-grey;
         border: $dp-spaces--lv0;
-        box-shadow: $dp-spaces--lv0 -1px $dp-spaces--lv0 $dp-spaces--lv0 $dp-color-silver inset;
-        height: $dp-spaces--lv7;
         padding-left: $dp-spaces--lv2;
         padding-right: $dp-spaces--lv3;
         font-size: $font-size-table;
       }
+
+      .sync{
+        color: $dp-color-green;
+
+        td{
+          color: $dp-color-green;
+          background: $dp-color-white;
+          border-top: 1px solid $dp-color-green;
+          border-bottom: 1px solid $dp-color-green;
+        }
+
+        .text-sync {
+          animation: flash 2s infinite;
+
+          .icon-clock{
+            margin: 0 5px;
+            top: -2px;
+            position: relative;
+          }
+        }
+
+          /// Animation text
+          @keyframes flash {
+            from,
+            50%,
+            to {
+              opacity: 1;
+            }
+
+            25%,
+            75% {
+              opacity: 0;
+            }
+          }
+        }
+
     }
 
     caption,

diff --git a/assets/templates/partials/_table-component.html b/assets/templates/partials/_table-component.html
@@ -29,6 +29,11 @@
       <td>Content 4</td>
       <td>Content 5</td>
     </tr>
+    <tr class="sync">
+      <td colspan="1">Enderec (dplrvetex)</td>
+      <td colspan="1">Lista nueva</td>
+      <td colspan="3"><span class="text-sync"><i class="ms-icon icon-clock"></i> Synchronizing...</span></td>
+    </tr>
     <tr>
       <td>Content 1</td>
       <td>Content 2</td>