search

beeper / themes

Community Themes
Apache License 2.0
126 stars 28 forks source link

A few custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc) and other things that frustrate me with Beeper's UI/UX #6

Open 0xdevalias opened 1 year ago

0xdevalias commented 1 year ago

A few of my custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc):

Announcement tweet: https://twitter.com/_devalias/status/1651766148046921728

Reddit thread: https://www.reddit.com/r/beeper/comments/13cezdc/beeper_ui_ux_hacksimprovements_via_custom_themes/

Snapshot of gist contents at time of posting this issue follows...

Improving UI/UX for users with lots of favourites

(Reported to Beeper Support as DES-10976 (and probably at least one other time before that))

Reduces the size of the user avatars in the favourites section of the unified inbox, sets a max-height to the favourites area, and makes the overflow vertically scrollable.

/* Inbox - Favourites */

.rooms > .favourites {
  /* Custom Variables */
  --devalias-fav-section-max-height: 30vh;
  --devalias-fav-width: 40px;
  --devalias-fav-height: 40px;
  --devalias-fav-avatar-width: 30px;
  --devalias-fav-avatar-height: 30px;
  --devalias-fav-avatar-font-size: 17px;
}

/* .bp_LeftPanel .rooms .favourites__icons {
  TODO: This is where display: grid is set.. can we somehow make it more compact so it automagically fits the tiles on the row as space allows?
}*/

.rooms > .favourites > .favourites__icons > .favourites__tiles {
  max-height: var(--devalias-fav-section-max-height, none) !important;
  overflow: auto;
}

.rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row > span {  
  --fav-width: var(--devalias-fav-width, 40px) !important;
}

