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

Custom SeaTable Style

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

  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.8
  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_all_css">
  108. /* 整体风格f
  109.  
  110. body { font-family:"Microsoft YaHei Light" } */
  111.  
  112. /* ---------------------------------------------------------------------------------------------------- */
  113.  
  114. /* 为自律的奖罚标签设置特殊的颜色背景 */
  115. div.react-grid-Cell[data-column_key="Je1Q"] .link { background-color:#39ab69; color:white; }
  116. div.react-grid-Cell[data-column_key="l2CX"] .link { background-color:#e36767; color:white; }
  117.  
  118. /* 报错弹窗,宽度缩短。否则阻碍鼠标操作 */
  119. .dtable-toast-manager { max-width:fit-content; }
  120.  
  121. /* 长文本弹窗宽度调整,阅读更加舒适 */
  122. div.longtext-modal-dialog.longtext-preview { width:1200px; } /* 预览屏宽度 */
  123. div.longtext-modal-dialog { width:fit-content; max-width:1800px; } /* 弹窗遮罩宽度 */
  124. div.longtext-modal-dialog div.editor.article { width:max-content; min-width:800px; } /* 实际内容宽度 */
  125. div.longtext-modal-dialog div.editor.article div.editor-component { min-height:500px; } /* 鼠标放上去有光标 */
  126. div.longtext-modal-dialog div.editor.article table { width: inherit; } /* 去掉表格横线 */
  127. div.longtext-modal-dialog div.editor.article table tr { display:inherit; } /* 取消表格宽度相等 */
  128. div.longtext-modal-dialog div.editor.article table td { max-width:400px; } /* 防止某列过宽 */
  129.  
  130. /* 长文本弹窗排版样式 */
  131. div.longtext-modal-dialog h1 { font-size:2.1em; }
  132. div.longtext-modal-dialog h2 { font-size:1.8em; }
  133. div.longtext-modal-dialog h3 { font-size:1.5em; }
  134. div.longtext-modal-dialog h4 { font-size:1.2em; }
  135. div.longtext-modal-dialog h5 { font-size:0.9em; }
  136. div.longtext-modal-dialog h6 { font-size:0.7em; }
  137.  
  138. /* 公式默认编辑框大小 */
  139. .edit-formula-popover .popover { width:900px; max-width:900px; max-height:calc(100% - 50px); height:calc(100% - 50px); }
  140. .formula-editor .CodeMirror { height:480px!important; }
  141. .formula-container .formula-content { height:inherit; }
  142. .formula-tips .formula-column-func { flex:auto; }
  143. .formula-tips .formula-example-container { flex:auto; }
  144.  
  145. /* 调整列标题的tooltip格式 */ /* 改为动态调整,可以防止tip位置偏离太远 */
  146. /* div.tooltip-inner.column-description-tip { white-space: pre; width:fit-content; max-width:800px; height:fit-content; max-height:800px; } */
  147. /* div.longtext-modal-dialog table td span { white-space: pre; } */
  148.  
  149. /* --- 分组时标题过短 ------------------------------------------------------------------------------------------------- */
  150.  
  151. .group-container.group-container-left { z-index:auto!important; }
  152. .group-container.group-container-left .group-header-left.group-header-cell { overflow:visible; }
  153. .group-container.group-container-left .group-title { overflow:visible; }
  154. .group-container.group-container-left .group-cell-value { z-index:1; background-color:#f7f7f7; }
  155. .group-container.group-container-left:hover .group-cell-value { z-index:0; }
  156.  
  157. /* ---------------------------------------------------------------------------------------------------- */
  158.  
  159. /* 子表标签横向压缩 */
  160. #header { height:30px; position:absolute; right:0; padding:0; text:'缩到右上角别占空'; }
  161. #header .title { height:inherit; }
  162.  
  163. #header .logo { margin-left:0; }
  164. #header .tools { margin-right:0; }
  165. #header .tool { margin-right:0; }
  166. .tables-tabs-container { align-items:end; text:'保证右边按钮不被遮住'; }
  167.  
  168. #tables { height:100%; }
  169.  
  170. .tables-tabs-container .tables-tabs-operations { width:150px; flex:0 0 auto; flex-wrap:wrap; margin-right:0px; text:'保证右边按钮换行折叠'; }
  171. .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:'保证右边按钮紧密堆叠'; }
  172.  
  173. .tables-tabs-container .tables-tabs-content { flex-grow:1; margin-left:0; min-height:75px; align-items:end; text:'保证左边标签可以扩展顶到右侧按钮'; }
  174. .tables-tabs-content .add-table { margin-right:0px; text:'去掉添加按钮的留白'; }
  175.  
  176. .tables-tabs-content .tables-nav-tabs { flex-wrap:wrap; width:100%; text:'开启换行,限制宽度,保证可以正常换行'; }
  177. .tables-tabs-content .tabs-tab { flex-grow:0; margin-right:0; text:'不扩充才能正常左对齐'; }
  178. .tables-tabs-content .tab-link { padding:0 5px; border-radius:0; }
  179. .tables-tabs-content .tabs-tab.tabs-tab-active .tab-link { padding:0 5px !important; }
  180. /* div.tables-tabs-content span.tab-title { font-size:13px; text:'字体调小塞入更多标签,暂时还没必要'; } */
  181. div.tables-tabs-content span.tab-dropdown { left:0px; right:inherit; }
  182. .tabs-tab .tab-title .dtable-icon-description { margin-left:-12px!important; opacity:0; }
  183. .tabs-tab .tab-title .dtable-icon-description:hover { opacity:1; }
  184. @media (min-width: 767.8px) { .logo { flex-basis: 0; flex-shrink: 1; } }
  185.  
  186. /* --- 压缩列类型或描述 ------------------------------------------------------------------------------------------------- */
  187.  
  188. /* 列类型藏在左边,悬浮时显示 */
  189. .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); }
  190. .header-cell-container .header-icon:hover { background-color:rgb(230 230 230); } /* 鼠标悬浮在本按钮上时变色 */
  191. .react-grid-HeaderRow:hover .header-icon { opacity:1; } /* 鼠标悬浮在列标题上时显示 */ /* .react-grid-HeaderCell:hover .header-cell-container .header-icon { opacity:1; } */
  192.  
  193. /* 列描述藏在右边,悬浮时显示 */
  194. .column-uneditable-tip { opacity:0; position:absolute; right:0; margin:0!important; padding:5px 2px; line-height:21px; background-color:rgb(239 239 239); }
  195. .column-uneditable-tip:hover { background-color:rgb(230 230 230); } /* 鼠标悬浮在本按钮上时变色 */
  196. .react-grid-HeaderCell:hover .column-uneditable-tip { opacity:1; } /* 鼠标悬浮在列标题上时显示 */
  197.  
  198. /* 下拉菜单直接压扁,使用右键照样可以打开菜单 */
  199. .header-cell-container .dtable-dropdown-menu { position:absolute; right:20px; width:0; padding:0; overflow: hidden; }
  200.  
  201. /* 早期意义不明的代码 */
  202. .header-cell-container .header-cell-left { width:100%; }
  203.  
  204. /* --- 链接卡片收紧 ------------------------------------------------------------------------------------------------- */
  205.  
  206. .link-records-container .row-card-item { height:68px; }
  207. .row-card-item .row-card-item-container .row-card-item-header { top:6px; }
  208. .row-card-item .row-card-item-container .row-card-item-content { height:68px; }
  209.  
  210. /* ---------------------------------------------------------------------------------------------------- */
  211.  
  212. /* 取消单元格边框,或者调浅 */
  213. div.react-grid-Cell{ border:none !important; }
  214. /* div.react-grid-Cell{ border-right:1px solid #f9f9f9;border-bottom: 1px solid #f9f9f9; } */
  215.  
  216. /* 单元格默认不压缩空格 */
  217. /* div.grid-cell-type-default {white-space: pre;} /* font-family: Agave, "Ubuntu Mono", Inconsolata */
  218. </style>
  219. `);
  220.  
  221.  
  222.  
  223.  
  224.  
  225. // === 动态样式修改 ==================================================================================================================================================================================================
  226.  
  227.  
  228.  
  229.  
  230.  
  231. // 使列描述中内容支持换行符号
  232.  
  233. let observer = new MutationObserver(mutations => {
  234. if (document.querySelector('div.tooltip-inner')) {
  235. $('div.tooltip-inner').each(function() { // 遍历所有 <div> 元素
  236. var text = $(this).text(); // 获取当前元素中的文本内容
  237. if(text.includes('==')) { // 如果文本内容包含 '=='
  238. var newText = text.replace(/==/g, '\n'); // 将所有 '==' 替换为换行符
  239. $(this).text(newText); // 更新元素的文本内容
  240. console.log('replace tip !!!')
  241. }
  242. });
  243. $('div.tooltip-inner').css({'white-space':'pre', 'width':'fit-content', 'max-width':'800px', 'height':'fit-content', 'max-height':'800px'})
  244. }
  245. });
  246. observer.observe(document.body, {childList: true});
  247.  
  248.  
  249. // 使长文本中的表格支持换行符号
  250.  
  251.  
  252. waitForKeyElements ("div.longtext-modal-dialog table span", span_return);
  253. function span_return(){
  254.  
  255. console.log('span !!!')
  256.  
  257. $('div.longtext-modal-dialog table span[data-slate-string="true"]').each(function() { // 遍历所有 <span> 元素
  258. var text = $(this).text(); // 获取当前元素中的文本内容
  259. if(text.includes('■')) { // 如果文本内容包含 '■'
  260. var newText = text.replace(/■/g, '\n'); // 将所有 '■' 替换为换行符
  261. $(this).text(newText); // 更新元素的文本内容
  262. console.log('replace span !!!')
  263. }
  264. });
  265. }
  266.  
  267.  
  268. // 根据表格标题,将表格标签编译为特殊段落,比如空格或换行等
  269.  
  270.  
  271. waitForKeyElements (".tab-link", tab_link_style);
  272. function tab_link_style(){ // 记得大的数放在前面,防止小数在前时,-5删掉无法识别-50的bug
  273.  
  274. console.log('tab link style !!!')
  275.  
  276. // 子表标签透明空格,逻辑更加清晰
  277.  
  278. $('.tab-link:contains("-")').each(function( index ) {
  279. let width_str = $(this).text().replace(/^-(\d+).*/, '$1') // 提取出标题中要调整的宽度
  280. let style = {'opacity': 0.03, 'border-radius':0, 'cursor': 'inherit', 'width':width_str+'px'}
  281. let padding = parseInt(width_str) < 5 ? {'padding':0} : {'padding':'2px 1px !important'}
  282. $(this).css(Object.assign({}, style, padding))
  283. $(this).children("span.tab-title").text('​')
  284. });
  285.  
  286. // 子表标签白色竖线,逻辑更加清晰
  287.  
  288. $('.tab-link:contains("|||")').css({'padding':0.3, 'margin':'0 5px', 'border-radius':0, 'cursor': 'inherit', 'width':'5px', 'background-color':'white'})
  289. $('.tab-title:contains("|||")').text('​')
  290.  
  291. $('.tab-link:contains("||")').css({'padding':0.3, 'margin':'0 2px', 'border-radius':0, 'cursor': 'inherit', 'width':'3px', 'background-color':'white'})
  292. $('.tab-title:contains("||")').text('​')
  293.  
  294. // 子表标签换行,多行展示逻辑清晰(命名时不让用\符号)
  295.  
  296. $('.tabs-tab:contains("=n")').css({'flex-basis': '100%', 'height':'3px', 'width':'20px', 'overflow':'hidden', 'opacity':0.3})
  297. $('.tab-title:contains("=n")').text('​')
  298. }
  299.  
  300.  
  301.  
  302.  
  303.  
  304.  
  305.  
  306.  
  307.  
  308.  
  309.  
  310.  
  311.  
  312.  
  313.  
  314.  
  315.  
  316.  
  317.  
  318.  
  319.  
  320.  
  321. // === 废旧代码 ================================================================================
  322.  
  323.  
  324.  
  325. /* waitForKeyElements (".react-grid-Cell", grid_cell_style);
  326. function grid_cell_style(){
  327.  
  328. console.log('grid cell style !!!')
  329.  
  330. // 为单元格增加边框线
  331.  
  332. $('.react-grid-Cell:contains("世界")').css({'border-left':'solid 2px black;'})
  333.  
  334. // 人工竖直分割线
  335.  
  336. // $('.react-grid-HeaderCell:contains("---")').css({'border-bottom':0, 'background-color':'white'})
  337. // $('.react-grid-HeaderCell:contains("---") > *').css({'opacity': 0})
  338.  
  339. // $('.react-grid-Cell:contains("---")').css({'border-bottom':0})
  340. // $('.react-grid-Cell:contains("---") > *').css({'opacity': '0'})
  341.  
  342. }
  343. */
  344.  
  345.  
  346.  
  347.  
  348. // /* 将列标题中的按钮,改为下方弹出式菜单(这是旧方案,不如新方案方便快捷)
  349. // .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; } /* 平常隐藏在角落 */
  350. // .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; }
  351. // .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; }
  352. //
  353. // .react-grid-HeaderCell:hover .header-cell-container .header-icon { opacity:1; top:30px; } /* 鼠标悬浮时显示 */
  354. // .react-grid-HeaderCell:hover .column-uneditable-tip { opacity:1; top:30px; }
  355. // .react-grid-HeaderCell:hover .dtable-dropdown-menu.dropdown { opacity:1; top:28.5px; }
  356. //
  357. // .header-cell-container .header-icon:hover { background-color:rgb(233 233 233) } /* 悬浮在按钮上时变色 */
  358. // .column-uneditable-tip:hover { background-color:rgb(233 233 233) }
  359. // .dtable-dropdown-menu.dropdown:hover { background-color:rgb(233 233 233) }
  360. // */
  361.  
  362.  
  363.  
  364.  
  365. /* CSS样式 子表标签竖向排列,更加紧致,放的更多
  366. div.tables-tabs-container div.tables-tabs-content { margin-left:0px; }
  367. div.tables-tabs-content div.tables-tabs { padding-right:0px; }
  368. div.tables-tabs-content li.tabs-tab { margin-right:0px; }
  369. div.tables-tabs-content div.tab-link { height:50px; padding:0px 0px 0px 0px!important; writing-mode:tb-rl; line-height:24px; }
  370. div.tables-tabs-content span.tab-title { font-size:14px }
  371. #header { height:30px; }
  372. #header .title { height:inherit; }
  373. .tables-tabs-container .tables-tabs-operations { width:100px; flex-wrap:wrap; margin-right:0px; }
  374. .tables-tabs-content .add-table { width:16px; margin-right:0px; }
  375. .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; }
  376. */
  377.  
  378.  
  379.  
  380.  
  381. /*--- waitForElm: 等待某元素出现,只能一次性执行 https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists */
  382.  
  383. // function waitForElm(selector) {
  384. // return new Promise(resolve => {
  385. // if (document.querySelector(selector)) { // 直接能找到这个元素
  386. // return resolve(document.querySelector(selector));
  387. // }
  388. //
  389. // const observer = new MutationObserver(mutations => { // 找不到这个元素时,就等待其出现
  390. // if (document.querySelector(selector)) {
  391. // observer.disconnect();
  392. // resolve(document.querySelector(selector));
  393. // }
  394. // });
  395. //
  396. // // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
  397. // observer.observe(document.body, {
  398. // childList: true,
  399. // subtree: true
  400. // });
  401. // });
  402. // }
  403. //
  404. // await waitForElm('div.tooltip-inner').then((elm) => {
  405. // console.log('Element is ready');
  406. // console.log(elm.textContent);
  407. // });
  408.  
  409.  
  410.  
  411.  
  412. // 试图为只能填写单行数据的input增加一个textarea,填写多行内容后,将转化后的文本输入input(没有用,即使都改了,还是读不到input中的内容)
  413. //
  414. // if (document.querySelector('input.form-control') && !document.querySelector('textarea#popover-inner-textarea')) {
  415. // $('input.form-control').after(`<textarea id='popover-inner-textarea'></textarea>`)
  416. // $('textarea#popover-inner-textarea').on('change', function() {
  417. // let content = $('textarea#popover-inner-textarea').val()
  418. // $('input.form-control').attr('value', content)
  419. // $('input.form-control').val(content)
  420. // console.log(content, $('input.form-control').val())
  421. // });
  422. // }
  423.  
  424.  
  425.  
  426.  
  427.  
  428. // 渲染表格内的元素
  429. //
  430. // waitForKeyElements ("div.grid-cell-type-default", ttt);
  431. // function ttt(){
  432. // console.log('111')
  433. // }
  434. //
  435. // waitForKeyElements ("div#dtable-row-height-popover", add_custom_btns);
  436. // function add_custom_btns(){ // 渲染表格内的元素
  437. // let btn = $(`
  438. // <div class="toolbar-item ml-2 view-row-render" id="dtable-row-render-popover">
  439. // <span class="toolbar-btn view-row-render">
  440. // <i class="dtable-font dtable-icon-sync"></i>
  441. // <span>渲染</span>
  442. // </span>
  443. // </div>
  444. // `)[0];
  445. // btn.addEventListener("click", function() {
  446. // $('.grid-cell-type-default').each(function() {
  447. // $(this).html($(this).text());
  448. // });
  449. // });
  450. // $('div#dtable-row-height-popover').after(btn);
  451. // }
  452.  
  453.  
  454.  
  455.  
  456. // 使列描述中内容支持换行符号(已改为响应更加及时的MO方案)
  457. //
  458. // waitForKeyElements ("div.tooltip-inner", tip_return); // .column-description-tip
  459. // function tip_return(){ // 使列描述中内容支持换行符号
  460. // $('div.tooltip-inner').each(function() { // 遍历所有 <div> 元素
  461. // var text = $(this).text(); // 获取当前元素中的文本内容
  462. // if(text.includes('■')) { // 如果文本内容包含 '■'
  463. // var newText = text.replace(/■/g, '\n'); // 将所有 '■' 替换为换行符
  464. // $(this).text(newText); // 更新元素的文本内容
  465. // console.log('replace tip !!!')
  466. // }
  467. // });
  468. //
  469. // $('div.tooltip-inner').css({'white-space':'pre', 'width':'fit-content', 'max-width':'800px', 'height':'fit-content', 'max-height':'800px'})
  470. // }