Quip

Fix formatting and hide the conversation sidebar on Quip pages

当前为 2017-02-13 提交的版本,查看 最新版本

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