Skip to content

Commit

Permalink
[frontend] Unified panels (#812)
Browse files Browse the repository at this point in the history 
* settings panel restructuring

* clean up old Gin handlers

* colorscheme redesign, some other small css tweaks

* basic router layout, error boundary

* colorscheme redesign, some other small css tweaks

* kebab-case consistency

* superfluous padding on applist

* remove unused consts

* redux, whitespace changes..

* use .jsx extensions for components

* login flow up till app registration

* full redux oauth implementation, with basic error handling

* split oauth api functions

* oauth api revocation handling

* basic profile change submission

* move old dir

* profile overview

* fix keeping track of the wrong instance url (for different instance/api domains)

* use redux state for profile form

* delete old/index.js, old/basic.js, fully implemented

* implement old/user/profile.js

* implement password change

* remove debug logging

* support future api for removing files

* customize profile css

* remove unneeded wrapper components

* restructure form fields

* start on admin pages

* admin panel settings

* admin settings panel

* remove old/admin files

* add top-level redirect

* refactor/cleanup forms

* only do API checks on logged-in state

* admin-status based routing

* federation block routing

* federation blocks

* upgrade dependencies

* react 18 changes

* media cleanup

* fix useEffect hooks

* remove unused require

* custom emoji base

* emoji uploader

* delete last old panel files

* sidebar styling, remove unused page

* refactor submit functions

* fix sidebar boxshadow-border

* fix old css variables

* fix fake-toot avatar

* fix non-square emoji

* fix user settings redux keys

* properly get admin account contact from instance response

* Account.source default values

* source.status_format key

* mobile responsiveness

* mobile element tweaks

* proper redirect after removing block

* add redirects for old setting panel urls

* deletes

* fix mobile overflow

* clean up debug logging calls
  • Loading branch information
@f0x52
f0x52 authored Sep 29, 2022
1 parent 2f22780 commit 938328c
Show file tree
Hide file tree
Showing 59 changed files with 3,988 additions and 2,836 deletions.
1 change: 1 addition & 0 deletions internal/web/profile.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ func (m *Module) profileGETHandler(c *gin.Context) {
"show_back_to_top": showBackToTop,
"stylesheets": stylesheets,
"javascript": []string{
"/assets/dist/bundle.js",
"/assets/dist/frontend.js",
},
})
Expand Down
34 changes: 5 additions & 29 deletions internal/web/panels.go → internal/web/settings-panel.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import (
"github.com/superseriousbusiness/gotosocial/internal/gtserror"
)

func (m *Module) UserPanelHandler(c *gin.Context) {
func (m *Module) SettingsPanelHandler(c *gin.Context) {
host := config.GetHost()
instance, err := m.processor.InstanceGet(c.Request.Context(), host)
if err != nil {
Expand All @@ -41,37 +41,13 @@ func (m *Module) UserPanelHandler(c *gin.Context) {
assetsPathPrefix + "/Fork-Awesome/css/fork-awesome.min.css",
assetsPathPrefix + "/dist/_colors.css",
assetsPathPrefix + "/dist/base.css",
assetsPathPrefix + "/dist/panels-base.css",
assetsPathPrefix + "/dist/panels-user-style.css",
assetsPathPrefix + "/dist/profile.css",
assetsPathPrefix + "/dist/status.css",
assetsPathPrefix + "/dist/settings-panel-style.css",
},
"javascript": []string{
assetsPathPrefix + "/dist/bundle.js",
assetsPathPrefix + "/dist/user-panel.js",
},
})
}

