☰

Quip

Fix formatting and hide the conversation sidebar on Quip pages

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

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