some design changes

dimdenGD · Aug 20, 2022 · eb197bb · eb197bb
1 parent f51b960
commit eb197bb
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 50 deletions.
diff --git a/layouts/home/script.js b/layouts/home/script.js
@@ -276,7 +276,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             <span class="tweet-body-text ${t.full_text && t.full_text.length > 100 ? 'tweet-body-text-long' : 'tweet-body-text-short'}">${t.full_text ? escapeHTML(t.full_text).replace(/\n/g, '<br>').replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a>').replace(/(?<!\w)@([\w+]{1,15}\b)/g, `<a href="https://twitter.com/$1">@$1</a>`).replace(/(?<!\w)#([\w+]+\b)/g, `<a href="https://twitter.com/hashtag/$1">#$1</a>`) : ''}</span>
             ${!isEnglish ? `
             <br>
-            <span class="tweet-translate">Translate tweet</span>
+            <span class="tweet-translate">View translation</span>
             ` : ``}
             ${t.extended_entities && t.extended_entities.media ? `
             <div class="tweet-media">
@@ -312,13 +312,13 @@ async function appendTweet(t, timelineContainer, options = {}) {
             ` : ''}
             ${options.selfThreadButton && t.self_thread.id_str ? `<br><a class="tweet-self-thread-button" target="_blank" href="https://twitter.com/${t.user.screen_name}/status/${t.self_thread.id_str}">Show this thread</a>` : ``}
             <div class="tweet-interact">
-                <span class="tweet-interact-reply">${t.reply_count}</span>
-                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}">${t.retweet_count}</span>
+                <span class="tweet-interact-reply" data-val="${t.reply_count}">${t.reply_count}</span>
+                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}" data-val="${t.retweet_count}">${t.retweet_count}</span>
                 <div class="tweet-interact-retweet-menu" hidden>
                     <span class="tweet-interact-retweet-menu-retweet">${t.retweeted ? 'Unretweet' : 'Retweet'}</span><br>
                     <span class="tweet-interact-retweet-menu-quote">Quote tweet</span>
                 </div>
-                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}">${t.favorite_count}</span>
+                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}" data-val="${t.favorite_count}">${t.favorite_count}</span>
                 <span class="tweet-interact-more"></span>
                 <div class="tweet-interact-more-menu" hidden>
                     <span class="tweet-interact-more-menu-copy">Copy link</span><br>
@@ -569,6 +569,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
         tweetReplyText.value = '';
         tweetReply.hidden = true;
         tweetInteractReply.classList.remove('tweet-interact-reply-clicked');
+        tweetInteractReply.dataset.val = parseInt(tweetInteractReply.innerText) + 1;
         tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
         tweetData._ARTIFICIAL = true;
         timeline.data.unshift(tweetData);
@@ -622,6 +623,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             tweetInteractRetweet.classList.add('tweet-interact-retweeted');
             t.retweeted = true;
             t.newTweetId = tweetData.id_str;
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) + 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
         } else {
             let tweetData;
@@ -637,6 +639,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             tweetInteractRetweetMenuRetweet.innerText = 'Retweet';
             tweetInteractRetweet.classList.remove('tweet-interact-retweeted');
             t.retweeted = false;
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) - 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
             delete t.newTweetId;
         }
@@ -752,6 +755,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = false;
             t.favorite_count--;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.classList.remove('tweet-interact-favorited');
         } else {
@@ -760,6 +764,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = true;
             t.favorite_count++;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.classList.add('tweet-interact-favorited');
         }

diff --git a/layouts/home/style.css b/layouts/home/style.css
@@ -150,9 +150,20 @@ body {
     outline: none;
 }
 
+.tweet-interact-reply[data-val="0"],
+.tweet-interact-retweet[data-val="0"],
+.tweet-interact-favorite[data-val="0"] {
+    color: var(--background-color);
+}
+
 .tweet:hover {
     background-color: var(--darker-background-color)
 }