.bp_LeftPanel .rooms .favourites_avatar {
  height: var(--devalias-fav-height, 60px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small {
  height: var(--devalias-fav-height, 48px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_image {
  width: var(--devalias-fav-avatar-width, 44px) !important;
  height: var(--devalias-fav-avatar-height, 44px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_initial {
  font-size: var(--devalias-fav-avatar-font-size, 19.8px) !important;
  width: var(--devalias-fav-avatar-width, 44px) !important;
  line-height: var(--devalias-fav-avatar-width, 44px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline .outline-details {
  width: var(--devalias-fav-width, var(--fav-width, 45px)) !important;
}
**Before:** Inbox is flooded by favourites **After:** ✨👌
![image](https://github.com/beeper/themes/assets/753891/9a93cad8-e22d-472b-beef-f3ce1719f1f7) ![image](https://github.com/beeper/themes/assets/753891/3d5a49e7-3376-4778-8852-ff45c9d35c5d)

Improving UI/UX with the Custom CSS TextArea

(Reported to Beeper Support as DES-10977)

/* Custom CSS TextArea */

.mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea {
  width: 100% !important;
  height: 500px !important;
}
Before: Textarea is tiny and squashed and barely usable After: The textarea expands to take up a decent/usable amount of the available space
image image
0xdevalias commented 1 year ago

Add an 'external link' icon next to the 'Chat Networks' 'tab' in the main 'Settings' dialog

Updated to also add an 'external link' icon next to the 'Chat Networks' 'tab' in the main 'Settings' dialog:

/* 'Chat Networks' 'tab' in the 'Settings' dialog*/

.mx_SettingsDialog_content > .mx_TabbedView > .mx_TabbedView_tabLabels > .mx_TabbedView_tabLabel:has(> span.mx_UserSettingsDialog_chatSettingsIcon) > .mx_TabbedView_tabLabel_text::after {
  content: "🔗";
  margin-left: 16px;
}

Before: image

After: image

This is a hacky workaround for Beeper bug report DES-10656, implementing option 3:

I know i've reported this in the past, but when the settings dialog is open, there is a list of 'settings tabs' down the left hand side. It feels like super weird and annoying UX that the 'Chat Networks' link here isn't actually a 'tab within the settings dialog', but opens the completely separate 'chat networks' dialog, which has no 'back' button to take you back to the settings.

Desired UX, in order of preference (but likely also effort to implement):

  1. 'chat networks' is shown as just another 'tab' within the main settings dialog, not as a unique dialog
  2. the 'chat networks' dialog shows a 'back to settings' button (it would be fine if this was only shown when 'chat networks' was opened from the link in the settings dialog; but it could also just always be present)
  3. the simplest UI hack that would still massively improve the UX here would be to add an icon that represents 'opens in a new window (dialog)' next to the 'chat networks' 'tab' label in the settings dialog, so that at least the UI is communicating the fact that it will respond differently to the other 'tabs' here
0xdevalias commented 1 year ago

Reduce the 'in your face' bright/colourful/'glare' from the network icons on the new 'View Space Bar in side panel' lab

(Edit: There is a variation on this tweak/workaround documented below (Ref), that allows replacing these new icons with the old lineart icons)

Added a new tweak to reduce the 'in your face' bright/colourful/'glare' from the network icons on the new 'View Space Bar in side panel' lab:

/* Beeper Space Sidebar */

#beeperSpaceBar > .mx_AccessibleButton {
  opacity: 0.8;
  filter: grayscale(75%);
}
Before: The new icons are overly bright/glary/distracting/feel like i'm staring into the sun After: The icons are still visible/usable, but don't 'take over' the entire UI with their vividness
image image
0xdevalias commented 1 year ago

Add the 🔗 emoji after the 'Chat Networks' item in the main settings menu + remove extra noise from settings menu

A variation on https://github.com/beeper/themes/issues/6#issuecomment-1529282836 that was requested by a user in the 'Beeper Community' chat, which adds the 🔗 emoji after the 'Chat Networks' item in the main settings menu as well:

/* 'Chat Networks' button on the main Settings menu */

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Chat Networks"]::after {
  content: "🔗";
}
Before: After:
image image

Though for my personal needs.. why don't we just remove all of those extra/annoying/cluttering buttons entirely!

/* Main Settings Menu */

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Chat Networks"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Mark All As Read"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Check for Update"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Download Mobile App"] {
  display: none;
}
Before: After:
image image
0xdevalias commented 1 year ago

From 'Beeper Community' channel, exploring the possibility of hacking the new 'beeper space bar' to make use of the old chat network icons as a variation to https://github.com/beeper/themes/issues/6#issuecomment-1534018452:

These are all the classes used for the 'old' network icons I have:

bp_SpaceBarItem_image inbox
bp_SpaceBarItem_image bookmarks
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol facebook
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol instagram
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol imessage
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol twitter
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol telegram
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol signal
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol linkedin
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol discord
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol beeper
bp_SpaceBarItem_image bp_SpaceBarItem_image--protocol whatsapp
bp_SpaceBarItem_image low

bp_SpaceBarItem_badge unread

They're all defined in theme-dark.css, though use pretty specific CSS selectors to make them not very reusable as is, eg.

.mx_MatrixChat_wrapper .bp_LeftPanel .spaceBar .bp_SpaceBarItem_image.facebook {
  background-image: url(../../img/social/lineart-color/dark/messenger.1544eb2.svg);
}

That said, could just use the url(...) directly in our own hack css instead of trying to reuse existing classes.

But the code in the new beeper space bar on the left hand side is kind of horrible for customising. Looks like it's using CSS-in-JS patterns or similar, which just results in ugly hacky code to try and override:

image

0xdevalias commented 1 year ago

Remove the 'Archive' button from the new 'beeper spaces sidebar'

Further 'beeper space sidebar' customisations/hacks, based on a request in 'Beeper Community' channel:

Is there a way to hide the archive bar from the sidebar?

You could maybe target it with a css selector that targets the data-src of the svg of the icon.. but pretty much everything else that I would normally use is hacky generated/unstable random names

This seems to allow targeting it in devtools console:

$('#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"])')

This will hide it using devtools console:

$('#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"])').style.display = 'none'

So this would be a CSS theme snippet to hide it:

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]) {
  display: none;
}
0xdevalias commented 1 year ago

Hide the floating 'Archived' and 'Sweep' buttons in the new 'beeper space sidebar'

(Reported to Beeper Support as DES-10914)

With the new 'beeper space sidebar', when it's collapsed, we can hide the floating 'Archived' and 'Sweep' buttons (and some empty divs that block selecting chats around that area) as follows:

/* Beeper Space Sidebar - Collapsed - Hide Empty Div Blockers */

.mx_MatrixChat > div:first-child > div:empty {
  display: none;
}

/* Beeper Space Sidebar - Collapsed - Hide Floating Archived Button */

.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-archive16.2003809.svg"]) {
  display: none;
}

/* Beeper Space Sidebar - Collapsed - Hide Floating Sweep Button */

.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/sweep16.36d9c67.svg"]) {
  display: none;
}

Edit: Contribution from @ashirbhallalevine:beeper.com in Beeper Community chat:

New clause to add for the new "Archive All Read Messages" button that appears when the spacebar is open:

/* Open - Hide New Floating Archive/Sweep Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  display: none;
}

My full section of CSS customizations for that now reads as follows:

/* Spacebar Menu Action Buttons */

/* Collapsed - Hide Empty Div Blockers */
.mx_MatrixChat > div:first-child > div:empty {
  display: none;
}

/* Collapsed - Hide Floating Archived Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-archive16.2003809.svg"]) {
  display: none;
}

/* Collapsed - Hide Floating Sweep Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/sweep16.36d9c67.svg"]) {
  display: none;
}

/* Open - Hide New Floating Archive/Sweep Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  display: none;
}
0xdevalias commented 1 year ago

Change the network icons in the new 'beeper space sidebar' to use the old lineart icons

Beeper Support Report

Reported to Beeper Support as DES-10915

CSS Hacks

Following on from my initial research above (Ref), here is how we can change the network icons in the new 'beeper space sidebar' to use the old lineart icons instead.

The following is a basic example, using the 'archive' as an example; but similar rules could be written to target all of the networks:

/* Beeper Space Sidebar - Archive - Hide Original Icon */

#beeperSpaceBar svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"] {
  display: none
}

/* Beeper Space Sidebar - Archive - Use Lineart Icon */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]) > div > div > div {
    width: 100%;
    height: 100%;
    background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

This is a (probably non-exhaustive) list of the new icons that can be targeted (as above example) to be replaced:

## Constructed from paths in `nova://nova-web/webapp/bundles/bf956948361b1661854d/init.js`

svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]
svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"]
svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]
svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]
svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]
svg[data-src="img/beeper/square-discord16.e91cca3.svg"]
svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]
svg[data-src="img/beeper/square-googlechat16.61657b2.svg"]
svg[data-src="img/beeper/square-imessage16.11b6604.svg"]
svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]
svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]
svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]
svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]
svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]
svg[data-src="img/beeper/square-slack16.a4e40dd.svg"]
svg[data-src="img/beeper/square-telegram16.d011ded.svg"]
svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]
svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]

