alyssa
/
bloat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add dark mode

This commit is contained in:
r 2020-01-12 17:16:57 +00:00
parent 8607f16212
commit 3c6653a77b
15 changed files with 124 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mastodon/status.go
View File

@ -57,6 +57,7 @@ type Status struct {
ThreadInNewTab bool `json:"thread_in_new_tab"`
MaskNSFW bool `json:"mask_nsfw"`
RetweetedByID string `json:"retweeted_by_id"`
DarkMode bool `json:"dark_mode"`
}
// Context hold information for mastodon context.

1
model/postContext.go
View File

@ -9,6 +9,7 @@ type PostContext struct {
DefaultVisibility string
ReplyContext *ReplyContext
Formats []PostFormat
DarkMode bool
}
type ReplyContext struct {

2
model/settings.go
View File

@ -6,6 +6,7 @@ type Settings struct {
ThreadInNewTab bool `json:"thread_in_new_tab"`
MaskNSFW bool `json:"mask_nfsw"`
FluorideMode bool `json:"fluoride_mode"`
DarkMode bool `json:"dark_mode"`
}
func NewSettings() *Settings {
@ -15,5 +16,6 @@ func NewSettings() *Settings {
ThreadInNewTab: false,
MaskNSFW: true,
FluorideMode: false,
DarkMode: false,
}
}

3
renderer/model.go
View File

@ -10,6 +10,7 @@ type HeaderData struct {
NotificationCount int
CustomCSS string
FluorideMode bool
DarkMode bool
}
type NavbarData struct {
@ -58,6 +59,7 @@ type NotificationData struct {
Notifications []*mastodon.Notification
HasNext bool
NextLink string
DarkMode bool
}
type UserData struct {
@ -66,6 +68,7 @@ type UserData struct {
Statuses []*mastodon.Status
HasNext bool
NextLink string
DarkMode bool
}
type AboutData struct {

42
renderer/renderer.go
View File

@ -11,6 +11,39 @@ import (
"mastodon"
)
var (
icons = map[string]string{
"envelope": "/static/icons/envelope.png",
"dark-envelope": "/static/icons/dark-envelope.png",
"globe": "/static/icons/globe.png",
"dark-globe": "/static/icons/dark-globe.png",
"liked": "/static/icons/liked.png",
"dark-liked": "/static/icons/liked.png",
"link": "/static/icons/link.png",
"dark-link": "/static/icons/dark-link.png",
"lock": "/static/icons/lock.png",
"dark-lock": "/static/icons/dark-lock.png",
"mail-forward": "/static/icons/mail-forward.png",
"dark-mail-forward": "/static/icons/dark-mail-forward.png",
"reply": "/static/icons/reply.png",
"dark-reply": "/static/icons/dark-reply.png",
"retweet": "/static/icons/retweet.png",
"dark-retweet": "/static/icons/dark-retweet.png",
"retweeted": "/static/icons/retweeted.png",
"dark-retweeted": "/static/icons/retweeted.png",
"smile-o": "/static/icons/smile-o.png",
"dark-smile-o": "/static/icons/dark-smile-o.png",
"star-o": "/static/icons/star-o.png",
"dark-star-o": "/static/icons/dark-star-o.png",
"star": "/static/icons/star.png",
"dark-star": "/static/icons/dark-star.png",
"unlock-alt": "/static/icons/unlock-alt.png",
"dark-unlock-alt": "/static/icons/dark-unlock-alt.png",
"user-plus": "/static/icons/user-plus.png",
"dark-user-plus": "/static/icons/dark-user-plus.png",
}
)
type Renderer interface {
RenderErrorPage(ctx context.Context, writer io.Writer, data *ErrorData)
RenderHomePage(ctx context.Context, writer io.Writer, data *HomePageData) (err error)
@ -42,6 +75,7 @@ func NewRenderer(templateGlobPattern string) (r *renderer, err error) {
"TimeSince": TimeSince,
"FormatTimeRFC3339": FormatTimeRFC3339,
"FormatTimeRFC822": FormatTimeRFC822,
"GetIcon": GetIcon,
}).ParseGlob(templateGlobPattern)
if err != nil {
return
@ -180,3 +214,11 @@ func FormatTimeRFC3339(t time.Time) string {
func FormatTimeRFC822(t time.Time) string {
return t.Format(time.RFC822)
}
func GetIcon(name string, darkMode bool) (icon string) {
if darkMode {
name = "dark-" + name
}
icon, _ = icons[name]
return
}

12
service/service.go
View File

@ -281,10 +281,12 @@ func (svc *service) ServeTimelinePage(ctx context.Context, client io.Writer,
for i := range statuses {
statuses[i].ThreadInNewTab = c.Session.Settings.ThreadInNewTab
statuses[i].MaskNSFW = c.Session.Settings.MaskNSFW
statuses[i].DarkMode = c.Session.Settings.DarkMode
if statuses[i].Reblog != nil {
statuses[i].Reblog.RetweetedByID = statuses[i].ID
statuses[i].Reblog.ThreadInNewTab = c.Session.Settings.ThreadInNewTab
statuses[i].Reblog.MaskNSFW = c.Session.Settings.MaskNSFW
statuses[i].Reblog.DarkMode = c.Session.Settings.DarkMode
}
}
@ -317,6 +319,7 @@ func (svc *service) ServeTimelinePage(ctx context.Context, client io.Writer,
postContext := model.PostContext{
DefaultVisibility: c.Session.Settings.DefaultVisibility,
Formats: svc.postFormats,
DarkMode: c.Session.Settings.DarkMode,
}
commonData, err := svc.getCommonData(ctx, client, c, timelineType+" timeline ")
@ -385,6 +388,7 @@ func (svc *service) ServeThreadPage(ctx context.Context, client io.Writer, c *mo
InReplyToName: status.Account.Acct,
ReplyContent: content,
},
DarkMode: c.Session.Settings.DarkMode,
}
}
@ -401,6 +405,7 @@ func (svc *service) ServeThreadPage(ctx context.Context, client io.Writer, c *mo
statuses[i].ShowReplies = true
statuses[i].ReplyMap = replyMap
statuses[i].MaskNSFW = c.Session.Settings.MaskNSFW
statuses[i].DarkMode = c.Session.Settings.DarkMode
addToReplyMap(replyMap, statuses[i].InReplyToID, statuses[i].ID, i+1)
}
@ -444,6 +449,7 @@ func (svc *service) ServeNotificationPage(ctx context.Context, client io.Writer,
if notifications[i].Status != nil {
notifications[i].Status.CreatedAt = notifications[i].CreatedAt
notifications[i].Status.MaskNSFW = c.Session.Settings.MaskNSFW
notifications[i].Status.DarkMode = c.Session.Settings.DarkMode
switch notifications[i].Type {
case "reblog", "favourite":
notifications[i].Status.HideAccountInfo = true
@ -476,6 +482,7 @@ func (svc *service) ServeNotificationPage(ctx context.Context, client io.Writer,
HasNext: hasNext,
NextLink: nextLink,
CommonData: commonData,
DarkMode: c.Session.Settings.DarkMode,
}
err = svc.renderer.RenderNotificationPage(ctx, client, data)
if err != nil {
@ -507,8 +514,10 @@ func (svc *service) ServeUserPage(ctx context.Context, client io.Writer, c *mode
for i := range statuses {
statuses[i].MaskNSFW = c.Session.Settings.MaskNSFW
statuses[i].DarkMode = c.Session.Settings.DarkMode
if statuses[i].Reblog != nil {
statuses[i].Reblog.MaskNSFW = c.Session.Settings.MaskNSFW
statuses[i].Reblog.DarkMode = c.Session.Settings.DarkMode
}
}
@ -528,6 +537,7 @@ func (svc *service) ServeUserPage(ctx context.Context, client io.Writer, c *mode
HasNext: hasNext,
NextLink: nextLink,
CommonData: commonData,
DarkMode: c.Session.Settings.DarkMode,
}
err = svc.renderer.RenderUserPage(ctx, client, data)
@ -723,6 +733,7 @@ func (svc *service) ServeSearchPage(ctx context.Context, client io.Writer, c *mo
hasNext = len(results.Statuses) == 20
for i := range results.Statuses {
results.Statuses[i].MaskNSFW = c.Session.Settings.MaskNSFW
results.Statuses[i].DarkMode = c.Session.Settings.DarkMode
}
}
@ -827,6 +838,7 @@ func (svc *service) getCommonData(ctx context.Context, client io.Writer, c *mode
data.HeaderData.NotificationCount = notificationCount
data.HeaderData.FluorideMode = c.Session.Settings.FluorideMode
data.HeaderData.DarkMode = c.Session.Settings.DarkMode
}
return

2
service/transport.go
View File

@ -448,12 +448,14 @@ func NewHandler(s Service, staticDir string) http.Handler {
threadInNewTab := req.FormValue("thread_in_new_tab") == "true"
maskNSFW := req.FormValue("mask_nsfw") == "true"
fluorideMode := req.FormValue("fluoride_mode") == "true"
darkMode := req.FormValue("dark_mode") == "true"
settings := &model.Settings{
DefaultVisibility: visibility,
CopyScope: copyScope,
ThreadInNewTab: threadInNewTab,
MaskNSFW: maskNSFW,
FluorideMode: fluorideMode,
DarkMode: darkMode,
}
err := s.SaveSettings(ctx, w, nil, settings)

12
static/fluoride.js
View File

@ -1,8 +1,12 @@
var actionIcons = {
"like": "/static/icons/star-o.png",
"dark-like": "/static/icons/dark-star-o.png",
"unlike": "/static/icons/liked.png",
"dark-unlike": "/static/icons/liked.png",
"retweet": "/static/icons/retweet.png",
"unretweet": "/static/icons/retweeted.png"
"dark-retweet": "/static/icons/dark-retweet.png",
"unretweet": "/static/icons/retweeted.png",
"dark-unretweet": "/static/icons/retweeted.png"
};
var reverseActions = {
@ -31,7 +35,11 @@ function http(method, url, success, error) {
}
function updateActionForm(id, f, action) {
f.children[1].src = actionIcons[action];
if (Array.from(document.body.classList).indexOf("dark") > -1) {
f.children[1].src = actionIcons["dark-" + action];
} else {
f.children[1].src = actionIcons[action];
}
f.action = "/" + action + "/" + id;
f.dataset.action = action;
}

30
static/main.css
View File

@ -99,8 +99,8 @@
}
.status-action a:hover,
.status-action a:hover i {
opacity: 0.8;
.status-action input:hover {
opacity: 0.6;
}
.status-action a.status-time {
@ -442,3 +442,29 @@
z-index: 3;
margin: 0 8px 0 8px;
}
.dark {
background-color: #222222;
background-image: none;
color: #eaeaea;
}
.dark a {
color: #81a2be;
}
.dark .status-action a {
color: #999999;
}
.dark #post-content {
background-color: #333333;
border: 1px solid #444444;
color: #eaeaea;
}
.dark #reply-popup,
.dark #reply-to-popup {
background-color: #222222;
border-color: #444444;
}

2
templates/header.tmpl
View File

@ -12,4 +12,4 @@
<script src="/static/fluoride.js"></script>
{{end}}
</head>
<body>
<body {{if .DarkMode}}class="dark"{{end}}>

6
templates/notification.tmpl
View File

@ -14,7 +14,7 @@
<div>
<div class="notification-info-text">
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<img class="icon" src="/static/icons/user-plus.png" alt="followed" />
<img class="icon" src="{{GetIcon "user-plus" .DarkMode}}" alt="followed" />
<span> followed you </span>
</div>
<div class="notification-follow-uname">
@ -36,7 +36,7 @@
<div>
<div class="notification-info-text">
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<img class="icon" src="/static/icons/retweeted.png" alt="retweeted" />
<img class="icon" src="{{GetIcon "retweeted" .DarkMode}}" alt="retweeted" />
<span> retweeted your post </span>
</div>
{{template "status" .Status}}
@ -53,7 +53,7 @@
<div>
<div class="notification-info-text">
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<img class="icon" src="/static/icons/liked.png" alt="liked" />
<img class="icon" src="{{GetIcon "liked" .DarkMode}}" alt="liked" />
<span> liked your post </span>
</div>
{{template "status" .Status}}

2
templates/postform.tmpl
View File

@ -6,7 +6,7 @@
<label for="post-content" class="post-form-title"> New post </label>
{{end}}
<a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji reference">
<img class="icon post-emoji" src="/static/icons/smile-o.png" alt="emojis" />
<img class="icon post-emoji" src="{{GetIcon "smile-o" .DarkMode}}" alt="emojis" />
</a>
<div class="post-form-content-container">
<textarea id="post-content" name="content" class="post-content" cols="50" rows="5">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>

4
templates/settings.tmpl
View File

@ -28,6 +28,10 @@
<input id="fluoride-mode" name="fluoride_mode" type="checkbox" value="true" {{if .Settings.FluorideMode}}checked{{end}}>
<label for="fluoride-mode"> Enable Fluoride Mode </label>
</div>
<div class="settings-form-field">
<input id="dark-mode" name="dark_mode" type="checkbox" value="true" {{if .Settings.DarkMode}}checked{{end}}>
<label for="dark-mode"> Use dark theme </label>
</div>
<button type="submit"> Save </button>
</form>

26
templates/status.tmpl
View File

@ -5,7 +5,7 @@
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
</a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<img class="icon" src="/static/icons/retweeted.png" alt="retweeted" />
<img class="icon" src="{{GetIcon "retweeted" .DarkMode}}" alt="retweeted" />
retweeted
</div>
{{template "status" .Reblog}}
@ -28,17 +28,17 @@
</a>
<a class="status-visibility">
{{if eq .Visibility "public"}}
<img class="icon" src="/static/icons/globe.png" alt="Public" title="Public" />
<img class="icon" src="{{GetIcon "globe" .DarkMode}}" alt="Public" title="Public" />
{{else if eq .Visibility "unlisted"}}
<img class="icon" src="/static/icons/unlock-alt.png" alt="Unlisted" title="Unlisted" />
<img class="icon" src="{{GetIcon "unlock-alt" .DarkMode}}" alt="Unlisted" title="Unlisted" />
{{else if eq .Visibility "private"}}
<img class="icon" src="/static/icons/lock.png" alt="Private" title="Private" />
<img class="icon" src="{{GetIcon "lock" .DarkMode}}" alt="Private" title="Private" />
{{else if eq .Visibility "direct"}}
<img class="icon" src="/static/icons/envelope.png" alt="Direct" title="Direct" />
<img class="icon" src="{{GetIcon "envelope" .DarkMode}}" alt="Direct" title="Direct" />
{{end}}
</a>
<a class="remote-link" href="{{.URL}}" target="_blank" title="source">
<img class="icon" src="/static/icons/link.png" alt="source" />
<img class="icon" src="{{GetIcon "link" .DarkMode}}" alt="source" />
</a>
</div>
{{end}}
@ -46,7 +46,7 @@
{{if .InReplyToID}}
<div class="status-reply-to">
<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}">
<img class="icon" src="/static/icons/mail-forward.png" alt="reply to" /> reply to {{.Pleroma.InReplyToAccountAcct}}
<img class="icon" src="{{GetIcon "mail-forward" .DarkMode}}" alt="reply to" /> reply to {{.Pleroma.InReplyToAccountAcct}}
</a>
</div>
{{if index .ReplyMap .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
@ -93,7 +93,7 @@
<div class="status-action-container">
<div class="status-action">
<a class="status-you" href="/thread/{{.ID}}?reply=true#status-{{.ID}}" title="reply">
<img class="icon" src="/static/icons/reply.png" alt="reply" />
<img class="icon" src="{{GetIcon "reply" .DarkMode}}" alt="reply" />
</a>
<a class="status-reply-count" href="/thread/{{.ID}}#status-{{.ID}}" {{if .ThreadInNewTab}}target="_blank"{{end}}>
{{DisplayInteractionCount .RepliesCount}}
@ -102,18 +102,18 @@
<div class="status-action">
{{if or (eq .Visibility "private") (eq .Visibility "direct")}}
<a class="status-retweet" title="this status cannot be retweeted">
<img class="icon" src="/static/icons/retweet.png" alt="retweet" />
<img class="icon" src="{{GetIcon "retweet" .DarkMode}}" alt="retweet" />
</a>
{{else}}
{{if .Reblogged}}
<form class="status-retweet" data-action="unretweet" action="/unretweet/{{.ID}}" method="post">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}" />
<input type="image" src="/static/icons/retweeted.png" alt="undo retweet" class="icon" title="undo retweet">
<input type="image" src="{{GetIcon "retweeted" .DarkMode}}" alt="undo retweet" class="icon" title="undo retweet">
</form>
{{else}}
<form class="status-retweet" data-action="retweet" action="/retweet/{{.ID}}" method="post">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}" />
<input type="image" src="/static/icons/retweet.png" alt="retweet" class="icon" title="retweet">
<input type="image" src="{{GetIcon "retweet" .DarkMode}}" alt="retweet" class="icon" title="retweet">
</form>
{{end}}
{{end}}
@ -125,12 +125,12 @@
{{if .Favourited}}
<form class="status-like" data-action="unlike" action="/unlike/{{.ID}}" method="post">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}" />
<input type="image" src="/static/icons/liked.png" alt="unlike" class="icon" title="unlike">
<input type="image" src="{{GetIcon "liked" .DarkMode}}" alt="unlike" class="icon" title="unlike">
</form>
{{else}}
<form class="status-like" data-action="like" action="/like/{{.ID}}" method="post">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}" />
<input type="image" src="/static/icons/star-o.png" alt="like" class="icon" title="like">
<input type="image" src="{{GetIcon "star-o" .DarkMode}}" alt="like" class="icon" title="like">
</form>
{{end}}
<a class="status-like-count" href="/likedby/{{.ID}}" title="click to see the the list">

2
templates/user.tmpl
View File

@ -14,7 +14,7 @@
<span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span>
<span class="status-uname"> {{.User.Acct}} </span>
<a class="remote-link" href="{{.User.URL}}" target="_blank" title="remote profile">
<img class="icon" src="/static/icons/link.png" alt="link" />
<img class="icon" src="{{GetIcon "link" .DarkMode}}" alt="link" />
</a>
</div>
<div>