Remove icons

This commit is contained in:
r 2020-01-30 13:56:29 +00:00
parent f93fe32766
commit 84cd3bc436
7 changed files with 70 additions and 149 deletions

View File

@ -11,39 +11,6 @@ import (
"mastodon" "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 TemplateData struct { type TemplateData struct {
Data interface{} Data interface{}
Ctx *Context Ctx *Context
@ -79,7 +46,6 @@ func NewRenderer(templateGlobPattern string) (r *renderer, err error) {
"TimeSince": TimeSince, "TimeSince": TimeSince,
"FormatTimeRFC3339": FormatTimeRFC3339, "FormatTimeRFC3339": FormatTimeRFC3339,
"FormatTimeRFC822": FormatTimeRFC822, "FormatTimeRFC822": FormatTimeRFC822,
"GetIcon": GetIcon,
"WithContext": WithContext, "WithContext": WithContext,
}).ParseGlob(templateGlobPattern) }).ParseGlob(templateGlobPattern)
if err != nil { if err != nil {
@ -232,14 +198,6 @@ func FormatTimeRFC822(t time.Time) string {
return t.Format(time.RFC822) return t.Format(time.RFC822)
} }
func GetIcon(name string, darkMode bool) (icon string) {
if darkMode {
name = "dark-" + name
}
icon, _ = icons[name]
return
}
func WithContext(data interface{}, ctx *Context) TemplateData { func WithContext(data interface{}, ctx *Context) TemplateData {
return TemplateData{data, ctx} return TemplateData{data, ctx}
} }

View File

@ -1,16 +1,5 @@
// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0 // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0
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",
"dark-retweet": "/static/icons/dark-retweet.png",
"unretweet": "/static/icons/retweeted.png",
"dark-unretweet": "/static/icons/retweeted.png"
};
var reverseActions = { var reverseActions = {
"like": "unlike", "like": "unlike",
"unlike": "like", "unlike": "like",
@ -45,11 +34,7 @@ function http(method, url, body, type, success, error) {
} }
function updateActionForm(id, f, action) { function updateActionForm(id, f, action) {
if (Array.from(document.body.classList).indexOf("dark") > -1) { f.querySelector('[type="submit"]').value = action;
f.querySelector(".icon").src = actionIcons["dark-" + action];
} else {
f.querySelector(".icon").src = actionIcons[action];
}
f.action = "/" + action + "/" + id; f.action = "/" + action + "/" + id;
f.dataset.action = action; f.dataset.action = action;
} }
@ -74,7 +59,11 @@ function handleLikeForm(id, f) {
} }
var counts = document.querySelectorAll(".status-"+id+" .status-like-count"); var counts = document.querySelectorAll(".status-"+id+" .status-like-count");
counts.forEach(function(c) { counts.forEach(function(c) {
c.innerHTML = count; if (count > 0) {
c.innerHTML = "(" + count + ")";
} else {
c.innerHTML = "";
}
}); });
}, function(err) { }, function(err) {
forms.forEach(function(f) { forms.forEach(function(f) {
@ -104,7 +93,11 @@ function handleRetweetForm(id, f) {
} }
var counts = document.querySelectorAll(".status-"+id+" .status-retweet-count"); var counts = document.querySelectorAll(".status-"+id+" .status-retweet-count");
counts.forEach(function(c) { counts.forEach(function(c) {
c.innerHTML = count; if (count > 0) {
c.innerHTML = "(" + count + ")";
} else {
c.innerHTML = "";
}
}); });
}, function(err) { }, function(err) {
forms.forEach(function(f) { forms.forEach(function(f) {

View File

@ -54,10 +54,6 @@
.status { .status {
} }
.status a {
text-decoration: none;
}
.status-dname { .status-dname {
font-weight: 800; font-weight: 800;
} }
@ -85,38 +81,29 @@
.status-action { .status-action {
display: inline-block; display: inline-block;
min-width: 64px; margin-right: 16px;
}
.status-action:last-child {
margin-right: 4px;
} }
.status-action form { .status-action form {
display: inline-block; display: inline-block;
} }
.status-action:last-child {
min-width: unset;
}
.status-action a { .status-action a {
display: inline-block; display: inline-block;
text-decoration: none;
color: #333333;
} }
.status-action a:hover, .status-action * {
.status-action input:hover { verical-align: center;
opacity: 0.6;
} }
.status-action a.status-time { .status-action a.status-time {
width: auto; width: auto;
} }
.status-reply-count,
.status-retweet-count,
.status-like-count {
vertical-align: middle;
}
.page-title { .page-title {
font-size: 23pt; font-size: 23pt;
} }
@ -269,34 +256,32 @@
outline: none; outline: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
color: #0000EE;
padding: 0; padding: 0;
text-decoration: underline;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
a, .btn-link {
color: #464acc;
text-decoration: none;
}
a:hover,
.btn-link:hover {
opacity: 0.6;
}
.status-visibility { .status-visibility {
margin-left: 4px; margin-left: 4px;
display: inline-block; display: inline-block;
color: #444444; color: #222222;
} font-size: 8pt;
.status-visibility span {
font-size: 9pt;
vertical-align: bottom;
} }
.remote-link { .remote-link {
margin-left: 4px; margin-left: 4px;
display: inline-block; display: inline-block;
color: #444444; font-size: 8pt;
text-decoration: none;
}
.remote-link span {
font-size: 9pt;
vertical-align: bottom;
} }
.img-link { .img-link {
@ -305,6 +290,10 @@
margin: 2.5px 0; margin: 2.5px 0;
} }
.img-link:hover {
opacity: initial;
}
.status-profile-img-container .img-link { .status-profile-img-container .img-link {
width: 48px; width: 48px;
overflow: hidden; overflow: hidden;
@ -390,16 +379,13 @@
.nav-link { .nav-link {
margin-right: 2px; margin-right: 2px;
text-decoration: underline;
} }
.user-list-container { .user-list-container {
margin: 8px 0; margin: 8px 0;
} }
.user-list-item a {
text-decoration: none;
}
.user-list-item>div { .user-list-item>div {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
@ -422,15 +408,6 @@
margin-top: 8px; margin-top: 8px;
} }
.icon {
height: 16px;
vertical-align: middle;
}
.icon.post-emoji {
height: 20px;
}
#reply-popup { #reply-popup {
position: absolute; position: absolute;
background: #ffffff; background: #ffffff;
@ -459,10 +436,6 @@
color: #81a2be; color: #81a2be;
} }
.dark .status-action a {
color: #999999;
}
.dark #post-content { .dark #post-content {
background-color: #333333; background-color: #333333;
border: 1px solid #444444; border: 1px solid #444444;
@ -479,3 +452,10 @@
background-color: #333333; background-color: #333333;
} }
.dark .btn-link {
color: #81a2be;
}
.dark .status-visibility {
color: #eaeaea;
}

View File

@ -15,7 +15,6 @@
<div> <div>
<div class="notification-info-text"> <div class="notification-info-text">
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<img class="icon" src="{{GetIcon "user-plus" $.Ctx.DarkMode}}" alt="followed" />
<span> followed you </span> <span> followed you </span>
<span> <span>
- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> - <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time>
@ -36,7 +35,6 @@
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" /> <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
</a> </a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<img class="icon" src="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="retweeted" />
<span> retweeted your post </span> <span> retweeted your post </span>
<span> <span>
- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> - <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time>
@ -50,7 +48,6 @@
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" /> <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
</a> </a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<img class="icon" src="{{GetIcon "liked" $.Ctx.DarkMode}}" alt="liked" />
<span> liked your post </span> <span> liked your post </span>
<span> <span>
- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> - <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time>

View File

@ -7,8 +7,8 @@
{{else}} {{else}}
<label for="post-content" class="post-form-title"> New post </label> <label for="post-content" class="post-form-title"> New post </label>
{{end}} {{end}}
<a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji reference"> <a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji list">
<img class="icon post-emoji" src="{{GetIcon "smile-o" $.Ctx.DarkMode}}" alt="emojis" /> emoji list
</a> </a>
<div class="post-form-content-container"> <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> <textarea id="post-content" name="content" class="post-content" cols="50" rows="5">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea>

View File

@ -6,7 +6,6 @@
<img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" /> <img class="status-profile-img" src="{{.Account.AvatarStatic}}" alt="avatar" />
</a> </a>
<span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span> <span class="status-dname"> {{EmojiFilter .Account.DisplayName .Account.Emojis}} </span>
<img class="icon" src="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="retweeted" />
retweeted retweeted
</div> </div>
{{template "status" (WithContext .Reblog $.Ctx)}} {{template "status" (WithContext .Reblog $.Ctx)}}
@ -25,26 +24,18 @@
<a href="/user/{{.Account.ID}}" > <a href="/user/{{.Account.ID}}" >
<span class="status-uname"> {{.Account.Acct}} </span> <span class="status-uname"> {{.Account.Acct}} </span>
</a> </a>
<a class="status-visibility"> <span class="status-visibility">
{{if eq .Visibility "public"}} {{.Visibility}}
<img class="icon" src="{{GetIcon "globe" $.Ctx.DarkMode}}" alt="Public" title="Public" /> </span>
{{else if eq .Visibility "unlisted"}}
<img class="icon" src="{{GetIcon "unlock-alt" $.Ctx.DarkMode}}" alt="Unlisted" title="Unlisted" />
{{else if eq .Visibility "private"}}
<img class="icon" src="{{GetIcon "lock" $.Ctx.DarkMode}}" alt="Private" title="Private" />
{{else if eq .Visibility "direct"}}
<img class="icon" src="{{GetIcon "envelope" $.Ctx.DarkMode}}" alt="Direct" title="Direct" />
{{end}}
</a>
<a class="remote-link" href="{{.URL}}" target="_blank" title="source"> <a class="remote-link" href="{{.URL}}" target="_blank" title="source">
<img class="icon" src="{{GetIcon "link" $.Ctx.DarkMode}}" alt="source" /> source
</a> </a>
</div> </div>
<div class="status-reply-container"> <div class="status-reply-container">
{{if .InReplyToID}} {{if .InReplyToID}}
<div class="status-reply-to"> <div class="status-reply-to">
<a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}"> <a class="status-reply-to-link" href="{{if not .ShowReplies}}/thread/{{.InReplyToID}}{{end}}#status-{{.InReplyToID}}">
<img class="icon" src="{{GetIcon "mail-forward" $.Ctx.DarkMode}}" alt="reply to" /> reply to {{.Pleroma.InReplyToAccountAcct}} reply to {{.Pleroma.InReplyToAccountAcct}}
</a> </a>
</div> </div>
{{if index .ReplyMap .ID}} <span class="status-reply-info-divider"> - </span> {{end}} {{if index .ReplyMap .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
@ -58,7 +49,9 @@
{{end}} {{end}}
{{end}} {{end}}
</div> </div>
{{if .Content}}
<div class="status-content"> {{StatusContentFilter .SpoilerText .Content .Emojis .Mentions}} </div> <div class="status-content"> {{StatusContentFilter .SpoilerText .Content .Emojis .Mentions}} </div>
{{end}}
<div class="status-media-container"> <div class="status-media-container">
{{range .MediaAttachments}} {{range .MediaAttachments}}
{{if eq .Type "image"}} {{if eq .Type "image"}}
@ -90,35 +83,35 @@
</div> </div>
<div class="status-action-container"> <div class="status-action-container">
<div class="status-action"> <div class="status-action">
<a class="status-you" href="/thread/{{.ID}}?reply=true#status-{{.ID}}" title="reply"> <a href="/thread/{{.ID}}?reply=true#status-{{.ID}}" title="reply">
<img class="icon" src="{{GetIcon "reply" $.Ctx.DarkMode}}" alt="reply" /> reply
</a> </a>
<a class="status-reply-count" href="/thread/{{.ID}}#status-{{.ID}}" {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}> <a class="status-reply-count" href="/thread/{{.ID}}#status-{{.ID}}" {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}>
{{DisplayInteractionCount .RepliesCount}} {{if .RepliesCount}} ({{DisplayInteractionCount .RepliesCount}}) {{end}}
</a> </a>
</div> </div>
<div class="status-action"> <div class="status-action">
{{if or (eq .Visibility "private") (eq .Visibility "direct")}} {{if or (eq .Visibility "private") (eq .Visibility "direct")}}
<a class="status-retweet" title="this status cannot be retweeted"> <a class="status-retweet" title="this status cannot be retweeted">
<img class="icon" src="{{GetIcon "retweet" $.Ctx.DarkMode}}" alt="retweet" /> retweet
</a> </a>
{{else}} {{else}}
{{if .Reblogged}} {{if .Reblogged}}
<form class="status-retweet" data-action="unretweet" action="/unretweet/{{.ID}}" method="post"> <form class="status-retweet" data-action="unretweet" action="/unretweet/{{.ID}}" method="post">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}"> <input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}"> <input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
<input type="image" src="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="undo retweet" class="icon" title="undo retweet"> <input type="submit" value="unretweet" class="btn-link" title="unretweet">
</form> </form>
{{else}} {{else}}
<form class="status-retweet" data-action="retweet" action="/retweet/{{.ID}}" method="post"> <form class="status-retweet" data-action="retweet" action="/retweet/{{.ID}}" method="post">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}"> <input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}"> <input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
<input type="image" src="{{GetIcon "retweet" $.Ctx.DarkMode}}" alt="retweet" class="icon" title="retweet"> <input type="submit" value="retweet" class="btn-link" title="retweet">
</form> </form>
{{end}} {{end}}
{{end}} {{end}}
<a class="status-retweet-count" href="/retweetedby/{{.ID}}" title="click to see the the list"> <a class="status-retweet-count" href="/retweetedby/{{.ID}}" title="click to see the the list">
{{DisplayInteractionCount .ReblogsCount}} {{if .ReblogsCount}} ({{DisplayInteractionCount .ReblogsCount}}) {{end}}
</a> </a>
</div> </div>
<div class="status-action"> <div class="status-action">
@ -126,17 +119,17 @@
<form class="status-like" data-action="unlike" action="/unlike/{{.ID}}" method="post"> <form class="status-like" data-action="unlike" action="/unlike/{{.ID}}" method="post">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}"> <input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}"> <input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
<input type="image" src="{{GetIcon "liked" $.Ctx.DarkMode}}" alt="unlike" class="icon" title="unlike"> <input type="submit" value="unlike" class="btn-link" title="unlike">
</form> </form>
{{else}} {{else}}
<form class="status-like" data-action="like" action="/like/{{.ID}}" method="post"> <form class="status-like" data-action="like" action="/like/{{.ID}}" method="post">
<input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}"> <input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}">
<input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}"> <input type="hidden" name="retweeted_by_id" value="{{.RetweetedByID}}">
<input type="image" src="{{GetIcon "star-o" $.Ctx.DarkMode}}" alt="like" class="icon" title="like"> <input type="submit" value="like" class="btn-link" title="like">
</form> </form>
{{end}} {{end}}
<a class="status-like-count" href="/likedby/{{.ID}}" title="click to see the the list"> <a class="status-like-count" href="/likedby/{{.ID}}" title="click to see the the list">
{{DisplayInteractionCount .FavouritesCount}} {{if .FavouritesCount}} ({{DisplayInteractionCount .FavouritesCount}}) {{end}}
</a> </a>
</div> </div>
<div class="status-action"> <div class="status-action">

View File

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