This is a (probably non-exhaustive) list of the lineart icons that can be used (as above example) as replacements:

nova://nova-web/webapp/img/social/lineart/add-space.b91886d.svg
nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg
nova://nova-web/webapp/img/social/lineart/bookmarks.3f3eb77.svg
nova://nova-web/webapp/img/social/lineart/expand.a1e4885.svg
nova://nova-web/webapp/img/social/lineart/smart-inbox.04b2d4e.svg

## From `nova://nova-web/webapp/bundles/bf956948361b1661854d/theme-dark.css`

nova://nova-web/webapp/img/social/lineart-color/dark/beeper.c685f80.svg
nova://nova-web/webapp/img/social/lineart-color/dark/discord.6daf490.svg
nova://nova-web/webapp/img/social/lineart-color/dark/messenger.1544eb2.svg
nova://nova-web/webapp/img/social/lineart-color/dark/gchat.bc14811.svg
nova://nova-web/webapp/img/social/lineart-color/dark/telegram.77fa320.svg
nova://nova-web/webapp/img/social/lineart-color/dark/whatsapp.2210499.svg
nova://nova-web/webapp/img/social/lineart-color/dark/instagram.e9184e9.svg
nova://nova-web/webapp/img/social/lineart-color/dark/twitter.972096c.svg
nova://nova-web/webapp/img/social/lineart-color/dark/slack.4310255.svg
nova://nova-web/webapp/img/social/lineart-color/dark/matrix.512ad87.svg
nova://nova-web/webapp/img/social/lineart-color/skype.ca8a916.svg
nova://nova-web/webapp/img/social/lineart-color/sms.ca23784.svg
nova://nova-web/webapp/img/social/lineart-color/dark/android.ccaf23f.svg
nova://nova-web/webapp/img/social/lineart-color/dark/imessage.aedae37.svg
nova://nova-web/webapp/img/social/lineart-color/dark/signal.315d199.svg
nova://nova-web/webapp/img/social/lineart-color/dark/linkedin.2297fef.svg

## From `nova://nova-web/webapp/bundles/bf956948361b1661854d/theme-light.css`

nova://nova-web/webapp/img/social/lineart-color/messenger.ce312b0.svg
nova://nova-web/webapp/img/social/lineart-color/gchat.b78f568.svg
nova://nova-web/webapp/img/social/lineart-color/telegram.267254c.svg
nova://nova-web/webapp/img/social/lineart-color/whatsapp.7f52fb4.svg
nova://nova-web/webapp/img/social/lineart-color/instagram.5118a74.svg
nova://nova-web/webapp/img/social/lineart-color/twitter.8aee2e2.svg
nova://nova-web/webapp/img/social/lineart-color/slack.148f3ab.svg
nova://nova-web/webapp/img/social/lineart-color/beeper.2c42cd0.svg
nova://nova-web/webapp/img/social/lineart-color/matrix.c7fa7e8.svg
nova://nova-web/webapp/img/social/lineart-color/discord.0d68c9a.svg
nova://nova-web/webapp/img/social/lineart-color/skype.ca8a916.svg
nova://nova-web/webapp/img/social/lineart-color/sms.ca23784.svg
nova://nova-web/webapp/img/social/lineart-color/android.51f1193.svg
nova://nova-web/webapp/img/social/lineart-color/imessage.3e28f6f.svg
nova://nova-web/webapp/img/social/lineart-color/signal.e61c8a1.svg
nova://nova-web/webapp/img/social/lineart-color/linkedin.7ac06b0.svg

So you could replace all icons on the space sidebar with something like this:

/* Beeper Space Sidebar - Hide Original Icons */

#beeperSpaceBar svg {
  display: none
}

