From 3481cc0349afcc1fc5bc5c7b197a86adc27f5e80 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Fri, 10 Nov 2017 14:44:47 +0100
Subject: [PATCH] Fix broken CSS in browser and plugins after a TweetDeck
update
---
Resources/Plugins/edit-design/.meta | 2 +-
Resources/Plugins/edit-design/browser.js | 36 +++++++--------
Resources/Plugins/edit-design/modal.html | 34 ++++++--------
Resources/Plugins/templates/.meta | 2 +-
Resources/Plugins/templates/browser.js | 56 ++++++++++++------------
Resources/Scripts/styles/browser.css | 42 +++++++++---------
6 files changed, 82 insertions(+), 90 deletions(-)
diff --git a/Resources/Plugins/edit-design/.meta b/Resources/Plugins/edit-design/.meta
index 62bbd8d9..0b088778 100644
--- a/Resources/Plugins/edit-design/.meta
+++ b/Resources/Plugins/edit-design/.meta
@@ -8,7 +8,7 @@ Edit layout & design
chylex
[version]
-1.1.6
+1.1.7
[website]
https://tweetduck.chylex.com
diff --git a/Resources/Plugins/edit-design/browser.js b/Resources/Plugins/edit-design/browser.js
index c92a621a..3805b6b7 100644
--- a/Resources/Plugins/edit-design/browser.js
+++ b/Resources/Plugins/edit-design/browser.js
@@ -364,23 +364,23 @@ enabled(){
if (this.config.themeColorTweaks){
switch(TD.settings.getTheme()){
case "dark":
- this.css.insert(".app-content, .app-columns-container { background-color: #444448 }");
- this.css.insert(".column-drag-handle { opacity: 0.5 }");
- this.css.insert(".column-drag-handle:hover { opacity: 1 }");
- this.css.insert(".scroll-styled-v:not(.scroll-alt)::-webkit-scrollbar-thumb, .scroll-styled-h:not(.scroll-alt)::-webkit-scrollbar-thumb { background-color: #666 }");
+ this.css.insert(".app-content, .app-columns-container { background-color: #444448 !important }");
+ this.css.insert(".column-drag-handle { opacity: 0.5 !important }");
+ this.css.insert(".column-drag-handle:hover { opacity: 1 !important }");
+ this.css.insert(".scroll-styled-v:not(.scroll-alt)::-webkit-scrollbar-thumb, .scroll-styled-h:not(.scroll-alt)::-webkit-scrollbar-thumb { background-color: #666 !important }");
notificationScrollbarColor = "666";
break;
case "light":
- this.css.insert(".scroll-styled-v:not(.scroll-alt)::-webkit-scrollbar-thumb, .scroll-styled-h:not(.scroll-alt)::-webkit-scrollbar-thumb { background-color: #d2d6da }");
- this.css.insert(".app-columns-container.scroll-styled-h::-webkit-scrollbar-thumb:not(:hover) { background-color: #a5aeb5 }");
+ this.css.insert(".scroll-styled-v:not(.scroll-alt)::-webkit-scrollbar-thumb, .scroll-styled-h:not(.scroll-alt)::-webkit-scrollbar-thumb { background-color: #d2d6da !important }");
+ this.css.insert(".app-columns-container.scroll-styled-h::-webkit-scrollbar-thumb:not(:hover) { background-color: #a5aeb5 !important }");
notificationScrollbarColor = "a5aeb5";
break;
}
}
if (this.config.showCharacterCount){
- this.css.insert(".js-character-count.is-hidden { display: inline !important }");
+ this.css.insert("#tduck .js-character-count.is-hidden { display: inline !important }");
}
if (this.config.hideTweetActions){
@@ -391,8 +391,8 @@ enabled(){
}
if (this.config.moveTweetActionsToRight){
- this.css.insert(".tweet-actions { float: right !important; width: auto !important }");
- this.css.insert(".tweet-actions > li:nth-child(4) { margin-right: 2px !important }");
+ this.css.insert("#tduck .tweet-actions { float: right !important; width: auto !important }");
+ this.css.insert("#tduck .tweet-actions > li:nth-child(4) { margin-right: 2px !important }");
}
if (this.config.increaseQuoteTextSize){
@@ -491,13 +491,13 @@ enabled(){
this.icons = document.createElement("style");
this.icons.innerHTML = `
@font-face {
- font-family: 'oldfont';
+ font-family: '_of';
src: url("https://ton.twimg.com/tweetdeck-web/web/assets/fonts/tweetdeck-regular-webfont.5f4ea87976.woff") format("woff");
font-weight: normal;
font-style: normal;
}
-${iconData.map(entry => `${entry[0]}:before{content:\"\\f0${entry[1]}\";font-family:oldfont!important}`).join("")}
+${iconData.map(entry => `#tduck ${entry[0]}:before{content:\"\\f0${entry[1]}\";font-family:_of!important}`).join("")}
.drawer .btn .icon, .app-header .btn .icon { line-height: 1em !important }
.column-header .column-type-icon { bottom: 26px !important }
@@ -552,13 +552,13 @@ ${this.config.increaseQuoteTextSize ? `
` : ``}
${this.config.revertIcons ? `
-@font-face { font-family: 'oldfont'; src: url(\"https://ton.twimg.com/tweetdeck-web/web/assets/fonts/tweetdeck-regular-webfont.5f4ea87976.woff\") format(\"woff\"); font-weight: normal; font-style: normal }
-.icon-reply:before{content:"\\f006";font-family:oldfont}
-.icon-heart-filled:before{content:"\\f055";font-family:oldfont}
-.icon-retweet-filled:before{content:"\\f008";font-family:oldfont}
-.icon-list-filled:before{content:"\\f014";font-family:oldfont}
-.icon-user-filled:before{content:"\\f035";font-family:oldfont}
-.icon-user-dd:before{content:"\\f01a";font-family:oldfont}
+@font-face { font-family: '_of'; src: url(\"https://ton.twimg.com/tweetdeck-web/web/assets/fonts/tweetdeck-regular-webfont.5f4ea87976.woff\") format(\"woff\"); font-weight: normal; font-style: normal }
+#tduck .icon-reply:before{content:"\\f006";font-family:_of!important}
+#tduck .icon-heart-filled:before{content:"\\f055";font-family:_of!important}
+#tduck .icon-retweet-filled:before{content:"\\f008";font-family:_of!important}
+#tduck .icon-list-filled:before{content:"\\f014";font-family:_of!important}
+#tduck .icon-user-filled:before{content:"\\f035";font-family:_of!important}
+#tduck .icon-user-dd:before{content:"\\f01a";font-family:_of!important}
` : ``}
${notificationScrollbarColor ? `
diff --git a/Resources/Plugins/edit-design/modal.html b/Resources/Plugins/edit-design/modal.html
index 790960dc..13efd674 100644
--- a/Resources/Plugins/edit-design/modal.html
+++ b/Resources/Plugins/edit-design/modal.html
@@ -1,4 +1,4 @@
-<div class="td-modal-panel js-modal-panel mdl s-tall-fixed is-inverted-dark">
+<div id="edit-design-panel" class="js-modal-panel mdl s-tall-fixed is-inverted-dark">
<header class="js-mdl-header mdl-header js-drag-handle">
<h3 class="mdl-header-title js-header-title">TweetDuck - Layout & Design</h3>
<a href="#" class="mdl-dismiss js-dismiss link-normal-dark">
@@ -6,8 +6,8 @@
</a>
</header>
<div class="mdl-inner">
- <div class="td-modal-content mdl-content js-mdl-content horizontal-flow-container">
- <div class="td-modal-inner-cols">
+ <div id="edit-design-panel-content" class="mdl-content js-mdl-content horizontal-flow-container">
+ <div id="edit-design-panel-inner-cols">
<div class="l-column mdl-column">
<!-- THEME -->
@@ -159,60 +159,52 @@
/* Containers */
- .td-modal-panel {
+ #edit-design-panel {
width: 693px;
height: 380px;
}
- .td-modal-inner-cols {
+ #edit-design-panel-inner-cols {
padding: 0 6px;
}
- .td-modal-inner-cols .l-column {
+ #edit-design-panel-inner-cols .l-column {
padding: 15px 9px;
box-sizing: border-box;
width: 225px;
font-size: 0; /* fix custom font size breaking the modal layout */
}
- .td-modal-inner-cols .l-column:nth-child(3) {
+ #edit-design-panel-inner-cols .l-column:nth-child(3) {
width: 200px;
}
- .td-modal-inner-full {
- padding: 15px;
- }
-
- .td-modal-inner-full .txt-center {
- margin-bottom: 10px;
- }
-
/* Elements */
- .td-modal-content label {
+ #edit-design-panel-content label.txt-uppercase {
margin-top: 18px;
}
- .td-modal-content label:first-child {
+ #edit-design-panel-content label.txt-uppercase:first-child {
margin-top: 0;
}
- .td-modal-content label.radio {
+ #edit-design-panel-content label.radio {
display: inline-block;
margin: 0 16px 5px 4px;
cursor: pointer;
}
- .td-modal-content label.checkbox {
+ #edit-design-panel-content label.checkbox {
margin: 0 0 5px 4px;
cursor: pointer;
}
- .td-modal-content select + label.checkbox {
+ #edit-design-panel-content select + label.checkbox {
margin-top: 9px;
}
- .td-modal-content input.js-theme-checkbox, .td-modal-content input.js-theme-radio {
+ #edit-design-panel-content input.js-theme-checkbox, #edit-design-panel-content input.js-theme-radio {
margin-top: 1px;
}
diff --git a/Resources/Plugins/templates/.meta b/Resources/Plugins/templates/.meta
index eb20d75f..cd3fb6f0 100644
--- a/Resources/Plugins/templates/.meta
+++ b/Resources/Plugins/templates/.meta
@@ -8,7 +8,7 @@ Templates
chylex
[version]
-1.0.2
+1.0.3
[website]
https://tweetduck.chylex.com
diff --git a/Resources/Plugins/templates/browser.js b/Resources/Plugins/templates/browser.js
index 9094cfef..a17b8eaf 100644
--- a/Resources/Plugins/templates/browser.js
+++ b/Resources/Plugins/templates/browser.js
@@ -50,25 +50,25 @@ enabled(){
this.css = window.TDPF_createCustomStyle(this);
this.css.insert(".manage-templates-btn.active { color: #fff; box-shadow: 0 0 2px 3px #50a5e6; outline: 0; }");
- this.css.insert(".templates-modal-wrap { width: 100%; height: 100%; padding: 49px; position: absolute; z-index: 999; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); }");
- this.css.insert(".templates-modal { width: 100%; height: 100%; background-color: #fff; display: flex; }");
- this.css.insert(".templates-modal > div { display: flex; flex-direction: column; }");
+ this.css.insert("#templates-modal-wrap { width: 100%; height: 100%; padding: 49px; position: absolute; z-index: 999; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); }");
+ this.css.insert("#templates-modal { width: 100%; height: 100%; background-color: #fff; display: flex; }");
+ this.css.insert("#templates-modal > div { display: flex; flex-direction: column; }");
this.css.insert(".templates-modal-bottom { flex: 0 0 auto; padding: 16px; }");
- this.css.insert(".template-list .templates-modal-bottom { display: flex; justify-content: space-between; }");
- this.css.insert(".template-editor .templates-modal-bottom { text-align: right; }");
+ this.css.insert("#template-list .templates-modal-bottom { display: flex; justify-content: space-between; }");
+ this.css.insert("#template-editor .templates-modal-bottom { text-align: right; }");
- this.css.insert(".template-list { height: 100%; flex: 1 1 auto; }");
- this.css.insert(".template-list ul { list-style-type: none; font-size: 24px; color: #222; flex: 1 1 auto; padding: 12px; overflow-y: auto; }");
- this.css.insert(".template-list li { display: block; width: 100%; padding: 4px 8px; box-sizing: border-box; }");
- this.css.insert(".template-list li[data-template] { cursor: pointer; }");
- this.css.insert(".template-list li[data-template]:hover { background-color: #d8d8d8; }");
- this.css.insert(".template-list li span { white-space: nowrap; }");
- this.css.insert(".template-list li .icon { opacity: 0.6; margin-left: 4px; padding: 3px; }");
- this.css.insert(".template-list li .icon:hover { opacity: 1; }");
- this.css.insert(".template-list li .template-actions { float: right; }");
+ this.css.insert("#template-list { height: 100%; flex: 1 1 auto; }");
+ this.css.insert("#template-list ul { list-style-type: none; font-size: 24px; color: #222; flex: 1 1 auto; padding: 12px; overflow-y: auto; }");
+ this.css.insert("#template-list li { display: block; width: 100%; padding: 4px 8px; box-sizing: border-box; }");
+ this.css.insert("#template-list li[data-template] { cursor: pointer; }");
+ this.css.insert("#template-list li[data-template]:hover { background-color: #d8d8d8; }");
+ this.css.insert("#template-list li span { white-space: nowrap; }");
+ this.css.insert("#template-list li .icon { opacity: 0.6; margin-left: 4px; padding: 3px; }");
+ this.css.insert("#template-list li .icon:hover { opacity: 1; }");
+ this.css.insert("#template-list li .template-actions { float: right; }");
- this.css.insert(".template-editor { height: 100%; flex: 0 0 auto; width: 25vw; min-width: 150px; max-width: 400px; background-color: #485865; }");
+ this.css.insert("#template-editor { height: 100%; flex: 0 0 auto; width: 25vw; min-width: 150px; max-width: 400px; background-color: #485865; }");
this.css.insert(".template-editor-form { flex: 1 1 auto; padding: 12px 16px; font-size: 14px; overflow-y: auto; }");
this.css.insert(".template-editor-form .compose-text-title { margin: 24px 0 9px; }");
this.css.insert(".template-editor-form .compose-text-title:first-child { margin-top: 0; }");
@@ -261,9 +261,9 @@ enabled(){
$(".manage-templates-btn").addClass("active");
let html = `
-<div class="templates-modal-wrap">
- <div class="templates-modal">
- <div class="template-list">
+<div id="templates-modal-wrap">
+ <div id="templates-modal">
+ <div id="template-list">
<ul></ul>
<div class="templates-modal-bottom">
@@ -272,7 +272,7 @@ enabled(){
</div>
</div>
- <div class="template-editor invisible">
+ <div id="template-editor" class="invisible">
<div class="template-editor-form">
<div class="compose-text-title">Template Name</div>
<input name="template-name" type="text">
@@ -320,7 +320,7 @@ enabled(){
$(".js-app-content").prepend(html);
- let ele = $(".templates-modal-wrap").first();
+ let ele = $("#templates-modal-wrap").first();
ele.on("click", "li[data-template]", function(e){
let template = me.config.templates[$(this).attr("data-template")];
@@ -332,7 +332,7 @@ enabled(){
switch($(this).attr("data-action")){
case "edit-template":
- let editor = $(".template-editor");
+ let editor = $("#template-editor");
if (editor.hasClass("invisible")){
toggleEditor();
@@ -372,7 +372,7 @@ enabled(){
break;
case "editor-confirm":
- let editor = $(".template-editor");
+ let editor = $("#template-editor");
if (me.editingTemplate !== null){
delete me.config.templates[me.editingTemplate];
@@ -408,15 +408,15 @@ enabled(){
};
var hideTemplateModal = function(){
- $(".templates-modal-wrap").remove();
+ $("#templates-modal-wrap").remove();
$(".manage-templates-btn").removeClass("active");
};
var toggleEditor = function(){
- let editor = $(".template-editor");
+ let editor = $("#template-editor");
$("[name]", editor).val("");
- if ($("button[data-action='new-template']", ".template-list").add(editor).toggleClass("invisible").hasClass("invisible")){
+ if ($("button[data-action='new-template']", "#template-list").add(editor).toggleClass("invisible").hasClass("invisible")){
me.editingTemplate = null;
}
};
@@ -435,7 +435,7 @@ enabled(){
eles.push("<li>No templates available</li>");
}
- $(".template-list").children("ul").html(eles.join(""));
+ $("#template-list").children("ul").html(eles.join(""));
if (save){
this.saveConfig();
@@ -445,7 +445,7 @@ enabled(){
// event handlers
this.manageTemplatesButtonClickEvent = function(e){
- if ($(".templates-modal-wrap").length){
+ if ($("#templates-modal-wrap").length){
hideTemplateModal();
}
else{
@@ -471,7 +471,7 @@ disabled(){
this.css.remove();
$(".manage-templates-btn").remove();
- $(".templates-modal-wrap").remove();
+ $("#templates-modal-wrap").remove();
$(document).off("uiDrawerActive", this.drawerToggleEvent);
diff --git a/Resources/Scripts/styles/browser.css b/Resources/Scripts/styles/browser.css
index 108b8355..c43f9771 100644
--- a/Resources/Scripts/styles/browser.css
+++ b/Resources/Scripts/styles/browser.css
@@ -3,23 +3,23 @@
/***********************/
.scroll-styled-v::-webkit-scrollbar-thumb, .scroll-styled-h::-webkit-scrollbar-thumb, .antiscroll-scrollbar {
- border-radius: 0;
+ border-radius: 0 !important;
}
.antiscroll-scrollbar-vertical {
- margin-top: 0;
+ margin-top: 0 !important;
}
.antiscroll-scrollbar-horizontal {
- margin-left: 0;
+ margin-left: 0 !important;
}
.scroll-styled-v:not(.antiscroll-inner)::-webkit-scrollbar {
- width: 8px;
+ width: 8px !important;
}
.scroll-styled-h:not(.antiscroll-inner)::-webkit-scrollbar {
- height: 8px;
+ height: 8px !important;
}
.app-columns-container::-webkit-scrollbar {
@@ -27,7 +27,7 @@
}
.app-columns-container::-webkit-scrollbar-track {
- border-left: 0;
+ border-left: 0 !important;
}
.app-columns-container {
@@ -87,7 +87,7 @@
}
.app-header:not(.is-condensed) .nav-user-info {
- padding: 0 5px;
+ padding: 0 5px !important;
}
/****************************************/
@@ -96,11 +96,11 @@
.activity-header {
align-items: center !important;
- margin-bottom: 4px;
+ margin-bottom: 4px !important;
}
.activity-header .tweet-timestamp {
- line-height: unset;
+ line-height: unset !important;
}
.account-bio.padding-t--5 {
@@ -126,12 +126,12 @@ html[data-td-theme='dark'] .stream-item:not(:hover) .js-user-actions-menu {
a[data-full-url] {
/* break long urls */
- word-break: break-all;
+ word-break: break-all !important;
}
.is-video a:not([href*='youtu']) .icon-bg-dot, .is-gif .icon-bg-dot {
/* change play icon on mp4s */
- color: #9f51cf;
+ color: #9f51cf !important;
}
/***************************************/
@@ -147,7 +147,7 @@ a[data-full-url] {
}
.js-docked-compose footer {
- display: none;
+ display: none !important;
}
.compose-content {
@@ -160,7 +160,7 @@ a[data-full-url] {
.account-inline .username {
/* move usernames a bit higher */
- vertical-align: 10%;
+ vertical-align: 10% !important;
}
html[data-td-font='smallest'] .sprite-verified-mini {
@@ -184,7 +184,7 @@ html[data-td-font='smallest'] .badge-verified:before {
.keyboard-shortcut-list {
/* fix keyboard navigation alignment */
- vertical-align: top;
+ vertical-align: top !important;
}
.tweet-detail-wrapper .js-media-gif-container {
@@ -194,7 +194,7 @@ html[data-td-font='smallest'] .badge-verified:before {
.is-inverted-dark .inline-reply .btn:hover {
/* Reply buttons in modals are bork */
- background-color: transparent;
+ background-color: transparent !important;
}
/***************************************************************/
@@ -203,10 +203,10 @@ html[data-td-font='smallest'] .badge-verified:before {
.column-nav-link .attribution {
/* fix cut off account names */
- position: absolute;
+ position: absolute !important;
}
-.js-docked-compose .js-drawer-close {
+#tduck .js-docked-compose .js-drawer-close {
/* fix close drawer button position */
margin: 20px 0 0 !important;
}
@@ -219,7 +219,7 @@ html[data-td-font='smallest'] .badge-verified:before {
#account-safeguard-checkbox, #inline-account-safeguard-checkbox {
/* fix "Ready to Tweet/send" alignment with the checkbox */
- vertical-align: -15%;
+ vertical-align: -15% !important;
}
/************************************************/
@@ -231,7 +231,7 @@ html[data-td-font='smallest'] .badge-verified:before {
}
.js-column-header .column-header-link {
- padding: 0;
+ padding: 0 !important;
}
.js-column-header .column-header-link .icon {
@@ -250,9 +250,9 @@ html[data-td-font='smallest'] .badge-verified:before {
}
.column:not(.is-options-open) .column-header {
- border-bottom: none;
+ border-bottom: none !important;
}
.is-options-open .column-type-icon {
- bottom: 27px;
+ bottom: 27px !important;
}