github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-03-22 17:14:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

TablePicker: Change table cells in picker (#1202)

Browse source 
- Fix error that the border of table cells was invisible in dark mode
- Add margin to table cells
- Add full border to table cells
- Change border-color while hovering over table cells

Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2021-04-22 12:55:51 +02:00 committed by GitHub
parent 9d8ce946e8
commit bba2b207c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.scss
View file

@ -11,33 +11,15 @@
@import "../../../../../style/variables.light";
.table-cell {
border-top: 1px solid $dark;
border-left: 1px solid $dark;
border: 1px solid $gray-700;
margin: 1px;
border-radius: 2px;
}
.table-container {
border-bottom: 1px solid $dark;
border-right: 1px solid $dark;
display: grid;
grid-template-columns: repeat(10, 15px [col-start]);
grid-template-rows: repeat(8, 15px [row-start]);
}
body.dark {
@import "../../../../../style/variables.dark";
.table-cell {
border-top: 1px solid $dark;
border-left: 1px solid $dark;
}
.table-container {
border-bottom: 1px solid $dark;
border-right: 1px solid $dark;
display: grid;
grid-template-columns: repeat(10, 15px [col-start]);
grid-template-rows: repeat(8, 15px [row-start]);
}
}
}

2
src/components/editor-page/editor-pane/tool-bar/table-picker/table-picker.tsx
View file

@ -60,7 +60,7 @@ export const TablePicker: React.FC<TablePickerProps> = ({ show, onDismiss, onTab
.map((col: number) => (
<div
key={ `${ row }_${ col }` }
className={ `table-cell ${ tableSize && row < tableSize.rows && col < tableSize.columns ? 'bg-primary' : '' }` }
className={ `table-cell ${ tableSize && row < tableSize.rows && col < tableSize.columns ? 'bg-primary border-primary' : '' }` }
onMouseEnter={ () => {
setTableSize({
rows: row + 1,