Skip to content

Instantly share code, notes, and snippets.

@fortserious
Last active March 21, 2023 20:14
Show Gist options
  • Save fortserious/86a508a1fd2e52eb4cd646b5b446e2db to your computer and use it in GitHub Desktop.
Save fortserious/86a508a1fd2e52eb4cd646b5b446e2db to your computer and use it in GitHub Desktop.
right side gmail chat
// ==UserScript==
// @name Gmail Persistent Sidebar (Right-side)
// @description Keeps email, chat and spaces sidebar always visible.
// @version 1.0.3
// @author icetbr (with modifications from ross doran)
// @icon https://www.google.com/s2/favicons?sz=64&domain=gmail.com
// @license MIT
// @namespace https://github.com/icetbr/userscripts
// @match https://mail.google.com/*
// @grant none
// ==/UserScript==
var style$1 = /*css*/`
div[role=navigation]:before {
background-color: unset;
}
div[role=navigation] {
background-color: unset !important;
top: -25px;
position: absolute;
}
div[jscontroller=F3Q5Qb] div[role=heading] {
display: none;
}
div[jscontroller=FZ9aJ],
div[jscontroller=m50PKc],
div[jscontroller=m3Afm] {
display: none;
}
.nH.aqk.aql.bkL {
display: grid;
grid-template-columns: 250px auto 250px 0;
grid-template-rows: 400px 1fr 200px;
grid-column-gap: 0px;
grid-row-gap: 0px;
/*! overflow: hidden; */
}
.T-I.T-I-KE.L3
{
color: white;
}
.T-I.T-I-KE.L3::before, .arL .L3::before, .arM .L3::before
{
background-image: url('https://www.gstatic.com/images/icons/material/colored_icons/1x/create_32dp.png');
}
/* sidebar */
div[role=navigation] { grid-area: 1 / 3 / 4 / 4; }
/* inbox menu */
div[jscontroller=nwtiKd] { grid-area: 1 / 1 / 4 / 2; }
/* chat */
div[jscontroller=Px22Mb] { grid-area: 1 / 3 / 3 / 4; }
/* spaces */
div[jscontroller=RhNKdd] { grid-area: 3 / 3 / 4 / 4; }
.nH.bkK { grid-area: 1 / 2 / 4 / 3; }
.nH.aUx { grid-area: 1 / 4 / 4 / 5; }
/* chat/space/email buttons */
div[jsname=Sz79uf], div[jscontroller=eIu7Db] {
height: 39px !important;
background-color: transparent !important;
font-weight: bold !important;
}
.aic {
height: 40px;
}
/* email don't know what */
.nM > :first-child {
display: none;
}
`;
const $ = (selector, parent = document) => parent.querySelector(selector),
el = (name, attrs) => Object.assign(document.createElement(name), attrs),
style = styles => el('style', { type: 'text/css', textContent: styles }),
addStyle = styles => document.body.append(style(styles)),
waitForEl = selector => new Promise(resolve => {
if ($(selector)) return resolve($(selector));
const observer = new MutationObserver(() => {
if (!$(selector)) return;
resolve($(selector));
observer.disconnect();
});
observer.observe(document.body, { childList: true, subtree: true });
return observer;
});
addStyle(style$1);
var keepVisible = el => () => !el.classList.contains('apV') && el.classList.add('apV');
var observe = el => new MutationObserver(keepVisible(el)).observe(el, { attributes: true });
waitForEl('div[jscontroller=nwtiKd]').then(observe);
waitForEl('div[jscontroller=Px22Mb]').then(observe);
waitForEl('div[jscontroller=RhNKdd]').then(observe);
@fortserious
Copy link
Author

A modification of icetbr's excellent Persistent Gmail Bar script. Modifies grid-area values to shift the persistent sidebar to the right side of the page. Original script:

https://openuserjs.org/scripts/icetbr/Gmail_Persistent_Sidebar

@fortserious
Copy link
Author

v1.0.2 - Restored inbox menu to the left side, while rightside occupies the bottom right side of the menu. Good enough for me!

@fortserious
Copy link
Author

v1.0.3 - I lied, it wasn't good enough. Now the chat stretches from the top of the bar all the way to the bottom, and spaces is confined to the bottom-right. Order is restored to the universe.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment