Merge pull request #872 from not-nullptr/master

feat: add option for profile banner transition
dimdenGD · Jul 12, 2024 · 7b45404 · 7b45404
2 parents 093c809 + 07293e5
commit 7b45404
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 4 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -631,5 +631,6 @@
     "accepted_conversation": { "message": "Accepted conversation" },
     "anniversary_tweet": { "message": "Do you remember when you joined Twitter? I do!\n#MyTwitterAnniversary" },
     "you_shared_tweet": { "message": "You shared a tweet" },
-    "user_shared_tweet": { "message": "$NAME$ shared a tweet", "placeholders": { "name": { "content": "Display Name" } } }
+    "user_shared_tweet": { "message": "$NAME$ shared a tweet", "placeholders": { "name": { "content": "Display Name" } } },
+    "transition_profile_banner": { "message": "Use transition on profile banner" }
 }
diff --git a/layouts/header/script.js b/layouts/header/script.js
@@ -485,6 +485,7 @@ let userDataFunction = async user => {
         root.style.setProperty('--birthday-icon', '"\\f092"');
         root.style.setProperty('--joined-icon', '"\\f203"');
     }
+    console.log(vars);
     if(vars.heartsNotStars) {
         root.style.setProperty('--favorite-icon-content', '"\\f148"');
         root.style.setProperty('--favorite-icon-content-notif', '"\\f015"');

diff --git a/layouts/profile/style.css b/layouts/profile/style.css
@@ -772,7 +772,7 @@ body.body-old-ui .user-item-btn.follow:before {
     width: 100vw;
     object-fit: cover;
     position: relative;
-    transition: .1s;
+    transition: var(--transition-profile-banner);
     height: 5px;
     height: 500px;
 }

diff --git a/layouts/settings/index.html b/layouts/settings/index.html
@@ -330,7 +330,9 @@ <h2>__MSG_profile__</h2><br>
                     <div class="setting">
                         <input type="checkbox" id="disable-profile-customizations"> <label for="disable-profile-customizations">__MSG_disable_profile_customizations__</label>
                     </div>
-
+                    <div class="setting">
+                        <input type="checkbox" id="transition-profile-banner"> <label for="transition-profile-banner">__MSG_transition_profile_banner__</label>
+                    </div>
                     <h2>__MSG_tweets_and_timeline__</h2><br>
                     <div class="setting">
                         <input type="checkbox" id="show-bookmark-count"> <label for="show-bookmark-count">__MSG_show_bookmark_count__</label>

diff --git a/layouts/settings/script.js b/layouts/settings/script.js
@@ -329,6 +329,7 @@ setTimeout(async () => {
     let disableAcceptType = document.getElementById('disable-accept-type');
     let showUserFollowerCountsInLists = document.getElementById('show-user-follower-counts-in-lists');
     let hideUnfollowersPage = document.getElementById('hide-unfollowers-page');
+    let transitionProfileBanner = document.getElementById('transition-profile-banner');
 
     let root = document.querySelector(":root");
     {
@@ -643,6 +644,11 @@ setTimeout(async () => {
             savePreferredQuality: savePreferredQuality.checked
         }, () => { });
     });
+    transitionProfileBanner.addEventListener('change', () => {
+        chrome.storage.sync.set({
+            transitionProfileBanner: transitionProfileBanner.checked
+        }, () => { console.log('set', transitionProfileBanner.checked) });
+    });
     showOriginalImages.addEventListener('change', () => {
         chrome.storage.sync.set({
             showOriginalImages: showOriginalImages.checked
@@ -1035,6 +1041,7 @@ setTimeout(async () => {
     showUserFollowerCountsInLists.checked = !!vars.showUserFollowerCountsInLists;
     showQuoteCount.checked = !!vars.showQuoteCount;
     hideUnfollowersPage.checked = !!vars.hideUnfollowersPage;
+    transitionProfileBanner.checked = !!vars.transitionProfileBanner;
     if(vars.customCSS) {
         writeCSSToDB(vars.customCSS)
     }

diff --git a/scripts/config.js b/scripts/config.js
@@ -32,7 +32,7 @@ async function loadVars() {
             'acknowledgedCustomizationButton', 'modernUI', 'showExactValues', 'hideTimelineTypes', 'autotranslateLanguages', 
             'autotranslationMode', 'muteVideos', 'dontPauseVideos', 'showUserPreviewsOnMobile', 'systemDarkMode', 'localizeDigit',
             'disableRetweetHotkey', 'disableLikeHotkey', 'disableFindHotkey', 'extensionCompatibilityMode', 'disableDataSaver', 'disableAcceptType',
-            'showUserFollowerCountsInLists', 'showQuoteCount', 'hideUnfollowersPage'
+            'showUserFollowerCountsInLists', 'showQuoteCount', 'hideUnfollowersPage', 'transitionProfileBanner'
         ], data => {
             // default variables
             if(typeof(data.linkColorsInTL) !== 'boolean') {
@@ -215,6 +215,13 @@ async function loadVars() {
                     autotranslationMode: 'whitelist'
                 }, () => {});
             }
+            if(typeof(data.transitionProfileBanner) !== 'boolean') {
+                console.log('transitionProfileBanner', data.transitionProfileBanner)
+                data.transitionProfileBanner = false;
+                chrome.storage.sync.set({
+                    transitionProfileBanner: false
+                }, () => {});
+            }
 
             resolve(data);
             varsResolve(data);

diff --git a/scripts/injection.js b/scripts/injection.js
@@ -533,6 +533,7 @@ let page = realPath === "" ? pages[0] : pages.find(p => (!p.exclude || !p.exclud
         isDarkModeEnabled = true;
         switchDarkMode(true);
     }
+    document.querySelector(":root").style.setProperty('--transition-profile-banner', vars.transitionProfileBanner ? '.1s' : '0s');
     if(vars.systemDarkMode) {
         var matchMediaDark = window.matchMedia('(prefers-color-scheme: dark)');
         var matchMediaLight = window.matchMedia('(prefers-color-scheme: light)');