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" />
<title>Spreadsheet example</title>
</head>
<body style="padding: 2rem">
<body style="padding: 2rem;">
<div id="spreadsheet"></div>
<button id="save_button">Save 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 {
public element: HTMLCanvasElement;
private root: Spreadsheet;
public height: number = 32;
public height: number = 35;
public width: number;
// private resizerWidth = 1;
ctx: CanvasRenderingContext2D;
@ -69,7 +69,7 @@ export class ColumnsBar {
this.ctx.fillStyle = "black";
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
this.ctx.font = "16px Arial";
this.ctx.font = "12px Arial";
this.ctx.fillText(
this.root.config.columns[column].title,
x + width / 2 - this.root.viewport.left,

4
src/components/rowsBar.ts
View File

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

9
src/scss/_spreadsheet.scss
View File

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