yazmeyaa
/
modern_spreadsheet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Little styles fixes for columns and rows bars

This commit is contained in:
Eugene 2023-07-26 11:05:43 +03:00
parent 50b3c3986f
commit 9dd64b9a77
4 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spreadsheet example</title> <title>Spreadsheet example</title>
</head> </head>
<body style="padding: 2rem"> <body style="padding: 2rem;">
<div id="spreadsheet"></div> <div id="spreadsheet"></div>
<button id="save_button">Save sheet</button> <button id="save_button">Save sheet</button>
<button id="load_button">Load sheet</button> <button id="load_button">Load sheet</button>

4
src/components/columnsBar.ts
View File

@ -3,7 +3,7 @@ import Spreadsheet, { RenderBox } from "../main";
export class ColumnsBar { export class ColumnsBar {
public element: HTMLCanvasElement; public element: HTMLCanvasElement;
private root: Spreadsheet; private root: Spreadsheet;
public height: number = 32; public height: number = 35;
public width: number; public width: number;
// private resizerWidth = 1; // private resizerWidth = 1;
ctx: CanvasRenderingContext2D; ctx: CanvasRenderingContext2D;
@ -69,7 +69,7 @@ export class ColumnsBar {
this.ctx.fillStyle = "black"; this.ctx.fillStyle = "black";
this.ctx.textAlign = "center"; this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle"; this.ctx.textBaseline = "middle";
this.ctx.font = "16px Arial"; this.ctx.font = "12px Arial";
this.ctx.fillText( this.ctx.fillText(
this.root.config.columns[column].title, this.root.config.columns[column].title,
x + width / 2 - this.root.viewport.left, x + width / 2 - this.root.viewport.left,

4
src/components/rowsBar.ts
View File

@ -4,7 +4,7 @@ export class RowsBar {
element: HTMLCanvasElement; element: HTMLCanvasElement;
ctx: CanvasRenderingContext2D; ctx: CanvasRenderingContext2D;
root: Spreadsheet; root: Spreadsheet;
width: number = 30; width: number = 35;
height: number; height: number;
resizerHeight = 1; resizerHeight = 1;
constructor(root: Spreadsheet) { constructor(root: Spreadsheet) {
@ -56,7 +56,7 @@ export class RowsBar {
this.ctx.fillStyle = "black"; this.ctx.fillStyle = "black";
this.ctx.textAlign = "center"; this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle"; this.ctx.textBaseline = "middle";
this.ctx.font = "16px Arial"; this.ctx.font = "12px Arial";
this.ctx.fillText( this.ctx.fillText(
this.root.config.rows[row].title, this.root.config.rows[row].title,
this.width / 2, this.width / 2,

9
src/scss/_spreadsheet.scss
View File

@ -1,15 +1,15 @@
$css_prefix: "modern_sc_"; $css_prefix: "modern_sc_";
.#{$css_prefix}content {
position: absolute;
}
.#{$css_prefix}spreadsheet_container { .#{$css_prefix}spreadsheet_container {
position: relative; position: relative;
isolation: isolate; isolation: isolate;
border: 2px solid black; border: 2px solid black;
} }
.#{$css_prefix}content {
position: absolute;
}
.#{$css_prefix}sheet { .#{$css_prefix}sheet {
display: block; display: block;
contain: strict; contain: strict;
@ -20,6 +20,7 @@ $css_prefix: "modern_sc_";
overflow: scroll; overflow: scroll;
box-sizing: border-box; box-sizing: border-box;
transform: translateZ(0); transform: translateZ(0);
&:focus { &:focus {
outline: none; outline: none;
} }