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.7
  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, .parts-screen-children-wrapper {
  231. padding: 0 !important;
  232. }
  233. body div#app .document article.article {
  234. padding: 0 18px 18px;
  235. }
  236.  
  237. body div#app article .content br {
  238. padding-top: 0.2em;
  239. display: block;
  240. }
  241.  
  242. body div#app article .section[data-section-style="6"] ul li:before {
  243. font-size: inherit;
  244. }
  245.  
  246. body div#app .document article {
  247. padding: 40px 30px;
  248. }
  249.  
  250.  
  251. /* links */
  252. .document a, .link, lnk, .document .article control a.content {
  253. color: #08c;
  254. }
  255.  
  256. /* HL: Main page heading */
  257. body div#app article .section[data-section-style="1"],
  258. body .document-thread div h1 {
  259. margin: 0 0 16px;
  260. }
  261.  
  262. body div#app article .section[data-section-style="1"]>.content,
  263. body .document-thread div h1,
  264. body .jetson-document-chat h1 {
  265. font-size: 28px;
  266. font-weight: 400;
  267. }
  268.  
  269. /* HM: Section heading */
  270. body div#app article .section[data-section-style="2"],
  271. body .document-thread div h2 {
  272. margin: 20px 0 16px;
  273. }
  274.  
  275. body div#app article .section[data-section-style="2"]>.content,
  276. body .document-thread div h2 {
  277. font-size: 20px;
  278. font-weight: normal;
  279. color: #800;
  280. border-bottom: 1px solid #ccc;
  281. }
  282.  
  283. body .jetson-document-chat h2 {
  284. font-size: 20px;
  285. font-weight: normal;
  286. }
  287.  
  288.  
  289. /* HS: Subsection heading */
  290. body div#app article .section[data-section-style="3"],
  291. body .document-thread div h3 {
  292. margin: 24px 0 12px;
  293. }
  294.  
  295. body div#app article .section[data-section-style="3"]>.content,
  296. body .document-thread div h3 {
  297. color: #800;
  298. font-size: 15px;
  299. font-weight: bold;
  300. text-transform: none;
  301. }
  302.  
  303. body .jetson-document-chat h3 {
  304. font-size: 15px;
  305. font-weight: bold;
  306. }
  307.  
  308. /* Code block */
  309. div.document code, div.document pre, div.thread-thumbnail-document code,
  310. body div#app article .section[data-section-style="4"]>.content,
  311. body div#app article .section[data-section-style="0"]>.content code,
  312. body .document-thread div pre {
  313. font-family: "Lucida Sans Typewriter", Monaco, Menlo, Courier, monospace, "Quip Glyphs";
  314. font-size: 12px;
  315. text-shadow: none;
  316. color: #070;
  317. }
  318.  
  319. body div#app article .section[data-section-style="4"]>.content {
  320. padding: 3px 3px 3px 24px;
  321. }
  322.  
  323. body div#app article .section[data-section-style="0"]>.content code {
  324. display: inline-block;
  325. padding: 1px 2px;
  326. margin: 0 1px;
  327. border-radius: 2px;
  328. }
  329.  
  330. /* Bulleted list section */
  331. body div#app article .section[data-section-style="5"] {
  332. margin: 12px 0 6px;
  333. }
  334.  
  335. /* Numbered list section */
  336. body div#app article .section[data-section-style="6"] {
  337. margin: 12px 0 6px;
  338. }
  339.  
  340. /* Normal text */
  341. body div#app article .section[data-section-style="0"]>.content {
  342. font-size: 13px;
  343. }
  344.  
  345. /* Block quote */
  346. body div#app article .section[data-section-style="16"] {
  347. margin-top: -0.3em;
  348. margin-bottom: 0;
  349. }
  350.  
  351. body div#app article .section[data-section-style="16"]>.content {
  352. padding-left: 8em;
  353. color: #888;
  354. font-size: 12px;
  355. font-weight: 300;
  356. font-style: italic;
  357. }
  358.  
  359. body div#app article .section[data-section-style="16"]>.content:before {
  360. background: none;
  361. }
  362.  
  363. body div#app article .section[data-section-style="16"]>.content u {
  364. text-transform: uppercase;
  365. color: #0a4;
  366. font-size: 12px;
  367. font-style: normal;
  368. font-weight: normal;
  369. text-decoration: none;
  370. margin-left: -2em;
  371. padding-right: 0.7em;
  372. }
  373.  
  374. div#toc-div ul li a, div ul.listtype-comment li span {
  375. font-weight: 300;
  376. line-height: 1.4em;
  377. }
  378.  
  379. span#sharesummary {
  380. background: none !important;
  381. }
  382.  
  383. div.toc-entry span b {
  384. font-weight: normal;
  385. }
  386.  
  387. div.toc-entry {
  388. margin-bottom: 0.5em;
  389. }
  390.  
  391. #padeditor #add-to-collection {
  392. background: none;
  393. border: none;
  394. }
  395.  
  396. span.user-caret {
  397. left: 0px !important;
  398. }
  399.  
  400. span.user-caret-offscreen-top, span.user-caret-offscreen-bottom {
  401. left: 64px !important;
  402. }
  403.  
  404. span.user-caret img {
  405. display: none;
  406. }
  407.  
  408. span.user-caret-initials {
  409. padding: 3px;
  410. }
  411.  
  412. /* Get rid of the style buttons in the margin; you can use the menu instead. */
  413. div.editor-stylebar.visible {
  414. display: none;
  415. }
  416.  
  417. .annotation-gutter-icon {
  418. left: -1px;
  419. margin-top: -2px;
  420. width: 22px;
  421. height: 22px;
  422. background-size: 22px 22px;
  423. padding: 1px 1px 0 0;
  424. }
  425.  
  426. .annotation-gutter-icon.numbered {
  427. font-size: 10px;
  428. line-height: 19px;
  429. }
  430.  
  431. /* Chat bubbles */
  432. .message-bubble .chat-bubble, .message-bubble .chat-card {
  433. font-size: 12px;
  434. font-weight: 400;
  435. line-height: 15px;
  436. }
  437.  
  438. .chat-bubble .chat-bubble-bg {
  439. border-radius: 6px;
  440. }
  441.  
  442. .chat-bubble .chat-bubble-body {
  443. padding: 6px;
  444. }
  445.  
  446. .app .document-thread .outline-inline-container {
  447. padding-right: 0;
  448. }
  449.  
  450. .app .document-thread .outline-inline-container>.editor-outline {
  451. border-radius: 0;
  452. border-right: none;
  453. margin: 60px 0 0 0;
  454. padding: 4px 0;
  455. }
  456.  
  457. /* Document outline box */
  458. .editor-outline .editor-outline-section {
  459. margin: 4px 8px;
  460. }
  461.  
  462. .editor-outline .editor-outline-section[data-section-style="2"],
  463. .editor-outline .editor-outline-section[data-section-style="3"] {
  464. font-weight: normal;
  465. color: #800 !important;
  466. text-transform: none;
  467. }
  468.  
  469. .app .document-thread .outline-inline-container>.editor-outline .editor-outline-title {
  470. display: none;
  471. }
  472. `;
  473. head.appendChild(style);
  474.  
  475. // Disable the annoying backtick key.
  476. document.body.addEventListener('keydown', function(event) {
  477. if (event.keyCode === 192) {
  478. console.log('blocked keydown event for backtick');
  479. event.stopPropagation();
  480. event.preventDefault();
  481. return false;
  482. }
  483. }, true);
  484.  
  485. // Hide the conversation sidebar.
  486. function hide_conversation() {
  487. var button = document.querySelector('.icon-hide-conversation') ||
  488. document.querySelector('.jetson-document-chat-hide');
  489. if (button) {
  490. button.click();
  491. } else {
  492. window.setTimeout(hide_conversation, 100);
  493. }
  494. }
  495. hide_conversation();
  496. })();