Fix formatting and hide the conversation sidebar on Quip pages
// ==UserScript==
// @name Quip
// @namespace http://tampermonkey.net/
// @version 3.8
// @description Fix formatting and hide the conversation sidebar on Quip pages
// @author Ping
// @match https://*.quip.com/*
// @grant none
// ==/UserScript==
// Goal: Focus on the content. Here's what this userscript does to Quip:
// - Makes all formatting simple and uniform (Roboto on all pages)
// - Makes headings easier to see (dark red)
// - Hides the gigantic conversation sidebar when you first load any page
// - Prevents the backtick key from horribly cycling through 9 formats
// - Stops Quip from auto-bolding list items that have subitems
// - Reduces the enormous wasteful margins around the page
// - Hides the superfluous annoying bubble with the formatting buttons
// - Shrinks the huge yellow chat button to a reasonable size
(function() {
'use strict';
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
body,
body div#app article div.content,
body div#app article .section[data-section-type="1"] ul li,
body div#app article .section[data-section-type="1"] ul li:before,
body div#app .navigation-controller .nav-path input.nav-path-title,
body div#app .document-thread div,
body div#app .document-thread div li,
body div#app .document-chat-thread .thread-message-document-body div,
body div#app .document-chat-thread .thread-message-document-body div li,
body div#app .document-chat-thread .thread-message-document-body div p,
body div#app .search-input input,
.document-chat-thread-input .text-box,
.button-text,
body .document-chat div,
body .document-chat p,
body .document-chat .document-inline-edit p,
body .document-chat li {
font-family: Roboto, Arial, "Quip Glyphs";
font-weight: 400;
font-size: 13px;
line-height: 1.45 !important;
}
body .document-chat span,
body .document-chat h1,
body .document-chat h2,
body .document-chat h3 {
font-family: Roboto, Arial, "Quip Glyphs";
font-weight: 400;
}
/* === toolbar area === */
/* folder path */
#app .navigation-controller .nav-path input.nav-path-title {
text-align: left;
}
#app .navigation-controller-path {
justify-content: flex-start;
padding: 0 18px;
height: 18px !important;
}
/* "External" warning */
#app .navigation-controller-path .button {
height: 15px !important;
padding: 0 4px !important;
margin-top: -1px;
}
#app .navigation-controller-path .button .button-text {
font-size: 12px !important;
}
/* toolbar buttons */
.button, #app .nav-search-global {
height: 22px !important;
padding: 0 4px !important;
}
.thread-find-bar-search-container {
height: 22px;
}
.button-icon {
height: 16px !important;
}
.button-text {
font-size: 13px !important;
}
#app .navigation-controller-toolbar .parts-profile-picture img {
width: 22px !important;
height: 22px !important;
margin-top: 3px;
}
/* toolbar button area */
#app .navigation-controller-toolbar .navigation-controller-path + div {
opacity: 0.3;
}
#app .navigation-controller-toolbar:hover .navigation-controller-path + div {
opacity: 1;
}
#app .navigation-controller-toolbar {
height: 40px !important;
}
/* horizontal rule along the bottom of the toolbar */
.navigation-controller-toolbar:not(.has-notification-bar):after {
background: transparent;
}
/* document area, below the toolbar */
#app .navigation-controller-body {
top: 40px !important;
}
.parts-toolbar {
padding: 0 18px !important;
}
#app .navigation-controller-path + div {
top: 16px !important;
}
/* === conversation/history area === */
body .document-chat .parts-screen-body {
box-shadow: inset 0 1px 2px 0px rgba(0,0,0,0.2);
bottom: 32px !important;
}
body .thread-message {
padding: 0 8px;
}
body .thread-message-document-body div ul {
padding-left: 12px;
}
body .document-thread div.header div {
font-size: 11px;
}
body .message-list .thread-message:not(:first-of-type) {
padding-top: 4px;
}
body .message-list .thread-message {
padding-left: 8px;
padding-bottom: 8px;
}
body .thread-message-comment-icon {
width: 15px;
height: 15px;
top: -12px;
left: -25px;
}
body .thread-message-comment-icon .count {
line-height: 15px;
font-size: 10px;
}
/* profile icons */
.thread-message-picture {
width: 22px;
margin-right: 4px;
}
.thread-message-picture > div > div {
border-radius: 11px !important;
}
.thread-message-picture > div,
.thread-message-picture img {
width: 22px !important;
height: 22px !important;
}
/* history snippets */
.thread-message-quote {
margin-top: 0;
padding-left: 8px;
padding-top: 0;
padding-bottom: 0;
}
body .document-chat div.thread-message-quote-links {
margin-top: 2px;
font-size: 11px;
}
.thread-message-button {
padding-top: 2px;
width: 12px;
height: 12px;
}
/* popup chat window */
.parts-panel .navigation-controller-toolbar {
height: 32px !important;
}
.parts-panel .parts-toolbar {
padding: 0 8px !important;
}
.parts-panel .navigation-controller-body {
margin-top: 32px !important;
}
.parts-panel .parts-screen-body {
margin-bottom: 32px !important;
}
.parts-panel .document-chat-thread-footer {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* chat box */
.document-chat-thread-input .input .text-box {
font-size: 13px;
line-height: 1.45;
padding: 2px 6px;
}
.thread-message-input-attach, .thread-message-input-emoji {
width: 12px;
height: 12px;
margin: 9px 4px 0 0;
}
.thread-message-input-send {
margin: 4px 0;
}
.parts-screen-footer {
height: 32px !important;
}
.thread-chat-thread-footer {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* === overall margins === */
.parts-screen-body {
padding: 0 !important;
}
.parts-screen-children-wrapper {
padding: 6px 0 !important;
}
body div#app .document article.article {
padding: 0 18px 18px;
}
body div#app article .content br {
padding-top: 0.2em;
display: block;
}
body div#app article .section[data-section-style="6"] ul li:before {
font-size: inherit;
}
body div#app .document article {
padding: 40px 30px;
}
/* links */
.document a, .link, lnk, .document .article control a.content {
color: #08c;
}
/* HL: Main page heading */
body div#app article .section[data-section-style="1"],
body .document-thread div h1 {
margin: 0 0 16px;
}
body div#app article .section[data-section-style="1"]>.content,
body .document-thread div h1,
body .document-chat h1 {
font-size: 28px;
font-weight: 400;
}
/* HM: Section heading */
body div#app article .section[data-section-style="2"],
body .document-thread div h2 {
margin: 20px 0 16px;
}
body div#app article .section[data-section-style="2"]>.content,
body .document-thread div h2 {
font-size: 20px;
font-weight: normal;
color: #800;
border-bottom: 1px solid #ccc;
}
body .document-chat h2 {
font-size: 20px;
font-weight: normal;
}
/* HS: Subsection heading */
body div#app article .section[data-section-style="3"],
body .document-thread div h3 {
margin: 24px 0 12px;
}
body div#app article .section[data-section-style="3"]>.content,
body .document-thread div h3 {
color: #800;
font-size: 15px;
font-weight: bold;
text-transform: none;
}
body .document-chat h3 {
font-size: 15px;
font-weight: bold;
}
/* Code block */
div.document code, div.document pre, div.thread-thumbnail-document code,
body div#app article .section[data-section-style="4"]>.content,
body div#app article .section[data-section-style="0"]>.content code,
body .document-thread div pre {
font-family: "Lucida Sans Typewriter", Monaco, Menlo, Courier, monospace, "Quip Glyphs";
font-size: 12px;
font-style: normal;
text-shadow: none;
color: #070;
}
body div#app article .section[data-section-style="4"]>.content {
padding: 3px 3px 3px 24px;
}
body div#app article .section[data-section-style="0"]>.content code {
display: inline-block;
padding: 1px 2px;
margin: 0 1px;
border-radius: 2px;
}
/* Bulleted list section */
body div#app article .section[data-section-style="5"] {
margin: 12px 0 6px;
}
/* Numbered list section */
body div#app article .section[data-section-style="6"] {
margin: 12px 0 6px;
}
/* Normal text */
body div#app article .section[data-section-style="0"]>.content {
font-size: 13px;
}
/* Block quote */
body div#app article .section[data-section-style="16"] {
margin-top: -0.3em;
margin-bottom: 0;
}
body div#app article .section[data-section-style="16"]>.content {
padding-left: 40px;
padding-right: 40px;
color: #888;
font-size: 12px;
font-weight: 300;
font-style: italic;
}
body div#app article .section[data-section-style="16"]>.content:before {
background: none;
}
body div#app article .section[data-section-style="16"]>.content u {
text-transform: uppercase;
color: #0a4;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-decoration: none;
margin-left: -2em;
padding-right: 0.7em;
}
div#toc-div ul li a, div ul.listtype-comment li span {
font-weight: 300;
line-height: 1.4em;
}
span#sharesummary {
background: none !important;
}
div.toc-entry span b {
font-weight: normal;
}
div.toc-entry {
margin-bottom: 0.5em;
}
#padeditor #add-to-collection {
background: none;
border: none;
}
span.user-caret {
left: 0px !important;
}
span.user-caret-offscreen-top, span.user-caret-offscreen-bottom {
left: 64px !important;
}
span.user-caret img {
display: none;
}
span.user-caret-initials {
padding: 3px;
}
/* Get rid of the style buttons in the margin; you can use the menu instead. */
div.editor-stylebar.visible {
display: none;
}
.annotation-gutter-icon {
left: -1px;
margin-top: -2px;
width: 22px;
height: 22px;
background-size: 22px 22px;
padding: 1px 1px 0 0;
}
.annotation-gutter-icon.numbered {
font-size: 10px;
line-height: 19px;
}
/* Fix alignment of the buttons by the right margin. */
.figure-gutter-display {
left: -24px;
}
/* Chat bubbles */
.message-bubble .chat-bubble, .message-bubble .chat-card {
font-size: 12px;
font-weight: 400;
line-height: 15px;
}
.chat-bubble .chat-bubble-bg {
border-radius: 6px;
}
.chat-bubble .chat-bubble-body {
padding: 6px;
}
.app .document-thread .outline-inline-container {
padding-right: 0;
}
.app .document-thread .outline-inline-container>.editor-outline {
border-radius: 0;
border-right: none;
margin: 60px 0 0 0;
padding: 4px 0;
}
/* Document outline box */
.editor-outline .editor-outline-section {
margin: 4px 8px;
}
.editor-outline .editor-outline-section[data-section-style="2"],
.editor-outline .editor-outline-section[data-section-style="3"] {
font-weight: normal;
color: #800 !important;
text-transform: none;
}
.app .document-thread .outline-inline-container>.editor-outline .editor-outline-title {
display: none;
}
`;
head.appendChild(style);
// Disable the annoying backtick key.
document.body.addEventListener('keydown', function(event) {
if (event.keyCode === 192 && !event.shiftKey && !event.ctrlKey) {
console.log('blocked keydown event for backtick');
event.stopPropagation();
event.preventDefault();
return false;
}
}, true);
// Hide the conversation sidebar.
function hide_conversation() {
var button = document.querySelector('.icon-hide-conversation') ||
document.querySelector('.document-chat-hide');
if (button) {
button.click();
} else {
window.setTimeout(hide_conversation, 100);
}
}
hide_conversation();
})();