samfundev / BetterDiscordStuff

all my stuff for betterdiscord
MIT License
14 stars 9 forks source link

[ChannelTabs] Issue: macOS support #6

Open NewsGuyTor opened 1 month ago

NewsGuyTor commented 1 month ago

Describe the bug This doesn't work very well on macOS ATM. A portion of the tab bar is hidden behind the macOS traffic lights, and the window is only draggable from the tiny black/gray areas between the traffic lights.

Expected behavior The traffic lights should get padding to prevent being getting ChannelTabs elements below it. The dark areas should be made draggable so it's easier to move Discord around.

Screenshots Screenshot 2024-08-18 at 16 20 59

Screenshot 2024-08-18 at 16 28 40

NewsGuyTor commented 1 month ago

Fixed, by adding this CSS:

/* Apply draggable to both containers only on macOS using .platform-osx */
.platform-osx .channelTabs-tabContainer, 
.platform-osx .channelTabs-favContainer {
    -webkit-app-region: drag;
}

/* Exclude all interactive elements from being draggable in both containers only on macOS using .platform-osx */
.platform-osx .channelTabs-tabContainer *, 
.platform-osx .channelTabs-favContainer * {
    -webkit-app-region: no-drag;
}

/* Apply padding-left to the first element following #channelTabs-settingsMenu if it exists, only on macOS using .platform-osx */
.platform-osx #channelTabs-settingsMenu + .channelTabs-tabContainer,
.platform-osx #channelTabs-settingsMenu + .channelTabs-favContainer {
    padding-left: 72px;
}

/* Default padding for the first child of #channelTabs-container if #channelTabs-settingsMenu is not present, only on macOS using .platform-osx */
.platform-osx #channelTabs-container > :first-child:not(#channelTabs-settingsMenu) {
    padding-left: 72px;
}
ultrasiq commented 1 month ago

Fixed, by adding this CSS:

/* Apply draggable to both containers only on macOS using .platform-osx */
.platform-osx .channelTabs-tabContainer, 
.platform-osx .channelTabs-favContainer {
    -webkit-app-region: drag;
}

/* Exclude all interactive elements from being draggable in both containers only on macOS using .platform-osx */
.platform-osx .channelTabs-tabContainer *, 
.platform-osx .channelTabs-favContainer * {
    -webkit-app-region: no-drag;
}

/* Apply padding-left to the first element following #channelTabs-settingsMenu if it exists, only on macOS using .platform-osx */
.platform-osx #channelTabs-settingsMenu + .channelTabs-tabContainer,
.platform-osx #channelTabs-settingsMenu + .channelTabs-favContainer {
    padding-left: 72px;
}

/* Default padding for the first child of #channelTabs-container if #channelTabs-settingsMenu is not present, only on macOS using .platform-osx */
.platform-osx #channelTabs-container > :first-child:not(#channelTabs-settingsMenu) {
    padding-left: 72px;
}

Where in the CSS do I paste this?

NewsGuyTor commented 1 month ago

Fixed, by adding this CSS:

/* Apply draggable to both containers only on macOS using .platform-osx */
.platform-osx .channelTabs-tabContainer, 
.platform-osx .channelTabs-favContainer {
    -webkit-app-region: drag;
}

/* Exclude all interactive elements from being draggable in both containers only on macOS using .platform-osx */
.platform-osx .channelTabs-tabContainer *, 
.platform-osx .channelTabs-favContainer * {
    -webkit-app-region: no-drag;
}

/* Apply padding-left to the first element following #channelTabs-settingsMenu if it exists, only on macOS using .platform-osx */
.platform-osx #channelTabs-settingsMenu + .channelTabs-tabContainer,
.platform-osx #channelTabs-settingsMenu + .channelTabs-favContainer {
    padding-left: 72px;
}

/* Default padding for the first child of #channelTabs-container if #channelTabs-settingsMenu is not present, only on macOS using .platform-osx */
.platform-osx #channelTabs-container > :first-child:not(#channelTabs-settingsMenu) {
    padding-left: 72px;
}

Where in the CSS do I paste this?

https://github.com/samfundev/BetterDiscordStuff/pull/7/files

ultrasiq commented 1 month ago

Fixed, by adding this CSS:

/* Apply draggable to both containers only on macOS using .platform-osx */
.platform-osx .channelTabs-tabContainer, 
.platform-osx .channelTabs-favContainer {
    -webkit-app-region: drag;
}

/* Exclude all interactive elements from being draggable in both containers only on macOS using .platform-osx */
.platform-osx .channelTabs-tabContainer *, 
.platform-osx .channelTabs-favContainer * {
    -webkit-app-region: no-drag;
}

/* Apply padding-left to the first element following #channelTabs-settingsMenu if it exists, only on macOS using .platform-osx */
.platform-osx #channelTabs-settingsMenu + .channelTabs-tabContainer,
.platform-osx #channelTabs-settingsMenu + .channelTabs-favContainer {
    padding-left: 72px;
}

/* Default padding for the first child of #channelTabs-container if #channelTabs-settingsMenu is not present, only on macOS using .platform-osx */
.platform-osx #channelTabs-container > :first-child:not(#channelTabs-settingsMenu) {
    padding-left: 72px;
}

Where in the CSS do I paste this?

https://github.com/samfundev/BetterDiscordStuff/pull/7/files

Absolute legend, thanks!