☰

Quip

Fix formatting and hide the conversation sidebar on Quip pages

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

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