// TODO: abstract the {admin, user}panel handlers in some way
func (m *Module) AdminPanelHandler(c *gin.Context) {
host := config.GetHost()
instance, err := m.processor.InstanceGet(c.Request.Context(), host)
if err != nil {
api.ErrorHandler(c, gtserror.NewErrorInternalError(err), m.processor.InstanceGet)
return
}

c.HTML(http.StatusOK, "frontend.tmpl", gin.H{
"instance": instance,
"stylesheets": []string{
assetsPathPrefix + "/Fork-Awesome/css/fork-awesome.min.css",
assetsPathPrefix + "/dist/_colors.css",
assetsPathPrefix + "/dist/base.css",
assetsPathPrefix + "/dist/panels-base.css",
assetsPathPrefix + "/dist/panels-admin-style.css",
},
"javascript": []string{
assetsPathPrefix + "/dist/bundle.js",
assetsPathPrefix + "/dist/admin-panel.js",
assetsPathPrefix + "/dist/settings.js",
},
})
}
1 change: 1 addition & 0 deletions internal/web/thread.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ func (m *Module) threadGETHandler(c *gin.Context) {
"ogMeta": ogBase(instance).withStatus(status),
"stylesheets": stylesheets,
"javascript": []string{
"/assets/dist/bundle.js",
"/assets/dist/frontend.js",
},
})
Expand Down
30 changes: 17 additions & 13 deletions internal/web/web.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@ const (
profilePath = "/@:" + usernameKey
customCSSPath = profilePath + "/custom.css"
statusPath = profilePath + "/statuses/:" + statusIDKey
adminPanelPath = "/admin"
userPanelpath = "/user"
assetsPathPrefix = "/assets"
userPanelPath = "/settings/user"
adminPanelPath = "/settings/admin"

tokenParam = "token"
usernameKey = "username"
Expand Down Expand Up @@ -70,20 +70,24 @@ func (m *Module) Route(s router.Router) error {
assetsGroup := s.AttachGroup(assetsPathPrefix)
m.mountAssetsFilesystem(assetsGroup)

s.AttachHandler(http.MethodGet, adminPanelPath, m.AdminPanelHandler)
// redirect /admin/ to /admin
s.AttachHandler(http.MethodGet, adminPanelPath+"/", func(c *gin.Context) {
c.Redirect(http.StatusMovedPermanently, adminPanelPath)
s.AttachHandler(http.MethodGet, "/settings", m.SettingsPanelHandler)
s.AttachHandler(http.MethodGet, "/settings/*panel", m.SettingsPanelHandler)

// User panel redirects
// used by clients
s.AttachHandler(http.MethodGet, "/auth/edit", func(c *gin.Context) {
c.Redirect(http.StatusMovedPermanently, userPanelPath)
})

s.AttachHandler(http.MethodGet, userPanelpath, m.UserPanelHandler)
// redirect /user/ to /user
s.AttachHandler(http.MethodGet, userPanelpath+"/", func(c *gin.Context) {
c.Redirect(http.StatusMovedPermanently, userPanelpath)
// old version of settings panel
s.AttachHandler(http.MethodGet, "/user", func(c *gin.Context) {
c.Redirect(http.StatusMovedPermanently, userPanelPath)
})
// redirect /auth/edit to /user
s.AttachHandler(http.MethodGet, "/auth/edit", func(c *gin.Context) {
c.Redirect(http.StatusMovedPermanently, userPanelpath)

// Admin panel redirects
// old version of settings panel
s.AttachHandler(http.MethodGet, "/admin", func(c *gin.Context) {
c.Redirect(http.StatusMovedPermanently, adminPanelPath)
})

// serve front-page
Expand Down
100 changes: 64 additions & 36 deletions web/source/css/_colors.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,57 +23,85 @@

/* Color definitions */

$near_white: #fafaff;
/* Foreground */
$white1: #fafaff; /* default text color, contrast >= 5.0 with all $grays */
$white2: #b3b5c6; /* less important text, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */

$sloth_gray1: #b0b0b5;
$sloth_gray2: #4d4e56;
/* Background shades, contrast >= 5.0 with $white1 (#fafaff) */
$gray1: #2a2b2f;
$gray2: #35363b;
$gray3: #3a3b41;
$gray4: #45464e;
$gray5: #4d4e56;
$gray6: #575861;
$gray7: #5d5e67;
$gray8: #696a75;

$sloth_orange1: #e78e5a;
$sloth_orange2: #D87841;
$blue: #63b1de; // complementary color to $sloth_orange1
$orange1: #fd6a00; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/
$orange2: #ff853e; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */

/* derivative colors */
$blue1: #3a9fde; /* darker blue for smaller elements (borders), can only be used with $gray1 (4.7) */
$blue2: #66befe; /* all-round accent color, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */
$blue3: #89caff; /* hover/selected accent to $blue2, can be used with $gray1 (7.9), $gray2 (6.3), $gray3 (5.6), $gray4 (5.2), $gray5 (4.7) */

$sloth_gray2_darker3: color-mod($sloth_gray2 lightness(-3%));
$sloth_gray2_darker5: color-mod($sloth_gray2 lightness(-5%));
$sloth_gray2_darker7: color-mod($sloth_gray2 lightness(-7%));
$sloth_gray2_darker15: color-mod($sloth_gray2 lightness(-15%));
$sloth_gray2_lighter3: color-mod($sloth_gray2 lightness(+3%));
$sloth_gray2_lighter5: color-mod($sloth_gray2 lightness(+5%));
$error1: #860000; /* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */
$error2: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */
$error-link: #185F8C; /* Error link text, can be used with $error2 (5.54) */

$blue_lighter8: color-mod($blue lightness(+4%));
$lightblue: color-mod($blue lightness(+16%));
$fg: $white1;
$bg: $gray1;

$fg: $near_white;
$bg: $sloth_gray2_darker7;
$bg-trans: color-mod($gray5 alpha(62%));

$bg_trans: color-mod($sloth_gray2 alpha(62%));

$bg_accent: $sloth_gray2_lighter3;
$fg_accent: $lightblue;
$border_accent: $sloth_orange2;
$bg-accent: $gray5;
$fg-accent: $blue3;
$fg-reduced: $white2;
$border-accent: $orange2;

/* Color variables as used in a specific location */

$footer_bg: $bg_accent;
$link-fg: $fg-accent;

$button-bg: $blue2;
$button-fg: $gray1;
$button-hover-bg: $blue3;

$link_fg: $fg_accent;
$button-danger-bg: $orange1;
$button-danger-fg: $gray1;
$button-danger-hover-bg: $orange2;

$button_border: 0.08rem solid color-mod($sloth_orange2 lightness(-15%));
$button_bg: $blue_lighter8;
$button_fg: $sloth_gray2_darker15;
$button_hover_bg: $lightblue;
$toot-focus-bg: $gray5;
$toot-unfocus-bg: $gray3;

$status_focus_bg: $bg_accent;
$status_unfocus_bg: $sloth_gray2_darker3;
$status_info_fg: #CBCBD7;
$toot-info-bg: $gray4;

$bg_no_img_desc: $sloth_orange2;
$bg_sensitive: $sloth_gray2_darker15;
$no-img-desc-bg: $orange1;
$no-img-desc-fg: $gray1;

$bg-sensitive: $gray1;

$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15);
$boxshadow_border: 0.08rem solid $sloth_gray2_darker5;
$boxshadow-border: 0.08rem solid $gray1;

$avatar-border: $orange2;

$input-bg: $gray4;
$input-disabled-bg: $gray2;
$input-border: $blue1;
$input-focus-border: $blue3;

$settings-nav-bg: $bg-accent;
$settings-nav-header-fg: $gray1;
$settings-nav-header-bg: $orange1;

$settings-nav-bg-hover: $gray3;
/* $settings-nav-fg-hover: $gray1; */

$settings-nav-bg-active: $gray2;
/* $settings-nav-fg-active: $orange2; */

$profile_avatar_border: 0.2rem solid $border_accent;
$error-fg: $error1;
$error-bg: $error2;

$input_bg: $sloth_gray2_darker3;
$settings-entry-bg: $gray3;
$settings-entry-hover-bg: $gray4;
Loading

0 comments on commit 938328c

Please sign in to comment.