☰

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