quick-links to settings from changelog

CHANGELOG.md

@@ -1,14 +1,16 @@
 :tada: 3.4 :tada:
 ===============
-- [Feature] You can update the title of TweetDeck's tab when there are unread tweets/DMs
-- [Feature] You can mute #hashtags right from the tweet menu (toggable in the settings) (thanks to [@pixeldesu](https://github.com/pixeldesu)) ([#180](https://github.com/eramdam/BetterTweetDeck/pull/180))
-- [Feature] You can now choose to use the default font of your OS inside TweetDeck's UI! (thanks to [@pixeldesu](https://github.com/pixeldesu)) ([#176](https://github.com/eramdam/BetterTweetDeck/pull/176))
-- [Feature] You can use [JavaScript regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) as mute filters (thanks to [@pixeldesu](https://github.com/pixeldesu) ([#179](https://github.com/eramdam/BetterTweetDeck/pull/179))
-- [Bugfix] With the related settings, emojis were made bigger everywhere in TweetDeck and not just in tweets. This is fixed.
-- [Improvement] [Bugfix] Usernames and verified badges should not disappear randomly anymore. BTD should be WAY ligther/faster thanks to that :racehorse: [more technical details](https://github.com/eramdam/BetterTweetDeck/pull/178)
-- [Improvement] [Bugfix] When "Show Verified badges above avatars" settings was enabled, verified badges were hidden inside quoted tweets and tweets that were the target of a like/retweet. They should be displayed correctly now.
-- [Improvement] You can disable the "Show in Favstar" item in tweets' menu in the **[Content](?on=content)** section
-- [Improvement] The settings button is better integrated inside of TweetDeck's UI (thanks to [@LeoColomb](https://github.com/LeoColomb)) ([#177](https://github.com/eramdam/BetterTweetDeck/pull/177))
+<ul>
+  <li data-info-setting="content/update_title_on_notifications">[Feature] You can update the title of TweetDeck's tab when there are unread tweets/DMs</li>
+  <li data-info-setting="content/mute_hashtags">[Feature] You can mute #hashtags right from the tweet menu (toggable in the settings) (thanks to [@pixeldesu](https://github.com/pixeldesu)) ([#180](https://github.com/eramdam/BetterTweetDeck/pull/180))</li>
+  <li data-info-setting="content/regex_filter">[Feature] You can use [JavaScript regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) as mute filters (thanks to [@pixeldesu](https://github.com/pixeldesu) ([#179](https://github.com/eramdam/BetterTweetDeck/pull/179))</li>
+  <li data-info-setting="visual/system_fonts">[Feature] You can now choose to use the default font of your OS inside TweetDeck's UI! (thanks to [@pixeldesu](https://github.com/pixeldesu)) ([#176](https://github.com/eramdam/BetterTweetDeck/pull/176))</li>
+  <li data-info-setting="tweetsDisplay/bigger_emojis">[Bugfix] With the related settings, emojis were made bigger everywhere in TweetDeck and not just in tweets. This is fixed.</li>
+  <li>[Improvement] [Bugfix] Usernames and verified badges should not disappear randomly anymore. BTD should be WAY ligther/faster thanks to that :racehorse: [more technical details](https://github.com/eramdam/BetterTweetDeck/pull/178)</li>
+  <li>[Improvement] [Bugfix] When "Show Verified badges above avatars" settings was enabled, verified badges were hidden inside quoted tweets and tweets that were the target of a like/retweet. They should be displayed correctly now.</li>
+  <li data-info-setting="content/favstar_item">[Improvement] You can disable the "Show in Favstar" item in tweets' menu in the Content section</li>
+  <li>[Improvement] The settings button is better integrated inside of TweetDeck's UI (thanks to [@LeoColomb](https://github.com/LeoColomb)) ([#177](https://github.com/eramdam/BetterTweetDeck/pull/177))</li>
+</ul>
 
 3.3.10
 ===============

src/css/options/index.css

@@ -269,4 +269,35 @@ button.plain-button {
 
 .flash-setting {
   animation: 2s flashSetting linear;
+}
+
+.settings-section.changelog [data-info-setting] {
+  position: relative;
+  cursor: pointer;
+
+  &::before {
+    content: '\2197';
+    position: absolute;
+    height: 1.3em;
+    width: 1.3em;
+    font-size: 1.3em;
+    top: 56%;
+    left: 0;
+    transform: translate(-100%, -50%);
+
+    text-align: center;
+    color: black;
+    opacity: .4;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &:hover::before {
+    color: #1586ce;
+    text-decoration: underline;
+    opacity: 1;    
+  }
 }

src/options/options.js

@@ -331,36 +331,59 @@ $('.sidebar-nav a[href^="#"]').on('click', (ev) => {
   $(`.sidebar-nav a[href="#${href}"], .content-block#${href}`).addClass('-selected');
 });
 
+const switchSettingPage = (page) => {
+  $('.sidebar-nav a, .content-block').removeClass('-selected');
+  $(`.sidebar-nav a[href="#${page}"], .content-block#${page}`).addClass('-selected');
+};
+
+const flashSettingByName = (name) => {
+  $('[data-setting-name]').removeClass('flash-setting');
+  const featBlock = $(`[data-setting-name=${name}]`);
+
+  if (featBlock) {
+    setTimeout(() => {
+      featBlock.addClass('flash-setting');
+    }, 200);
+  }
+};
+
+$('body').on('click', '[data-info-setting]', (ev) => {
+  const $target = $(ev.target);
+
+  if (!$target.data('info-setting')) {
+    return;
+  }
+
+  const [settingCat, settingName] = $target.data('info-setting').split('/');
+
+  if (!settingCat || !settingName) {
+    return;
+  }
+
+  switchSettingPage(settingCat);
+  setTimeout(() => flashSettingByName(settingName));
+});
+
 // Open a specific section when needed
 if (Object.keys(queryString.parse(location.search)).length > 0) {
   const QS = queryString.parse(location.search);
 
   if (QS.on === 'install') {
-    $('.sidebar-nav a, .content-block').removeClass('-selected');
-    $('.sidebar-nav a[href="#onInstall"], .content-block#onInstall').addClass('-selected');
+    switchSettingPage('onInstall');
   }
 
   if (QS.on === 'update') {
-    $('.sidebar-nav a, .content-block').removeClass('-selected');
-    $('.sidebar-nav a[href="#changelog"], .content-block#changelog').addClass('-selected');
+    switchSettingPage('changelog');
   }
 
   const navItemsHrefs = [...$('.nav-flex .nav-item')].map(i => i.getAttribute('href')).filter(i => i.startsWith('#')).map(i => i.slice(1));
 
   if (navItemsHrefs.includes(QS.on)) {
-    $('.sidebar-nav a, .content-block').removeClass('-selected');
-    $(`.sidebar-nav a[href="#${QS.on}"], .content-block#${QS.on}`).addClass('-selected');
+    switchSettingPage(QS.on);
   }
 
   if (QS.feat) {
-    $('[data-setting-name]').removeClass('flash-setting');
-    const featBlock = $(`[data-setting-name=${QS.feat}]`);
-
-    if (featBlock) {
-      setTimeout(() => {
-        featBlock.addClass('flash-setting');
-      }, 0);
-    }
+    flashSettingByName(QS.feat);
   }
 }