From 90270572f1366b2a9e8b1127a911ef8dc805020d Mon Sep 17 00:00:00 2001 From: Noah Petherbridge Date: Tue, 26 Dec 2023 15:44:34 -0800 Subject: [PATCH] Look & Feel settings for profile pages --- pkg/controller/account/settings.go | 58 +++++ pkg/templates/templates.go | 1 + web/static/css/bulma-prefers-dark.css | 2 +- web/templates/account/friends.html | 3 + web/templates/account/profile.html | 3 +- web/templates/account/settings.html | 292 +++++++++++++++++++++++++- web/templates/account/user_notes.html | 3 + web/templates/partials/themes.html | 83 ++++++++ web/templates/photo/gallery.html | 5 + 9 files changed, 444 insertions(+), 6 deletions(-) create mode 100644 web/templates/partials/themes.html diff --git a/pkg/controller/account/settings.go b/pkg/controller/account/settings.go index 7e8500e..575d9e2 100644 --- a/pkg/controller/account/settings.go +++ b/pkg/controller/account/settings.go @@ -4,6 +4,7 @@ import ( "fmt" "net/http" nm "net/mail" + "regexp" "strconv" "strings" "time" @@ -35,6 +36,7 @@ func (t ChangeEmailToken) Delete() error { // User settings page. (/settings). func Settings() http.HandlerFunc { tmpl := templates.Must("account/settings.html") + var reHexColor = regexp.MustCompile(`^#[a-fA-F0-9]{6}$`) return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { vars := map[string]interface{}{ "Enum": config.ProfileEnums, @@ -119,6 +121,62 @@ func Settings() http.HandlerFunc { } session.Flash(w, r, "Profile settings updated!") + case "look": + hashtag = "#look" + + // Resetting all styles? + if r.PostFormValue("reset") == "true" { + // Blank out all profile fields. + for _, field := range []string{ + "hero-color-start", + "hero-color-end", + "hero-text-dark", + "card-title-bg", + "card-title-fg", + "card-link-color", + "card-lightness", + } { + user.SetProfileField(field, "") + } + + if err := user.Save(); err != nil { + session.FlashError(w, r, "Failed to save user to database: %s", err) + } + + session.Flash(w, r, "Profile look & feel reset to defaults!") + break + } + + // Set color preferences. + for _, field := range []string{ + "hero-color-start", + "hero-color-end", + "card-title-bg", + "card-title-fg", + "card-link-color", + } { + // Ensure valid. + value := r.PostFormValue(field) + if !reHexColor.Match([]byte(value)) { + value = "" + } + user.SetProfileField(field, value) + } + + // Set other fields. + for _, field := range []string{ + "hero-text-dark", + "card-lightness", + } { + value := r.PostFormValue(field) + user.SetProfileField(field, value) + } + + if err := user.Save(); err != nil { + session.FlashError(w, r, "Failed to save user to database: %s", err) + } + + session.Flash(w, r, "Profile look & feel updated!") case "preferences": hashtag = "#prefs" var ( diff --git a/pkg/templates/templates.go b/pkg/templates/templates.go index 2bbd676..654ee6c 100644 --- a/pkg/templates/templates.go +++ b/pkg/templates/templates.go @@ -134,6 +134,7 @@ var baseTemplates = []string{ config.TemplatePath + "/partials/user_avatar.html", config.TemplatePath + "/partials/like_modal.html", config.TemplatePath + "/partials/right_click.html", + config.TemplatePath + "/partials/themes.html", } // templates returns a template chain with the base templates preceding yours. diff --git a/web/static/css/bulma-prefers-dark.css b/web/static/css/bulma-prefers-dark.css index bd36ab0..6f685ad 100644 --- a/web/static/css/bulma-prefers-dark.css +++ b/web/static/css/bulma-prefers-dark.css @@ -4400,7 +4400,7 @@ .table td, .table th { - border: 1px solid #363636; + border-color: #363636; } .table td.is-white, diff --git a/web/templates/account/friends.html b/web/templates/account/friends.html index d1614e3..42fa83e 100644 --- a/web/templates/account/friends.html +++ b/web/templates/account/friends.html @@ -1,5 +1,8 @@ {{define "title"}}Friends of {{.User.Username}}{{end}} {{define "content"}} +
{{$Root := .}}
diff --git a/web/templates/account/profile.html b/web/templates/account/profile.html index 9b5ce90..813b12f 100644 --- a/web/templates/account/profile.html +++ b/web/templates/account/profile.html @@ -1,5 +1,6 @@ {{define "title"}}{{.User.Username}}{{end}} {{define "content"}} +{{template "profile-theme-style" .User}}
@@ -370,7 +371,7 @@
- +
Age: diff --git a/web/templates/account/settings.html b/web/templates/account/settings.html index bf9190b..5a067d6 100644 --- a/web/templates/account/settings.html +++ b/web/templates/account/settings.html @@ -34,6 +34,15 @@ +
  • + + Look & Feel +

    + Customize your profile with a color scheme. +

    +     +
    • +
  • Website Preferences @@ -332,6 +341,204 @@ + +
    +
    +

    + + Look & Feel +

    +
    + +
    +
    + + {{InputCSRF}} + + +

    Profile Header

    + +
    + +
    + + +
    +
    +
    +
    +
    +
    + {{template "avatar-48x48" .CurrentUser}} +
    +
    + +
    + {{.CurrentUser.NameOrUsername}} +
    + + {{if and .LoggedIn (not .IsPrivate)}} +
    +
    +
    +
    +
    + {{end}} +
    + +
    +
    +
    + +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    + + +

    Profile Page

    + +
    +
    +

    Card Colors

    +
    +
    + + + + + + + + + + + + + + + + + +
    + Lightness + +
    + +
    +
    + Card Title BG + + +
    + Card Title FG + + +
    + Link Color + + + + Example + + +
    +
    +
    + +
    + + +

    + If you'd like to reset all your page styles to their default, check + this box and click Save below. +

    +
    + +
    + +
    +
    +
    +
    +
    @@ -1020,6 +1227,7 @@ window.addEventListener("DOMContentLoaded", (event) => { // The tabs const $profile = document.querySelector("#profile"), + $look = document.querySelector("#look"), $prefs = document.querySelector("#prefs"), $location = document.querySelector("#location"), $privacy = document.querySelector("#privacy"), @@ -1030,6 +1238,7 @@ window.addEventListener("DOMContentLoaded", (event) => { // Hide all by default. $profile.style.display = 'none'; + $look.style.display = 'none'; $prefs.style.display = 'none'; $location.style.display = 'none'; $privacy.style.display = 'none'; @@ -1046,6 +1255,9 @@ window.addEventListener("DOMContentLoaded", (event) => { if (!name) name = "profile"; $activeTab.style.display = 'none'; switch (name) { + case "look": + $activeTab = $look; + break; case "prefs": $activeTab = $prefs; break; @@ -1073,10 +1285,8 @@ window.addEventListener("DOMContentLoaded", (event) => { let name_ = tab_.href.split("#").pop(); if (name !== name_) { - console.log("button: remove is-active", tab_); tab_.classList.remove("is-active"); } else { - console.log("button %s: ADD is-active", tab_); tab_.classList.add("is-active"); } @@ -1095,7 +1305,10 @@ window.addEventListener("DOMContentLoaded", (event) => { el.addEventListener("click", (e) => { showTab(name); - e.preventDefault(); + if (screen.width >= 1024) { + e.preventDefault(); + } + window.requestAnimationFrame(() => { window.scrollTo(0, 0); }); @@ -1109,6 +1322,68 @@ window.addEventListener("DOMContentLoaded", (event) => { }); }); +// Look & Feel tab scripts. +window.addEventListener("DOMContentLoaded", (event) => { + let $headerPreview = document.querySelector("#header-hero-preview"), + $colorA = document.querySelector("#hero-color-start"), + $colorB = document.querySelector("#hero-color-end"), + $darkText = document.querySelector("#hero-text-dark"), + $cardPreview = document.querySelector("#profile-card-preview"), + $cardLightness = document.querySelector("#card-lightness"), + $cardTitleBG = document.querySelector("#card-title-bg"), + $cardTitleFG = document.querySelector("#card-title-fg"), + $cardLinkColor = document.querySelector("#card-link-color"); + + function updatePreview() { + /* Hero banner preview */ + let css = `linear-gradient(141deg, ${$colorA.value}, ${$colorB.value})`; + $headerPreview.style.backgroundImage = css; + + if ($darkText.checked) { + $headerPreview.classList.remove("has-text-light"); + $headerPreview.classList.add("has-text-dark-dark"); + } else { + $headerPreview.classList.remove("has-text-dark-dark"); + $headerPreview.classList.add("has-text-light"); + } + + /* Card style preview */ + let $table = $cardPreview.querySelector("table"), + $header = $cardPreview.querySelector("div.card-header"), + $title = $cardPreview.querySelector("p.card-header-title"), + $link = $cardPreview.querySelector("a"); + $header.style.backgroundColor = $cardTitleBG.value; + $title.style.color = $cardTitleFG.value; + $table.style.backgroundColor = "transparent"; + $link.style.color = $cardLinkColor.value; + if ($cardLightness.value === "light") { + $table.style.backgroundColor = "#fff"; + $table.style.color = "#4a4a4a"; + } else if ($cardLightness.value === "dark") { + $table.style.backgroundColor = "#4a4a4a"; + $table.style.color = "#f5f5f5"; + } + + /* Update tags in card style table */ + ($table.querySelectorAll("strong") || []).forEach(node => { + node.style.color = ""; + if ($cardLightness.value === "light") { + node.style.color = "#4a4a4a"; + } else if ($cardLightness.value === "dark") { + node.style.color = "#f5f5f5"; + } + }); + } + + updatePreview(); + + ([$colorA, $colorB, $darkText, $cardLightness, $cardTitleBG, $cardTitleFG, $cardLinkColor]).forEach(node => { + node.addEventListener("change", (e) => { + updatePreview(); + }); + }); +}); + // Location tab scripts. window.addEventListener("DOMContentLoaded", (event) => { // Get useful controls from the tab. @@ -1270,7 +1545,6 @@ window.addEventListener("DOMContentLoaded", (event) => { ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'), 2, ); - console.log("COORDINATE: " + prettyCoord); // Center the map on the pin. if (center) { @@ -1301,4 +1575,14 @@ window.addEventListener("DOMContentLoaded", (event) => { setMapPin(defaultCoords); }); + + {{end}} diff --git a/web/templates/account/user_notes.html b/web/templates/account/user_notes.html index 67342af..a2736fe 100644 --- a/web/templates/account/user_notes.html +++ b/web/templates/account/user_notes.html @@ -2,6 +2,9 @@ Notes about {{.User.Username}} {{end}} {{define "content"}} +
    diff --git a/web/templates/partials/themes.html b/web/templates/partials/themes.html new file mode 100644 index 0000000..ad9c666 --- /dev/null +++ b/web/templates/partials/themes.html @@ -0,0 +1,83 @@ + + + +{{define "--prof-colorA"}}#0f81cc{{end}} +{{define "--prof-colorB"}}#7683cc{{end}} +{{define "--prof-card-bg"}}#485fc7{{end}} +{{define "--prof-card-fg"}}#f7f7f7{{end}} +{{define "--prof-link-fg"}}#0099ff{{end}} + +{{define "profile-theme-hero-style"}} +{{$colorA := or (.GetProfileField "hero-color-start") "#0f81cc"}} +{{$colorB := or (.GetProfileField "hero-color-end") "#7683cc"}} +section.hero { + background-image: linear-gradient(141deg, {{$colorA}}, {{$colorB}}) !important; +} +.hero h1.title { + color: {{if eq (.GetProfileField "hero-text-dark") "true"}}#4a4a4a{{else}}#f5f5f5{{end}} !important; +} +{{end}} + + +{{define "profile-theme-style"}} + {{$cardTitleBG := or (.GetProfileField "card-title-bg") "#485fc7"}} + {{$cardTitleFG := or (.GetProfileField "card-title-fg") "#f7f7f7"}} + {{$cardLinkFG := or (.GetProfileField "card-link-color") "#0099ff"}} + {{$cardLightness := .GetProfileField "card-lightness"}} + +{{end}} + diff --git a/web/templates/photo/gallery.html b/web/templates/photo/gallery.html index 1efe6d3..be15b1d 100644 --- a/web/templates/photo/gallery.html +++ b/web/templates/photo/gallery.html @@ -81,6 +81,11 @@ {{define "content"}} +{{if not .IsSiteGallery}} + +{{end}}