SRSoftware/Umbrella
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

improved spreadsheet design

Browse Source 
Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
This commit is contained in:
Stephan Richter
2026-03-21 01:27:27 +01:00
parent 30ebe3f4e7
commit 20d46ea135
3 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/Components/MarkdownDisplay.svelte
View File

@@ -3,6 +3,7 @@
let { classes='markdown', markdown=$bindable({source:'',rendered:''}), onclick = null, oncontextmenu = null, title='', wrapper = 'div' } = $props(); let { classes='markdown', markdown=$bindable({source:'',rendered:''}), onclick = null, oncontextmenu = null, title='', wrapper = 'div' } = $props();
let jspreadsheet = null; let jspreadsheet = null;
const regex = /@startsheet[\s\S]*?@endsheet/g; const regex = /@startsheet[\s\S]*?@endsheet/g;
const number = /^[0-9.-]+$/
function update(sheet, index){ function update(sheet, index){
const data = sheet.getData(false,false,'|',false); const data = sheet.getData(false,false,'|',false);
@@ -19,6 +20,11 @@
return text.replace(regex, (match) => count++ === n ? `@startsheet\n${newContent}\n@endsheet` : match); return text.replace(regex, (match) => count++ === n ? `@startsheet\n${newContent}\n@endsheet` : match);
} }
function formatCell(cell, value, x, y, instance, options){
value = value.trim();
if (value.startsWith('=') || number.test(value)) cell.style.textAlign = 'right';
}
async function transform(){ async function transform(){
if (!markdown.rendered) return; if (!markdown.rendered) return;
let sheets = document.getElementsByClassName('spreadsheet'); let sheets = document.getElementsByClassName('spreadsheet');
@@ -40,12 +46,14 @@
for (let row of parsed){ for (let row of parsed){
for (let col in row){ for (let col in row){
let data = ""+row[col]; let data = ""+row[col];
if (data.startsWith('=')) continue;
let len = data.length; let len = data.length;
columns[col] = Math.max(columns[col]??0,len); columns[col] = Math.max(columns[col]??0,len);
} }
} }
columns = Object.values(columns).map((len) => {return { columns = Object.values(columns).map((len) => {return {
align: 'left', align: 'left',
render: formatCell,
width:`${len}0px` width:`${len}0px`
}}); }});
let config = { let config = {

17
web/src/main/resources/web/css/bloodshed-color.css
View File

@@ -317,6 +317,23 @@ tr:hover .taglist .tag button {
border: 1px solid red; border: 1px solid red;
} }
.jss_worksheet{
background: black !important;
border-right: 1px solid #333 !important;
border-bottom: 1px solid #333 !important;
}
.jss_worksheet > thead > tr > td,
.jss_worksheet > tbody > tr > td:first-child{
background: #730000 !important;
color: yellow;
}
.jss_worksheet td{
border-top: 1px solid #333 !important;
border-left: 1px solid #333 !important;
}
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
#app nav a{ #app nav a{
background: black; background: black;

17
web/src/main/resources/web/css/default-color.css
View File

@@ -308,6 +308,23 @@ tr:hover .taglist .tag button {
background: #a00; background: #a00;
} }
.jss_worksheet{
background: black !important;
border-right: 1px solid #333 !important;
border-bottom: 1px solid #333 !important;
}
.jss_worksheet > thead > tr > td,
.jss_worksheet > tbody > tr > td:first-child{
background: orange !important;
color: black;
}
.jss_worksheet td{
border-top: 1px solid #333 !important;
border-left: 1px solid #333 !important;
}
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
#app nav a{ #app nav a{
background: black; background: black;