pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplify theming

Browse Source
This commit is contained in:
Wim Brand
2020-03-10 17:06:52 +01:00
parent b4524ded62
commit 75486d62d8
14 changed files with 202 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
res/include/script/file_manager/DirectoryElement.js
View File

@@ -17,17 +17,18 @@ function DirectoryElement(directoryArea, footer) {
let makeSortButton = (field, label, width) => {
this.sortButtons[field] = document.createElement("div")
this.sortButtons[field].innerText = label
this.sortButtons[field].style.width = width
this.sortButtons[field].style.minWidth = width
this.sortButtons[field].addEventListener("click", () => {
this.sortBy(field)
})
this.directorySorters.appendChild(this.sortButtons[field])
}
this.fieldNameWidth = "300px"
this.fieldDateWidth = "160px"
this.fieldSizeWidth = "100px"
this.fieldSizeWidth = "90px"
this.fieldTypeWidth = "200px"
makeSortButton("name", "Name", "")
makeSortButton("name", "Name", this.fieldNameWidth)
makeSortButton("dateCreated", "Creation Date", this.fieldDateWidth)
makeSortButton("size", "Size", this.fieldSizeWidth)
makeSortButton("type", "Type", this.fieldTypeWidth)
@@ -178,6 +179,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
{
let cell = document.createElement("div")
cell.style.minWidth = this.fieldNameWidth
let thumb = document.createElement("img")
thumb.src = file.icon
cell.appendChild(thumb)
@@ -189,7 +191,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
}
{
let cell = document.createElement("div")
cell.style.width = this.fieldDateWidth
cell.style.minWidth = this.fieldDateWidth
let label = document.createElement("span")
label.innerText = printDate(new Date(file.dateCreated), true, true, false)
cell.appendChild(label)
@@ -197,7 +199,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
}
{
let cell = document.createElement("div")
cell.style.width = this.fieldSizeWidth
cell.style.minWidth = this.fieldSizeWidth
let label = document.createElement("span")
label.innerText = file.sizeLabel
cell.appendChild(label)
@@ -205,7 +207,7 @@ DirectoryElement.prototype.createFileButton = function(file, index) {
}
{
let cell = document.createElement("div")
cell.style.width = this.fieldTypeWidth
cell.style.minWidth = this.fieldTypeWidth
let label = document.createElement("span")
label.innerText = file.type
cell.appendChild(label)

30
res/include/script/file_viewer/DetailsWindow.js
View File

@@ -72,7 +72,7 @@ DetailsWindow.prototype.renderGraph = function() {
Chart.defaults.global.defaultFontColor = "#b3b3b3"
Chart.defaults.global.defaultFontSize = 15
Chart.defaults.global.defaultFontFamily = "Ubuntu"
Chart.defaults.global.aspectRatio = 2.5
Chart.defaults.global.maintainAspectRatio = false;
Chart.defaults.global.elements.point.radius = 0
Chart.defaults.global.tooltips.mode = "index"
Chart.defaults.global.tooltips.axis = "x"
@@ -80,25 +80,25 @@ DetailsWindow.prototype.renderGraph = function() {
this.graph = new Chart(
document.getElementById('bandwidth_chart'),
{
type: 'line',
type: 'bar',
data: {
datasets: [
{
label: "Downloads",
backgroundColor: "rgba(64, 255, 64, .05)",
borderColor: "rgba(128, 255, 128, 1)",
borderWidth: 1.5,
lineTension: 0.1,
label: "Bandwidth",
backgroundColor: "rgba(64, 255, 64, .01)",
borderColor: "rgba(96, 255, 96, 1)",
borderWidth: 2,
lineTension: 0.2,
fill: true,
yAxisID: "y_bandwidth",
yAxisID: "y_bandwidth"
}, {
label: "Views",
backgroundColor: "rgba(64, 64, 255, .1)",
borderColor: "rgba(128, 128, 255, 1)",
borderWidth: 1.5,
lineTension: 0.1,
backgroundColor: "rgba(64, 64, 255, .01)",
borderColor: "rgba(64, 64, 255, 1)",
borderWidth: 2,
lineTension: 0.2,
fill: true,
yAxisID: "y_views",
yAxisID: "y_views"
}
]
},
@@ -115,7 +115,7 @@ DetailsWindow.prototype.renderGraph = function() {
labelString: "Downloads"
},
gridLines: {
color: "rgba(100, 255, 100, .1)"
color: "rgba(100, 255, 100, .05)"
}
}, {
type: "linear",
@@ -127,7 +127,7 @@ DetailsWindow.prototype.renderGraph = function() {
labelString: "Views"
},
gridLines: {
color: "rgba(128, 128, 255, .2)"
color: "rgba(128, 128, 255, .05)"
}
}
],

35
res/include/script/file_viewer/viewer_scripts/ImageViewer.js
View File

@@ -6,15 +6,19 @@ function ImageViewer(viewer, file) {
this.y = 0
this.dragging = false
this.zoom = 1
this.container = document.createElement("dv")
this.container.classList = "image-container"
this.element = document.createElement("img")
this.element.classList = "pannable center drop-shadow"
this.element.classList = "pannable center drop_shadow"
this.element.src = this.file.get_href
this.element.addEventListener("dblclick", (e) => { return this.doubleclick(e) })
this.element.addEventListener("doubletap", (e) => { return this.doubleclick(e) })
this.element.addEventListener("mousedown", (e) => { return this.mousedown(e) })
this.element.addEventListener("mousedown", (e) => { return this.mousedown(e) })
this.element.addEventListener("wheel", (e) => { return this.scroll(e) })
document.addEventListener("mousemove", (e) => { return this.mousemove(e) })
document.addEventListener("mouseup", (e) => { return this.mouseup(e) })
@@ -25,14 +29,31 @@ ImageViewer.prototype.render = function(parent) {
parent.appendChild(this.container)
}
ImageViewer.prototype.scroll = function(e) {
if (!this.zoomed) {
this.doubleclick(e)
}
console.log(e.deltaY)
this.zoom = this.zoom - (e.deltaY * 0.01);
if (this.zoom < 1) { this.zoom = 1 }
if (this.zoom > 10) { this.zoom = 10 }
this.element.style.width = this.zoom * 100 + "%"
this.element.style.height = "auto"
this.element.style.maxWidth = "1000%"
this.element.style.maxHeight = "1000%"
e.preventDefault()
e.stopPropagation()
return false
}
ImageViewer.prototype.doubleclick = function(e) {
if (this.zoomed) {
this.element.style.maxWidth = "100%"
this.element.style.maxHeight = "100%"
this.element.style.top = "50%"
this.element.style.left = "auto"
this.element.style.transform = "translateY(-50%)"
this.container.style.overflow = "hidden"
this.element.removeAttribute("style")
this.container.style.overflow = ""
this.zoomed = false
} else {
this.element.style.maxWidth = "none"

2
res/include/script/file_viewer/viewer_scripts/VideoViewer.js
View File

@@ -9,7 +9,7 @@ function VideoViewer(viewer, file, next) {
this.vidElement = document.createElement("video")
this.vidElement.autoplay = "autoplay"
this.vidElement.controls = "controls"
this.vidElement.classList = "center drop-shadow"
this.vidElement.classList = "center drop_shadow"
this.vidElement.addEventListener("ended", () => { this.next() }, false)
this.videoSource = document.createElement("source")

6
res/include/script/homepage.js
View File

@@ -28,14 +28,14 @@ UploadProgressBar.prototype.onProgress = function(progress){
this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.name
this.uploadDiv.style.background = 'linear-gradient('
+'to right, '
+'var(--file_background_color) 0%, '
+'var(--input_color_dark) 0%, '
+'var(--highlight_color) '+ ((progress*100)) +'%, '
+'var(--file_background_color) '+ ((progress*100)+1) +'%)'
+'var(--input_color_dark) '+ ((progress*100)+1) +'%)'
}
UploadProgressBar.prototype.onFinished = function(id){
console.log("Upload finished: "+this.file.name+" "+id)
this.uploadDiv.style.background = 'var(--file_background_color)'
this.uploadDiv.style.background = 'var(--input_color_dark)'
this.uploadDiv.href = '/u/'+id
this.uploadDiv.target= "_blank"

38
res/include/style/file_manager.css
View File

@@ -3,6 +3,8 @@
padding: 0;
}
/* Override the menu button so it doesn't overlap the file manager when the menu
is collapsed */
#button_toggle_navigation {
display: none;
}
@@ -10,24 +12,12 @@
.file_manager {
position: absolute;
padding: 0;
background-color: var(--layer_1_color);
box-shadow: #000000 8px 8px 50px 5px;
left: 24px;
top: 24px;
right: 24px;
bottom: 24px;
background-color: var(--layer_2_color);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
@media (max-width: 1000px) {
.file_manager {
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
.file_manager > .nav_bar {
flex-shrink: 0;
display: flex;
@@ -55,13 +45,14 @@
overflow: hidden;
top: 0;
z-index: 1;
background-color: var(--layer_1_color);
background-color: var(--layer_2_color);
min-width: 750px; /* Sum of all columns */
}
.file_manager > .directory_area > .directory_sorters > div {
flex-shrink: 0;
flex-grow: 1;
display: inline-block;
margin: 4px 10px;
padding: 4px;
box-sizing: border-box;
border-bottom: 1px solid var(--input_color);
cursor: pointer;
}
@@ -76,12 +67,6 @@
flex-shrink: 0;
flex-grow: 0;
}
@media (max-width: 1000px) {
.file_manager > .directory_area > .directory_sorters > :not(:first-child),
.node > :not(:first-child) {
display: none;
}
}
.file_manager > .directory_area {
flex-shrink: 1;
@@ -97,7 +82,7 @@
above are out of view*/
box-sizing: border-box;
display: block;
overflow: hidden;
min-width: 750px; /* Sum of all columns */
}
.file_manager > .status_bar {
@@ -117,7 +102,6 @@
control over the size.
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing*/
margin: 0;
padding: 4px;
box-sizing: border-box;
color: var(--text_color);
@@ -136,6 +120,8 @@
height: 100%;
overflow: hidden;
margin: auto 10px;
padding: 4px;
box-sizing: border-box;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;

47
res/include/style/layout.css
View File

@@ -54,7 +54,7 @@ html, body {
}
body{
background-color: #111111; /* Fallback */
background-color: var(--body_color);
background-color: var(--layer_2_color);
background-repeat: repeat;
margin: 0;
font-family: system-ui, sans-serif;
@@ -123,7 +123,7 @@ body{
transition: left 0.5s;
padding: 50px 0 50px 0;
}
@media (max-width: 600px) {
@media (max-width: 800px) {
.page_navigation {
left: -250px;
}
@@ -210,43 +210,44 @@ body, .checkers {
.highlight_dark,
.highlight_middle,
.highlight_light,
.highlight_headerbar,
.highlight_green,
.highlight_blue,
.highlight_red,
.highlight_1,
.highlight_2,
.highlight_3,
.highlight_4 {
.highlight_3{
position: relative;
width: auto;
height: auto;
box-sizing: border-box;
overflow: hidden;
text-align: center;
padding: .5em;
padding: 8px;
}
.highlight_dark, .highlight_1 {
background-color: var(--layer_1_color);
box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);}
box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);
}
.highlight_middle, .highlight_2 {
background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);}
box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);
}
.highlight_light, .highlight_3 {
background-color: var(--layer_3_color);
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);}
.highlight_headerbar, .highlight_4 {
background-color: var(--layer_4_color);
box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
.highlight_green {
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);
}
.highlight_green {
background-color: rgba(0, 255, 0, 0.05);
border-color: #00d000;}
.highlight_blue {
border-color: #00d000;
}
.highlight_blue {
background-color: rgba(32, 32, 255, 0.2);
border-color: rgb(54, 54, 255);}
.highlight_red {
border-color: rgb(54, 54, 255);
}
.highlight_red {
background-color: rgba(255, 0, 0, 0.1);
border-color: #B00000;}
border-color: #B00000;
}
.highlight_green,
.highlight_blue,
@@ -264,13 +265,15 @@ h1, h2, h3, h4, h5, h6 {
margin-left: 10px;
margin-right: 10px;
}
h1{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;}
h2{font-size: 1.75em; font-family: "light", sans-serif; font-weight: normal;}
h2, h3{ /* Differentiate it a bit, else it just looks like bold text */
border-bottom: 1px var(--layer_3_color_border) solid;
}
h1{font-size: 2.25em; font-family: "light", sans-serif; font-weight: normal;}
h2{font-size: 2em; font-family: "light", sans-serif; font-weight: normal;}
h3{font-size: 1.5em; font-family: "light", sans-serif; font-weight: normal;}
h4{font-size: 1.25em; font-family: sans-serif; font-weight: normal;}
h5{font-size: 1em; font-family: sans-serif; font-weight: normal;}
h6{font-size: .75em; font-family: sans-serif; font-weight: normal;}
h2, h3{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
p, .indent {
margin: 10px;
@@ -335,7 +338,7 @@ pre{
overflow: hidden;
border-radius: 2px;
box-shadow: 2px 2px 8px -3px var(--shadow_color);
background-color: var(--file_background_color);
background-color: var(--input_color_dark);
color: #bfbfbf; /* Fallback */
color: var(--text_color);
word-break: break-all;

11
res/include/style/viewer.css
View File

@@ -22,7 +22,6 @@
display: flex;
flex-direction: row;
text-align: left;
padding: 8px;
z-index: 10;
box-shadow: none;
}
@@ -31,8 +30,8 @@
.file_viewer > .file_viewer_headerbar > * {
flex-grow: 0;
flex-shrink: 0;
margin-left: .4em;
margin-right: .4em;
margin-left: 6px;
margin-right: 6px;
display: inline-flex;
}
.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
@@ -148,7 +147,7 @@
overflow-x: hidden;
float: left;
background-color: var(--layer_1_color);
box-shadow: inset 1px 1px 6px var(--shadow_color);
box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color);
text-align: center;
z-index: 48;
overflow: hidden;
@@ -193,8 +192,8 @@
transform: translateY(-50%);
}
.pannable{ cursor: move; }
.drop-shadow{ box-shadow: var(--shadow_color) 10px 10px 50px; }
.pannable { cursor: move; }
.drop_shadow { box-shadow: 1px 1px var(--layer_3_shadow) var(--shadow_color); }
/* ========================
|| TOOLBAR COMPONENTS ||