/* Beeper Space Sidebar - Use Lineart Icons */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg) > div > div > div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Beeper Space Sidebar - Use Lineart Icons - Inbox */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/smart-inbox.04b2d4e.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Low Priority */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Archive */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Bookmarks */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/bookmarks.3f3eb77.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Facebook */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/messenger.1544eb2.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Instagram */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/instagram.e9184e9.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - iMessage */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-imessage16.11b6604.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/imessage.aedae37.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Twitter */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/twitter.972096c.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Telegram */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-telegram16.d011ded.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/telegram.77fa320.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Signal */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/signal.315d199.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - LinkedIn */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/linkedin.2297fef.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Discord */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-discord16.e91cca3.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/discord.6daf490.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Beeper */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/beeper.c685f80.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - WhatsApp */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/whatsapp.2210499.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Add Network */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart/add-space.b91886d.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Android SMS (contributed by @tobiah:beeper.com) */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/sms.ca23784.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Google Chat (contributed by @tobiah:beeper.com) */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-googlechat16.61657b2.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/gchat.bc14811.svg");
}
Before: After:
image image

IMO it's probably nicer to keep the 'original' new icons for the following though:

So we could modify our main 'hide original icons' CSS theme hack as follows, and then remove the extra rules from the above code that were setting the lineart svg's for these buttons:

/* Beeper Space Sidebar - Hide Original Icons */

#beeperSpaceBar svg:not(svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]):not(svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]):not(svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]):not(svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]):not(svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]) {
  display: none
}

Which will then end up looking something more like this ('second variation'), which IMO looks much nicer all around:

Original: First Variation: Second Variation:
image image image
0xdevalias commented 1 year ago

With the 'new' 'Beeper Space Sidebar', hide the floating 'open archive' button, and always show the floating 'Archive All Read Messages' button

Beeper Support Report

Reported to Beeper Support as DES-11233:

Sat with it a while, and I can definitely say that I still hate the floating 'archive' button in the inbox, so CSS hacks to hide it re-enabled.

Though it's kind of annoying that because the 'archive read messages' button 'expands' out from the archive button on hover, I now basically have no way to use that. I thought the fact that it would only show up when there were read messages in the inbox that could be archived would make me not hate it, as it would only be present when relevant, but in it's current state, I guess i'll never know.

My ideal scenario would be to have the 'archive read messages' button show up in the inbox only when there are messages that can be archived (eg. they are read, they aren't pinned, etc). Ideally this would also show a count, and/or a confirmation dialog that would show me which messages were going to be archived (and allow me to select which ones to archive/not). Instead of the dialog, this need could also probably be addressed by adding another 'inbox filter' that would show me 'archiveable' messages (similar to how the current 'unread' filter works); that way I can use the filter to see what would be archived before I click the button, or can use that filtered view to manually archive only the ones I want, while keeping the ones that I don't want to archive yet, but also don't want to have officially pinned.

I would also love for an inbox setting to disable the floating 'archive' button entirely, since it's redundant and annoying since we already have an 'archive' section on the new sidebar. I can hackily hide it with CSS, but that's not a great UX.

Since I am interested in the 'archive all read messages' button, but hate the redundant 'show archive' button; the way they are connected in the latest update (where 'archive all read' is only shown after hovering over the 'show archive' button) means that I basically have to have both of them, or none of them. That's super sub-optimal for my desired workflow, so it would be really great if something could be done to fix that.

CSS Hacks

Updates:

/* Beeper Space Sidebar - Collapsed - Hide Floating 'Open Archive' Button */

.mx_MatrixChat > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/archive16.2003809.svg"]) {
  display: none;
}

/* Beeper Space Sidebar - Show Floating 'Archive All Read Messages' Button */

.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  width: max-content !important;
}

.mx_MatrixChat > div > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  display: block !important;
}

.mx_MatrixChat > div > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  opacity: unset;
}

Caveats

The release notes that introduced this change stated that the 'Archive All Read Messages' button would only be visible when there were actually message that it could archive. I didn't test if that was true, but if it was, the CSS hacks here in their current form may break that aspect, and just make it always visible.

Screenshots

Before

Inbox with Sidebar Collapsed, Not Hovering

image

Inbox with Sidebar Collapsed, Hovering 'Open Archive'

image

Inbox with Sidebar Collapsed, Hovering 'Archive All Read Messages'

image

Inbox with Sidebar Opened, Not Hovering

image

Inbox with Sidebar Opened, Hovering

image

After

Inbox with Sidebar Collapsed, Not Hovering

image

Inbox with Sidebar Collapsed, Hovering 'Open Archive'

N/A, it's hidden now

Inbox with Sidebar Collapsed, Hovering 'Archive All Read Messages'

image

Inbox with Sidebar Opened, Not Hovering

image

Inbox with Sidebar Opened, Hovering

image

0xdevalias commented 1 year ago

Bonus Hacks - Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools

