From 6b849f854ed28dc6d6685c809f60f0e90ef0dd89 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Wed, 11 Oct 2017 20:22:32 +0200
Subject: [PATCH] Rewrite font size & theme handling, add <html> attributes to
notifications
---
Core/Bridge/TweetDeckBridge.cs | 17 +++--
Core/Notification/FormNotificationBase.cs | 2 +-
Core/Notification/TweetNotification.cs | 7 +-
Resources/Scripts/code.js | 83 ++++++++++++-----------
Resources/Scripts/styles/browser.css | 4 +-
5 files changed, 56 insertions(+), 57 deletions(-)
diff --git a/Core/Bridge/TweetDeckBridge.cs b/Core/Bridge/TweetDeckBridge.cs
index 50889bb7..397b5846 100644
--- a/Core/Bridge/TweetDeckBridge.cs
+++ b/Core/Bridge/TweetDeckBridge.cs
@@ -11,8 +11,8 @@
namespace TweetDuck.Core.Bridge{
sealed class TweetDeckBridge{
- public static string FontSizeClass;
- public static string NotificationHeadContents;
+ public static string FontSize { get; private set; }
+ public static string NotificationHeadLayout { get; private set; }
public static string LastHighlightedTweetUrl = string.Empty;
public static string LastHighlightedQuoteUrl = string.Empty;
@@ -25,7 +25,7 @@ sealed class TweetDeckBridge{
private static readonly Dictionary<string, string> SessionData = new Dictionary<string, string>(2);
public static void ResetStaticProperties(){
- FontSizeClass = NotificationHeadContents = null;
+ FontSize = NotificationHeadLayout = null;
LastHighlightedTweetUrl = LastHighlightedQuoteUrl = LastHighlightedTweetAuthors = LastHighlightedTweetImages = string.Empty;
}
@@ -56,12 +56,11 @@ public void OnIntroductionClosed(bool showGuide, bool allowDataCollection){
});
}
- public void LoadFontSizeClass(string fsClass){
- form.InvokeAsyncSafe(() => FontSizeClass = fsClass);
- }
-
- public void LoadNotificationHeadContents(string headContents){
- form.InvokeAsyncSafe(() => NotificationHeadContents = headContents);
+ public void LoadNotificationLayout(string fontSize, string headLayout){
+ form.InvokeAsyncSafe(() => {
+ FontSize = fontSize;
+ NotificationHeadLayout = headLayout;
+ });
}
public void SetLastRightClickInfo(string type, string link){
diff --git a/Core/Notification/FormNotificationBase.cs b/Core/Notification/FormNotificationBase.cs
index b51969aa..23c543ab 100644
--- a/Core/Notification/FormNotificationBase.cs
+++ b/Core/Notification/FormNotificationBase.cs
@@ -15,7 +15,7 @@ namespace TweetDuck.Core.Notification{
partial class FormNotificationBase : Form{
protected static int FontSizeLevel{
get{
- switch(TweetDeckBridge.FontSizeClass){
+ switch(TweetDeckBridge.FontSize){
case "largest": return 4;
case "large": return 3;
case "small": return 1;
diff --git a/Core/Notification/TweetNotification.cs b/Core/Notification/TweetNotification.cs
index 1f0d0339..adfa4c24 100644
--- a/Core/Notification/TweetNotification.cs
+++ b/Core/Notification/TweetNotification.cs
@@ -5,9 +5,7 @@
namespace TweetDuck.Core.Notification{
sealed class TweetNotification{
- private const string DefaultFontSizeClass = "medium";
- private const string DefaultHeadContents = @"<meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='chrome=1'><link rel='stylesheet' href='https://ton.twimg.com/tweetdeck-web/web/css/font.5ef884f9f9.css'><link rel='stylesheet' href='https://ton.twimg.com/tweetdeck-web/web/css/app-dark.5631e0dd42.css'><style type='text/css'>body{background:#222426}</style>";
-
+ private const string DefaultHeadLayout = @"<html class='os-windows txt-size--14' data-td-font='medium' data-td-theme='dark'><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='chrome=1'><link rel='stylesheet' href='https://ton.twimg.com/tweetdeck-web/web/css/font.5ef884f9f9.css'><link rel='stylesheet' href='https://ton.twimg.com/tweetdeck-web/web/css/app-dark.5631e0dd42.css'><style type='text/css'>body{background:#222426}</style>";
private static readonly string CustomCSS = ScriptLoader.LoadResource("styles/notification.css");
private static string ExampleTweetHTML;
@@ -67,8 +65,7 @@ public int GetDisplayDuration(int value){
public string GenerateHtml(string bodyClasses = null, bool enableCustomCSS = true){
StringBuilder build = new StringBuilder();
build.Append("<!DOCTYPE html>");
- build.Append("<html class='os-windows txt-base-").Append(TweetDeckBridge.FontSizeClass ?? DefaultFontSizeClass).Append("'>");
- build.Append("<head>").Append(TweetDeckBridge.NotificationHeadContents ?? DefaultHeadContents);
+ build.Append(TweetDeckBridge.NotificationHeadLayout ?? DefaultHeadLayout);
if (enableCustomCSS){
build.Append("<style type='text/css'>").Append(CustomCSS).Append("</style>");
diff --git a/Resources/Scripts/code.js b/Resources/Scripts/code.js
index 95b3b9e8..c064dae7 100644
--- a/Resources/Scripts/code.js
+++ b/Resources/Scripts/code.js
@@ -258,49 +258,52 @@
})();
//
- // Function: Retrieves the tags to be put into <head> for notification HTML code.
+ // Block: Hook into settings object to detect when the settings change, and update html attributes and notification layout.
//
- var getNotificationHeadContents = function(){
- let tags = [];
+ (function(){
+ let refreshSettings = function(){
+ let fontSizeName = TD.settings.getFontSize();
+ let themeName = TD.settings.getTheme();
+
+ let htmlClass = document.documentElement.getAttribute("class");
+
+ let tags = [
+ `<html class='os-windows ${(htmlClass.match(/txt-\S+/) || [ "txt-size--14" ])[0]}' data-td-font='${fontSizeName}' data-td-theme='${themeName}'><head>`
+ ];
+
+ $(document.head).children("link[rel='stylesheet']:not([title]),link[title='"+themeName+"'],meta[charset],meta[http-equiv]").each(function(){
+ tags.push($(this)[0].outerHTML);
+ });
+
+ tags.push("<style type='text/css'>");
+ tags.push("body { background: "+getClassStyleProperty("column", "background-color")+" }"); // set background color
+ tags.push("a[data-full-url] { word-break: break-all }"); // break long urls
+ tags.push(".media-item, .media-preview { border-radius: 1px !important }"); // square-ify media
+ tags.push(".quoted-tweet { border-radius: 0 !important }"); // square-ify quoted tweets
+ tags.push(".activity-header { align-items: center !important; margin-bottom: 4px }"); // tweak alignment of avatar and text in notifications
+ tags.push(".activity-header .tweet-timestamp { line-height: unset }"); // fix timestamp position in notifications
+
+ if (fontSizeName === "smallest"){
+ tags.push(".badge-verified:before { width: 13px !important; height: 13px !important; background-position: -223px -98px !important }"); // fix cut off badge icon
+ }
+
+ tags.push("</style>");
+
+ document.documentElement.setAttribute("data-td-font", fontSizeName);
+ document.documentElement.setAttribute("data-td-theme", themeName);
+ $TD.loadNotificationLayout(fontSizeName, tags.join(""));
+ };
- $(document.head).children("link[rel='stylesheet']:not([title]),link[title='"+TD.settings.getTheme()+"'],meta[charset],meta[http-equiv]").each(function(){
- tags.push($(this)[0].outerHTML);
+ TD.settings.setFontSize = appendToFunction(TD.settings.setFontSize, function(name){
+ setTimeout(refreshSettings, 0);
});
-
- tags.push("<style type='text/css'>");
- tags.push("body { background: "+getClassStyleProperty("column", "background-color")+" }"); // set background color
- tags.push("a[data-full-url] { word-break: break-all }"); // break long urls
- tags.push(".txt-base-smallest .badge-verified:before { width: 13px !important; height: 13px !important; background-position: -223px -98px !important }"); // fix cut off badge icon
- tags.push(".media-item, .media-preview { border-radius: 1px !important }"); // square-ify media
- tags.push(".quoted-tweet { border-radius: 0 !important }"); // square-ify quoted tweets
- tags.push(".activity-header { align-items: center !important; margin-bottom: 4px }"); // tweak alignment of avatar and text in notifications
- tags.push(".activity-header .tweet-timestamp { line-height: unset }"); // fix timestamp position in notifications
- tags.push("</style>");
-
- return tags.join("");
- };
-
- //
- // Block: Hook into settings object to detect when the settings change.
- //
- TD.settings.setFontSize = appendToFunction(TD.settings.setFontSize, function(name){
- $TD.loadFontSizeClass(name);
- });
-
- TD.settings.setTheme = appendToFunction(TD.settings.setTheme, function(name){
- document.documentElement.setAttribute("data-td-theme", name);
-
- setTimeout(function(){
- $TD.loadNotificationHeadContents(getNotificationHeadContents());
- }, 0);
- });
-
- onAppReady.push(function(){
- document.documentElement.setAttribute("data-td-theme", TD.settings.getTheme());
-
- $TD.loadFontSizeClass(TD.settings.getFontSize());
- $TD.loadNotificationHeadContents(getNotificationHeadContents());
- });
+
+ TD.settings.setTheme = appendToFunction(TD.settings.setTheme, function(name){
+ setTimeout(refreshSettings, 0);
+ });
+
+ onAppReady.push(refreshSettings);
+ })();
//
// Block: Enable popup notifications.
diff --git a/Resources/Scripts/styles/browser.css b/Resources/Scripts/styles/browser.css
index 496f2be4..00e05ddc 100644
--- a/Resources/Scripts/styles/browser.css
+++ b/Resources/Scripts/styles/browser.css
@@ -168,14 +168,14 @@ a[data-full-url] {
vertical-align: 10%;
}
-.txt-base-smallest .sprite-verified-mini {
+html[data-td-font='smallest'] .sprite-verified-mini {
/* fix cut off badge when zoomed in */
width: 13px !important;
height: 13px !important;
background-position: -223px -99px !important;
}
-.txt-base-smallest .badge-verified:before {
+html[data-td-font='smallest'] .badge-verified:before {
/* fix cut off badge in notifications */
width: 13px !important;
height: 13px !important;