chylex/TweetDuck
1
0
Fork 0
mirror of https://github.com/chylex/TweetDuck.git synced 2025-04-14 21:15:48 +02:00
Code

Enable custom CSS in screenshots and move styles from code.js to notification.css

Browse Source
This commit is contained in:
chylex 2018-04-03 20:48:33 +02:00
parent e39e85e4dd
commit cfbc1b9575
3 changed files with 85 additions and 26 deletions
Core/Notification/Screenshot
FormNotificationScreenshotable.cs
Resources/Scripts
code.js
styles
notification.css

2
Core/Notification/Screenshot/FormNotificationScreenshotable.cs
View File

@ -38,7 +38,7 @@ public FormNotificationScreenshotable(Action callback, FormBrowser owner, Plugin
}
protected override string GetTweetHTML(TweetNotification tweet){
string html = tweet.GenerateHtml("td-screenshot", false);
string html = tweet.GenerateHtml("td-screenshot");
foreach(InjectedHTML injection in plugins.NotificationInjections){
html = injection.Inject(html);

26
Resources/Scripts/code.js
View File

@ -280,10 +280,12 @@
// Block: Hook into settings object to detect when the settings change, and update html attributes and notification layout.
//
(function(){
const refreshSettings = function(){
const refreshSettings = function(){
let fontSizeName = TD.settings.getFontSize();
let themeName = TD.settings.getTheme();
let columnBackground = getClassStyleProperty("column", "background-color");
let tags = [
"<html "+Array.prototype.map.call(document.documentElement.attributes, ele => `${ele.name}="${ele.value}"`).join(" ")+"><head>"
];
@ -292,27 +294,7 @@
tags.push($(this)[0].outerHTML);
});
tags.push("<style type='text/css'>");
tags.push("body { background: "+getClassStyleProperty("column", "background-color")+" !important }"); // set background color
tags.push("body::before { content: none !important }"); // remove background gradient
tags.push(".column { background: transparent !important }"); // remove background color from columns
tags.push("a[data-full-url] { word-break: break-all !important }"); // 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.has-source-avatar { margin-bottom: 4px !important }"); // tweak distance between avatar and text
tags.push(".activity-header .tweet-timestamp { line-height: unset !important }"); // fix timestamp position
tags.push(".activity-header .icon-user-filled { vertical-align: sub !important }"); // fix follow icon position
tags.push("#tduck-show-thread { display: inline-block !important; cursor: pointer }");
tags.push(".td-notification-padded .item-img { position: absolute; left: 21px; top: 48px; width: 0 !important }");
tags.push(".td-notification-padded .activity-header > .nbfc { margin-left: 46px; line-height: unset !important }");
tags.push(".td-notification-padded .activity-header > .nbfc > .avatar { position: absolute; margin-left: -34px; }");
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>");
tags.push("<style type='text/css'>body { background: "+columnBackground+" !important }</style>");
doc.setAttribute("data-td-font", fontSizeName);
doc.setAttribute("data-td-theme", themeName);

83
Resources/Scripts/styles/notification.css
View File

@ -6,6 +6,18 @@ body.td-notification {
overflow-y: auto !important;
}
body::before {
content: none !important;
}
.column {
background: transparent !important;
}
/***********************/
/* Redesign scrollbars */
/***********************/
.scroll-styled-v::-webkit-scrollbar {
width: 7px !important;
}
@ -18,9 +30,41 @@ body.td-notification {
border-left: 0 !important;
}
/*************/
/* Usernames */
/*************/
/********************/
/* Square-ify stuff */
/********************/
.media-item, .media-preview {
border-radius: 1px !important;
}
.quoted-tweet {
border-radius: 0 !important;
}
/***********************/
/* Tweaks for features */
/***********************/
a[data-full-url] {
word-break: break-all !important;
}
#tduck-show-thread {
display: inline-block !important;
cursor: pointer;
}
/*******************************************/
/* Fix general visual issues or annoyances */
/*******************************************/
html[data-td-font='smallest'] .badge-verified:before {
/* fix cut off badge icon */
width: 13px !important;
height: 13px !important;
background-position: -223px -98px !important;
}
.account-inline .username {
vertical-align: 10% !important;
@ -30,6 +74,39 @@ body.td-notification {
vertical-align: -10% !important;
}
/****************************************/
/* Tweak notification layout and design */
/****************************************/
.activity-header.has-source-avatar {
margin-bottom: 4px !important;
}
.activity-header .tweet-timestamp {
line-height: unset !important;
}
.activity-header .icon-user-filled {
vertical-align: sub !important;
}
.td-notification-padded .item-img {
position: absolute;
left: 21px;
top: 48px;
width: 0 !important;
}
.td-notification-padded .activity-header > .nbfc {
margin-left: 46px;
line-height: unset !important;
}
.td-notification-padded .activity-header > .nbfc > .avatar {
position: absolute;
margin-left: -34px;
}
/*********/
/* Media */
/*********/