const el = $('#matrixchat > .mx_MatrixChat_wrapper > .mx_MatrixChat > .bp_LeftPanel > .bp_LeftPanel_contentWrapper > .bp_LeftPanel_content > .rooms')

const elProps = Object.getOwnPropertyNames(el);

const elReactFiberKey = elProps.filter(k => k.includes('__reactFiber'))
const elReactPropsKey = elProps.filter(k => k.includes('__reactProps'))

const elReactInternals = {
  reactFiber: el[elReactFiberKey],
  reactProps: el[elReactPropsKey],
}

//console.log(elReactInternals)

const UnreadList = elReactInternals.reactProps.children[3].props.children[0]
const ReadList = elReactInternals.reactProps.children[3].props.children[1]

console.log('Inbox Chats', UnreadList.props.unreads)
// (303) [Room, Room, ...]

console.log('Archived Chats', ReadList.props.rooms)
// (1633) [Room, Room, ...]
0xdevalias commented 1 year ago

Reduce the size of the 'new' 'Beeper Space Sidebar' + it's 'chat network' buttons

Background Context

Based on a user request in 'Beeper Community' chat, here are some quick (unrefined, could definitely be improved upon, particularly the CSS selectors used for targeting the elements) hacks for reducing/changing the size of the new 'Beeper Sidebar', and the network icons within it.

Would reducing the size of the sidebar/icons within it satisfy your need of not consuming the extra space? Or would that still be 'too much'?

😄 That would be better 👍

The image icon is 26 x 26px, the parent of that is 32 x 32px, the .spaceBar div seems to set the gap between the grid icons (so could probably make them 'tighter' with less space between), then the .bp_col div seems to set width to 55px

Those classes aren't the specific ones setting the widths/etc (as most of that seems to be happening in the CSS-in-JS generated classnames); but they should be roughly relevant enough to write some CSS selectors to target the relevant bits + reduce the overall size of the related elements

Beeper Support Report

N/A

Caveats

These are very quick/hacky rules (I would probably figure better CSS selectors for them since currently they are based on the CSS-in-JS selectors that are almost certainly going to change with future Beeper release versions.. but it might work well enough), and without spending much time tweaking the actual sizes to be 'just right' (as not really sure what would work best for you), here are some CSS hacks to mess around with the sidebar network icon sizes (you may need to use !important on some of the rules if they don't work directly when added to the 'custom CSS' section; I'm hacking these in devtools atm)

CSS Hacks

/* Sidebar */
._3dTltcKuNeSKUTCEM-UGN0._2BAyduJRAqtYY0FLUV2lT0 {
    width: 30px;
}

/* Sidebar - Buttons - 'Toggle Sidebar' - SVG Icon */
.YNfZXerLXxU4qXwy0a5gv svg {
    width: 15px;
    height: 15px;
}

/* Sidebar - Buttons*/
.ED6hnM59dIDcpfzGwRgcw {
  width: 15px;
  height: 15px;
}

/* Sidebar - Buttons - SVG Icons */
.ZQDbHi0qd3Vf1JPuEisR7 svg {
    width: 15px;
    height: 15px;
}

/* Sidebar - Buttons - Notfication Count Bubble */
.Yb_gdONE4knKPc_e7bgN3 {
    font-size: 8px;
    height: 10px;
    min-width: 10px;
    top: -6px;
    right: -10px;
}

Screenshots

It's a little hard to see the side by side in these images.. but notice how the 'Before' sidebar extends for '6 favourites + 6.5 chats' of height, whereas the 'After' only extends of '6 favourites + 3 chats' of height.

Before After
image image
0xdevalias commented 1 year ago

Hide Left Panel/Sidebar While Chat Is Open

Background Context

Based on a user request in 'Beeper Community' chat:

would it be possible, using custom CSS, to make the desktop app hide the left chat list when you open a chat (and comes back out when I hit ESC to close that chat)?

so that the UX kinda acts like mail clients. either I have the inbox open, or a chat. was curious how that'd feel like

Beeper Support Report

N/A

Caveats

N/A

CSS Hacks

/**********************************************/
/* Hide Left Panel/Sidebar While Chat Is Open */
/**********************************************/

.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > .bp_LeftPanel {
  display: none;
}

.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > div:has(.spaceBar) {
  display: none;
}

Screenshots

Before

Beeper's inbox/side panel are visible whether a chat is open or closed:

Screenshot 2023-05-30 at 10 21 43 am

After

Beeper's inbox/side panel are visible only when a chat is closed:

Chat Open: Screenshot 2023-05-30 at 10 25 41 am

Chat Closed: Screenshot 2023-05-30 at 10 26 12 am

0xdevalias commented 1 year ago

Change the min-width of the Left 'Inbox' Side Panel

Has anyone been able to decrease the minimum width for the left panel using custom CSS?

Via @ashirbhallalevine:beeper.com on Beeper Community chat:

body .bp_LeftPanel {
min-width: 200px;
 /* When I tested it I didn't need to change max-width, but Arjan seemed to when they used it, so YMMV */
 /* max-width: 200px; */
}
0xdevalias commented 1 year ago

