☰

Quip

Fix formatting and hide the conversation sidebar on Quip pages

当前为 2017-02-16 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Quip
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.5
  5. // @description  Fix formatting and hide the conversation sidebar on Quip pages
  6. // @author       Ping
  7. // @match        https://*.quip.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. // Goal: Focus on the content.  Here's what this userscript does to Quip:
  12. //   - Makes all formatting simple and uniform (Roboto on all pages)
  13. //   - Makes headings easier to see (dark red)
  14. //   - Hides the gigantic conversation sidebar when you first load any page
  15. //   - Prevents the backtick key from horribly cycling through 9 formats
  16. //   - Stops Quip from auto-bolding list items that have subitems
  17. //   - Reduces the enormous wasteful margins around the page
  18. //   - Hides the superfluous annoying bubble with the formatting buttons
  19. //   - Shrinks the huge yellow chat button to a reasonable size
  20.  
  21. (function() {
  22.     'use strict';
  23.  
  24.     var head = document.getElementsByTagName('head')[0];
  25.     var style = document.createElement('style');
  26.     style.type = 'text/css';
  27.     style.innerHTML = `
  28. body,
  29. body div#app article div.content,
  30. body div#app article .section[data-section-type="1"] ul li,
  31. body div#app article .section[data-section-type="1"] ul li:before,
  32. body div#app .navigation-controller .nav-path input.nav-path-title,
  33. body div#app .document-thread div,
  34. body div#app .document-thread div li,
  35. body div#app .jetson-chat-thread .thread-message-document-body div,
  36. body div#app .jetson-chat-thread .thread-message-document-body div li,
  37. body div#app .jetson-chat-thread .thread-message-document-body div p,
  38. body div#app .search-input input,
  39. .jetson-chat-thread-input .text-box,
  40. .jetson-button-text,
  41. body .jetson-document-chat div,
  42. body .jetson-document-chat span,
  43. body .jetson-document-chat h1,
  44. body .jetson-document-chat h2,
  45. body .jetson-document-chat h3 {
  46.     font-family: Roboto, Arial, "Quip Glyphs";
  47.     font-weight: 400;
  48.     font-size: 13px;
  49.     line-height: 1.45;
  50. }
  51.  
  52. /* === toolbar area === */
  53.  
  54. /* folder path */
  55. #app .navigation-controller .nav-path input.nav-path-title {
  56.     text-align: left;
  57. }
  58. #app .navigation-controller-path {
  59.     justify-content: flex-start;
  60.     padding: 0 18px;
  61.     height: 18px !important;
  62. }
  63.  
  64. /* "External" warning */
  65. #app .navigation-controller-path .jetson-button {
  66.     height: 16px !important;
  67.     padding: 0 4px !important;
  68. }
  69.  
  70. /* toolbar buttons */
  71. .jetson-button, #app .nav-global-search {
  72.     height: 22px !important;
  73.     padding: 0 4px !important;
  74. }
  75. .jetson-button-icon {
  76.     height: 16px !important;
  77. }
  78. .jetson-button-text {
  79.     font-size: 13px !important;
  80. }
  81. #app .navigation-controller-toolbar .parts-profile-picture img {
  82.     width: 22px !important;
  83.     height: 22px !important;
  84.     margin-top: 3px;
  85. }
  86.  
  87. /* toolbar button area */
  88. #app .navigation-controller-toolbar .navigation-controller-path + div {
  89.     opacity: 0.3;
  90. }
  91. #app .navigation-controller-toolbar:hover .navigation-controller-path + div {
  92.     opacity: 1;
  93. }
  94. #app .navigation-controller-toolbar {
  95.     height: 40px !important;
  96. }
  97.  
  98. /* horizontal rule along the bottom of the toolbar */
  99. .navigation-controller-toolbar:not(.has-notification-bar):after {
  100.     background: transparent;
  101. }
  102.  
  103. /* document area, below the toolbar */
  104. #app .navigation-controller-body {
  105.     top: 40px !important;
  106. }
  107.  
  108. .parts-toolbar {
  109.     padding: 0 18px !important;
  110. }
  111.  
  112. #app .navigation-controller-path + div {
  113.     top: 16px !important;
  114. }
  115.  
  116. /* === conversation/history area === */
  117.  
  118. body .jetson-document-chat .parts-screen-body {
  119.     box-shadow: inset 0 1px 2px 0px rgba(0,0,0,0.2);
  120.     bottom: 32px !important;
  121. }
  122.  
  123. body .thread-message-document-body div ul {
  124.     padding-left: 12px;
  125. }
  126.  
  127. body .document-thread div.header div {
  128.     font-size: 11px;
  129. }
  130. body .message-list .thread-message:not(:first-of-type) {
  131.     padding-top: 4px;
  132. }
  133. body .message-list .thread-message {
  134.     padding-left: 8px;
  135.     padding-bottom: 8px;
  136. }
  137. body .thread-message-comment-icon {
  138.     width: 15px;
  139.     height: 15px;
  140.     top: -12px;
  141.     left: -25px;
  142. }
  143. body .thread-message-comment-icon .count {
  144.     line-height: 15px;
  145.     font-size: 10px;
  146. }
  147.  
  148. /* profile icons */
  149. .thread-message-picture {
  150.     width: 22px;
  151.     margin-right: 4px;
  152. }
  153. .thread-message-picture > div > div {
  154.     border-radius: 11px !important;
  155. }
  156. .thread-message-picture > div,
  157. .thread-message-picture img {
  158.     width: 22px !important;
  159.     height: 22px !important;
  160. }
  161.  
  162. /* history snippets */
  163. .thread-message-quote {
  164.     margin-top: 0;
  165.     padding-left: 8px;
  166.     padding-top: 0;
  167.     padding-bottom: 0;
  168. }
  169. .thread-message-quote-links {
  170.     margin-top: 4px;
  171.     font-size: 11px;
  172. }
  173. .thread-message-button {
  174.     padding-top: 2px;
  175.     width: 12px;
  176.     height: 12px;
  177. }
  178.  
  179. /* popup chat window */
  180. .parts-panel .navigation-controller-toolbar {
  181.     height: 32px !important;
  182. }
  183.  
  184. .parts-panel .parts-toolbar {
  185.     padding: 0 8px !important;
  186. }
  187.  
  188. .parts-panel .navigation-controller-body {
  189.     margin-top: 32px !important;
  190. }
  191. .parts-panel .jetson-chat-thread .parts-screen-body {
  192.     margin-bottom: 32px !important;
  193. }
  194. .parts-panel .jetson-chat-thread-footer {
  195.     padding-left: 8px !important;
  196.     padding-right: 8px !important;
  197. }
  198.  
  199.  
  200. /* chat box */
  201. .jetson-chat-thread-input .input .text-box {
  202.     font-size: 13px;
  203.     line-height: 1.45;
  204.     padding: 2px 6px;
  205. }
  206.  
  207. .message-input-jetson-attach, .message-input-jetson-emoji {
  208.     width: 12px;
  209.     height: 12px;
  210.     margin-right: 2px;
  211.     margin-top: 4px;
  212. }
  213.  
  214. .parts-screen-footer {
  215.     height: 32px !important;
  216. }
  217.  
  218. .jetson-chat-thread-footer {
  219.     padding-left: 12px !important;
  220.     padding-right: 12px !important;
  221. }
  222.  
  223. /* === overall margins === */
  224.  
  225. .parts-screen-body, .parts-screen-children-wrapper {
  226.     padding: 0 !important;
  227. }
  228. body div#app .document article.article {
  229.     padding: 0 18px 18px;
  230. }
  231.  
  232. body div#app article .content br {
  233.     padding-top: 0.2em;
  234.     display: block;
  235. }
  236.  
  237. body div#app article .section[data-section-style="6"] ul li:before {
  238.     font-size: inherit;
  239. }
  240.  
  241. body div#app .document article {
  242.     padding: 40px 30px;
  243. }
  244.  
  245.  
  246. /* links */
  247. .document a, .link, lnk, .document .article control a.content {
  248.     color: #08c;
  249. }
  250.  
  251. /* HL: Main page heading */
  252. body div#app article .section[data-section-style="1"],
  253. body .document-thread div h1 {
  254.     margin: 0 0 16px;
  255. }
  256.  
  257. body div#app article .section[data-section-style="1"]>.content,
  258. body .document-thread div h1,
  259. body .jetson-document-chat h1 {
  260.     font-size: 28px;
  261.     font-weight: 400;
  262. }
  263.  
  264. /* HM: Section heading */
  265. body div#app article .section[data-section-style="2"],
  266. body .document-thread div h2 {
  267.     margin: 20px 0 16px;
  268. }
  269.  
  270. body div#app article .section[data-section-style="2"]>.content,
  271. body .document-thread div h2 {
  272.     font-size: 20px;
  273.     font-weight: normal;
  274.     color: #800;
  275.     border-bottom: 1px solid #ccc;
  276. }
  277.  
  278. body .jetson-document-chat h2 {
  279.     font-size: 20px;
  280.     font-weight: normal;
  281. }
  282.  
  283.  
  284. /* HS: Subsection heading */
  285. body div#app article .section[data-section-style="3"],
  286. body .document-thread div h3 {
  287.     margin: 24px 0 12px;
  288. }
  289.  
  290. body div#app article .section[data-section-style="3"]>.content,
  291. body .document-thread div h3 {
  292.     color: #800;
  293.     font-size: 15px;
  294.     font-weight: bold;
  295.     text-transform: none;
  296. }
  297.  
  298. body .jetson-document-chat h3 {
  299.     font-size: 15px;
  300.     font-weight: bold;
  301. }
  302.  
  303. /* Code block */
  304. div.document code, div.document pre, div.thread-thumbnail-document code,
  305. body div#app article .section[data-section-style="4"]>.content,
  306. body div#app article .section[data-section-style="0"]>.content code,
  307. body .document-thread div pre {
  308.     font-family: "Lucida Sans Typewriter", Monaco, Menlo, Courier, monospace, "Quip Glyphs";
  309.     font-size: 12px;
  310.     text-shadow: none;
  311.     color: #070;
  312. }
  313.  
  314. body div#app article .section[data-section-style="4"]>.content {
  315.     padding: 3px 3px 3px 24px;
  316. }
  317.  
  318. body div#app article .section[data-section-style="0"]>.content code {
  319.     display: inline-block;
  320.     padding: 1px 2px;
  321.     margin: 0 1px;
  322.     border-radius: 2px;
  323. }
  324.  
  325. /* Bulleted list section */
  326. body div#app article .section[data-section-style="5"] {
  327.     margin: 12px 0 6px;
  328. }
  329.  
  330. /* Numbered list section */
  331. body div#app article .section[data-section-style="6"] {
  332.     margin: 12px 0 6px;
  333. }
  334.  
  335. /* Normal text */
  336. body div#app article .section[data-section-style="0"]>.content {
  337.     font-size: 13px;
  338. }
  339.  
  340. /* Block quote */
  341. body div#app article .section[data-section-style="16"] {
  342.     margin-top: -0.3em;
  343.     margin-bottom: 0;
  344. }
  345.  
  346. body div#app article .section[data-section-style="16"]>.content {
  347.     padding-left: 8em;
  348.     color: #888;
  349.     font-size: 12px;
  350.     font-weight: 300;
  351.     font-style: italic;
  352. }
  353.  
  354. body div#app article .section[data-section-style="16"]>.content:before {
  355.     background: none;
  356. }
  357.  
  358. body div#app article .section[data-section-style="16"]>.content u {
  359.     text-transform: uppercase;
  360.     color: #0a4;
  361.     font-size: 12px;
  362.     font-style: normal;
  363.     font-weight: normal;
  364.     text-decoration: none;
  365.     margin-left: -2em;
  366.     padding-right: 0.7em;
  367. }
  368.  
  369. div#toc-div ul li a, div ul.listtype-comment li span {
  370.     font-weight: 300;
  371.     line-height: 1.4em;
  372. }
  373.  
  374. span#sharesummary {
  375.     background: none !important;
  376. }
  377.  
  378. div.toc-entry span b {
  379.     font-weight: normal;
  380. }
  381.  
  382. div.toc-entry {
  383.     margin-bottom: 0.5em;
  384. }
  385.  
  386. #padeditor #add-to-collection {
  387.     background: none;
  388.     border: none;
  389. }
  390.  
  391. span.user-caret {
  392.     left: 0px !important;
  393. }
  394.  
  395. span.user-caret-offscreen-top, span.user-caret-offscreen-bottom {
  396.     left: 64px !important;
  397. }
  398.  
  399. span.user-caret img {
  400.     display: none;
  401. }
  402.  
  403. span.user-caret-initials {
  404.     padding: 3px;
  405. }
  406.  
  407. /* Get rid of the style buttons in the margin; you can use the menu instead. */
  408. div.editor-stylebar.visible {
  409.     display: none;
  410. }
  411.  
  412. .annotation-gutter-icon {
  413.     left: -1px;
  414.     margin-top: -2px;
  415.     width: 22px;
  416.     height: 22px;
  417.     background-size: 22px 22px;
  418.     padding: 1px 1px 0 0;
  419. }
  420.  
  421. .annotation-gutter-icon.numbered {
  422.     font-size: 10px;
  423.     line-height: 19px;
  424. }
  425.  
  426. /* Chat bubbles */
  427. .message-bubble .chat-bubble, .message-bubble .chat-card {
  428.     font-size: 12px;
  429.     font-weight: 400;
  430.     line-height: 15px;
  431. }
  432.  
  433. .chat-bubble .chat-bubble-bg {
  434.     border-radius: 6px;
  435. }
  436.  
  437. .chat-bubble .chat-bubble-body {
  438.     padding: 6px;
  439. }
  440.  
  441. .app .document-thread .outline-inline-container {
  442.     padding-right: 0;
  443. }
  444.  
  445. .app .document-thread .outline-inline-container>.editor-outline {
  446.     border-radius: 0;
  447.     border-right: none;
  448.     margin: 60px 0 0 0;
  449.     padding: 4px 0;
  450. }
  451.  
  452. /* Document outline box */
  453. .editor-outline .editor-outline-section {
  454.     margin: 4px 8px;
  455. }
  456.  
  457. .editor-outline .editor-outline-section[data-section-style="2"],
  458. .editor-outline .editor-outline-section[data-section-style="3"] {
  459.     font-weight: normal;
  460.     color: #800 !important;
  461.     text-transform: none;
  462. }
  463.  
  464. .app .document-thread .outline-inline-container>.editor-outline .editor-outline-title {
  465.     display: none;
  466. }
  467. `;
  468.     head.appendChild(style);
  469.  
  470.     // Disable the annoying backtick key.
  471.     document.body.addEventListener('keydown', function(event) {
  472.         if (event.keyCode === 192) {
  473.             console.log('blocked keydown event for backtick');
  474.             event.stopPropagation();
  475.             event.preventDefault();
  476.             return false;
  477.         }
  478.     }, true);
  479.  
  480.     // Hide the conversation sidebar.
  481.     function hide_conversation() {
  482.         var button = document.querySelector('.icon-hide-conversation') ||
  483.             document.querySelector('.jetson-document-chat-hide');
  484.         if (button) {
  485.             button.click();
  486.         } else {
  487.             window.setTimeout(hide_conversation, 100);
  488.         }
  489.     }
  490.     hide_conversation();
  491. })();