Adds functional batch deletion.

kalvn · Sep 24, 2017 · 7181ba8 · 7181ba8
1 parent 71333b1
commit 7181ba8
Show file tree

Hide file tree

Showing 11 changed files with 1,868 additions and 19 deletions.
diff --git a/material/build/scripts.min.js b/material/build/scripts.min.js
diff --git a/material/build/styles.min.css b/material/build/styles.min.css
diff --git a/material/linklist.html b/material/linklist.html
@@ -37,7 +37,7 @@
 
     <div class="links-list">
         {loop="$links"}
-            <div id="{$value.shorturl}" class="link-outer{if="$value.class"} {$value.class}{/if}">
+            <div id="{$value.id}" class="link-outer{if="$value.class"} {$value.class}{/if}">
                 <div class="link-overlay"></div>
                 <div class="link-inner">
                     <div class="link-header">

diff --git a/material/scss/components/_actionbar.scss b/material/scss/components/_actionbar.scss
@@ -0,0 +1,27 @@
+.actionbar{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    z-index: 50;
+
+    @extend .shadow-top-1;
+
+    .row{
+        padding: $space-m;
+    }
+}
+
+.actionbar-label{
+    float: left;
+    padding: 7px;
+}
+
+.actionbar-controls{
+    float: right;
+
+    button{
+        margin-left: $space-s;
+    }
+}
diff --git a/material/scss/components/_animations.scss b/material/scss/components/_animations.scss
@@ -59,4 +59,32 @@
         opacity: 1;
         transform: translateX(0);
     }
+}
+
+.animate-hide-slide-to-bottom{
+    animation: hide-slide-to-bottom $animation-speed ease;
+}
+@keyframes hide-slide-to-bottom {
+    0% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+    100%{
+        opacity: 0;
+        transform: translateY(300px);
+    }
+}
+
+.animate-show-slide-from-bottom{
+    animation: show-slide-from-bottom $animation-speed ease;
+}
+@keyframes show-slide-from-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(300px);
+    }
+    100%{
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
diff --git a/material/scss/components/_helpers.scss b/material/scss/components/_helpers.scss
@@ -124,4 +124,20 @@ p.highlight{
     &:hover{
         background-color: $color-gray-hover-light;
     }
+}
+
+ul.is-bordered{
+    li{
+        padding: $space-t;
+        border: 1px solid $color-gray-light;
+        border-bottom: none;
+        background-color: $color-gray-hover;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &:last-child{
+            border-bottom: 1px solid $color-gray-light;
+        }
+    }
 }
diff --git a/material/scss/components/_modal.scss b/material/scss/components/_modal.scss
@@ -1,5 +1,6 @@
 .modal{
-    margin-top: 100px;
+    margin-top: 10%;
+    margin-top: 10vh;
     background: #fff;
     @extend .shadow-5;
 }
@@ -9,6 +10,8 @@
 }
 .modal-body{
     padding: 10px 20px 10px 20px;
+    max-height: 55vh;
+    overflow: auto;
     color: #666;
 }
 .modal-footer{

diff --git a/material/scss/components/_shadow.scss b/material/scss/components/_shadow.scss
@@ -18,6 +18,10 @@
   box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
 }
 
+.shadow-top-1 {
+  box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.16), 2px 0 10px 0 rgba(0, 0, 0, 0.12);
+}
+
 .shadow-button {
   box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
 }

diff --git a/material/scss/components/_structure.scss b/material/scss/components/_structure.scss
@@ -205,6 +205,11 @@ a.link-url:hover{
 .link-actions{
     height: 24px;
     text-align: right;
+
+    .is-selectable &{
+        // Actions are hidden when the list is in batch select mode.
+        display: none;
+    }
 }
 .link-actions > *{
     display: block;

diff --git a/material/scss/styles.scss b/material/scss/styles.scss
@@ -19,6 +19,7 @@
 @import 'components/modal';
 @import 'components/form';
 @import 'components/text';
+@import 'components/actionbar';
 
 @import 'components/bookmarklet';
 @import 'components/header';