feat(theme): add theme switching functionality

.gitignore

@@ -4,7 +4,7 @@
 *.iml
 
 ## Directory-based project format:
-#.idea/
+.idea/
 # if you remove the above rule, at least ignore the following:
 
 # User-specific stuff:

.idea/modules.xml

@@ -3,6 +3,7 @@
   <component name="ProjectModuleManager">
     <modules>
       <module fileurl="file://$PROJECT_DIR$/.idea/file-browser.iml" filepath="$PROJECT_DIR$/.idea/file-browser.iml" />
+      <module fileurl="file://$PROJECT_DIR$/nginx-file-browser.iml" filepath="$PROJECT_DIR$/nginx-file-browser.iml" />
     </modules>
   </component>
 </project>

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx
+FROM nginx:alpine
 
 MAINTAINER Mohammad Naghavi <mohamnag@gmail.com>
 

README.md

@@ -3,7 +3,8 @@
 This web application is a very simple file browser which can be used
 effectively together with [nginx's autoindex module](http://nginx.org/en/docs/http/ngx_http_autoindex_module.html).
 
-![nginx file browser in action](assets/Screen-Shot-1.jpg)
+![nginx file browser in action - light theme](assets/screenshot-light.jpg)
+![nginx file browser in action - light theme](assets/screenshot-dark.jpg)
 
 A sample nginx configuration is also included which mounts **file browser** under root (`/`) and mounts files to be listed under `/files` path. Hence is the `filesBaseUrl` under
 
@@ -40,8 +41,3 @@ shall be changed to
 ```
 
 And the mounting point is now `/home/myuser/files-to-serve/` instead of `/opt/www/files/`.
-
-## Gruvbox theme
-
-A gruvbox theme is present in the css. You can use it by editing line 12 of the index.html. Simply change the link from `css/main.css` to `css/main-gruvbox.css`
-This theme is heavily inspired from iTerm2 color scheme that can be found here: [link](https://github.com/herrbischoff/iterm2-gruvbox)

css/main-gruvbox.css

@@ -1,124 +0,0 @@
-body {
-    background-color: #252525;
-}
-
-body > .container:first-child {
-    margin: 3rem auto 0;
-}
-
-h1 {
-    color: #9dd08e;
-}
-
-a {
-    text-decoration: none;
-    color: #549699;
-}
-
-a.file-name {
-    color: #ecdbb2;
-}
-
-
-.list-sort {
-    background: #413e3d;
-    border-radius: 1rem;
-    padding: 1.5rem 2rem .5rem;
-    color: #ecdbb2;
-}
-
-input[name="sort"] {
-    accent-color: #fe6142;
-}
-
-.list-sort label {
-    display: inline-block;
-    margin: 0 1rem 0 0;
-}
-
-.file-list {
-    list-style: none;
-}
-
-.file-list li {
-    margin: 1rem 0;
-}
-
-.file-list .file-name {
-    line-height: 4rem;
-    display: inline-block;
-    position: relative;
-    padding-left: 4rem;
-}
-
-.file-list .file-name::before {
-    background: no-repeat center center;
-    background-size: contain;
-    width: 3rem;
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-}
-
-.file-list .directory .file-name::before {
-    background-image: url(../image/directory.png);
-
-}
-
-.file-list .file .file-name::before {
-    background-image: url(../image/file.png);
-}
-
-.file-list .other .file-name::before {
-    background-image: url(../image/other.png);
-}
-
-.file-list .parent .file-name::before {
-    background-image: url(../image/parent.png);
-}
-
-.file-list .file-link {
-
-}
-
-.file-list .file-date {
-    padding: .25rem .5rem;
-    background: #549699;
-    border-radius: .5rem;
-    font-size: 70%;
-    margin: 0 .5rem;
-    color: #ecdbb2;
-}
-
-.file-list .directory .file-date {
-}
-
-.file-list .parent .file-date {
-    display: none;
-}
-
-.file-list .file-size {
-    padding: .25rem .5rem;
-    background: #79aa7d;
-    border-radius: .5rem;
-    font-size: 70%;
-    margin: 0 .5rem;
-    color: #ecdbb2;
-}
-
-.file-list .other .file-size,
-.file-list .parent .file-size,
-.file-list .directory .file-size {
-    display: none;
-}
-
-footer {
-    text-align: center;
-}
-
-footer small + small {
-    margin-left: 2rem;
-}

css/main.css

@@ -7,15 +7,19 @@ a {
     text-decoration: none;
 }
 
-.list-sort {
+.controls {
     background: #ddd;
     border-radius: 1rem;
     padding: 1.5rem 2rem .5rem;
 }
 
-.list-sort label {
+.controls span:not(:first-of-type) {
+    padding-left: 4rem;
+}
+
+.controls label {
     display: inline-block;
-    margin: 0 1rem 0 0;
+    margin: 0 0 0 .5rem;
 }
 
 .file-list {
@@ -103,4 +107,44 @@ footer {
 
 footer small + small {
     margin-left: 2rem;
+}
+
+/*
+    Start of alternations for dark theme
+*/
+
+body.dark {
+    background-color: #252525;
+    color: #ecdbb2;
+}
+
+body.dark h1 {
+    color: #9dd08e;
+}
+
+body.dark a {
+    color: #549699;
+}
+
+body.dark a.file-name {
+    color: #ecdbb2;
+}
+
+body.dark .controls {
+    background: #413e3d;
+    color: #ecdbb2;
+}
+
+body.dark input[name="sort"] {
+    accent-color: #fe6142;
+}
+
+body.dark .file-list .file-date {
+    background: #549699;
+    color: #ecdbb2;
+}
+
+body.dark .file-list .file-size {
+    background: #79aa7d;
+    color: #ecdbb2;
 }

index.html

@@ -20,8 +20,8 @@
 <div class="container">
     <h1>File Browser</h1>
 
-    <div class="list-sort">
-        <span>sort list by</span>
+    <div class="controls">
+        <span>sort list by:</span>
         <label>
             date
             <input type="radio" name="sort" value="date" checked>
@@ -34,6 +34,16 @@
             size
             <input type="radio" name="sort" value="size">
         </label>
+
+        <span>theme:</span>
+        <label>
+            light
+            <input type="radio" name="theme" value="" checked>
+        </label>
+        <label>
+            dark
+            <input type="radio" name="theme" value="dark">
+        </label>
     </div>
 
     <ul id="file-list" class="file-list">
@@ -49,14 +59,12 @@
 <footer>
     <div class="container">
         <small>
-            <a href="https://github.com/mohamnag/nginx-file-browser">nginx file browser</a> by 
-            <a href="http://naghavi.me">Mohammad Naghavi</a>
+            <a href="https://github.com/mohamnag/nginx-file-browser">nginx file browser</a>
         </small>
 
         <small>
-            icons by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a
-                href="http://www.flaticon.com"
-                title="Flaticon">flaticon.com</a>
+            icons by <a href="http://www.freepik.com" title="Freepik">Freepik</a>
+            from <a href="http://www.flaticon.com" title="Flaticon">flaticon.com</a>
         </small>
     </div>
 </footer>

js/main.js

@@ -6,19 +6,24 @@
  * * NOTICE:
  *      If your nginx config varies from the default config
  *      provided in this code, you probably need to change
- *      value of filesBaseUrl on top of this module too.
+ *      value of filesBaseUrl here too.
  *
  * Created by mohamnag on 11/02/16.
  */
 
-
-
 $(document).ready(function () {
 
-    var filesBaseUrl = "/files";
+    function applyTheme() {
+        var theme = $('input[name=theme]:checked').val()
 
-    var fileListElement = $("#file-list");
-    var fileItemElementTemplate = fileListElement.find("li").detach();
+        console.log(`setting theme to '${theme}'`)
+
+        $('body')
+            .removeClass()
+            .addClass(theme)
+
+        localStorage.setItem("theme", theme)
+    }
 
     function renderFileElement(directory, fileName, fileType, fileSize, fileDate) {
 
@@ -203,14 +208,26 @@ $(document).ready(function () {
 
     }
 
-    var isNavigating = false;
-
     function navigateToUrlLocation() {
         var requestedPath = window.location.hash;
         var startPath = requestedPath ? requestedPath.substr(1) : "/";
         navigateTo(startPath);
     }
 
+    var filesBaseUrl = "/files";
+    var isNavigating = false;
+    var fileListElement = $("#file-list");
+    var fileItemElementTemplate = fileListElement.find("li").detach();
+
+    // setup theme switching
+    $('input[name=theme]').on("change", applyTheme);
+
+    // apply current theme
+    var theme = localStorage.getItem("theme")
+    console.log(`theme '${theme}' loaded`)
+    $(`input[name=theme][value='${theme}']`).prop('checked', true)
+    applyTheme()
+
     window.onpopstate = function () {
         if (!isNavigating) {
             navigateToUrlLocation();