☰

Quip

Fix formatting and hide the conversation sidebar on Quip pages

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

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