Bump edit-design plugin version

Fix custom font size in edit-design & time font in example notification
Fix separator before 'Open dev tools' in example notification context menu
2025-09-14 19:32:10 +02:00 · 2017-10-12 10:58:12 +02:00 · 2017-10-11 20:42:42 +02:00 · 2017-10-11 20:34:50 +02:00 · 2017-10-11 20:33:39 +02:00 · 2017-10-11 20:24:09 +02:00
10 changed files with 87 additions and 61 deletions
--- a/Core/Bridge/TweetDeckBridge.cs
+++ b/Core/Bridge/TweetDeckBridge.cs
@@ -11,8 +11,8 @@ using TweetDuck.Resources;

 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 @@ namespace TweetDuck.Core.Bridge{
        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 @@ namespace TweetDuck.Core.Bridge{
            });
        }

-        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){
--- a/Core/Handling/ContextMenuNotification.cs
+++ b/Core/Handling/ContextMenuNotification.cs
@@ -48,7 +48,7 @@ namespace TweetDuck.Core.Handling{
            }
            
            if (HasDevTools){
-                model.AddSeparator();
+                AddSeparator(model);
                AddDebugMenuItems(model);
            }

--- 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;
--- a/Core/Notification/TweetNotification.cs
+++ b/Core/Notification/TweetNotification.cs
@@ -5,9 +5,7 @@ using TweetDuck.Resources;

 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 @@ namespace TweetDuck.Core.Notification{
        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>");
--- a/README.md
+++ b/README.md
@@ -1,3 +1,11 @@
+# Support
+
+[Follow TweetDuck on Twitter](https://twitter.com/TryTweetDuck) &nbsp;|&nbsp; [Support via PayPal](https://paypal.me/chylex) &nbsp;|&nbsp; [Support via Patreon](https://www.patreon.com/chylex)
+
+<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/2W76v7hRmUe7NfaeUKq9K8Wq/chylex/TweetDuck'>
+  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/2W76v7hRmUe7NfaeUKq9K8Wq/chylex/TweetDuck.svg' />
+</a>
+
 # Build Instructions

 ### Setup
--- a/Resources/Plugins/edit-design/.meta
+++ b/Resources/Plugins/edit-design/.meta
@@ -8,10 +8,10 @@ Edit layout & design
 chylex

 [version]
-1.1.3
+1.1.4

 [website]
 https://tweetduck.chylex.com

 [requires]
-1.7
+1.10.2
--- a/Resources/Plugins/edit-design/browser.js
+++ b/Resources/Plugins/edit-design/browser.js
@@ -331,7 +331,7 @@ enabled(){
    this.css.insert("#general_settings .cf { display: none !important }");
    this.css.insert("#settings-modal .js-setting-list li:nth-child(3) { border-bottom: 1px solid #ccd6dd }");
    
-    this.css.insert(".txt-base-smallest:not(.icon), .txt-base-largest:not(.icon) { font-size: "+this.config.fontSize+" !important }");
+    this.css.insert("html[data-td-font] { font-size: "+this.config.fontSize+" !important }");
    this.css.insert(".avatar { border-radius: "+this.config.avatarRadius+"% !important }");
    
    let notificationScrollbarColor = null;
@@ -507,7 +507,7 @@ enabled(){
    
    $TDP.injectIntoNotificationsBefore(this.$token, "css", "</head>", `
 <style type='text/css'>
-.txt-base-smallest:not(.icon), .txt-base-largest:not(.icon) { font-size: ${this.config.fontSize} !important }
+html[data-td-font] { font-size: ${this.config.fontSize} !important }
 .avatar { border-radius: ${this.config.avatarRadius}% !important }

 ${this.config.revertIcons ? `
--- a/Resources/Scripts/code.js
+++ b/Resources/Scripts/code.js
@@ -14,6 +14,11 @@
  //
  var onAppReady = [];
  
+  //
+  // Variable: DOM HTML element.
+  //
+  var doc = document.documentElement;
+  
  //
  // Variable: DOM object containing the main app element.
  //
@@ -258,49 +263,62 @@
  })();
  
  //
-  // 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 tags = [
+        `<html class='os-windows ${(doc.getAttribute("class").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>");
+      
+      doc.setAttribute("data-td-font", fontSizeName);
+      doc.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("");
-  };
+
+    TD.settings.setTheme = appendToFunction(TD.settings.setTheme, function(name){
+      setTimeout(refreshSettings, 0);
+    });
+
+    onAppReady.push(refreshSettings);
+  })();
  
  //
-  // Block: Hook into settings object to detect when the settings change.
+  // Block: Fix OS name.
  //
-  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);
+  if (ensurePropertyExists(TD, "util", "getOSName")){
+    TD.util.getOSName = function(){
+      return "windows";
+    };
    
-    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());
-  });
+    doc.classList.remove("os-");
+    doc.classList.add("os-windows");
+  }
  
  //
  // Block: Enable popup notifications.
--- a/Resources/Scripts/pages/example.html
+++ b/Resources/Scripts/pages/example.html
@@ -3,7 +3,7 @@
    <div class="js-tweet tweet">
      <header class="tweet-header">
        <time class="tweet-timestamp js-timestamp pull-right txt-mute">
-          <a target="_blank" rel="url" href="https://twitter.com/chylexmc" class="txt-small">0s</a>
+          <a target="_blank" rel="url" href="https://twitter.com/chylexmc" class="txt-size-variable--12">0s</a>
        </time>
        <a target="_blank" rel="user" href="https://twitter.com/chylexmc" class="account-link link-complex block">
          <div class="obj-left item-img tweet-img">
--- a/Resources/Scripts/styles/browser.css
+++ b/Resources/Scripts/styles/browser.css
@@ -38,11 +38,15 @@
 /* Square-ify stuff */
 /********************/

-.btn, .mdl, .mdl-content, .app-search-fake, .app-search-input, .popover, .lst-modal, .media-item, .media-preview, .tooltip-inner {
+.btn, .mdl, .mdl-content, .app-search-fake, .app-search-input, .popover, .lst-modal, .tooltip-inner {
  border-radius: 1px !important;
 }

-.compose-text-container, .compose-reply-tweet, .compose-message-recipient-input-container, .compose-message-recipient {
+.media-item, .media-preview, .media-image, .js-media-added .br--4 {
+  border-radius: 1px !important;
+}
+
+.compose-text-container, .compose-reply-tweet, .compose-message-recipient-input-container, .compose-message-recipient, .compose-media-bar-holder, .media-grid-container {
  border-radius: 0 !important;
 }

@@ -164,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;
Author	SHA1	Message	Date
chylex	ea53ce361f	Bump edit-design plugin version	2017-10-12 10:58:12 +02:00
chylex	2fce80b347	Fix custom font size in edit-design & time font in example notification	2017-10-11 20:42:42 +02:00
chylex	373c0b1cc3	Fix separator before 'Open dev tools' in example notification context menu	2017-10-11 20:34:50 +02:00
chylex	e5e1b7e608	Fix TweetDeck being unable to detect OS name	2017-10-11 20:33:39 +02:00
chylex	7e9221c9e0	Merge branch 'master' of https://github.com/chylex/TweetDuck	2017-10-11 20:24:09 +02:00
chylex	6b849f854e	Rewrite font size & theme handling, add <html> attributes to notifications	2017-10-11 20:22:32 +02:00
Daniel Chýlek	831f6bc744	Add support section to readme	2017-10-10 12:25:52 +02:00
chylex	d282a7a537	Fix border-radius in media upload previews	2017-10-08 05:43:54 +02:00