Remove icons
authorr <r@freesoftwareextremist.com>
Thu, 30 Jan 2020 13:56:29 +0000 (13:56 +0000)
committerr <r@freesoftwareextremist.com>
Thu, 30 Jan 2020 13:56:29 +0000 (13:56 +0000)
renderer/renderer.go
static/fluoride.js
static/style.css
templates/notification.tmpl
templates/postform.tmpl
templates/status.tmpl
templates/user.tmpl

index 2d227c4b15299ed4d47c84dc463caa938ea5608a..2ad5ddffc16f39b10e203dbb410e241f30051d41 100644 (file)
@@ -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}
 }
index 44af7c91b65ccb1c3f40627a63b2b08840350454..b3e90b8c3d6728f45286288083c6b5d5c01cd488 100644 (file)
@@ -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(".icon").src = actionIcons["dark-" + action];
-       } else {
-               f.querySelector(".icon").src = actionIcons[action];
-       }
+       f.querySelector('[type="submit"]').value = 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) {
index fdbad23e436aa7d996d5244985708884b6e7525a..888fb5d4082325d872a20aeeb59a330bd58d47f0 100644 (file)
 .status {
 }
 
-.status a {
-       text-decoration: none;
-}
-
 .status-dname {
        font-weight: 800;
 }
 
 .status-action {
        display: inline-block;
-       min-width: 64px;
+       margin-right: 16px;
 }
 
-.status-action form {
-       display: inline-block;
+.status-action:last-child {
+       margin-right: 4px;
 }
 
-.status-action:last-child {
-       min-width: unset;
+.status-action form {
+       display: inline-block;
 }
 
 .status-action a {
        display: inline-block;
-       text-decoration: none;
-       color: #333333;
 }
 
-.status-action a:hover,
-.status-action input:hover {
-       opacity: 0.6;
+.status-action * {
+       verical-align: center;
 }
 
 .status-action a.status-time {
        width: auto;
 }
 
-.status-reply-count,
-.status-retweet-count,
-.status-like-count {
-       vertical-align: middle;
-}
-
 .page-title {
        font-size: 23pt;
 }
 }
 
 .btn-link {
-    border: none;
-    outline: none;
-    background: none;
-    cursor: pointer;
-    color: #0000EE;
-    padding: 0;
-    text-decoration: underline;
-    font-family: inherit;
-    font-size: inherit;
+       border: none;
+       outline: none;
+       background: none;
+       cursor: pointer;
+       padding: 0;
+       font-family: inherit;
+       font-size: inherit;
 }
 
-.status-visibility {
-       margin-left: 4px;
-       display: inline-block;
-       color: #444444;
+a, .btn-link {
+       color: #464acc;
+       text-decoration: none;
 }
 
-.status-visibility span {
-       font-size: 9pt;
-       vertical-align: bottom;
+a:hover,
+.btn-link:hover {
+       opacity: 0.6;
 }
 
-.remote-link {
+.status-visibility {
        margin-left: 4px;
        display: inline-block;
-       color: #444444;
-       text-decoration: none;
+       color: #222222;
+       font-size: 8pt;
 }
 
-.remote-link span {
-       font-size: 9pt;
-       vertical-align: bottom;
+.remote-link {
+       margin-left: 4px;
+       display: inline-block;
+       font-size: 8pt;
 }
 
 .img-link {
        margin: 2.5px 0;
 }
 
+.img-link:hover {
+       opacity: initial;
+}
+
 .status-profile-img-container .img-link {
        width: 48px;
        overflow: hidden;
 
 .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;
        margin-top: 8px;
 }
 
-.icon {
-       height: 16px;
-       vertical-align: middle;
-}
-
-.icon.post-emoji {
-       height: 20px;
-}
-
 #reply-popup {
        position: absolute;
        background: #ffffff;
        color: #81a2be;
 }
 
-.dark .status-action a {
-       color: #999999;
-}
-
 .dark #post-content {
        background-color: #333333;
        border: 1px solid #444444;
        background-color: #333333;
 }
 
+.dark .btn-link {
+       color: #81a2be;
+}
+
+.dark .status-visibility {
+       color: #eaeaea;
+}
index cc7a4a155b4a18cf208402be704c5c27f2229fa8..51cc6e34fcf41444541947891ea8830c48450703 100644 (file)
@@ -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> 
index ff2dfd9130e94699c80b3cd2554d4b770bad19e3..51ac5e6851bb2f980f7372e1e5c2cd7c2b629c06 100644 (file)
@@ -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">
-               <img class="icon post-emoji" src="{{GetIcon "smile-o" $.Ctx.DarkMode}}" alt="emojis" />
+       <a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji list">
+               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>
index a6b28fa70395b8fcfeb655d444565c5a2a27f4c1..3945cc8ccadaae441293cdc30ffeab1fe3942789 100644 (file)
@@ -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)}}
                                <a href="/user/{{.Account.ID}}" >
                                        <span class="status-uname"> {{.Account.Acct}} </span>
                                </a>
-                               <a class="status-visibility">
-                                       {{if eq .Visibility "public"}}
-                                       <img class="icon" src="{{GetIcon "globe" $.Ctx.DarkMode}}" alt="Public" title="Public" />
-                                       {{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>
+                               <span class="status-visibility">
+                                       {{.Visibility}}
+                               </span>
                                <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"}}
                        </div>
                        <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="{{GetIcon "reply" $.Ctx.DarkMode}}" alt="reply" />
+                                       <a href="/thread/{{.ID}}?reply=true#status-{{.ID}}" title="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">
                                        <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">
index bab24b2add97e686d5936d8740a79e33fa501ee9..ca8a1ad276334cdc8ac5b5e1d4968ea6543d163a 100644 (file)
@@ -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>