mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-27 21:05:53 +00:00
3.5.435. More dark theme tweaks for notifications. Add color support to channel metadata. Add warning colors for stream latency. Closes #113
This commit is contained in:
SirStendec
parent
ac8250928c
commit
3b38d12859
8 changed files with 173 additions and 25 deletions
|
|
@ -1,3 +1,17 @@
|
|||
<div class="list-header">3.5.435 <time datetime="2017-03-04">(2017-03-04)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Added: Warning colors for the Stream Latency display to draw attention when the value is too high.</li>
|
||||
<li>Fixed: Dark theme tweaks for notifications.</li>
|
||||
<li>Fixed: Wasn't removing the blue tint to the collapsable user menu in the sidebar.</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header">3.5.434 <time datetime="2017-03-03">(2017-03-03)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Added: Dark theme for the Notification Center.</li>
|
||||
<li>Fixed: Notification Center position with swapped sidebars.</li>
|
||||
<li>Fixed: Twitch removed the CSS class for Recommended Channels from the sidebar, breaking a setting and making it look ugly when collapsed.</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header">3.5.433 <time datetime="2017-03-01">(2017-03-01)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Added: Link information for Twitch Videos.</li>
|
||||
|
|
@ -50,25 +64,5 @@
|
|||
<li>API Changed: To reduce memory usage, badge objects are now not cloned. <code>user_add_badge</code> and <code>room_add_user_badge</code> now support complex badge structures rather than just IDs for more flexible badge setups.</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header">3.5.425 <time datetime="2017-02-03">(2017-02-03)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Fixed: Whisper User button not rendering on moderation cards.</li>
|
||||
<li>Fixed: Logging messages difficult to read with a developer console using a dark theme.</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header">3.5.424 <time datetime="2017-01-30">(2017-01-30)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Fixed: Ban notices in local history were rendering with HTML.</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header">3.5.423 <time datetime="2017-01-30">(2017-01-30)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Added: Option to hide boxart when hovering streams and videos in the directory.</li>
|
||||
<li>Added: Support for the new tiers of bits badges.</li>
|
||||
<li>Changed: By default, do not store locally cached user chat history for rooms that have logviewer.</li>
|
||||
<li>Changed: Store less data for locally cached user chat history.</li>
|
||||
<li>Fixed: Do not hide AutoMod buttons when a message has been dealt with. Only make them inactive, potentially preventing mis-clicks. (Thanks, Seldszar!)</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
|
||||
<div id="ffz-old-news"></div>
|
||||
46
dark.css
46
dark.css
|
|
@ -1657,3 +1657,49 @@ body.ffz-dark:not([data-page="teams#show"]),
|
|||
background-color: #232323;
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
|
||||
/* Notification Center */
|
||||
|
||||
.ffz-dark .notification-center {
|
||||
background-color: #101010;
|
||||
color: #C3C3C3;
|
||||
box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.ffz-dark .notification-center-balloon:before,
|
||||
.ffz-dark .notification-center-balloon:after { display: none }
|
||||
|
||||
.ffz-dark .notification__content-msg,
|
||||
.ffz-dark .notification-center__header-text { color: #C3C3C3 }
|
||||
.ffz-dark .notification__details { color: #777 }
|
||||
|
||||
.ffz-dark .notification__dismiss svg,
|
||||
.ffz-dark .notification__details svg { fill: #777 }
|
||||
|
||||
.ffz-dark .notification__dismiss:hover svg { fill: #AAA }
|
||||
.ffz-dark .notification__dismiss svg polygon { fill: #333 }
|
||||
|
||||
.ffz-dark .notification-center__footer,
|
||||
.ffz-dark .notification-center__header {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
background-color: #101010;
|
||||
}
|
||||
|
||||
.ffz-dark .notification-center__core {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.ffz-dark .notification-center__core-end {
|
||||
box-shadow: inset 0.1rem 0.4rem 1rem -.5rem;
|
||||
color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.ffz-dark .notification {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.ffz-dark .notification--unread {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
|
@ -1,3 +1,23 @@
|
|||
<div class="list-header">3.5.425 <time datetime="2017-02-03">(2017-02-03)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Fixed: Whisper User button not rendering on moderation cards.</li>
|
||||
<li>Fixed: Logging messages difficult to read with a developer console using a dark theme.</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header">3.5.424 <time datetime="2017-01-30">(2017-01-30)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Fixed: Ban notices in local history were rendering with HTML.</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header">3.5.423 <time datetime="2017-01-30">(2017-01-30)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Added: Option to hide boxart when hovering streams and videos in the directory.</li>
|
||||
<li>Added: Support for the new tiers of bits badges.</li>
|
||||
<li>Changed: By default, do not store locally cached user chat history for rooms that have logviewer.</li>
|
||||
<li>Changed: Store less data for locally cached user chat history.</li>
|
||||
<li>Fixed: Do not hide AutoMod buttons when a message has been dealt with. Only make them inactive, potentially preventing mis-clicks. (Thanks, Seldszar!)</li>
|
||||
</ul>
|
||||
|
||||
<div class="list-header">3.5.422 <time datetime="2017-01-27">(2017-01-27)</time></div>
|
||||
<ul class="chat-menu-content menu-side-padding">
|
||||
<li>Fixed: Re-sub notifications appearing with a white background within dark chat.</li>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,20 @@ var FFZ = window.FrankerFaceZ,
|
|||
// ---------------
|
||||
|
||||
FFZ.settings_info.player_stats = {
|
||||
type: "boolean",
|
||||
value: false,
|
||||
type: 'select',
|
||||
options: {
|
||||
0: ['Disabled', -2],
|
||||
'-1': ['Monochrome', -1],
|
||||
10: 'Warning Colors (10s+)',
|
||||
15: 'Warning Colors (15s+)',
|
||||
20: 'Warning Colors (20s+)',
|
||||
25: 'Warning Colors (25s+)',
|
||||
30: 'Warning Colors (30s+)',
|
||||
},
|
||||
|
||||
value: 0,
|
||||
process_value: utils.process_int(0, 0, -1),
|
||||
|
||||
no_mobile: true,
|
||||
|
||||
category: "Channel Metadata",
|
||||
|
|
|
|||
|
|
@ -241,6 +241,7 @@ FFZ.prototype.setup_sidebar = function() {
|
|||
|
||||
// Navigation Component
|
||||
this.update_views('component:twitch-navigation', this.modify_navigation);
|
||||
this.update_views('component:recommended-channels', this.modify_recommended_channels);
|
||||
|
||||
// Navigation Service
|
||||
var NavService = utils.ember_lookup('service:navigation');
|
||||
|
|
@ -265,6 +266,16 @@ FFZ.prototype.setup_following_link = function() {
|
|||
}
|
||||
|
||||
|
||||
FFZ.prototype.modify_recommended_channels = function(component) {
|
||||
utils.ember_reopen_view(component, {
|
||||
ffz_init: function() {
|
||||
var el = this.get('element');
|
||||
el.classList.add('js-recommended-channels');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
FFZ.prototype.modify_navigation = function(component) {
|
||||
var f = this;
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
|
|||
|
||||
// Version
|
||||
var VER = FFZ.version_info = {
|
||||
major: 3, minor: 5, revision: 433,
|
||||
major: 3, minor: 5, revision: 435,
|
||||
toString: function() {
|
||||
return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,6 +111,18 @@ metadata.player_stats = {
|
|||
}
|
||||
},
|
||||
|
||||
color: function(stats, delay, is_old) {
|
||||
var setting = this.settings.player_stats;
|
||||
if ( setting === -1 )
|
||||
return '';
|
||||
|
||||
else if ( delay > (setting * 2) )
|
||||
return '#fc3636';
|
||||
|
||||
else if ( delay > setting )
|
||||
return '#fc7835';
|
||||
},
|
||||
|
||||
click: function(event, button, stats, delay, is_old, player_cont) {
|
||||
player_cont.$('.js-stats-toggle').click();
|
||||
},
|
||||
|
|
@ -239,9 +251,10 @@ FFZ.prototype.render_metadata = function(key, basic_info, metabar, timers, refre
|
|||
if ( refresh )
|
||||
timers[key] = setTimeout(function(){refresh_func(key)}, typeof refresh === "number" ? refresh : 1000);
|
||||
|
||||
var je, stat,
|
||||
var je, stat, old_color,
|
||||
dynamic_tooltip = typeof info.tooltip === 'function',
|
||||
label = typeof info.label === 'function' ? info.label.apply(f, data) : info.label;
|
||||
label = typeof info.label === 'function' ? info.label.apply(f, data) : info.label,
|
||||
color = (typeof info.color === 'function' ? info.color.apply(f, data) : info.color) || '';
|
||||
|
||||
if ( ! label )
|
||||
return close();
|
||||
|
|
@ -352,15 +365,25 @@ FFZ.prototype.render_metadata = function(key, basic_info, metabar, timers, refre
|
|||
});
|
||||
}.bind(this, el))
|
||||
|
||||
old_color = '';
|
||||
metabar.appendChild(el);
|
||||
el = btn;
|
||||
|
||||
} else {
|
||||
stat = el.querySelector('span.ffz-label');
|
||||
old_color = el.dataset.color;
|
||||
if ( dynamic_tooltip )
|
||||
je = jQuery(el);
|
||||
}
|
||||
|
||||
if ( old_color !== color ) {
|
||||
el.dataset.color = color;
|
||||
el.style.color = color;
|
||||
var svg = el.querySelector('svg');
|
||||
if ( svg )
|
||||
svg.style.fill = color;
|
||||
}
|
||||
|
||||
stat.innerHTML = label;
|
||||
if ( dynamic_tooltip && je.data('hover') )
|
||||
je.tipsy('hide').tipsy('show');
|
||||
|
|
|
|||
42
style.css
42
style.css
|
|
@ -64,6 +64,7 @@ body:not(.ffz-show-bits-tags) .bits-tag--container,
|
|||
.ffz-hide-more-at-twitch nav .tse-content > .warp__list:last-of-type,
|
||||
.ffz-hide-recommended-friends .recommended-friends,
|
||||
.ffz-hide-recommended-channels .js-recommended-channels,
|
||||
.drawer.closed .js-recommended-channels .warp__item--header,
|
||||
.drawer.closed .promotedGames .warp__item--header,
|
||||
.ffz-hide-promoted-games .promotedGames,
|
||||
.ffz-hide-recent-past-broadcast .recent-past-broadcast,
|
||||
|
|
@ -1171,6 +1172,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
|
|||
|
||||
/* Menu Scrollbar */
|
||||
|
||||
.notification-center__content::-webkit-scrollbar,
|
||||
.balloon__list.scroll-y::-webkit-scrollbar,
|
||||
.player-menu__menu::-webkit-scrollbar,
|
||||
.dash-column::-webkit-scrollbar,
|
||||
|
|
@ -1192,6 +1194,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
|
|||
width: 6px;
|
||||
}
|
||||
|
||||
.notification-center__content::-webkit-scrollbar-thumb,
|
||||
.balloon__list.scroll-y::-webkit-scrollbar-thumb,
|
||||
.player-menu__menu::-webkit-scrollbar-thumb,
|
||||
.dash-column::-webkit-scrollbar-thumb,
|
||||
|
|
@ -1214,6 +1217,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
|
|||
box-shadow: 0 0 1px 1px rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
.ffz-dark .notification-center__content::-webkit-scrollbar-thumb,
|
||||
.ffz-dark .balloon__list.scroll-y::-webkit-scrollbar-thumb,
|
||||
.ffz-dark .player-menu__menu::-webkit-scrollbar-thumb,
|
||||
|
||||
|
|
@ -2239,6 +2243,11 @@ body.ffz-minimal-chat-input .ember-chat .chat-interface .textarea-contain textar
|
|||
|
||||
/* Swap Sidebars */
|
||||
|
||||
.ffz-sidebar-swap .notification-center-balloon {
|
||||
left: auto !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
body[data-current-path^="user."].ffz-portrait #right_close { transform: rotate(90deg); }
|
||||
body[data-current-path^="user."].ffz-portrait .archives-contain .more-archives { width: 100%; }
|
||||
|
||||
|
|
@ -2353,6 +2362,38 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
|
|||
|
||||
/* No Blue */
|
||||
|
||||
.ffz-dark .toast,
|
||||
.ffz-no-blue .theme--dark .toast {
|
||||
box-shadow: 0 0.2rem 0.7rem rgba(82,82,82,.2);
|
||||
border-color: #525252;
|
||||
background-color: #323232;
|
||||
}
|
||||
|
||||
.ffz-dark .toast:hover,
|
||||
.ffz-no-blue .theme--dark .toast:hover {
|
||||
box-shadow: 0 0.2rem 0.7rem rgba(127,127,127,.4);
|
||||
}
|
||||
|
||||
.ffz-dark .toast__content-msg { color: #EEE }
|
||||
.ffz-dark .toast__details { color: #999 }
|
||||
|
||||
.ffz-dark .toast__action-wrapper,
|
||||
.ffz-dark .toast__action--primary,
|
||||
.ffz-no-blue .theme--dark .toast__action-wrapper,
|
||||
.ffz-no-blue .theme--dark .toast__action--primary {
|
||||
border-color: #525252;
|
||||
}
|
||||
|
||||
.ffz-dark .toast__action--primary { color: #c5b6e2 }
|
||||
.ffz-dark .toast__action--secondary { color: #aaa }
|
||||
|
||||
.ffz-dark .toast__action--secondary:hover,
|
||||
.ffz-dark .toast__action--primary:hover {
|
||||
background-color: #525252;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
.ffz-no-blue .theme--dark .form__input,
|
||||
.ffz-no-blue .form--theme-dark .form__input {
|
||||
background-color: rgba(255,255,255,0.05);
|
||||
|
|
@ -2457,6 +2498,7 @@ body:not([data-current-path^="user."]) .ffz-sidebar-swap .ember-chat .chat-inter
|
|||
|
||||
.ffz-no-blue .warp__anchor,
|
||||
.ffz-no-blue .warp__item--anchor,
|
||||
.ffz-no-blue .warp__item--anchor-beta,
|
||||
.ffz-no-blue .warp__drawer,
|
||||
.ffz-no-blue .leaf,
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue