Remove icons

renderer/renderer.go

@@ -11,39 +11,6 @@ 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 TemplateData struct {
 	Data interface{}
 	Ctx  *Context
@@ -79,7 +46,6 @@ func NewRenderer(templateGlobPattern string) (r *renderer, err error) {
 		"TimeSince":               TimeSince,
 		"FormatTimeRFC3339":       FormatTimeRFC3339,
 		"FormatTimeRFC822":        FormatTimeRFC822,
-		"GetIcon":                 GetIcon,
 		"WithContext":             WithContext,
 	}).ParseGlob(templateGlobPattern)
 	if err != nil {
@@ -232,14 +198,6 @@ 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
-}
-
 func WithContext(data interface{}, ctx *Context) TemplateData {
 	return TemplateData{data, ctx}
 }

static/fluoride.js

@@ -1,16 +1,5 @@
 // @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 = {
 	"like": "unlike",
 	"unlike": "like",
@@ -45,11 +34,7 @@ function http(method, url, body, type, success, error) {
 }
 
 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.dataset.action = action;
 }
@@ -74,7 +59,11 @@ function handleLikeForm(id, f) {
 			}
 			var counts = document.querySelectorAll(".status-"+id+" .status-like-count");
 			counts.forEach(function(c) {
-				c.innerHTML = count;
+				if (count > 0) {
+					c.innerHTML = "(" + count + ")";
+				} else {
+					c.innerHTML = "";
+				}
 			});
 		}, function(err) {
 			forms.forEach(function(f) {
@@ -104,7 +93,11 @@ function handleRetweetForm(id, f) {
 			}
 			var counts = document.querySelectorAll(".status-"+id+" .status-retweet-count");
 			counts.forEach(function(c) {
-				c.innerHTML = count;
+				if (count > 0) {
+					c.innerHTML = "(" + count + ")";
+				} else {
+					c.innerHTML = "";
+				}
 			});
 		}, function(err) {
 			forms.forEach(function(f) {

static/style.css

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

templates/notification.tmpl

@@ -15,7 +15,6 @@
 		<div>
 			<div class="notification-info-text">
 				<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>
 					- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
@@ -36,7 +35,6 @@
 			<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="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="retweeted" />
 		<span> retweeted your post </span>
 		<span>
 			- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 
@@ -50,7 +48,6 @@
 			<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="{{GetIcon "liked" $.Ctx.DarkMode}}" alt="liked" />
 		<span> liked your post </span>
 		<span>
 			- <time datetime="{{FormatTimeRFC3339 .CreatedAt}}" title="{{FormatTimeRFC822 .CreatedAt}}">{{TimeSince .CreatedAt}}</time> 

templates/postform.tmpl

@@ -7,8 +7,8 @@
 	{{else}}
 	<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">
+	<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>
 	<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>

templates/status.tmpl

@@ -6,7 +6,6 @@
 			<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="{{GetIcon "retweeted" $.Ctx.DarkMode}}" alt="retweeted" />
 		retweeted
 	</div>
 	{{template "status" (WithContext .Reblog $.Ctx)}}
@@ -25,26 +24,18 @@
 				<a href="/user/{{.Account.ID}}" >
 					<span class="status-uname"> {{.Account.Acct}} </span>
 				</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">
-					<img class="icon" src="{{GetIcon "link" $.Ctx.DarkMode}}" alt="source" />
+					source
 				</a>
 			</div>
 			<div class="status-reply-container">
 				{{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="{{GetIcon "mail-forward" $.Ctx.DarkMode}}" alt="reply to" /> reply to {{.Pleroma.InReplyToAccountAcct}} 
+						 reply to {{.Pleroma.InReplyToAccountAcct}} 
 					</a>
 				</div>
 				{{if index .ReplyMap .ID}} <span class="status-reply-info-divider"> - </span> {{end}}
@@ -58,7 +49,9 @@
 				{{end}}
 				{{end}}
 			</div>
+			{{if .Content}}
 			<div class="status-content"> {{StatusContentFilter .SpoilerText .Content .Emojis .Mentions}} </div>
+			{{end}}
 			<div class="status-media-container">
 			{{range .MediaAttachments}}
 			{{if eq .Type "image"}}
@@ -90,35 +83,35 @@
 			</div>
 			<div class="status-action-container"> 
 				<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 class="status-reply-count" href="/thread/{{.ID}}#status-{{.ID}}" {{if $.Ctx.ThreadInNewTab}}target="_blank"{{end}}>
-						{{DisplayInteractionCount .RepliesCount}}
+					{{if .RepliesCount}} ({{DisplayInteractionCount .RepliesCount}}) {{end}}
 					</a>
 				</div>
 				<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="{{GetIcon "retweet" $.Ctx.DarkMode}}" alt="retweet" />
+						retweet
 					</a>
 					{{else}}
 					{{if .Reblogged}}
 					<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="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>
 					{{else}}
 					<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="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>
 					{{end}}
 					{{end}}
 					<a class="status-retweet-count" href="/retweetedby/{{.ID}}" title="click to see the the list"> 
-						{{DisplayInteractionCount .ReblogsCount}}
+						{{if .ReblogsCount}} ({{DisplayInteractionCount .ReblogsCount}}) {{end}}
 					</a>
 				</div>
 				<div class="status-action">
@@ -126,17 +119,17 @@
 					<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="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>
 					{{else}}
 					<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="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>
 					{{end}}
 					<a class="status-like-count" href="/likedby/{{.ID}}" title="click to see the the list"> 
-						{{DisplayInteractionCount .FavouritesCount}}
+						{{if .FavouritesCount}} ({{DisplayInteractionCount .FavouritesCount}}) {{end}}
 					</a>
 				</div>
 				<div class="status-action">

templates/user.tmpl

@@ -15,7 +15,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="{{GetIcon "link" $.Ctx.DarkMode}}" alt="link" />
+				source
 			</a>
 		</div>
 		<div>