Ensure full image preview is visible, rather than a zoomed part of it

Background Context

It annoyed me when images shared in chats with a certain aspect ratio ended up getting zoomed in to fill the space (and looking super weird in the process), rather than just being scaled down and showing the full content.

Beeper Support Report

N/A

Caveats

N/A

CSS Hacks

/* Ensure full image preview is visible, rather than a zoomed part of it */
.mx_EventTile_image .mx_MImageBody img.mx_MImageBody_thumbnail {
  object-fit: contain !important;
}

Screenshots

Before

image

After

image

0xdevalias commented 1 year ago

Change the colours of existing svg images embedded in the DOM

The following comes from a request from the Beeper Community chat.

Extends from some of the original sidebar work in: https://github.com/beeper/themes/issues/6#issuecomment-1539306021

The following rules allow you to target each path within an svg embedded in the DOM of the page, and then use CSS to customise properties like the colours/etc of the paths within that vector image.

For example, this changes the 'inbox' icon on the sidebar to be red and green (rather than it's default white/grey):

.spaceBar > .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] > path:nth-child(1) {
    fill: red;
}

.spaceBar > .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] > path:nth-child(2) {
    fill: green;
}

You could similarly target and customise other svg based images where the svg is directly embedded in the DOM.

Before:

image

After:

image

ashirbhallalevine commented 1 year ago

Beeper Spacebar Icon Modifications

With help from @0xdevalias, I put together the following code to make two modifications to the existing Beeper Spacebar bridge icons: removing white backgrounds and adjusting sizing to make all icons roughly the same size thereafter.

/* Spacebar Menu - Modify Icons */

/* Remove Inbox Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] > path:nth-child(1) {
    display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] > path:nth-child(2) {
    fill: white;
    fill-opacity: 1.0;
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] {
    width: 35px;
    height: 35px;
}

/* Remove Beeper Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"] > g > path:nth-child(1) {
    display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"] {
    width: 34px;
    height: 34px;
}

/* Remove Facebook Messenger Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"] > path:nth-child(1) {
    display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"] {
    width: 31px;
    height: 31px;
}

/* Remove Android SMS Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"] > path:nth-child(1) {
    display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"] {
    width: 37px;
    height: 37px;
}

/* Decrease Size Of iMessage Icon */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-imessage16.11b6604.svg"] {
    width: 25px;
    height: 25px;
}

/* Remove Bookmarks Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"] > path:nth-child(1) {
    display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"] > path:nth-child(2) {
    fill: white;
    fill-opacity: 1.0;
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"] {
    width: 36px;
    height: 36px;
}

/* Increase Size Of Add Network Icon */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/add-network16.1eb5cb1.svg"] {
    width: 30px;
    height: 30px;
}

The above custom CSS includes networks for which I have bridges connected, but the same format can be used for other bridge icons using the following list of SVG callouts:

svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]
svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]
svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]
svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]
svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]
svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]
svg[data-src="img/beeper/square-imessage16.11b6604.svg"]
svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]
svg[data-src="img/beeper/square-telegram16.d011ded.svg"]
svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]
svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]
svg[data-src="img/beeper/square-discord16.e91cca3.svg"]
svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]
svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]
svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]

Screenshots

Before

image

After

image

After With Beeper Midnight

image

0xdevalias commented 1 year ago

Hide the Pin/Unpin and/or 'Archive' buttons that appear on hover of each chat room in inbox

The following comes from a request from the Beeper Community chat.

Archive button:

.bp_LeftPanel .rooms div[data-type='bp_RoomTile'] div[aria-label='Archive'] {
  display: none;
}

Pin/Unpin button:

.bp_LeftPanel .rooms div[data-type='bp_RoomTile'] div[aria-label*='Pin'],
.bp_LeftPanel .rooms div[data-type='bp_RoomTile'] div[aria-label*='Unpin'] {
  display: none;
}

It relates to hiding these buttons here:

image

0xdevalias commented 1 year ago

Hide the help question mark above the left hand sidebar

The following comes from a request from the Beeper Community chat (Ref)

image

.mx_MatrixChat > .bp_LeftPanel > .bp_Header > .controls > div:has(svg[data-src="img/beeper/question-mark16.7154382.svg"]) {
  display: none;
}
0xdevalias commented 1 year ago

Hiding the white border to the right of the left hand sidebar

0882080

Doing this and adding a border-right to left side panel does the trick but is there a better way?

@SilverMarcs I just had a quick look, and I think targeting .mx_ResizeHandle is definitely the right approach. Both -webkit-box-shadow and box-shadow are essentially doing the same thing, just prefixed for older browser compatibility. In devtools, if I disable both of those styles, then the white border goes away:

image

Before: image

After: image

We can make this really obvious by changing the colour of the box-shadow there (eg. to red), and observing the results:

