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

Style fixes

Browse Source
This commit is contained in:
Wim Brand
2019-11-21 20:25:06 +01:00
parent 59ef838581
commit 68e28bf51a
9 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
res/static/script/compiled/home.js
View File

@@ -52,7 +52,7 @@ var UploadProgressBar = /** @class */ (function () {
this.uploadDiv.appendChild(document.createElement("br")); this.uploadDiv.appendChild(document.createElement("br"));
this.uploadDiv.appendChild(linkSpan); this.uploadDiv.appendChild(linkSpan);
}; };
UploadProgressBar.prototype.onFailure = function (response, error) { UploadProgressBar.prototype.onFailure = function (error) {
this.uploadDiv.style.background = 'var(--danger_color)'; this.uploadDiv.style.background = 'var(--danger_color)';
this.uploadDiv.appendChild(document.createTextNode(this.file.name)); this.uploadDiv.appendChild(document.createTextNode(this.file.name));
this.uploadDiv.appendChild(document.createElement("br")); this.uploadDiv.appendChild(document.createElement("br"));
@@ -308,7 +308,7 @@ var UploadWorker = /** @class */ (function () {
}; };
UploadWorker.prototype.newFile = function () { UploadWorker.prototype.newFile = function () {
var file = this.manager.grabFile(); var file = this.manager.grabFile();
if (file === undefined) { if (file === undefined) { // No more files in the queue. We're finished
this.uploading = false; this.uploading = false;
console.debug("No files left in queue"); console.debug("No files left in queue");
return; // Stop the thread return; // Stop the thread

15
res/static/style/layout.css
View File

@@ -202,26 +202,29 @@ body{
.highlight_headerbar, .highlight_headerbar,
.highlight_green, .highlight_green,
.highlight_blue, .highlight_blue,
.highlight_red { .highlight_red,
.highlight_1,
.highlight_2,
.highlight_3,
.highlight_4 {
position: relative; position: relative;
width: auto; width: auto;
height: auto; height: auto;
/* margin: 0; */
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
padding: .5em; padding: .5em;
} }
.highlight_dark { .highlight_dark, .highlight_1 {
background-color: var(--layer_1_color); 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_middle, .highlight_2 {
background-color: var(--layer_2_color); 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_light, .highlight_3 {
background-color: var(--layer_3_color); background-color: var(--layer_3_color);
box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);} box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);}
.highlight_headerbar { .highlight_headerbar, .highlight_4 {
background-color: var(--layer_4_color); background-color: var(--layer_4_color);
box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);} box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
.highlight_green { .highlight_green {

28
res/static/style/viewer.css
View File

@@ -16,24 +16,25 @@
} }
/* Headerbar (row 1) */ /* Headerbar (row 1) */
.file_viewer > .highlight_headerbar { .file_viewer > .file_viewer_headerbar {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
padding: 8px; padding: 8px;
z-index: 10;
} }
/* Headerbar components */ /* Headerbar components */
.file_viewer > .highlight_headerbar > * { .file_viewer > .file_viewer_headerbar > * {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-left: .4em; margin-left: .4em;
margin-right: .4em; margin-right: .4em;
display: inline-flex; display: inline-flex;
} }
.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title { .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
display: flex; display: flex;
@@ -43,18 +44,18 @@
line-height: 2em; line-height: 2em;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.file_viewer > .highlight_headerbar > .button_home::after { .file_viewer > .file_viewer_headerbar > .button_home::after {
content: "pixeldrain"; content: "pixeldrain";
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.file_viewer > .highlight_headerbar > .button_home::after { .file_viewer > .file_viewer_headerbar > .button_home::after {
content: "pd"; content: "pd";
} }
.file_viewer > .highlight_headerbar > .list_navigator_buttons { .file_viewer > .file_viewer_headerbar > .list_navigator_buttons {
display: none; display: none;
} }
} }
.file_viewer > .highlight_headerbar > .file_viewer_headerbar_title > span { .file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title > span {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
margin-right: 1em; margin-right: 1em;
@@ -89,6 +90,7 @@
width: auto; width: auto;
height: auto; height: auto;
margin: 0; margin: 0;
z-index: 9;
} }
.file_viewer > .file_viewer_window > .file_viewer_file_preview { .file_viewer > .file_viewer_window > .file_viewer_file_preview {
position: absolute; position: absolute;
@@ -101,7 +103,7 @@
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
transition: left 1s; transition: left 0.5s;
overflow: hidden; overflow: hidden;
} }
@@ -118,8 +120,8 @@
top: 0; top: 0;
padding: 0; padding: 0;
text-align: left; text-align: left;
box-shadow: 2px 2px 8px var(--shadow_color); box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);
transition: left 1s; transition: left 0.5s;
} }
.file_viewer > .file_viewer_window > .file_viewer_sharebar{ .file_viewer > .file_viewer_window > .file_viewer_sharebar{
position: absolute; position: absolute;
@@ -135,7 +137,7 @@
text-align: center; text-align: center;
z-index: 48; z-index: 48;
overflow: hidden; overflow: hidden;
transition: left 1s; transition: left 0.5s;
} }
/* ===================== /* =====================
@@ -261,8 +263,8 @@
flex-direction: column; flex-direction: column;
opacity: 0; opacity: 0;
transition: visibility .5s, opacity .5s; transition: visibility .5s, opacity .5s;
background-color: var(--layer_1_color); background-color: var(--layer_2_color);
border-color: var(--layer_1_color_border); border-color: var(--layer_2_color_border);
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
top: 20%; top: 20%;

2
res/static/typescript/home/home.ts
View File

@@ -67,7 +67,7 @@ class UploadProgressBar implements FileUpload {
this.uploadDiv.appendChild(document.createElement("br")) this.uploadDiv.appendChild(document.createElement("br"))
this.uploadDiv.appendChild(linkSpan) this.uploadDiv.appendChild(linkSpan)
} }
public onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string) { public onFailure(error: string) {
this.uploadDiv.style.background = 'var(--danger_color)' this.uploadDiv.style.background = 'var(--danger_color)'
this.uploadDiv.appendChild(document.createTextNode(this.file.name)) this.uploadDiv.appendChild(document.createTextNode(this.file.name))
this.uploadDiv.appendChild(document.createElement("br")) this.uploadDiv.appendChild(document.createElement("br"))

2
res/static/typescript/home/tsconfig.json
View File

@@ -8,4 +8,4 @@
"../lib/jquery.d.ts", "../lib/jquery.d.ts",
"../lib/uploader.ts" "../lib/uploader.ts"
] ]
} }

2
res/static/typescript/lib/jquery.d.ts vendored
View File

@@ -8024,4 +8024,4 @@ interface JQueryEasingFunctions {
swing: JQueryEasingFunction; swing: JQueryEasingFunction;
} }
// endregion // endregion

4
res/static/typescript/lib/uploader.ts
View File

@@ -78,12 +78,12 @@ class UploadWorker {
private upload(file: FileUpload){ private upload(file: FileUpload){
console.debug("Starting upload of " + file.name) console.debug("Starting upload of " + file.name)
var that = this // jquery changes the definiton of "this"
var formData = new FormData() var formData = new FormData()
formData.append("name", file.name) formData.append("name", file.name)
formData.append('file', file.file) formData.append('file', file.file)
var that = this // jquery changes the definiton of "this"
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: apiEndpoint+"/file", url: apiEndpoint+"/file",

4
res/template/file_viewer.html
View File

@@ -23,7 +23,7 @@
<body> <body>
<div id="file_viewer" class="file_viewer"> <div id="file_viewer" class="file_viewer">
<div id="file_viewer_headerbar" class="highlight_headerbar"> <div id="file_viewer_headerbar" class="highlight_1 file_viewer_headerbar">
<button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button> <button id="button_toggle_toolbar" class="button_toggle_toolbar" onClick="Toolbar.toggle();">☰</button>
<a href="/" id="button_home" class="button button_home"> <a href="/" id="button_home" class="button button_home">
<img src="/res/img/pixeldrain_transparent.png" <img src="/res/img/pixeldrain_transparent.png"
@@ -107,7 +107,7 @@
</div> </div>
<div id="details_popup" class="popup details_popup"> <div id="details_popup" class="popup details_popup">
<div id="details_popup_title" class="highlight_headerbar"> <div id="details_popup_title" class="highlight_1">
File Info File Info
<button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">🞫</button> <button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">🞫</button>
</div> </div>

18
webcontroller/user_style.go
View File

@@ -317,20 +317,20 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
HighlightTextColor: hsl{0, 0, 0}, HighlightTextColor: hsl{0, 0, 0},
DangerColor: hsl{40, 1, .5}, DangerColor: hsl{40, 1, .5},
FileBackgroundColor: hsl{170, .04, .29}, FileBackgroundColor: hsl{170, .04, .29},
ScrollbarForegroundColor: hsl{150, .02, .78}, ScrollbarForegroundColor: hsl{204, .05, .78}, // hsl(204, 5%, 78%)
ScrollbarHoverColor: hsl{150, .02, .88}, ScrollbarHoverColor: hsl{204, .05, .88},
ScrollbarBackgroundColor: hsl{170, .05, .26}, ScrollbarBackgroundColor: hsl{200, .13, .27}, // hsl(200, 13%, 27%)
BackgroundColor: hsl{0, 0, 0}, BackgroundColor: hsl{0, 0, 0},
BodyColor: hsl{172, .06, .25}, BodyColor: hsl{172, .06, .25},
Layer1Color: hsl{170, .06, .21}, Layer1Color: hsl{200, .19, .18}, // hsl(200, 19%, 18%)
Layer1Shadow: 3, Layer1Shadow: 3,
Layer2Color: hsl{160, .04, .31}, Layer2Color: hsl{199, .14, .23}, // hsl(199, 14%, 23%)
Layer2Shadow: 5, Layer2Shadow: 5,
Layer3Color: hsl{170, .02, .47}, Layer3Color: hsl{199, .14, .27}, // hsl(199, 14%, 27%)
Layer3Shadow: 7, Layer3Shadow: 6,
Layer4Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%) Layer4Color: hsl{200, .14, .30}, // hsl(200, 14%, 30%)
Layer4Shadow: 9, Layer4Shadow: 7,
ShadowColor: hsl{0, 0, 0}, ShadowColor: hsl{0, 0, 0},
ShadowSpread: 7, ShadowSpread: 7,