feat(theme): add theme switching functionality

This commit is contained in:
Mohammad Naghavi 2022-02-07 16:55:50 +01:00
parent 857b427155
commit 987fdc10c0
No known key found for this signature in database
GPG key ID: 42BC5172E916781B
13 changed files with 92 additions and 150 deletions

2
.gitignore vendored
View file

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

View file

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

View file

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

View file

@ -3,7 +3,8 @@
This web application is a very simple file browser which can be used 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). 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 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/`. 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)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

BIN
assets/screenshot-dark.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

BIN
assets/screenshot-light.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

View file

@ -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;
}

View file

@ -7,15 +7,19 @@ a {
text-decoration: none; text-decoration: none;
} }
.list-sort { .controls {
background: #ddd; background: #ddd;
border-radius: 1rem; border-radius: 1rem;
padding: 1.5rem 2rem .5rem; padding: 1.5rem 2rem .5rem;
} }
.list-sort label { .controls span:not(:first-of-type) {
padding-left: 4rem;
}
.controls label {
display: inline-block; display: inline-block;
margin: 0 1rem 0 0; margin: 0 0 0 .5rem;
} }
.file-list { .file-list {
@ -104,3 +108,43 @@ footer {
footer small + small { footer small + small {
margin-left: 2rem; 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;
}

View file

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

View file

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