add shades to files_bar

css/stylesheet.css

@@ -58,14 +58,14 @@ button {
 }
 
 .btn:hover,
-button:hover {
+button:not([disabled]):hover {
     background: rgba(0, 0, 0, .15) !important;
     cursor: pointer;
 }
 
 .btn.active,
 button.active {
-    background: rgb(44, 44, 44);
+    background: rgba(0, 0, 0, .28);
 }
 
 .btn input,
@@ -138,7 +138,7 @@ nav h3 {
 }
 
 .sidemenu #footer {
-    border-top: 2px solid rgb(44, 44, 44);
+    border-top: 2px solid rgba(0, 0, 0, .28);
 }
 
 .sidemenu button {
@@ -181,7 +181,7 @@ section,
 
 nav,
 section {
-    border: 1px solid rgb(44, 44, 44);
+    border: 1px solid rgba(0, 0, 0, .28);
     box-sizing: border-box;
 }
 
@@ -227,7 +227,7 @@ section {
     z-index: 5;
     padding: 4px;
     font-size: 14px;
-    background: rgb(44, 44, 44);
+    background: rgba(0, 0, 0, .28);
 }
 
 .module_wrapper > .wrapper {
@@ -258,11 +258,19 @@ section {
     height: 100%
 }
 
-.files_bar > .button-left {
+.files_bar > button {
+    width: 30px;
+}
+
+.files_bar > button:disabled {
+    background: rgba(0, 0, 0, .15);
+}
+
+.files_bar > .btn-left {
     left: 0;
 }
 
-.files_bar > .button-right {
+.files_bar > .btn-right {
     right: 0;
 }
 
@@ -277,10 +285,23 @@ section {
     max-width: 80%;
 }
 
+.files_bar > .wrapper.shadow-left {
+    box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, .6);
+}
+
+.files_bar > .wrapper.shadow-right {
+    box-shadow: inset -16px 0 16px -16px rgba(0, 0, 0, .6);
+}
+
+.files_bar > .wrapper.shadow-left.shadow-right {
+    box-shadow: inset 16px 0 16px -16px rgba(0, 0, 0, .6),
+    inset -16px 0 16px -16px rgba(0, 0, 0, .6);
+}
+
 .explanation_container {
     top: 30px;
     height: 30px;
-    background: rgb(44, 44, 44);
+    background: rgba(0, 0, 0, .28);
     padding: 7px;
     font-size: 12px;
 }

index.html

@@ -89,9 +89,9 @@
     </div>
     <div class="editor_container">
         <section class="files_bar">
-            <button class="button-left">&lt;</button>
+            <button class="btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
             <div class="wrapper"></div>
-            <button class="button-right">&gt;</button>
+            <button class="btn-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
         </section>
         <section class="explanation_container">
             <span id="explanation"></span>

js/script.js

@@ -168,35 +168,58 @@ var showFiles = function (category, algorithm, files) {
             }
         })(file, files[file]);
     }
+    $('.files_bar > .wrapper').scroll();
 };
-$('.files_bar > .button-left').click(function () {
-    var $parent = $('.files_bar > .wrapper');
-    var clipWidth = $parent.width();
-    var scrollLeft = $parent.scrollLeft();
-    $($parent.children('button').get().reverse()).each(function () {
+$('.files_bar > .btn-left').click(function () {
+    var $wrapper = $('.files_bar > .wrapper');
+    var clipWidth = $wrapper.width();
+    var scrollLeft = $wrapper.scrollLeft();
+    $($wrapper.children('button').get().reverse()).each(function () {
         var left = $(this).position().left;
         var right = left + $(this).outerWidth();
         if (0 > left) {
-            $parent.scrollLeft(scrollLeft + right - clipWidth);
+            $wrapper.scrollLeft(scrollLeft + right - clipWidth);
             return false;
         }
     });
 });
-$('.files_bar > .button-right').click(function () {
-    var $parent = $('.files_bar > .wrapper');
-    var clipWidth = $parent.width();
-    var scrollLeft = $parent.scrollLeft();
-    $parent.children('button').each(function () {
+$('.files_bar > .btn-right').click(function () {
+    var $wrapper = $('.files_bar > .wrapper');
+    var clipWidth = $wrapper.width();
+    var scrollLeft = $wrapper.scrollLeft();
+    $wrapper.children('button').each(function () {
         var left = $(this).position().left;
         var right = left + $(this).outerWidth();
         console.log(left);
         console.log(right);
         if (clipWidth < right) {
-            $parent.scrollLeft(scrollLeft + left);
+            $wrapper.scrollLeft(scrollLeft + left);
             return false;
         }
     });
 });
+$('.files_bar > .wrapper').scroll(function () {
+    var definitelyBigger = function (x, y) {
+        return x > y + 2;
+    };
+    var $wrapper = $('.files_bar > .wrapper');
+    var clipWidth = $wrapper.width();
+    var $left = $wrapper.children('button:first-child');
+    var $right = $wrapper.children('button:last-child');
+    var left = $left.position().left;
+    var right = $right.position().left + $right.outerWidth();
+    if (definitelyBigger(clipWidth, right)) {
+        var scrollLeft = $wrapper.scrollLeft();
+        $wrapper.scrollLeft(scrollLeft + clipWidth - right);
+        return;
+    }
+    var lefter = definitelyBigger(0, left);
+    var righter = definitelyBigger(right, clipWidth);
+    $wrapper.toggleClass('shadow-left', lefter);
+    $wrapper.toggleClass('shadow-right', righter);
+    $('.files_bar > .btn-left').attr('disabled', !lefter);
+    $('.files_bar > .btn-right').attr('disabled', !righter);
+});
 var loadAlgorithm = function (category, algorithm) {
     if (checkLoading()) return;
     showAlgorithm(category, algorithm);
@@ -388,6 +411,7 @@ for (var i = 0; i < dividers.length; i++) {
                     $second.css('left', percent + '%');
                     x = e.pageX;
                     tm.resize();
+                    $('.files_bar > .wrapper').scroll();
                 }
             });
             $(document).mouseup(function (e) {