SeaTable自定义样式(在线版)qt

Custom SeaTable Style

当前为 2024-03-11 提交的版本,查看 最新版本

  1. // ==UserScript==
  2.  
  3. // @name SeaTable Custom Style (OnLine)
  4. // @name:zh-CN SeaTable自定义样式(在线版)qt
  5.  
  6. // @description Custom SeaTable Style
  7. // @description:zh-cn SeaTable自定义样式
  8.  
  9. // @namespace http://tampermonkey.net/
  10. // @version 0.7
  11. // @author oraant
  12. // @grant none
  13. // @license MIT
  14.  
  15. // @require http://code.jquery.com/jquery-3.4.1.min.js
  16. // @match *://*:4480*
  17. // @match *://*.192.168.1.2:4480/*
  18. // @match *://*.seatable.cn/*
  19. // @match *://*.table.everything.pub/*
  20. // @match *://*.biz.oraant.cc/*
  21. // @match *://*.generate.wiki/*
  22.  
  23. // ==/UserScript==
  24.  
  25.  
  26.  
  27.  
  28.  
  29. // === 基础工具方法 ==================================================================================================================================================================================================
  30.  
  31.  
  32.  
  33.  
  34.  
  35. /*--- waitForKeyElements(): A utility function, for Greasemonkey scripts, that detects and handles AJAXed content. */
  36.  
  37. function waitForKeyElements ( /* IMPORTANT: This function requires your script to have loaded jQuery. */
  38. selectorTxt, /* Required: The jQuery selector string that specifies the desired element(s). */
  39. actionFunction, /* Required: The code to run when elements are found. It is passed a jNode to the matched element. */
  40. bWaitOnce, /* Optional: If false, will continue to scan for new elements even after the first match is found. */
  41. iframeSelector /* Optional: If set, identifies the iframe to search. */
  42. ) {
  43. var targetNodes, btargetsFound;
  44.  
  45. if (typeof iframeSelector == "undefined")
  46. targetNodes = $(selectorTxt);
  47. else
  48. targetNodes = $(iframeSelector).contents().find(selectorTxt);
  49.  
  50. if (targetNodes && targetNodes.length > 0) {
  51. btargetsFound = true;
  52. /*--- Found target node(s). Go through each and act if they are new. */
  53. targetNodes.each ( function () {
  54. var jThis = $(this);
  55. var alreadyFound = jThis.data ('alreadyFound') || false;
  56.  
  57. if (!alreadyFound) {
  58. //--- Call the payload function.
  59. var cancelFound = actionFunction (jThis);
  60. if (cancelFound)
  61. btargetsFound = false;
  62. else
  63. jThis.data ('alreadyFound', true);
  64. }
  65. } );
  66. }
  67. else {
  68. btargetsFound = false;
  69. }
  70.  
  71. //--- Get the timer-control variable for this selector.
  72. var controlObj = waitForKeyElements.controlObj || {};
  73. var controlKey = selectorTxt.replace (/[^\w]/g, "_");
  74. var timeControl = controlObj [controlKey];
  75.  
  76. //--- Now set or clear the timer as appropriate.
  77. if (btargetsFound && bWaitOnce && timeControl) {
  78. //--- The only condition where we need to clear the timer.
  79. clearInterval (timeControl);
  80. delete controlObj [controlKey]
  81. }
  82. else {
  83. //--- Set a timer, if needed.
  84. if ( ! timeControl) {
  85. timeControl = setInterval ( function () {
  86. waitForKeyElements ( selectorTxt, actionFunction, bWaitOnce, iframeSelector );
  87. },
  88. 300
  89. );
  90. controlObj [controlKey] = timeControl;
  91. }
  92. }
  93. waitForKeyElements.controlObj = controlObj;
  94. }
  95.  
  96.  
  97.  
  98.  
  99.  
  100. // === 全局样式修改 ==================================================================================================================================================================================================
  101.  
  102.  
  103.  
  104.  
  105.  
  106. $("head").append(`
  107. <style type="text/css" id="custom_tags_css">
  108. /* 整体风格
  109.  
  110. body { font-family:"Microsoft YaHei Light" } */
  111.  
  112. /* 为自律的奖罚标签设置特殊的颜色背景 */
  113. div.react-grid-Cell[data-column_key="Je1Q"] .link { background-color:#39ab69; color:white; }
  114. div.react-grid-Cell[data-column_key="l2CX"] .link { background-color:#e36767; color:white; }
  115.  
  116.  
  117. /* 长文本弹窗宽度调整,阅读更加舒适 */
  118. div.longtext-modal-dialog.longtext-preview { width:1200px; } /* 预览屏宽度 */
  119. div.longtext-modal-dialog { width:fit-content; max-width:1800px; } /* 弹窗遮罩宽度 */
  120. div.longtext-modal-dialog div.editor.article { width:max-content; min-width:800px; } /* 实际内容宽度 */
  121. div.longtext-modal-dialog div.editor.article div.editor-component { min-height:500px; } /* 鼠标放上去有光标 */
  122. div.longtext-modal-dialog div.editor.article table { width: inherit; } /* 去掉表格横线 */
  123. div.longtext-modal-dialog div.editor.article table tr { display:inherit; } /* 取消表格宽度相等 */
  124. div.longtext-modal-dialog div.editor.article table td { max-width:400px; } /* 防止某列过宽 */
  125.  
  126. /* 长文本弹窗排版样式 */
  127. div.longtext-modal-dialog h1 { font-size:2.1em; }
  128. div.longtext-modal-dialog h2 { font-size:1.8em; }
  129. div.longtext-modal-dialog h3 { font-size:1.5em; }
  130. div.longtext-modal-dialog h4 { font-size:1.2em; }
  131. div.longtext-modal-dialog h5 { font-size:0.9em; }
  132. div.longtext-modal-dialog h6 { font-size:0.7em; }
  133.  
  134. /* 公式默认编辑框大小 */
  135. .edit-formula-popover .popover { width:900px; max-width:900px; max-height:calc(100% - 50px); height:calc(100% - 50px); }
  136. .formula-editor .CodeMirror { height:480px!important; }
  137. .formula-container .formula-content { height:inherit; }
  138. .formula-tips .formula-column-func { flex:auto; }
  139. .formula-tips .formula-example-container { flex:auto; }
  140.  
  141. /* 调整列标题的tooltip格式 */ /* 改为动态调整,可以防止tip位置偏离太远 */
  142. /* div.tooltip-inner.column-description-tip { white-space: pre; width:fit-content; max-width:800px; height:fit-content; max-height:800px; } */
  143. /* div.longtext-modal-dialog table td span { white-space: pre; } */
  144.  
  145. /* ---------------------------------------------------------------------------------------------------- */
  146.  
  147. /* 子表标签横向压缩 */
  148. #header { height:30px; position:absolute; right:0; padding:0; text:'缩到右上角别占空'; }
  149. #header .title { height:inherit; }
  150.  
  151. #header .logo { margin-left:0; }
  152. #header .tools { margin-right:0; }
  153. #header .tool { margin-right:0; }
  154. .tables-tabs-container { align-items:end; text:'保证右边按钮不被遮住'; }
  155.  
  156. #tables { height:100%; }
  157.  
  158. .tables-tabs-container .tables-tabs-operations { width:100px; flex:0 0 auto; flex-wrap:wrap; margin-right:0px; text:'保证右边按钮换行折叠'; }
  159. .tables-tabs-operations .tables-logs, .tables-tabs-operations .tables-plugins, .tables-tabs-operations .tables-rule, .tables-tabs-operations .tables-share, .tables-tabs-operations .tool-dropdown { margin-right:1px; text:'保证右边按钮紧密堆叠'; }
  160.  
  161. .tables-tabs-container .tables-tabs-content { flex-grow:1; margin-left:0; min-height:75px; align-items:end; text:'保证左边标签可以扩展顶到右侧按钮'; }
  162. .tables-tabs-content .add-table { margin-right:0px; text:'去掉添加按钮的留白'; }
  163.  
  164. .tables-tabs-content .tables-nav-tabs { flex-wrap:wrap; width:100%; text:'开启换行,限制宽度,保证可以正常换行'; }
  165. .tables-tabs-content .tabs-tab { flex-grow:0; margin-right:0; text:'不扩充才能正常左对齐'; }
  166. .tables-tabs-content .tab-link { padding:0 5px; border-radius:0; }
  167. .tables-tabs-content .tabs-tab.tabs-tab-active .tab-link { padding:0 5px !important; }
  168. /* div.tables-tabs-content span.tab-title { font-size:13px; text:'字体调小塞入更多标签,暂时还没必要'; } */
  169. div.tables-tabs-content span.tab-dropdown { left:0px; right:inherit; }
  170. .tabs-tab .tab-title .dtable-icon-description { margin-left:-12px!important; opacity:0; }
  171. .tabs-tab .tab-title .dtable-icon-description:hover { opacity:1; }
  172. @media (min-width: 767.8px) { .logo { flex-basis: 0; flex-shrink: 1; } }
  173.  
  174. /* --- 压缩 ------------------------------------------------------------------------------------------------- */
  175.  
  176. /* 列类型藏在左边,悬浮时显示 */
  177. .header-cell-container .header-icon { opacity:0; position:absolute; left:0px; top:0px; margin:0; padding:5px 2px; line-height:21px; background-color:rgb(239 239 239); }
  178. .header-cell-container .header-icon:hover { background-color:rgb(230 230 230); } /* 鼠标悬浮在本按钮上时变色 */
  179. .react-grid-HeaderCell:hover .header-cell-container .header-icon { opacity:1; } /* 鼠标悬浮在列标题上时显示 */
  180.  
  181. /* 列描述藏在右边,悬浮时显示 */
  182. .column-uneditable-tip { opacity:0; position:absolute; right:0; margin:0!important; padding:5px 2px; line-height:21px; background-color:rgb(239 239 239); }
  183. .column-uneditable-tip:hover { background-color:rgb(230 230 230); } /* 鼠标悬浮在本按钮上时变色 */
  184. .react-grid-HeaderCell:hover .column-uneditable-tip { opacity:1; } /* 鼠标悬浮在列标题上时显示 */
  185.  
  186. /* 下拉菜单直接压扁,使用右键照样可以打开菜单 */
  187. .header-cell-container .dtable-dropdown-menu { position:absolute; right:20px; width:0; padding:0; overflow: hidden; }
  188.  
  189. /* 早期意义不明的代码 */
  190. .header-cell-container .header-cell-left { width:100%; }
  191.  
  192. /* ---------------------------------------------------------------------------------------------------- */
  193.  
  194. /* 取消单元格边框,或者调浅 */
  195. div.react-grid-Cell{ border:none !important; }
  196. /* div.react-grid-Cell{ border-right:1px solid #f9f9f9;border-bottom: 1px solid #f9f9f9; } */
  197.  
  198. /* 单元格默认不压缩空格 */
  199. /* div.grid-cell-type-default {white-space: pre;} /* font-family: Agave, "Ubuntu Mono", Inconsolata */
  200. </style>
  201. `);
  202.  
  203.  
  204.  
  205.  
  206.  
  207. // === 动态样式修改 ==================================================================================================================================================================================================
  208.  
  209.  
  210.  
  211.  
  212.  
  213. // 使列描述中内容支持换行符号
  214.  
  215. let observer = new MutationObserver(mutations => {
  216. if (document.querySelector('div.tooltip-inner')) {
  217. $('div.tooltip-inner').each(function() { // 遍历所有 <div> 元素
  218. var text = $(this).text(); // 获取当前元素中的文本内容
  219. if(text.includes('==')) { // 如果文本内容包含 '=='
  220. var newText = text.replace(/==/g, '\n'); // 将所有 '==' 替换为换行符
  221. $(this).text(newText); // 更新元素的文本内容
  222. console.log('replace tip !!!')
  223. }
  224. });
  225. $('div.tooltip-inner').css({'white-space':'pre', 'width':'fit-content', 'max-width':'800px', 'height':'fit-content', 'max-height':'800px'})
  226. }
  227. });
  228. observer.observe(document.body, {childList: true});
  229.  
  230.  
  231. // 使长文本中的表格支持换行符号
  232.  
  233.  
  234. waitForKeyElements ("div.longtext-modal-dialog table span", span_return);
  235. function span_return(){
  236.  
  237. console.log('span !!!')
  238.  
  239. $('div.longtext-modal-dialog table span[data-slate-string="true"]').each(function() { // 遍历所有 <span> 元素
  240. var text = $(this).text(); // 获取当前元素中的文本内容
  241. if(text.includes('■')) { // 如果文本内容包含 '■'
  242. var newText = text.replace(/■/g, '\n'); // 将所有 '■' 替换为换行符
  243. $(this).text(newText); // 更新元素的文本内容
  244. console.log('replace span !!!')
  245. }
  246. });
  247. }
  248.  
  249.  
  250. // 根据表格标题,将表格标签编译为特殊段落,比如空格或换行等
  251.  
  252.  
  253. waitForKeyElements (".tab-link", tab_link_style);
  254. function tab_link_style(){ // 记得大的数放在前面,防止小数在前时,-5删掉无法识别-50的bug
  255.  
  256. console.log('tab link style !!!')
  257.  
  258. // 子表标签透明空格,逻辑更加清晰
  259.  
  260. $('.tab-link:contains("-")').each(function( index ) {
  261. let width_str = $(this).text().replace(/^-(\d+).*/, '$1') // 提取出标题中要调整的宽度
  262. let style = {'opacity': 0.03, 'border-radius':0, 'cursor': 'inherit', 'width':width_str+'px'}
  263. let padding = parseInt(width_str) < 5 ? {'padding':0} : {'padding':'2px 1px !important'}
  264. $(this).css(Object.assign({}, style, padding))
  265. $(this).children("span.tab-title").text('​')
  266. });
  267.  
  268. // 子表标签白色竖线,逻辑更加清晰
  269.  
  270. $('.tab-link:contains("|||")').css({'padding':0.3, 'margin':'0 5px', 'border-radius':0, 'cursor': 'inherit', 'width':'5px', 'background-color':'white'})
  271. $('.tab-title:contains("|||")').text('​')
  272.  
  273. $('.tab-link:contains("||")').css({'padding':0.3, 'margin':'0 2px', 'border-radius':0, 'cursor': 'inherit', 'width':'3px', 'background-color':'white'})
  274. $('.tab-title:contains("||")').text('​')
  275.  
  276. // 子表标签换行,多行展示逻辑清晰(命名时不让用\符号)
  277.  
  278. $('.tabs-tab:contains("=n")').css({'flex-basis': '100%', 'height':'3px', 'width':'20px', 'overflow':'hidden', 'opacity':0.3})
  279. $('.tab-title:contains("=n")').text('​')
  280. }
  281.  
  282.  
  283.  
  284.  
  285.  
  286.  
  287.  
  288.  
  289.  
  290.  
  291.  
  292.  
  293.  
  294.  
  295.  
  296.  
  297.  
  298.  
  299.  
  300.  
  301.  
  302.  
  303. // === 废旧代码 ================================================================================
  304.  
  305.  
  306.  
  307. /* waitForKeyElements (".react-grid-Cell", grid_cell_style);
  308. function grid_cell_style(){
  309.  
  310. console.log('grid cell style !!!')
  311.  
  312. // 为单元格增加边框线
  313.  
  314. $('.react-grid-Cell:contains("世界")').css({'border-left':'solid 2px black;'})
  315.  
  316. // 人工竖直分割线
  317.  
  318. // $('.react-grid-HeaderCell:contains("---")').css({'border-bottom':0, 'background-color':'white'})
  319. // $('.react-grid-HeaderCell:contains("---") > *').css({'opacity': 0})
  320.  
  321. // $('.react-grid-Cell:contains("---")').css({'border-bottom':0})
  322. // $('.react-grid-Cell:contains("---") > *').css({'opacity': '0'})
  323.  
  324. }
  325. */
  326.  
  327.  
  328.  
  329.  
  330. // /* 将列标题中的按钮,改为下方弹出式菜单(这是旧方案,不如新方案方便快捷)
  331. // .header-cell-container .header-icon { opacity:0; position:absolute; left:-5px; padding:4px!important; margin:0; line-height:15px; border-radius: 2px; background-color:rgb(249 249 249); box-shadow:1px 2px 3px 0px #b5b5b5; } /* 平常隐藏在角落 */
  332. // .column-uneditable-tip { opacity:0; position:absolute; left:15px; padding:4px!important; margin:0 !important; line-height:15px; border-radius: 2px; background-color:rgb(249 249 249); box-shadow:1px 2px 3px 0px #b5b5b5; }
  333. // .dtable-dropdown-menu.dropdown { opacity:0; position:absolute; right:-5px;padding:4px!important; width:auto; line-height:15px; border-radius: 2px; background-color:rgb(249 249 249); box-shadow:1px 2px 3px 0px #b5b5b5; }
  334. //
  335. // .react-grid-HeaderCell:hover .header-cell-container .header-icon { opacity:1; top:30px; } /* 鼠标悬浮时显示 */
  336. // .react-grid-HeaderCell:hover .column-uneditable-tip { opacity:1; top:30px; }
  337. // .react-grid-HeaderCell:hover .dtable-dropdown-menu.dropdown { opacity:1; top:28.5px; }
  338. //
  339. // .header-cell-container .header-icon:hover { background-color:rgb(233 233 233) } /* 悬浮在按钮上时变色 */
  340. // .column-uneditable-tip:hover { background-color:rgb(233 233 233) }
  341. // .dtable-dropdown-menu.dropdown:hover { background-color:rgb(233 233 233) }
  342. // */
  343.  
  344.  
  345.  
  346.  
  347. /* CSS样式 子表标签竖向排列,更加紧致,放的更多
  348. div.tables-tabs-container div.tables-tabs-content { margin-left:0px; }
  349. div.tables-tabs-content div.tables-tabs { padding-right:0px; }
  350. div.tables-tabs-content li.tabs-tab { margin-right:0px; }
  351. div.tables-tabs-content div.tab-link { height:50px; padding:0px 0px 0px 0px!important; writing-mode:tb-rl; line-height:24px; }
  352. div.tables-tabs-content span.tab-title { font-size:14px }
  353. #header { height:30px; }
  354. #header .title { height:inherit; }
  355. .tables-tabs-container .tables-tabs-operations { width:100px; flex-wrap:wrap; margin-right:0px; }
  356. .tables-tabs-content .add-table { width:16px; margin-right:0px; }
  357. .tables-tabs-operations .tables-logs, .tables-tabs-operations .tables-plugins, .tables-tabs-operations .tables-rule, .tables-tabs-operations .tables-share, .tables-tabs-operations .tool-dropdown { margin-right:1px; }
  358. */
  359.  
  360.  
  361.  
  362.  
  363. /*--- waitForElm: 等待某元素出现,只能一次性执行 https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists */
  364.  
  365. // function waitForElm(selector) {
  366. // return new Promise(resolve => {
  367. // if (document.querySelector(selector)) { // 直接能找到这个元素
  368. // return resolve(document.querySelector(selector));
  369. // }
  370. //
  371. // const observer = new MutationObserver(mutations => { // 找不到这个元素时,就等待其出现
  372. // if (document.querySelector(selector)) {
  373. // observer.disconnect();
  374. // resolve(document.querySelector(selector));
  375. // }
  376. // });
  377. //
  378. // // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
  379. // observer.observe(document.body, {
  380. // childList: true,
  381. // subtree: true
  382. // });
  383. // });
  384. // }
  385. //
  386. // await waitForElm('div.tooltip-inner').then((elm) => {
  387. // console.log('Element is ready');
  388. // console.log(elm.textContent);
  389. // });
  390.  
  391.  
  392.  
  393.  
  394. // 试图为只能填写单行数据的input增加一个textarea,填写多行内容后,将转化后的文本输入input(没有用,即使都改了,还是读不到input中的内容)
  395. //
  396. // if (document.querySelector('input.form-control') && !document.querySelector('textarea#popover-inner-textarea')) {
  397. // $('input.form-control').after(`<textarea id='popover-inner-textarea'></textarea>`)
  398. // $('textarea#popover-inner-textarea').on('change', function() {
  399. // let content = $('textarea#popover-inner-textarea').val()
  400. // $('input.form-control').attr('value', content)
  401. // $('input.form-control').val(content)
  402. // console.log(content, $('input.form-control').val())
  403. // });
  404. // }
  405.  
  406.  
  407.  
  408.  
  409.  
  410. // 渲染表格内的元素
  411. //
  412. // waitForKeyElements ("div.grid-cell-type-default", ttt);
  413. // function ttt(){
  414. // console.log('111')
  415. // }
  416. //
  417. // waitForKeyElements ("div#dtable-row-height-popover", add_custom_btns);
  418. // function add_custom_btns(){ // 渲染表格内的元素
  419. // let btn = $(`
  420. // <div class="toolbar-item ml-2 view-row-render" id="dtable-row-render-popover">
  421. // <span class="toolbar-btn view-row-render">
  422. // <i class="dtable-font dtable-icon-sync"></i>
  423. // <span>渲染</span>
  424. // </span>
  425. // </div>
  426. // `)[0];
  427. // btn.addEventListener("click", function() {
  428. // $('.grid-cell-type-default').each(function() {
  429. // $(this).html($(this).text());
  430. // });
  431. // });
  432. // $('div#dtable-row-height-popover').after(btn);
  433. // }
  434.  
  435.  
  436.  
  437.  
  438. // 使列描述中内容支持换行符号(已改为响应更加及时的MO方案)
  439. //
  440. // waitForKeyElements ("div.tooltip-inner", tip_return); // .column-description-tip
  441. // function tip_return(){ // 使列描述中内容支持换行符号
  442. // $('div.tooltip-inner').each(function() { // 遍历所有 <div> 元素
  443. // var text = $(this).text(); // 获取当前元素中的文本内容
  444. // if(text.includes('■')) { // 如果文本内容包含 '■'
  445. // var newText = text.replace(/■/g, '\n'); // 将所有 '■' 替换为换行符
  446. // $(this).text(newText); // 更新元素的文本内容
  447. // console.log('replace tip !!!')
  448. // }
  449. // });
  450. //
  451. // $('div.tooltip-inner').css({'white-space':'pre', 'width':'fit-content', 'max-width':'800px', 'height':'fit-content', 'max-height':'800px'})
  452. // }