From 2e804e546cd70518404b5d68835ab9f99ca771a1 Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Wed, 11 Jul 2018 22:46:44 +0200 Subject: [PATCH] add style engine --- res/static/res/script/compiled/home.js | 5 + res/static/res/style/layout.css | 65 ++++----- res/static/res/style/viewer.css | 29 ++-- res/static/res/typescript/home/home.ts | 6 + res/template/account/file_manager.html | 2 +- res/template/account/user_settings.html | 20 +++ res/template/home.html | 18 ++- res/template/paste.html | 2 +- webcontroller/style.go | 177 ++++++++++++++++++++++-- 9 files changed, 264 insertions(+), 60 deletions(-) create mode 100644 res/template/account/user_settings.html diff --git a/res/static/res/script/compiled/home.js b/res/static/res/script/compiled/home.js index 4c689b4..ad69f60 100644 --- a/res/static/res/script/compiled/home.js +++ b/res/static/res/script/compiled/home.js @@ -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) { diff --git a/res/static/res/style/layout.css b/res/static/res/style/layout.css index 40b4fee..637c8c9 100644 --- a/res/static/res/style/layout.css +++ b/res/static/res/style/layout.css @@ -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]{ diff --git a/res/static/res/style/viewer.css b/res/static/res/style/viewer.css index cf62e45..71dfad2 100644 --- a/res/static/res/style/viewer.css +++ b/res/static/res/style/viewer.css @@ -1,4 +1,4 @@ -/* +/* Created on : May 22, 2015, 1:20:02 PM Author : Fornax */ @@ -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' */ @@ -140,7 +140,7 @@ body{ text-align: left; } .toolbar_button > img { - width: 24px; + width: 24px; height: 24px; } .toolbar_button > span { @@ -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; @@ -239,4 +242,4 @@ body{ height: 36px; padding: 0; padding-right: 1px; -} \ No newline at end of file +} diff --git a/res/static/res/typescript/home/home.ts b/res/static/res/typescript/home/home.ts index 8646a96..9c8134d 100644 --- a/res/static/res/typescript/home/home.ts +++ b/res/static/res/typescript/home/home.ts @@ -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() +}) diff --git a/res/template/account/file_manager.html b/res/template/account/file_manager.html index ab417fe..063f8fc 100644 --- a/res/template/account/file_manager.html +++ b/res/template/account/file_manager.html @@ -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; diff --git a/res/template/account/user_settings.html b/res/template/account/user_settings.html new file mode 100644 index 0000000..cb8ecc2 --- /dev/null +++ b/res/template/account/user_settings.html @@ -0,0 +1,20 @@ +{{define "user_settings"}} + + + {{template "meta_tags" .Username}} + + + + +
+ {{template "menu" .}} +

User configuration

+ + + + {{template "footer"}} +
+ {{template "analytics"}} + + +{{end}} diff --git a/res/template/home.html b/res/template/home.html index 08c48ba..16a163d 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -111,6 +111,14 @@
  • Files are replicated to the Sia network
  • New API and documentation (Check it out!)
  • Overhauled design, no ugly white glow around the site body
    • +
  • Directory management API
    • +
  • Multiple complete website styles
    • + +

    Completed

    +

    Upcoming

    Missing

    @@ -133,11 +141,15 @@ + +

    Style selector

    +
    +
    + {{template "footer"}} diff --git a/res/template/paste.html b/res/template/paste.html index 5ac99e8..6063756 100644 --- a/res/template/paste.html +++ b/res/template/paste.html @@ -13,7 +13,7 @@ height: 100%; width: 100%; border: none !important; - background: #202020; + background: var(--accent_color_dark); } diff --git a/webcontroller/style.go b/webcontroller/style.go index 3632911..9f4645f 100644 --- a/webcontroller/style.go +++ b/webcontroller/style.go @@ -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" @@ -23,15 +34,161 @@ func (wc *WebController) globalCSSHandler(w http.ResponseWriter, r *http.Request var response = fmt.Sprintf( `:root { - --text_color: %s; - --highlight_color: %s; - --highlight_color_dark: %s; + --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, +}