Skip to content

Commit 6c8fe5f

Browse files
programmer2514programmer2514
committed
v12.1.0
Fixes #182 Fixes #185 Fixes #187 Fixes #188
1 parent 9a67247 commit 6c8fe5f

File tree

2 files changed

+48
-34
lines changed

2 files changed

+48
-34
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# CollapsibleUI Patch Notes
22

3+
### v12.1.0:
4+
* Fixed for latest Discord version
5+
* Fixed user settings overlapping user profile picture when channel list is collapsed
6+
* Fixed Horizontal Server List compatibility
7+
* Removed static class references
8+
39
### v12.0.0:
410
* Updated to work with Discord UI refresh (no longer works on old Discord UI)
511
* Fixed call container buttons being cut off when window is too small

‎CollapsibleUI.plugin.js

+42-34
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @author programmer2514
44
* @authorId 563652755814875146
55
* @description A feature-rich BetterDiscord plugin that reworks the Discord UI to be significantly more modular
6-
* @version 12.0.0
6+
* @version 12.1.0
77
* @donate https://ko-fi.com/benjaminpryor
88
* @patreon https://www.patreon.com/BenjaminPryor
99
* @website https://github.com/programmer2514/BetterDiscord-CollapsibleUI
@@ -155,17 +155,17 @@ const settings = {
155155
const config = {
156156
changelog: [
157157
{
158-
title: '12.0.0',
158+
title: '12.1.0',
159159
type: 'added',
160160
items: [
161-
'Updated to work with Discord UI refresh (no longer works on old Discord UI)',
162-
'Fixed call container buttons being cut off when window is too small',
163-
'More visual tweaks for UI consistency',
164-
'Removed obsolete advanced settings',
161+
'Fixed for latest Discord version',
162+
'Fixed user settings overlapping user profile picture when channel list is collapsed',
163+
'Fixed Horizontal Server List compatibility',
164+
'Removed static class references',
165165
],
166166
},
167167
{
168-
title: '1.0.0 - 11.0.2',
168+
title: '1.0.0 - 12.0.0',
169169
type: 'added',
170170
items: [
171171
'See the full changelog here: https://programmer2514.github.io/?l=cui-changelog',
@@ -1133,7 +1133,7 @@ const modules = {
11331133
get dispatcher() { return this._dispatcher ?? (this._dispatcher = runtime.api.Webpack.getByKeys('dispatch', 'isDispatching')); },
11341134
get social() { return this._social ?? (this._social = runtime.api.Webpack.getByKeys('inviteToolbar', 'peopleColumn', 'addFriend')); },
11351135
get toolbar() { return this._toolbar ?? (this._toolbar = runtime.api.Webpack.getByKeys('updateIconForeground', 'search', 'forumOrHome')); },
1136-
get panel() { return this._panel ?? (this._panel = runtime.api.Webpack.getByKeys('biteSize', 'fullSize', 'panel', 'outer', 'inner', 'overlay')); },
1136+
get panel() { return this._panel ?? (this._panel = runtime.api.Webpack.getByKeys('outer', 'inner', 'overlay')); },
11371137
get guilds() { return this._guilds ?? (this._guilds = runtime.api.Webpack.getByKeys('chatContent', 'noChat', 'parentChannelName', 'linkedLobby')); },
11381138
get frame() { return this._frame ?? (this._frame = runtime.api.Webpack.getByKeys('bar', 'title', 'winButtons')); },
11391139
get calls() { return this._calls ?? (this._calls = runtime.api.Webpack.getByKeys('wrapper', 'fullScreen', 'callContainer')); },
@@ -1152,21 +1152,22 @@ const modules = {
11521152
get callIcons() { return this._callIcons ?? (this._callIcons = runtime.api.Webpack.getByKeys('button', 'divider', 'lastButton')); },
11531153
get callButtons() { return this._callButtons ?? (this._callButtons = runtime.api.Webpack.getByKeys('controlButton', 'wrapper', 'buttonContainer')); },
11541154
get userAreaButtons() { return this._userAreaButtons ?? (this._userAreaButtons = runtime.api.Webpack.getByKeys('actionButtons', 'micTestButton', 'buttonIcon')); },
1155+
get scroller() { return this._scroller ?? (this._scroller = runtime.api.Webpack.getByKeys('wrapper', 'scroller', 'discoveryIcon')); },
11551156
};
11561157

11571158
const elements = {
11581159
get inviteToolbar() { return document.querySelector(`.${modules.social?.inviteToolbar}`); },
11591160
get searchBar() { return document.querySelector(`.${modules.toolbar?.search}`); },
11601161
get toolbar() { return document.querySelector(`.${modules.icons?.toolbar}`); },
11611162
get membersList() { return document.querySelector(`.${modules.members?.membersWrap}`); },
1162-
get userProfile() { return document.querySelector(`.${modules.panel?.inner}.${modules.panel?.panel}`); },
1163+
get userProfile() { return document.querySelector(`.${modules.guilds?.content} .${modules.panel?.inner}`); },
11631164
get messageInput() { return document.querySelector(`.${modules.guilds?.form}`); },
11641165
get windowBar() { return document.querySelector(`.${modules.frame?.bar}`); },
11651166
get callWindow() { return document.querySelector(`.${modules.calls?.wrapper}:not(.${modules.calls?.noChat})`); },
11661167
get settingsContainer() { return [...document.querySelectorAll(`.${modules.user?.buttons}`)].slice(-1)[0]; },
11671168
get messageInputContainer() { return [...document.querySelectorAll(`.${modules.input?.buttons}`)].slice(-1)[0]; },
11681169
get forumPopout() { return document.querySelector(`.${modules.popout?.chatLayerWrapper}`); },
1169-
get biteSizePanel() { return document.querySelector(`.${modules.panel?.outer}.${modules.panel?.biteSize}`); },
1170+
get biteSizePanel() { return document.querySelector(`[role="dialog"] .${modules.panel?.outer}`); },
11701171
get userArea() { return document.querySelector(`.${modules.sidebar?.panels}`); },
11711172
get serverList() { return document.querySelector(`.${modules.sidebar?.guilds}`); },
11721173
get channelList() { return document.querySelector(`.${modules.sidebar?.sidebarList}`); },
@@ -1333,12 +1334,12 @@ const styles = {
13331334
border-top: 1px solid var(--border-subtle) !important;
13341335
}
13351336
1336-
.scroller_ef3116 {
1337+
.${modules.scroller?.scroller} {
13371338
padding-top: var(--space-xs) !important;
13381339
}
13391340
1340-
.${modules.sidebar?.base} {
1341-
transition: top var(--cui-transition-speed);
1341+
.${modules.sidebar?.content} {
1342+
transition: margin-top var(--cui-transition-speed);
13421343
}
13431344
13441345
${(settings.sizeCollapse)
@@ -1358,10 +1359,11 @@ const styles = {
13581359
13591360
.${modules.sidebar?.guilds} {
13601361
width: var(--cui-collapse-size) !important;
1362+
border: 0 !important;
13611363
}
13621364
1363-
.${modules.sidebar?.base} {
1364-
--server-container: 0px;
1365+
.${modules.sidebar?.content} {
1366+
margin-top: 0px !important;
13651367
}
13661368
`.replace(/\s+/g, ' ')]);
13671369
},
@@ -1635,7 +1637,7 @@ const styles = {
16351637
document.querySelector(`.${modules.panel?.outer} header > svg > mask > rect`)?.setAttribute('width', '500%');
16361638
document.querySelector(`.${modules.panel?.outer} header > svg`)?.removeAttribute('viewBox');
16371639
return this.__init ?? (this.__init = [`${runtime.meta.name}-userProfile_init`, `
1638-
.${modules.panel?.outer}.${modules.panel?.panel} {
1640+
.${modules.guilds?.content} .${modules.panel?.outer} {
16391641
max-width: var(--cui-user-profile-width) !important;
16401642
width: var(--cui-user-profile-width) !important;
16411643
min-width: var(--cui-user-profile-width) !important;
@@ -1644,25 +1646,25 @@ const styles = {
16441646
border-left: 1px solid var(--border-subtle) !important;
16451647
}
16461648
1647-
.${modules.panel?.outer}.${modules.panel?.panel} > * {
1649+
.${modules.guilds?.content} .${modules.panel?.outer} > * {
16481650
width: 100% !important;
16491651
}
16501652
1651-
.${modules.panel?.outer}.${modules.panel?.panel} header > svg {
1653+
.${modules.guilds?.content} .${modules.panel?.outer} header > svg {
16521654
min-width: 100% !important;
16531655
}
16541656
1655-
.${modules.panel?.outer}.${modules.panel?.panel} header > svg > mask > rect {
1657+
.${modules.guilds?.content} .${modules.panel?.outer} header > svg > mask > rect {
16561658
width: 500% !important;
16571659
}
16581660
1659-
.${modules.panel?.outer}.${modules.panel?.panel} .${modules.effects?.effect} {
1661+
.${modules.guilds?.content} .${modules.panel?.outer} .${modules.effects?.effect} {
16601662
min-height: 100% !important;
16611663
}
16621664
16631665
${(settings.userProfileWidth)
16641666
? `
1665-
.${modules.panel?.outer}.${modules.panel?.panel}:before {
1667+
.${modules.guilds?.content} .${modules.panel?.outer}:before {
16661668
cursor: e-resize;
16671669
z-index: 200;
16681670
position: absolute;
@@ -1685,7 +1687,7 @@ const styles = {
16851687
},
16861688
get _toggle() {
16871689
return this.__toggle ?? (this.__toggle = [`${runtime.meta.name}-userProfile_toggle`, `
1688-
.${modules.panel?.outer}.${modules.panel?.panel} {
1690+
.${modules.guilds?.content} .${modules.panel?.outer} {
16891691
max-width: var(--cui-collapse-size) !important;
16901692
width: var(--cui-collapse-size) !important;
16911693
min-width: var(--cui-collapse-size) !important;
@@ -1694,7 +1696,7 @@ const styles = {
16941696
},
16951697
get _float() {
16961698
return this.__float ?? (this.__float = [`${runtime.meta.name}-userProfile_float`, `
1697-
.${modules.panel?.outer}.${modules.panel?.panel} {
1699+
.${modules.guilds?.content} .${modules.panel?.outer} {
16981700
position: absolute !important;
16991701
z-index: 190 !important;
17001702
max-height: 100% !important;
@@ -1709,7 +1711,7 @@ const styles = {
17091711
${(settings.sizeCollapse)
17101712
? `
17111713
@media ${this.query} {
1712-
.${modules.panel?.outer}.${modules.panel?.panel} {
1714+
.${modules.guilds?.content} .${modules.panel?.outer} {
17131715
max-width: var(--cui-user-profile-width) !important;
17141716
width: var(--cui-user-profile-width) !important;
17151717
min-width: var(--cui-user-profile-width) !important;
@@ -1720,9 +1722,9 @@ const styles = {
17201722
`.replace(/\s+/g, ' ')]);
17211723
},
17221724
_clear: function () {
1723-
document.querySelector(`.${modules.panel?.outer} header > svg`)?.style.removeProperty('max-height');
1724-
document.querySelector(`.${modules.panel?.outer} header > svg > mask > rect`)?.setAttribute('width', '100%');
1725-
document.querySelector(`.${modules.panel?.outer} header > svg`)?.setAttribute('viewBox', `0 0 ${parseInt(document.querySelector(`.${modules.panel?.outer} header > svg`)?.style.minWidth)} ${parseInt(document.querySelector(`.${modules.panel?.outer} header > svg`)?.style.minHeight)}`);
1725+
document.querySelector(`.${modules.guilds?.content} .${modules.panel?.outer} header > svg`)?.style.removeProperty('max-height');
1726+
document.querySelector(`.${modules.guilds?.content} .${modules.panel?.outer} header > svg > mask > rect`)?.setAttribute('width', '100%');
1727+
document.querySelector(`.${modules.guilds?.content} .${modules.panel?.outer} header > svg`)?.setAttribute('viewBox', `0 0 ${parseInt(document.querySelector(`.${modules.panel?.outer} header > svg`)?.style.minWidth)} ${parseInt(document.querySelector(`.${modules.panel?.outer} header > svg`)?.style.minHeight)}`);
17261728
},
17271729
...styleFunctions,
17281730
},
@@ -1910,9 +1912,9 @@ const styles = {
19101912
transition: max-height var(--cui-transition-speed), width var(--cui-transition-speed), border var(--cui-transition-speed) !important;
19111913
max-height: ${settings.userAreaMaxHeight}px !important;
19121914
overflow: hidden !important;
1913-
width: calc((var(--cui-channel-list-width) * var(--cui-channel-list-toggled)) + (var(--custom-guild-list-width) * var(--cui-server-list-toggled)) - (var(--space-xs) * 2)) !important;
1914-
border-left-width: clamp(0px, calc(1px * (var(--cui-server-list-toggled) + var(--cui-channel-list-toggled))), 1px) !important;
1915-
border-right-width: clamp(0px, calc(1px * (var(--cui-server-list-toggled) + var(--cui-channel-list-toggled))), 1px) !important;
1915+
width: calc((var(--cui-channel-list-width) * var(--cui-channel-list-toggled)) + (var(--custom-guild-list-width) * var(--cui-server-list-toggled) * var(--cui-compat-hsl)) - (var(--space-xs) * 2)) !important;
1916+
border-left-width: clamp(0px, calc(1px * ((var(--cui-server-list-toggled) * var(--cui-compat-hsl)) + var(--cui-channel-list-toggled))), 1px) !important;
1917+
border-right-width: clamp(0px, calc(1px * ((var(--cui-server-list-toggled) * var(--cui-compat-hsl)) + var(--cui-channel-list-toggled))), 1px) !important;
19161918
z-index: 191 !important;
19171919
}
19181920
@@ -2238,8 +2240,12 @@ const styles = {
22382240
.${modules.user?.avatarWrapper} {
22392241
flex-grow: 1 !important;
22402242
}
2243+
2244+
.${modules.user?.buttons} {
2245+
transform: translateX(calc((1 - var(--cui-channel-list-toggled)) * 1000000000px));
2246+
}
22412247
2242-
.${modules.user?.buttons} > *:not(:last-child) {
2248+
.${modules.user?.buttons} > *:not(:nth-last-child(2)):not(.gameActivityToggleButton_fd3fb5) {
22432249
transition: width var(--cui-transition-speed) !important;
22442250
overflow: hidden !important;
22452251
}
@@ -2248,7 +2254,7 @@ const styles = {
22482254
},
22492255
hide: function () {
22502256
runtime.api.DOM.addStyle(`${runtime.meta.name}-settingsButtons_hide_col`, `
2251-
.${modules.user?.buttons} > *:not(:last-child) {
2257+
.${modules.user?.buttons} > *:not(:nth-last-child(2)):not(.gameActivityToggleButton_fd3fb5) {
22522258
width: 0px !important;
22532259
}
22542260
`.replace(/\s+/g, ' '));
@@ -2350,7 +2356,7 @@ const styles = {
23502356
if (document.querySelector('.public-DraftEditor-content').querySelector('[data-text="true"]').innerHTML) return;
23512357

23522358
runtime.api.DOM.addStyle(`${runtime.meta.name}-toolbarFull_hide_col`, `
2353-
.${modules.icons?.toolbar} > *:not(:last-child) {
2359+
.${modules.icons?.toolbar} > *:not(:nth-last-child(2)) {
23542360
max-width: 0px !important;
23552361
}
23562362
`.replace(/\s+/g, ' '));
@@ -2423,6 +2429,8 @@ const styles = {
24232429
--cui-activity-panel-width: ${settings.activityPanelWidth || settings.defaultActivityPanelWidth}px;
24242430
24252431
--cui-forum-panel-top: ${(elements.noChat) ? '0px' : 'var(--custom-channel-header-height)'};
2432+
2433+
--cui-compat-hsl: ${(runtime.api.Themes.isEnabled('Horizontal Server List')) ? 0 : 1};
24262434
}
24272435
`.replace(/\s+/g, ' '));
24282436
},
@@ -3037,7 +3045,7 @@ module.exports = class CollapsibleUI {
30373045
// Update dynamic collapsed state of user settings buttons
30383046
tickCollapseSettings = (x, y) => {
30393047
if (settings.collapseSettings) {
3040-
if (this.isNear(elements.settingsContainer, settings.buttonCollapseFudgeFactor, x, y)) {
3048+
if (this.isNear(elements.settingsContainer, settings.buttonCollapseFudgeFactor, x, y) && !(document.querySelector(`#${runtime.meta.name}-channelList_toggle_dynamic`))) {
30413049
if (styles.buttons[constants.I_SETTINGS_BUTTONS].hidden) styles.buttons[constants.I_SETTINGS_BUTTONS].show();
30423050
}
30433051
else {

0 commit comments

Comments
 (0)