From d33160cadc2c3d1fc3079825a7a7cbeb5b83fff0 Mon Sep 17 00:00:00 2001 From: James Hobin Date: Thu, 2 Jul 2020 00:51:04 -0400 Subject: [PATCH 1/8] Add tweak to hide notification badges --- Extensions/tweaks.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/Extensions/tweaks.js b/Extensions/tweaks.js index 8292e8104..437b6c5e5 100644 --- a/Extensions/tweaks.js +++ b/Extensions/tweaks.js @@ -1,5 +1,5 @@ //* TITLE Tweaks **// -//* VERSION 5.7.5 **/ +//* VERSION 6.0.0 **/ //* DESCRIPTION Various little tweaks for your dashboard. **// //* DEVELOPER new-xkit **// //* DETAILS These are small little tweaks that allows you customize your dashboard. If you have used XKit 6, you will notice that some of the extensions have been moved here as options you can toggle. Keep in mind that some of the tweaks (the ones marked with a '*') can slow down your computer. **// @@ -296,7 +296,13 @@ XKit.extensions.tweaks = new Object({ default: false, value: false, desktop_only: true - } + }, + "hide_notification_badges": { + text: "Hide all notification badges in the header", + default: false, + value: false, + desktop_only: true + }, }, default_page_title: "", @@ -305,8 +311,11 @@ XKit.extensions.tweaks = new Object({ XKit.extensions.tweaks.process_wrap_tags_one_line(); }), - run: function() { + run: async function() { this.running = true; + + await XKit.css_map.getCssMap(); + this.css_to_add = ""; if (!XKit.interface.is_tumblr_page()) { return; } @@ -726,8 +735,14 @@ XKit.extensions.tweaks = new Object({ } } - XKit.tools.add_css(XKit.extensions.tweaks.css_to_add, "xkit_tweaks"); + if (XKit.extensions.tweaks.preferences.hide_notification_badges.value) { + let notificationBadgeSel = XKit.css_map.keyToCss('notificationBadge'); + XKit.extensions.tweaks.add_css(`${notificationBadgeSel} { + display: none !important; + }`, 'xkit_tweaks_hide_notification_badges'); + } + XKit.tools.add_css(XKit.extensions.tweaks.css_to_add, "xkit_tweaks"); }, show_all_tags_button_event: function() { From 7791640f89c30d6b46672621563f002551063cf5 Mon Sep 17 00:00:00 2001 From: James Hobin Date: Thu, 2 Jul 2020 01:05:00 -0400 Subject: [PATCH 2/8] Bonus tweak: hide post highlight (user-requested) --- Extensions/tweaks.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/Extensions/tweaks.js b/Extensions/tweaks.js index 437b6c5e5..de83bb6c9 100644 --- a/Extensions/tweaks.js +++ b/Extensions/tweaks.js @@ -1,5 +1,5 @@ //* TITLE Tweaks **// -//* VERSION 6.0.0 **/ +//* VERSION 6.0.1 **/ //* DESCRIPTION Various little tweaks for your dashboard. **// //* DEVELOPER new-xkit **// //* DETAILS These are small little tweaks that allows you customize your dashboard. If you have used XKit 6, you will notice that some of the extensions have been moved here as options you can toggle. Keep in mind that some of the tweaks (the ones marked with a '*') can slow down your computer. **// @@ -303,6 +303,12 @@ XKit.extensions.tweaks = new Object({ value: false, desktop_only: true }, + hide_post_highlight: { + text: "Hide the post highlight that appears when using jk to scroll", + default: false, + value: false, + desktop_only: true + }, }, default_page_title: "", @@ -742,6 +748,12 @@ XKit.extensions.tweaks = new Object({ }`, 'xkit_tweaks_hide_notification_badges'); } + if (XKit.extensions.tweaks.preferences.hide_post_highlight.value) { + const ltoSel = XKit.css_map.keyToCss('listTimelineObjectInner'); + XKit.extensions.tweaks.add_css(`${ltoSel} { + box-shadow: none !important; + }`, 'xkit_tweaks_hide_notification_badges'); + } XKit.tools.add_css(XKit.extensions.tweaks.css_to_add, "xkit_tweaks"); }, From 4f3364d1a960109b740d4d5125c5c0faba0c42ba Mon Sep 17 00:00:00 2001 From: James Hobin Date: Thu, 2 Jul 2020 10:16:29 -0400 Subject: [PATCH 3/8] Address review comments --- Extensions/tweaks.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Extensions/tweaks.js b/Extensions/tweaks.js index de83bb6c9..f23a90719 100644 --- a/Extensions/tweaks.js +++ b/Extensions/tweaks.js @@ -297,7 +297,7 @@ XKit.extensions.tweaks = new Object({ value: false, desktop_only: true }, - "hide_notification_badges": { + hide_notification_badges: { text: "Hide all notification badges in the header", default: false, value: false, @@ -752,7 +752,7 @@ XKit.extensions.tweaks = new Object({ const ltoSel = XKit.css_map.keyToCss('listTimelineObjectInner'); XKit.extensions.tweaks.add_css(`${ltoSel} { box-shadow: none !important; - }`, 'xkit_tweaks_hide_notification_badges'); + }`, 'xkit_tweaks_hide_post_highlight'); } XKit.tools.add_css(XKit.extensions.tweaks.css_to_add, "xkit_tweaks"); }, From b29c053614526800fc7c48858b723af1767606ff Mon Sep 17 00:00:00 2001 From: invalidCards <842080+invalidCards@users.noreply.github.com> Date: Thu, 2 Jul 2020 16:22:02 +0200 Subject: [PATCH 4/8] Update "Pin Avatars" tweak for React Avatars should now stay where they belong - at the top of the post. --- Extensions/tweaks.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/Extensions/tweaks.js b/Extensions/tweaks.js index f23a90719..960123272 100644 --- a/Extensions/tweaks.js +++ b/Extensions/tweaks.js @@ -620,7 +620,14 @@ XKit.extensions.tweaks = new Object({ if (XKit.extensions.tweaks.preferences.pin_avatars.value) { if (!XKit.browser().mobile) { // mobile stuff - XKit.extensions.tweaks.add_css(".post_avatar.post-avatar--fixed { position: absolute !important; top: 0 !important; left: -85px !important; } .post_avatar.post-avatar--absolute { position: absolute; top: 0 !important; left: -85px !important; bottom: inherit !important; } .post_avatar.post-avatar--sticky .avatar-wrapper { position: absolute !important; top: 0px !important; height: auto; width: auto; } .post_avatar.post-avatar--sticky { height: 64px !important; }", "xkit_pin_avatars"); + if (XKit.page.react) { + let stickyContainerSelector = XKit.css_map.keyToCss('stickyContainer'); + XKit.extensions.tweaks.add_css(`${stickyContainerSelector}:first-child { + position: unset; + }`, 'xkit_pin_avatars'); + } else { + XKit.extensions.tweaks.add_css(".post_avatar.post-avatar--fixed { position: absolute !important; top: 0 !important; left: -85px !important; } .post_avatar.post-avatar--absolute { position: absolute; top: 0 !important; left: -85px !important; bottom: inherit !important; } .post_avatar.post-avatar--sticky .avatar-wrapper { position: absolute !important; top: 0px !important; height: auto; width: auto; } .post_avatar.post-avatar--sticky { height: 64px !important; }", "xkit_pin_avatars"); + } } } From ec76936ff99a2f9cf5a6261468bd96ccadfc5143 Mon Sep 17 00:00:00 2001 From: invalidCards <842080+invalidCards@users.noreply.github.com> Date: Fri, 3 Jul 2020 09:07:38 +0200 Subject: [PATCH 5/8] Hide Notification -> Badge style dropdown Allows a bit more flexibility in the user's choice of how the notification buttons should look. --- Extensions/tweaks.js | 35 ++++++++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/Extensions/tweaks.js b/Extensions/tweaks.js index 960123272..f66ecf6b3 100644 --- a/Extensions/tweaks.js +++ b/Extensions/tweaks.js @@ -297,11 +297,18 @@ XKit.extensions.tweaks = new Object({ value: false, desktop_only: true }, - hide_notification_badges: { - text: "Hide all notification badges in the header", - default: false, - value: false, - desktop_only: true + notification_badge_style: { + text: "Notification badge style", + default: "default", + value: "default", + desktop_only: true, + type: "combo", + values: [ + "Default", "default", + "Hidden", "hidden", + "White", "white", + "Old Red", "oldred", + ] }, hide_post_highlight: { text: "Hide the post highlight that appears when using jk to scroll", @@ -748,11 +755,21 @@ XKit.extensions.tweaks = new Object({ } } - if (XKit.extensions.tweaks.preferences.hide_notification_badges.value) { + if (XKit.extensions.tweaks.preferences.notification_badge_style.value != "default") { let notificationBadgeSel = XKit.css_map.keyToCss('notificationBadge'); - XKit.extensions.tweaks.add_css(`${notificationBadgeSel} { - display: none !important; - }`, 'xkit_tweaks_hide_notification_badges'); + let notificationBadgeStyle = ''; + switch (XKit.extensions.tweaks.preferences.notification_badge_style.value) { + case "hidden": + notificationBadgeStyle = 'display: none !important;'; + break; + case "white": + notificationBadgeStyle = 'background: var(--white-on-dark) !important;'; + break; + case "oldred": + notificationBadgeStyle = 'background: var(--red) !important; color: var(--white-on-dark) !important;'; + break; + } + XKit.extensions.tweaks.add_css(`${notificationBadgeSel} { ${notificationBadgeStyle} }`, 'xkit_tweaks_notification_badge_style'); } if (XKit.extensions.tweaks.preferences.hide_post_highlight.value) { From f5dbd34d0dfad6972a226ee46656cddf5ce927af Mon Sep 17 00:00:00 2001 From: invalidCards <842080+invalidCards@users.noreply.github.com> Date: Fri, 3 Jul 2020 09:18:36 +0200 Subject: [PATCH 6/8] Add tweak to hide just the activity badge --- Extensions/tweaks.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Extensions/tweaks.js b/Extensions/tweaks.js index f66ecf6b3..ed9796599 100644 --- a/Extensions/tweaks.js +++ b/Extensions/tweaks.js @@ -310,6 +310,12 @@ XKit.extensions.tweaks = new Object({ "Old Red", "oldred", ] }, + hide_activity_notification_badge: { + text: "Hide the activity notification badge", + default: false, + value: false, + desktop_only: true + }, hide_post_highlight: { text: "Hide the post highlight that appears when using jk to scroll", default: false, @@ -771,6 +777,12 @@ XKit.extensions.tweaks = new Object({ } XKit.extensions.tweaks.add_css(`${notificationBadgeSel} { ${notificationBadgeStyle} }`, 'xkit_tweaks_notification_badge_style'); } + + if (XKit.extensions.tweaks.preferences.hide_activity_notification_badge.value) { + let notificationBadgeSel = XKit.css_map.keyToCss('notificationBadge'); + let activityAriaLabel = await XKit.interface.translate('Activity'); + XKit.extensions.tweaks.add_css(`button[aria-label=${activityAriaLabel}] + ${notificationBadgeSel} { display: none !important; }`, 'xkit_tweaks_hide_activity_notification_badge'); + } if (XKit.extensions.tweaks.preferences.hide_post_highlight.value) { const ltoSel = XKit.css_map.keyToCss('listTimelineObjectInner'); From 19bea78f4caa9714b155c04f3f47a10e2a563d66 Mon Sep 17 00:00:00 2001 From: invalidCards <842080+invalidCards@users.noreply.github.com> Date: Fri, 3 Jul 2020 09:27:33 +0200 Subject: [PATCH 7/8] Add grayscale option for the new post button Should:tm: work properly across themes --- Extensions/tweaks.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Extensions/tweaks.js b/Extensions/tweaks.js index ed9796599..b85754338 100644 --- a/Extensions/tweaks.js +++ b/Extensions/tweaks.js @@ -322,6 +322,12 @@ XKit.extensions.tweaks = new Object({ value: false, desktop_only: true }, + grayscale_new_post_button: { + text: "Turn the New Post button gray", + default: false, + value: false, + desktop_only: true + }, }, default_page_title: "", @@ -790,6 +796,12 @@ XKit.extensions.tweaks = new Object({ box-shadow: none !important; }`, 'xkit_tweaks_hide_post_highlight'); } + + if (XKit.extensions.tweaks.preferences.grayscale_new_post_button.value) { + let postIconButtonSel = XKit.css_map.keyToCss('postIconButton'); + XKit.extensions.tweaks.add_css(`${postIconButtonSel} span { filter: grayscale(100%); }`, 'xkit_tweaks_grayscale_new_post_button'); + } + XKit.tools.add_css(XKit.extensions.tweaks.css_to_add, "xkit_tweaks"); }, From 16269d2c066b5cc7fa3a2f7f75b4f539fda4744a Mon Sep 17 00:00:00 2001 From: invalidCards <842080+invalidCards@users.noreply.github.com> Date: Fri, 3 Jul 2020 19:16:35 +0200 Subject: [PATCH 8/8] Applying nightpool's feedback --- Extensions/tweaks.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/Extensions/tweaks.js b/Extensions/tweaks.js index b85754338..968d0d2fd 100644 --- a/Extensions/tweaks.js +++ b/Extensions/tweaks.js @@ -778,16 +778,21 @@ XKit.extensions.tweaks = new Object({ notificationBadgeStyle = 'background: var(--white-on-dark) !important;'; break; case "oldred": - notificationBadgeStyle = 'background: var(--red) !important; color: var(--white-on-dark) !important;'; + notificationBadgeStyle = `background: var(--red) !important; + color: var(--white-on-dark) !important;`; break; } - XKit.extensions.tweaks.add_css(`${notificationBadgeSel} { ${notificationBadgeStyle} }`, 'xkit_tweaks_notification_badge_style'); + XKit.extensions.tweaks.add_css(`${notificationBadgeSel} { + ${notificationBadgeStyle} + }`, 'xkit_tweaks_notification_badge_style'); } if (XKit.extensions.tweaks.preferences.hide_activity_notification_badge.value) { let notificationBadgeSel = XKit.css_map.keyToCss('notificationBadge'); let activityAriaLabel = await XKit.interface.translate('Activity'); - XKit.extensions.tweaks.add_css(`button[aria-label=${activityAriaLabel}] + ${notificationBadgeSel} { display: none !important; }`, 'xkit_tweaks_hide_activity_notification_badge'); + XKit.extensions.tweaks.add_css(`button[aria-label="${activityAriaLabel}"] + ${notificationBadgeSel} { + display: none !important; + }`, 'xkit_tweaks_hide_activity_notification_badge'); } if (XKit.extensions.tweaks.preferences.hide_post_highlight.value) { @@ -798,8 +803,10 @@ XKit.extensions.tweaks = new Object({ } if (XKit.extensions.tweaks.preferences.grayscale_new_post_button.value) { - let postIconButtonSel = XKit.css_map.keyToCss('postIconButton'); - XKit.extensions.tweaks.add_css(`${postIconButtonSel} span { filter: grayscale(100%); }`, 'xkit_tweaks_grayscale_new_post_button'); + let postIconButtonSel = XKit.css_map.keyToCss('postIconButton').map(cssClass => `${cssClass} span`).join(','); + XKit.extensions.tweaks.add_css(`${postIconButtonSel} { + filter: grayscale(100%); + }`, 'xkit_tweaks_grayscale_new_post_button'); } XKit.tools.add_css(XKit.extensions.tweaks.css_to_add, "xkit_tweaks");