.mx_MatrixChat > .mx_ResizeHandle, .mx_RightPanel_ResizeWrapper .mx_ResizeHandle {
  box-shadow: #f00 1px 0px 0px 0px inset;
}

image

So I think you could just use the following rule (very similar to the one you had, but doesn't touch margin:

.mx_MatrixChat > .mx_ResizeHandle, .mx_RightPanel_ResizeWrapper .mx_ResizeHandle {
  -webkit-box-shadow: none;
  box-shadow: none;
}

Originally posted by @0xdevalias in https://github.com/beeper/themes/issues/10#issuecomment-1633450929

0xdevalias commented 1 year ago

Kinda hacky beeper "compact room list" css theme

The following comes from @j0lol from the Beeper Community chat

Before: image

After: image

image

image

0xdevalias commented 1 year ago

Hide the timestamp on messages

The following comes from a request from the Beeper Community chat.

Caveats

This is a quick hack, and it's possible there are unintended side effects and/or that a more explicit/better rule could be used to achieve this.

CSS Hacks

.mx_MessageBody .mx_MessageTimestamp {
  display: none;
}

Screenshots

Before

image

After

image

0xdevalias commented 1 year ago

Hide certain chats, chats by network, or entire networks from the unified inbox (while still showing in their specific network view)

Background Context

The following comes from a request from @zwilliams:beeper.com in the Beeper Community chat:

I'm just wondering if there's a way to customise the inbox to only show certain apps? I'd like the list of Beeper related things like the notes / help / updates / community to only be in the Beeper sub-section, and not the inbox.

Yes you can set certain services to not show up in the inbox. Click on the sprocket ➡️ click on chat networks. Select the network.... Click on the pull down menu and choose whether to show in inbox or not.

Found it, thank you! Seems the Beeper network isn't listed yet

You're correct, you can't do that for Beeper/Matrix

Okay hopefully it can be implemented in a future update.

Beeper Support Report

N/A

Caveats

CSS Hacks

Hide chat by title when not on specific network view

This little CSS selector hack let's us figure out if we're in the inbox or not:

$$('.bp_LeftPanel:has(svg[data-src="img/beeper/back16.024b7d1.svg"])')

This let's us target the chat in the inbox with title 'Beeper Community':

$$('div[data-type="bp_RoomTile"]:has(div[title="Beeper Community"])')

This will target the 'Beeper Community' when in the main inbox, but not in a 'sub-network' (eg. one that has a back button):

$$('.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(div[title="Beeper Community"])')

So this rule will hide it when in the inbox, while still showing it on the specific network tab:

.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(div[title="Beeper Community"]) {
  display: none;
}

And that same pattern could be used to hide any other arbitrary chat from the main inbox

Hide chat by network when not on specific network view

We could also target all chats of a specific network using something like the following:

$$('div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper)')
$$('div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_facebook)')

etc

These seem to be all the possible icon classes you could use to target in this way (in theme-dark.css):

.nv_BridgedIcon_facebook
.nv_BridgedIcon_googlechat, .nv_BridgedIcon_hangouts
.nv_BridgedIcon_telegram
.nv_BridgedIcon_whatsapp
.nv_BridgedIcon_instagram
.nv_BridgedIcon_twitter
.nv_BridgedIcon_slack
.nv_BridgedIcon_beeper
.nv_BridgedIcon_matrix
.nv_BridgedIcon_discord
.nv_BridgedIcon_skype
.nv_BridgedIcon_androidmessages
.nv_BridgedIcon_android-sms, .nv_BridgedIcon_androidsms
.nv_BridgedIcon_imessage, .nv_BridgedIcon_imessagecloud, .nv_BridgedIcon_imessage-sms, .nv_BridgedIcon_imessage-nosip, .nv_BridgedIcon_imessage-ios
.nv_BridgedIcon_signal
.nv_BridgedIcon_linkedin

Which could then be used to, for example, hide all of a specific network from your main inbox, while still allowing it to show on it's specific network filtered page:

$$('.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper)')

Which as a CSS rule would be:

.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper) {
  display: none;
}

Hide chat by title+network when not on specific network view

You could also combine those techniques so that you only hide a chat with a certain title, from a certain network, which might be helpful in some situations if you have chats with duplicate names, etc:

$$('.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper):has(div[title="Beeper Community"])')

Which as a CSS rule would be:

.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper):has(div[title="Beeper Community"]) {
  display: none;
}

De-emphasise chat by title+network when not on specific network view

A variation on this technique, instead of fully hiding the chat, we can just de-emphasise the chat using opacity: 0.5 or similar, like so:

