diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index d7ad33923..f291c46fb 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -327,7 +327,8 @@ button kbd { } } -.dropdown-menu { +.dropdown-menu, +.tabulator-popup-container { color: var(--menu-text-color) !important; font-size: inherit; background-color: var(--menu-background-color) !important; @@ -342,7 +343,8 @@ button kbd { break-after: avoid; } -body.desktop .dropdown-menu { +body.desktop .dropdown-menu, +body.desktop .tabulator-popup-container { border: 1px solid var(--dropdown-border-color); box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity)); animation: dropdown-menu-opening 100ms ease-in; @@ -385,7 +387,8 @@ body.desktop .dropdown-menu { } .dropdown-menu a:hover:not(.disabled), -.dropdown-item:hover:not(.disabled, .dropdown-item-container) { +.dropdown-item:hover:not(.disabled, .dropdown-item-container), +.tabulator-menu-item:hover { color: var(--hover-item-text-color) !important; background-color: var(--hover-item-background-color) !important; border-color: var(--hover-item-border-color) !important; @@ -1207,12 +1210,14 @@ body.mobile .dropdown-submenu > .dropdown-menu { } #context-menu-container, -#context-menu-container .dropdown-menu { - padding: 3px 0 0; +#context-menu-container .dropdown-menu, +.tabulator-popup-container { + padding: 3px 0; z-index: 2000; } -#context-menu-container .dropdown-item { +#context-menu-container .dropdown-item, +.tabulator-menu .tabulator-menu-item { padding: 0 7px 0 10px; cursor: pointer; user-select: none; diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css new file mode 100644 index 000000000..18193088b --- /dev/null +++ b/apps/client/src/stylesheets/table.css @@ -0,0 +1,172 @@ +.tabulator { + --table-background-color: var(--main-background-color); + + --col-header-background-color: var(--main-background-color); + --col-header-hover-background-color: var(--accented-background-color); + --col-header-text-color: var(--main-text-color); + --col-header-arrow-active-color: var(--main-text-color); + --col-header-arrow-inactive-color: var(--more-accented-background-color); + --col-header-separator-border: none; + --col-header-bottom-border: 2px solid var(--main-border-color); + + --row-background-color: var(--main-background-color); + --row-alternate-background-color: var(--main-background-color); + --row-moving-background-color: var(--accented-background-color); + --row-text-color: var(--main-text-color); + --row-delimiter-color: var(--more-accented-background-color); + + --cell-horiz-padding-size: 8px; + --cell-vert-padding-size: 8px; + + --cell-editable-hover-outline-color: var(--main-border-color); + --cell-read-only-text-color: var(--muted-text-color); + + --cell-editing-border-color: var(--main-border-color); + --cell-editing-border-width: 2px; + --cell-editing-background-color: var(--ck-color-selector-focused-cell-background); + --cell-editing-text-color: initial; + + background: unset; + border: unset; +} + +.tabulator .tabulator-tableholder .tabulator-table { + background: var(--table-background-color); +} + +/* Column headers */ + +.tabulator div.tabulator-header { + border-bottom: var(--col-header-bottom-border); + background: var(--col-header-background-color); + color: var(--col-header-text-color); +} + +.tabulator .tabulator-col-content { + padding: 8px 4px !important; +} + +@media (hover: hover) and (pointer: fine) { + .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { + background-color: var(--col-header-hover-background-color); + } +} + +.tabulator div.tabulator-header .tabulator-col.tabulator-moving { + border: none; + background: var(--col-header-hover-background-color); +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { + border-bottom-color: var(--col-header-arrow-active-color); + border-top-color: var(--col-header-arrow-active-color); +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { + border-bottom-color: var(--col-header-arrow-inactive-color); +} + +.tabulator div.tabulator-header .tabulator-col, +.tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left { + background: var(--col-header-background-color); + border-right: var(--col-header-separator-border); +} + +/* Table body */ + +.tabulator-tableholder { + padding-top: 10px; +} + +/* Rows */ + +.tabulator-row .tabulator-cell { + padding: var(--cell-vert-padding-size) var(--cell-horiz-padding-size); +} + +.tabulator-row .tabulator-cell input { + padding-left: var(--cell-horiz-padding-size) !important; + padding-right: var(--cell-horiz-padding-size) !important; +} + +.tabulator-row { + background: transparent; + border-top: none; + border-bottom: 1px solid var(--row-delimiter-color); + color: var(--row-text-color); +} + +.tabulator-row.tabulator-row-odd { + background: var(--row-background-color); +} + +.tabulator-row.tabulator-row-even { + background: var(--row-alternate-background-color); +} + +.tabulator-row.tabulator-moving { + border-color: transparent; + background-color: var(--row-moving-background-color); +} + +/* Cell */ + +.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left, +.tabulator-row .tabulator-cell { + border-right-color: transparent; +} + +.tabulator-row .tabulator-cell:not(.tabulator-editable) { + color: var(--cell-read-only-text-color); +} + +.tabulator:not(.tabulator-editing) .tabulator-row .tabulator-cell.tabulator-editable:hover { + outline: 2px solid var(--cell-editable-hover-outline-color); + outline-offset: -1px; +} + +.tabulator-row .tabulator-cell.tabulator-editing { + border-color: transparent; +} + +.tabulator-row:not(.tabulator-moving) .tabulator-cell.tabulator-editing { + outline: calc(var(--cell-editing-border-width) - 1px) solid var(--cell-editing-border-color); + border-color: var(--cell-editing-border-color); + background: var(--cell-editing-background-color); +} + +.tabulator-row:not(.tabulator-moving) .tabulator-cell.tabulator-editing > * { + color: var(--cell-editing-text-color); +} + +/* Checkbox cells */ + +.tabulator .tabulator-cell:has(svg), +.tabulator .tabulator-cell:has(input[type="checkbox"]) { + padding-left: 8px; + display: inline-flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.tabulator .tabulator-cell input[type="checkbox"] { + margin: 0; +} + +.tabulator .tabulator-footer { + color: var(--main-text-color); +} + +/* Context menus */ + +.tabulator-popup-container { + min-width: 10em; + border-radius: var(--bs-border-radius); +} + +.tabulator-menu .tabulator-menu-item { + border: 1px solid transparent; + color: var(--menu-text-color); + font-size: 16px; +} \ No newline at end of file diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts index 8bdc077ec..2ba41c6cc 100644 --- a/apps/client/src/widgets/view_widgets/table_view/index.ts +++ b/apps/client/src/widgets/view_widgets/table_view/index.ts @@ -7,7 +7,8 @@ import type { CommandListenerData, EventData } from "../../../components/app_con import type { Attribute } from "../../../services/attribute_parser.js"; import note_create from "../../../services/note_create.js"; import {Tabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MenuModule, MoveRowsModule, ColumnDefinition} from 'tabulator-tables'; -import "tabulator-tables/dist/css/tabulator_bootstrap5.min.css"; +import "tabulator-tables/dist/css/tabulator.css"; +import "../../../../src/stylesheets/table.css"; import { canReorderRows, configureReorderingRows } from "./dragging.js"; import buildFooter from "./footer.js"; import getPromotedAttributeInformation, { buildRowDefinitions } from "./rows.js";