+.tweet:hover .tweet-interact-reply[data-val="0"],
+.tweet:hover .tweet-interact-retweet[data-val="0"],
+.tweet:hover .tweet-interact-favorite[data-val="0"] {
+    color: var(--darker-background-color);
+}
 
 .tweet-avatar-link {
     float: left;
@@ -229,7 +240,7 @@ span.tweet-body-text {
 .tweet-interact,
 .tweet-body-text-quote {
     display: flow-root;
-    color: var(--default-text-color)
+    color: var(--almost-black)
 }
 .tweet-body-text-quote {
     overflow-x: hidden;
@@ -241,7 +252,7 @@ span.tweet-body-text {
     color: #1da1f2;
     height: 10px;
     font-size: 47px;
-    margin-top: -9px;
+    margin-top: -14px;
 }
 
 .tweet-body-quote {
@@ -930,11 +941,17 @@ a:hover,
 }
 
 .tweet-translate {
-    color: var(--link-color);
+    color: var(--light-gray);
     cursor: pointer;
-    font-size: 13px;
+    font-size: 12px;
     margin-top: 2px
 }
+.tweet-translate:before {
+    content: "\f089";
+    font: 12px RosettaIcons;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+}
 
 .tweet-interact-more-menu hr {
     border-top: #ccd6dd;

diff --git a/layouts/notifications/script.js b/layouts/notifications/script.js
@@ -86,7 +86,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             <span class="tweet-body-text ${t.full_text && t.full_text.length > 100 ? 'tweet-body-text-long' : 'tweet-body-text-short'}">${t.full_text ? escapeHTML(t.full_text).replace(/\n/g, '<br>').replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a>').replace(/(?<!\w)@([\w+]{1,15}\b)/g, `<a href="https://twitter.com/$1" target="_blank">@$1</a>`).replace(/(?<!\w)#([\w+]+\b)/g, `<a href="https://twitter.com/hashtag/$1">#$1</a>`) : ''}</span>
             ${!isEnglish ? `
             <br>
-            <span class="tweet-translate">Translate tweet</span>
+            <span class="tweet-translate">View translation</span>
             ` : ``}
             ${t.extended_entities && t.extended_entities.media ? `
             <div class="tweet-media">
@@ -116,13 +116,13 @@ async function appendTweet(t, timelineContainer, options = {}) {
             ` : ``}
             ${options.selfThreadButton && t.self_thread.id_str ? `<br><a class="tweet-self-thread-button" href="https://twitter.com/${t.user.screen_name}/status/${t.self_thread.id_str}">Show this thread</a>` : ``}
             <div class="tweet-interact">
-                <span class="tweet-interact-reply">${t.reply_count}</span>
-                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}">${t.retweet_count}</span>
+                <span class="tweet-interact-reply" data-val="${t.reply_count}">${t.reply_count}</span>
+                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}" data-val="${t.retweet_count}">${t.retweet_count}</span>
                 <div class="tweet-interact-retweet-menu" hidden>
                     <span class="tweet-interact-retweet-menu-retweet">${t.retweeted ? 'Unretweet' : 'Retweet'}</span><br>
                     <span class="tweet-interact-retweet-menu-quote">Quote tweet</span>
                 </div>
-                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}">${t.favorite_count}</span>
+                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}" data-val="${t.favorite_count}">${t.favorite_count}</span>
                 <span class="tweet-interact-more"></span>
                 <div class="tweet-interact-more-menu" hidden>
                     <span class="tweet-interact-more-menu-copy">Copy link</span><br>
@@ -361,6 +361,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
         tweetReplyText.value = '';
         tweetReply.hidden = true;
         tweetInteractReply.classList.remove('tweet-interact-reply-clicked');
+        tweetInteractReply.dataset.val = parseInt(tweetInteractReply.innerText) + 1;
         tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
         tweetData._ARTIFICIAL = true;
         timeline.data.unshift(tweetData);
@@ -406,6 +407,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Unretweet';
             tweetInteractRetweet.classList.add('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) + 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
             t.retweeted = true;
             t.newTweetId = tweetData.id_str;
@@ -422,6 +424,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Retweet';
             tweetInteractRetweet.classList.remove('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) - 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
             t.retweeted = false;
             delete t.newTweetId;
@@ -537,6 +540,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = false;
             t.favorite_count--;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.classList.remove('tweet-interact-favorited');
         } else {
@@ -545,6 +549,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = true;
             t.favorite_count++;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.classList.add('tweet-interact-favorited');
         }

diff --git a/layouts/notifications/style.css b/layouts/notifications/style.css
@@ -155,6 +155,19 @@ body {
     background-color: var(--darker-background-color)
 }
 
+.tweet-interact-reply[data-val="0"],
+.tweet-interact-retweet[data-val="0"],
+.tweet-interact-favorite[data-val="0"] {
+    color: var(--background-color);
+}
+
+.tweet:hover .tweet-interact-reply[data-val="0"],
+.tweet:hover .tweet-interact-retweet[data-val="0"],
+.tweet:hover .tweet-interact-favorite[data-val="0"] {
+    color: var(--darker-background-color);
+}
+
+
 .tweet-avatar-link {
     float: left;
     margin-right: 10px
@@ -230,7 +243,7 @@ span.tweet-body-text {
 .tweet-interact,
 .tweet-body-text-quote {
     display: flow-root;
-    color: var(--default-text-color)
+    color: var(--almost-black)
 }
 .tweet-body-text-quote {
     overflow-x: hidden;
@@ -731,11 +744,17 @@ a:hover,
 }
 
 .tweet-translate {
-    color: var(--link-color);
+    color: var(--light-gray);
     cursor: pointer;
-    font-size: 13px;
+    font-size: 12px;
     margin-top: 2px
 }
+.tweet-translate:before {
+    content: "\f089";
+    font: 12px RosettaIcons;
+    margin-right: 5px;
+    vertical-align: text-bottom;
+}
 
 .tweet-interact-more-menu hr {
     border-top: #ccd6dd;

diff --git a/layouts/profile/script.js b/layouts/profile/script.js
@@ -979,7 +979,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             <span class="tweet-body-text ${t.full_text && t.full_text.length > 100 ? 'tweet-body-text-long' : 'tweet-body-text-short'}">${t.full_text ? escapeHTML(t.full_text).replace(/\n/g, '<br>').replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a>').replace(/(?<!\w)@([\w+]{1,15}\b)/g, `<a href="https://twitter.com/$1">@$1</a>`).replace(/(?<!\w)#([\w+]+\b)/g, `<a href="https://twitter.com/hashtag/$1">#$1</a>`) : ''}</span>
             ${!isEnglish ? `
             <br>
-            <span class="tweet-translate">Translate tweet</span>
+            <span class="tweet-translate">View translation</span>
             ` : ``}
             ${t.extended_entities && t.extended_entities.media ? `
             <div class="tweet-media">
@@ -1015,13 +1015,13 @@ async function appendTweet(t, timelineContainer, options = {}) {
             ` : ''}
             ${options.selfThreadButton && t.self_thread.id_str ? `<br><a class="tweet-self-thread-button" target="_blank" href="https://twitter.com/${t.user.screen_name}/status/${t.self_thread.id_str}">Show this thread</a>` : ``}
             <div class="tweet-interact">
-                <span class="tweet-interact-reply">${t.reply_count}</span>
-                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}">${t.retweet_count}</span>
+                <span class="tweet-interact-reply" data-val="${t.reply_count}">${t.reply_count}</span>
+                <span class="tweet-interact-retweet ${t.retweeted ? 'tweet-interact-retweeted' : ''}" data-val="${t.retweet_count}">${t.retweet_count}</span>
                 <div class="tweet-interact-retweet-menu" hidden>
                     <span class="tweet-interact-retweet-menu-retweet">${t.retweeted ? 'Unretweet' : 'Retweet'}</span><br>
                     <span class="tweet-interact-retweet-menu-quote">Quote tweet</span>
                 </div>
-                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}">${t.favorite_count}</span>
+                <span class="tweet-interact-favorite ${t.favorited ? 'tweet-interact-favorited' : ''}" data-val="${t.favorite_count}">${t.favorite_count}</span>
                 <span class="tweet-interact-more"></span>
                 <div class="tweet-interact-more-menu" hidden>
                     <span class="tweet-interact-more-menu-copy">Copy link</span><br>
@@ -1280,6 +1280,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
         tweetReplyText.value = '';
         tweetReply.hidden = true;
         tweetInteractReply.classList.remove('tweet-interact-reply-clicked');
+        tweetInteractReply.dataset.val = parseInt(tweetInteractReply.innerText) + 1;
         tweetInteractReply.innerText = parseInt(tweetInteractReply.innerText) + 1;
         tweetData._ARTIFICIAL = true;
         timeline.data.unshift(tweetData);
@@ -1329,6 +1330,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Unretweet';
             tweetInteractRetweet.classList.add('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) + 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) + 1;
             t.retweeted = true;
             t.newTweetId = tweetData.id_str;
@@ -1345,6 +1347,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             }
             tweetInteractRetweetMenuRetweet.innerText = 'Retweet';
             tweetInteractRetweet.classList.remove('tweet-interact-retweeted');
+            tweetInteractRetweet.dataset.val = parseInt(tweetInteractRetweet.innerText) - 1;
             tweetInteractRetweet.innerText = parseInt(tweetInteractRetweet.innerText) - 1;
             t.retweeted = false;
             delete t.newTweetId;
@@ -1461,6 +1464,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = false;
             t.favorite_count--;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) - 1;
             tweetInteractFavorite.classList.remove('tweet-interact-favorited');
         } else {
@@ -1469,6 +1473,7 @@ async function appendTweet(t, timelineContainer, options = {}) {
             });
             t.favorited = true;
             t.favorite_count++;
+            tweetInteractFavorite.dataset.val = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.innerText = parseInt(tweetInteractFavorite.innerText) + 1;
             tweetInteractFavorite.classList.add('tweet-interact-favorited');
         }

diff --git a/layouts/profile/style.css b/layouts/profile/style.css
@@ -128,9 +128,20 @@ body {
     outline: none;
 }
 
+.tweet-interact-reply[data-val="0"],
+.tweet-interact-retweet[data-val="0"],
+.tweet-interact-favorite[data-val="0"] {
+    color: var(--background-color);
+}
+
 .tweet:hover {
     background-color: var(--darker-background-color)
 }
+.tweet:hover .tweet-interact-reply[data-val="0"],
+.tweet:hover .tweet-interact-retweet[data-val="0"],
+.tweet:hover .tweet-interact-favorite[data-val="0"] {
+    color: var(--darker-background-color);
+}
 
 .tweet-avatar-link {
     float: left;
@@ -164,7 +175,7 @@ body {
     color: #1da1f2;
     height: 10px;
     font-size: 47px;
-    margin-top: -9px;
+    margin-top: -14px;
 }
 
 .tweet-header-name,
@@ -216,7 +227,7 @@ span.tweet-body-text {
 .tweet-interact,
 .tweet-body-text-quote {
     display: flow-root;
-    color: var(--default-text-color)
+    color: var(--almost-black)
 }
 .tweet-body-text-quote {
     overflow-x: hidden;