/*****************************************************/
/* De-emphasise distracting chats - Beeper Community */
/*****************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title="Beeper Community"]) {
  opacity: 0.5;
}

/*******************************************************/
/* De-emphasise distracting chats - Beeper SDK Hackers */
/*******************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title="Beeper SDK Hackers"]) {
  opacity: 0.5;
}

Before image

After image

Matching partial title (rather than exact)

It's also possible to use CSS attribute selectors (which is what we are using here) to non-exactly match the title of the chat:

Based on this, we could match for example, any chat that contains the word Beeper (ignoring case):

/*********************************************/
/* De-emphasise distracting chats - *Beeper* */
/*********************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title*="Beeper"i]) {
  opacity: 0.5;
}

We could even combine some of these together, for example, matching any chat that contains the (case insensitive) word Beeper, as well as containing either of the (case insensitive) words Community and/or Hackers:

/***************************************************************/
/* De-emphasise distracting chats - *Beeper* Community/Hackers */
/***************************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title*="Beeper"i]):has(div[title*="Community"i], div[title*="Hackers"i]) {
  opacity: 0.5;
}
0xdevalias commented 1 year ago

Ensure 'Report a Problem' dialog doesn't take over the entire screen

Background Context

Ever since the 'Report a Problem' flow was redesigned to be a modal taking over the full screen with a blindingly bright purple background, I've kind of hated it and wished it would go back to how it was. Today it annoyed me enough to hack together some CSS rules to fix it again.

Beeper Support Report

I know I definitely reported this when the new redesign first came out, but I have no clue what the support report number for it was now.

Caveats

N/A

CSS Hacks

/******************************************************************/
/* Ensure 'report bug' dialog doesn't take over the entire screen */
/******************************************************************/
#mx_Dialog_Container div[aria-describedby="report_bug"] {
  /* Don't take up the entire screen */
  width: fit-content;
  height: fit-content;
  padding: 20px;
  border-radius: 20px;

  /* Center the dialog */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Screenshots

Before

Main Dialog Menu: image

Report a Problem: image

Share Feedback: image

After

Main Dialog Menu: image

Report a Problem: image

Share Feedback: image

Your Report Was Sent: image

j0lol commented 1 year ago

Kinda hacky beeper "compact room list" css theme

Updated here for web users: https://userstyles.world/style/11528/beeper-compact-sidebar and the gist is still updated for desktop users :)

eigenstil commented 1 year ago

Improving UI/UX for users with lots of favourites

(Reported to Beeper Support as DES-10976 (and probably at least one other time before that))

Reduces the size of the user avatars in the favourites section of the unified inbox, sets a max-height to the favourites area, and makes the overflow vertically scrollable.

/* Inbox - Favourites */

.rooms > .favourites {
  /* Custom Variables */
  --devalias-fav-section-max-height: 30vh;
  --devalias-fav-width: 40px;
  --devalias-fav-height: 40px;
  --devalias-fav-avatar-width: 30px;
  --devalias-fav-avatar-height: 30px;
  --devalias-fav-avatar-font-size: 17px;
}

/* .bp_LeftPanel .rooms .favourites__icons {
  TODO: This is where display: grid is set.. can we somehow make it more compact so it automagically fits the tiles on the row as space allows?
}*/

.rooms > .favourites > .favourites__icons > .favourites__tiles {
  max-height: var(--devalias-fav-section-max-height, none) !important;
  overflow: auto;
}

.rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row > span {  
  --fav-width: var(--devalias-fav-width, 40px) !important;
}

.bp_LeftPanel .rooms .favourites_avatar {
  height: var(--devalias-fav-height, 60px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small {
  height: var(--devalias-fav-height, 48px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_image {
  width: var(--devalias-fav-avatar-width, 44px) !important;
  height: var(--devalias-fav-avatar-height, 44px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_initial {
  font-size: var(--devalias-fav-avatar-font-size, 19.8px) !important;
  width: var(--devalias-fav-avatar-width, 44px) !important;
  line-height: var(--devalias-fav-avatar-width, 44px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline .outline-details {
  width: var(--devalias-fav-width, var(--fav-width, 45px)) !important;
}

This doesn't seem to work properly anymore. The height of the avatars are changing, but this results in a lot of whitespace beetween the rows now. When I add this line to the code it starts working (but with some overlapping which could be fixed by tweaking all the other values):

.rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row{
    height: 40px !important;
}
ShakeebIVIS commented 3 months ago

Amazing! That's a lot of good hacks. Any idea how to change the Beeper app Icon? The Beeper AppImage icon is ugly.

0xdevalias commented 3 months ago

Any idea how to change the Beeper app Icon? The Beeper AppImage icon is ugly.

@ShakeebIVIS Sounds like it's something that likely isn't customizable from CSS/etc:

duoi commented 3 months ago

WhatsApp-like coloring of names in group conversations rather than coloring the message box:

  --message-color-lightness: 100%;
  --message-bg-saturation: 0%;
  --message-bg-lightness: 15%;
  --message-bg-opacity: 1;

  --chatview__message_sender_name__saturation: 70%;
  --chatview__message_sender_name__lightness: 50%;
  --chatview__message_sender_name__alpha: 1.0;
  --chatview__message_sender_name__fontcolor: var(--avatar-hue);
image