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

add style engine

Browse Source
This commit is contained in:
Wim Brand
2018-07-11 22:46:44 +02:00
parent 3c2243246a
commit 2e804e546c
9 changed files with 264 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -78,6 +78,11 @@ document.addEventListener('drop', function (e) {
handleUploads(e.dataTransfer.files);
}
});
// Style selector
$("input[name=style]").change(function (evt) {
Cookie.write("style", evt.target.id.substring(6));
location.reload();
});
var Cookie;
(function (Cookie) {
function read(name) {

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

@@ -10,7 +10,7 @@
html{height: 100%;}
body{
background-color: #111;
background-color: var(--background_color);
background-repeat: repeat;
font-size: 16px;
font-family: 'Ubuntu', sans-serif;
@@ -20,6 +20,7 @@ body{
height: 100%;
overflow-x: hidden;
color: var(--text_color);
filter: hue-rotate(160);
}
/* Page layout elements */
@@ -39,11 +40,11 @@ body{
height: auto;
padding: 0px 8px 0px 8px;
box-sizing: border-box;
background-color: hsl(20, 5%, 14%);;
background-color: var(--body_color);
margin-top: 30px;
margin-bottom: 30px;
text-align: left;
box-shadow: #000000 8px 8px 50px 5px;
box-shadow: var(--shadow_color) 8px 8px var(--shadow_spread) var(--shadow_intensity);
z-index: 1;
word-break: break-word;
}
@@ -62,8 +63,8 @@ body{
}
.navigation a:hover {
background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
box-shadow: var(--highlight_border), 2px 2px 8px #000000;
color: #000000;
box-shadow: var(--highlight_border), 2px 2px 8px var(--shadow_color);
color: var(--highlight_text_color);
text-decoration: none;
}
.navigation .icon {
@@ -104,9 +105,9 @@ body{
padding: 4px 0px 4px 0px;
z-index: 101;
}
.highlight_light {background-color: #484848; border-color: #686868;}
.highlight_middle {background-color: #3a3a3a; border-color: #686868;}
.highlight_dark {background-color: #303030; border-color: #686868;}
.highlight_dark {background-color: var(--accent_color_dark); border-color: var(--accent_color_dark_border);}
.highlight_middle {background-color: var(--accent_color_medium); border-color: var(--accent_color_medium_border);}
.highlight_light {background-color: var(--accent_color_light); border-color: var(--accent_color_light_border);}
.highlight_green {background-color: rgba(0, 255, 0, 0.05); border-color: #00d000;}
.highlight_blue {background-color: rgba(32, 32, 255, 0.2); border-color: rgb(54, 54, 255);}
.highlight_red {background-color: rgba(255, 0, 0, 0.05); border-color: #B00000;}
@@ -116,12 +117,12 @@ body{
/* Common elements */
h3{border-bottom: 1px #777 solid;} /* Differentiate it a bit, else it just looks like bold text */
h3{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
hr{
height: 8px;
border: none;
background: linear-gradient(#101010, #303030);
background: linear-gradient(var(--accent_color_dark), var(--accent_color_light));
margin: 16px -8px 16px -8px;
}
@@ -129,8 +130,8 @@ hr{
width: 12px; /* for vertical scrollbars */
height: 12px; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0);}
::-webkit-scrollbar-thumb {background-color: #555;}
::-webkit-scrollbar-track {background: var(--accent_color_dark);}
::-webkit-scrollbar-thumb {background-color: var(--accent_color_light);}
::-webkit-scrollbar-corner{background: transparent;}
a {color: var(--highlight_color); text-decoration: none;}
@@ -143,12 +144,12 @@ a:hover {color: var(--highlight_color); text-decoration: underline;}
max-width: 30em;
}
table:not(.form) {border-collapse: collapse; width: 100%;}
tr:not(.form) {border-bottom: 1px #333 solid;}
tr:not(.form) {border-bottom: 1px var(--accent_color_medium_border) solid;}
tr > td {padding: 6px;}
pre{
padding: 2px;
border-bottom: 1px #333 solid;
border-bottom: 1px var(--accent_color_medium_border) solid;
overflow-x: scroll;
}
@@ -215,8 +216,8 @@ pre{
margin: 6px;
padding: 0;
overflow: hidden;
box-shadow: 0px 0px 10px 4px #111;
background-color: #111;
box-shadow: 0px 0px 10px 4px var(--shadow_color);
background-color: var(--file_background_color);
color: var(--text_color);
word-break: break-all;
text-align: left;
@@ -247,14 +248,14 @@ select{
border-radius: 4px;
border: none;
margin: 2px;
background: linear-gradient(#606060, #404040);
background: linear-gradient(var(--input_color), var(--input_color_dark));
padding: 6px 10px 6px 10px;
box-shadow: 2px 2px 8px #000000;
box-shadow: 2px 2px 8px var(--shadow_color);
font-weight: bold;
font-size: 0.85em;
line-height: 1;
text-decoration: none;
color: #FFFFFF;
color: var(--input_text_color);
outline: 0;
vertical-align: middle;
cursor: pointer;
@@ -272,9 +273,9 @@ input[type="submit"]:focus,
input[type="button"]:focus,
input[type="color"]:focus,
select:focus{
color: #FFFFFF;
color: var(--input_text_color);
text-decoration: none;
box-shadow: var(--highlight_border), 2px 2px 8px #000000;
box-shadow: var(--highlight_border), 2px 2px 8px var(--shadow_color);
}
button:active,
.button:active,
@@ -282,18 +283,18 @@ input[type="submit"]:active,
input[type="button"]:active,
input[type="color"]:active,
select:active{
background: linear-gradient(#404040, #606060);
box-shadow: inset 3px 3px 6px #000000;
background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 3px 3px 6px var(--shadow_color);
padding: 8px 8px 4px 12px;
}
.button_full_width {width: calc(100% - 4px);}
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: #000000 !important;}
.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important; color: #000000 !important;}
.button_red {background: linear-gradient(#821C40, #61152F) !important;}
.button_red:active {background: linear-gradient(#61152F, #821C40) !important;}
.button_highlight {background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important; color: var(--highlight_text_color) !important;}
.button_red {background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important;}
.button_red:active {background: linear-gradient(var(--danger_color_dark), var(--danger_color)) !important;}
/* Dropdown list of the select tag */
option{background-color: #404040; color: #FFFFFF;}
option{background-color: var(--input_color_dark); color: var(--text_color)}
/* TEXT FIELDS */
textarea,
@@ -305,10 +306,10 @@ input[type="number"]{
border: none;
box-sizing: border-box;
border-radius: 4px;
background: linear-gradient(#404040, #606060);
box-shadow: inset 3px 3px 6px #000000;
background: linear-gradient(var(--input_color_dark), var(--input_color));
box-shadow: inset 3px 3px 6px var(--shadow_color);
padding: 3px 5px;
color: var(--text_color);
color: var(--input_text_color);
height: 26px;
font-size: 18px;
font-family: 'Ubuntu', sans-serif;
@@ -325,7 +326,7 @@ input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus{
box-shadow: var(--highlight_border), inset 3px 3px 6px #000000;
box-shadow: var(--highlight_border), inset 3px 3px 6px var(--shadow_color);
}
input[type=file]{

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

@@ -86,7 +86,7 @@ body{
}
.drop-shadow{
box-shadow: #000 10px 10px 50px;
box-shadow: var(--shadow_color) 10px 10px 50px;
}
/* ========================
@@ -99,14 +99,14 @@ body{
z-index: 52;
overflow: hidden;
float: left;
background-color: #000;
background-color: var(--background_color);
left: 0;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
border-right: 2px ridge var(--highlight_color);
box-shadow: 2px 2px 8px #000000;
box-shadow: 2px 2px 8px var(--shadow_color);
}
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
@@ -169,8 +169,8 @@ body{
overflow-y: scroll;
overflow-x: hidden;
float: left;
background-color: #000;
box-shadow: 2px 2px 8px #000000;
background-color: var(--background_color);
box-shadow: 2px 2px 8px var(--shadow_color);
text-align: center;
border-right: 2px ridge var(--highlight_color);
z-index: 50;
@@ -185,7 +185,7 @@ body{
.full-popup{
position: fixed;
display: none;
background-color: #000;
background-color: var(--background_color);
left: 142px;
right: 20px;
bottom: 20px;
@@ -194,13 +194,16 @@ body{
padding: 10px;
box-sizing: border-box;
text-align: left;
box-shadow: #eee 0px 0px 50px;
box-shadow: var(--shadow_color) 0px 0px 50px;
z-index: 100;
}
table {width: auto !important;}
table > tbody > tr {border: none !important;}
.corner-popup{
position: fixed;
background-color: #000;
background-color: var(--background_color);
right: 20px;
bottom: 20px;
width: fit-content;
@@ -208,7 +211,7 @@ body{
overflow: hidden;
padding: 5px;
box-shadow: #eee 0px 0px 50px;
box-shadow: var(--shadow_color) 0px 0px 50px;
z-index: 200;
}
@@ -227,7 +230,7 @@ body{
}
.bytecounter{
color: #eeeeee;
color: var(--text_color);
font-size: 16px;
font-family: 'Ubuntu', sans-serif;
text-align: right;

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

@@ -111,3 +111,9 @@ document.addEventListener('drop', function(e: DragEvent){
handleUploads(e.dataTransfer.files)
}
})
// Style selector
$("input[name=style]").change(function(evt){
Cookie.write("style", evt.target.id.substring(6))
location.reload()
})

2
res/template/account/file_manager.html
View File

@@ -7,7 +7,7 @@
.file_manager {
position: absolute;
padding: 0px 8px 0px 8px;
background-color: #252525;
background-color: var(--body_color);
box-shadow: #000000 8px 8px 50px 5px;
left:100px;
top:100px;

20
res/template/account/user_settings.html Normal file
View File

@@ -0,0 +1,20 @@
{{define "user_settings"}}<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" .Username}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
</head>
<body>
<div id='body' class="body">
{{template "menu" .}}
<h1>User configuration</h1>
{{template "footer"}}
</div>
{{template "analytics"}}
</body>
</html>
{{end}}

18
res/template/home.html
View File

@@ -111,6 +111,14 @@
<li>Files are replicated to the Sia network</li>
<li>New API and documentation (<a href="/api">Check it out!</a>)</li>
<li>Overhauled design, no ugly white glow around the site body</li>
<li>Directory management API</li>
<li>Multiple complete website styles</li>
</ul>
<h3>Completed</h3>
<ul>
<li>File upload / Text upload</li>
<li>List creation</li>
<li>Registration / Login system</li>
</ul>
<h3>Upcoming</h3>
<ul>
@@ -120,7 +128,7 @@
<li>Pasting files from the clipboard</li>
<li>Current viewer count on files/lists</li>
<li>File revisions (update a file without changing the URL)</li>
<li>Proper file manager with directories (still far away)</li>
<li>Proper file manager with directories (upcoming)</li>
<li>Plenty more!</li>
</ul>
<h3>Missing</h3>
@@ -133,11 +141,15 @@
<ul>
<li>Zip explorer</li>
<li>Some video formats (mime type detection is not complete)</li>
<li>Registration / Login system</li>
<li>Bandwidth Tracker</li>
<li>View counter</li>
<li>Seasonal themes</li>
<li>Seasonal themes (thou shalt celebrate christmas!)</li>
</ul>
<h2>Style selector</h2>
<input type="radio" id="style_default" name="style"><label for="style_default">Default Pixeldrain Style</label><br/>
<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
{{template "footer"}}
</div>

2
res/template/paste.html
View File

@@ -13,7 +13,7 @@
height: 100%;
width: 100%;
border: none !important;
background: #202020;
background: var(--accent_color_dark);
}
</style>
</head>

171
webcontroller/style.go
View File

@@ -11,11 +11,22 @@ import (
func (wc *WebController) globalCSSHandler(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
w.Header().Add("Content-Type", "text/css; charset=utf-8")
var textColor = "hsl(0, 0%, 75%)"
var selectedStyle PixeldrainStyleSheet
// Originals
var highlightColor = "hsl(89, 51%, 50%)"
var highlightColorDark = "hsl(89, 51%, 40%)"
if cookie, err := r.Cookie("style"); err != nil {
selectedStyle = DefaultPixeldrainStyle
} else {
switch cookie.Value {
case "solarized_dark":
selectedStyle = SolarizedDarkStyle
break
case "default":
fallthrough // use default case
default:
selectedStyle = DefaultPixeldrainStyle
break
}
}
// Purple scheme
// var highlightColor = "843384"
@@ -24,14 +35,160 @@ func (wc *WebController) globalCSSHandler(w http.ResponseWriter, r *http.Request
var response = fmt.Sprintf(
`:root {
--text_color: %s;
--input_color: %s;
--input_color_dark: %s;
--input_text_color: %s;
--highlight_color: %s;
--highlight_color_dark: %s;
--highlight_text_color: %s;
--danger_color: %s;
--danger_color_dark: %s;
--file_background_color: %s;
--background_color: %s;
--body_color: %s;
--accent_color_dark: %s;
--accent_color_dark_border: %s;
--accent_color_medium: %s;
--accent_color_medium_border: %s;
--accent_color_light: %s;
--accent_color_light_border: %s;
--shadow_color: %s;
--shadow_spread: %s;
--shadow_intensity: %s;
}
`,
textColor,
highlightColor,
highlightColorDark,
selectedStyle.TextColor.CSSString(),
selectedStyle.InputColor.CSSString(),
selectedStyle.InputColor.Add(0, 0, -.1).CSSString(),
selectedStyle.InputTextColor.CSSString(),
selectedStyle.HighlightColor.CSSString(),
selectedStyle.HighlightColor.Add(0, 0, -.1).CSSString(),
selectedStyle.HighlightTextColor.CSSString(),
selectedStyle.DangerColor.CSSString(),
selectedStyle.DangerColorDark.CSSString(),
selectedStyle.FileBackgroundColor.CSSString(),
selectedStyle.BackgroundColor.CSSString(),
selectedStyle.BodyColor.CSSString(),
selectedStyle.AccentColorDark.CSSString(),
selectedStyle.AccentColorDark.Add(0, 0, .15).CSSString(),
selectedStyle.AccentColorMedium.CSSString(),
selectedStyle.AccentColorMedium.Add(0, 0, .15).CSSString(),
selectedStyle.AccentColorLight.CSSString(),
selectedStyle.AccentColorLight.Add(0, 0, .15).CSSString(),
selectedStyle.ShadowColor.CSSString(),
fmt.Sprintf("%dpx", selectedStyle.ShadowSpread),
fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity),
)
strings.NewReader(response).WriteTo(w)
}
type PixeldrainStyleSheet struct {
TextColor HSL
InputColor HSL
InputTextColor HSL
HighlightColor HSL
HighlightTextColor HSL
DangerColor HSL
DangerColorDark HSL
FileBackgroundColor HSL
BackgroundColor HSL
BodyColor HSL
AccentColorDark HSL
AccentColorMedium HSL
AccentColorLight HSL
ShadowColor HSL
ShadowSpread int // Pixels
ShadowIntensity int // Pixels
}
type HSL struct {
Hue int
Saturation float64
Lightness float64
}
func (hsl HSL) CSSString() string {
return fmt.Sprintf(
"hsl(%d, %.3f%%, %.3f%%)",
hsl.Hue,
hsl.Saturation*100,
hsl.Lightness*100,
)
}
// Add returns a NEW HSL struct, it doesn't modify the current one
func (hsl HSL) Add(hue int, saturation float64, lightness float64) HSL {
var new = HSL{
hsl.Hue + hue,
hsl.Saturation + saturation,
hsl.Lightness + lightness,
}
// Hue bounds correction
if new.Hue < 0 {
new.Hue += 360
} else if new.Hue > 360 {
new.Hue -= 360
}
// Saturation bounds check
if new.Saturation < 0 {
new.Saturation = 0
} else if new.Saturation > 1 {
new.Saturation = 1
}
// Lightness bounds check
if new.Lightness < 0 {
new.Lightness = 0
} else if new.Lightness > 1 {
new.Lightness = 1
}
return new
}
// Following are all the available styles
var DefaultPixeldrainStyle = PixeldrainStyleSheet{
TextColor: HSL{0, 0, .75},
InputColor: HSL{0, 0, .38},
InputTextColor: HSL{0, 0, 1},
HighlightColor: HSL{89, .51, .5},
HighlightTextColor: HSL{0, 0, 0},
DangerColor: HSL{339, .65, .31},
DangerColorDark: HSL{339, .64, .23},
FileBackgroundColor: HSL{0, 0, 0},
BackgroundColor: HSL{0, 0, .05},
BodyColor: HSL{20, .05, .14},
AccentColorDark: HSL{0, 0, .19},
AccentColorMedium: HSL{0, 0, .23},
AccentColorLight: HSL{0, 0, .28},
ShadowColor: HSL{0, 0, 0},
ShadowSpread: 50,
ShadowIntensity: 5,
}
var SolarizedDarkStyle = PixeldrainStyleSheet{
TextColor: HSL{0, 0, .75},
InputColor: HSL{192, .95, .30},
InputTextColor: HSL{0, 0, 1},
HighlightColor: HSL{145, .63, .42},
HighlightTextColor: HSL{0, 0, 1},
DangerColor: HSL{343, .63, .42},
DangerColorDark: HSL{343, .63, .36},
FileBackgroundColor: HSL{192, .87, .05},
BackgroundColor: HSL{192, 1, .05},
BodyColor: HSL{192, 1, .11},
AccentColorDark: HSL{192, .87, .09},
AccentColorMedium: HSL{192, .81, .14},
AccentColorLight: HSL{192, .95, .17},
ShadowColor: HSL{192, .87, .05},
ShadowSpread: 50,
ShadowIntensity: 5,
}