☰

Quip

Fix formatting and hide the conversation sidebar on Quip pages

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

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