Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix table colors / re-allow customization #127

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

fix table colors / re-allow customization #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
76fbfa5
remove variable declarations that prevent outside styling
jmonster Dec 13, 2024
01d88e8
default to white/black table bg
jmonster Dec 13, 2024
2a4a132
restore table cell text colors
jmonster Dec 13, 2024
9fe8ffd
actual black
jmonster Dec 13, 2024
50b2aa5
v0.8.7
jmonster Dec 13, 2024
618b36d
restore cell editing text colors
jmonster Dec 19, 2024
1110beb
restore row colors, because sticky columns overlap
jmonster Dec 19, 2024
4e67585
add backdrop blur to pinned/blank cells
jmonster Dec 19, 2024
c1463c4
deleted style tag
jmonster Dec 19, 2024
466564b
v0.8.8
jmonster Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@outerbase/astra-ui",
"version": "0.8.5",
"version": "0.8.8",
"type": "module",
"main": "dist/js/index.js",
"module": "dist/js/index.js",
Expand Down
14 changes: 0 additions & 14 deletions src/components/charts/composed.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,6 @@ export default class AstraComposedChart extends AstraChart {
static override styles = [
...ClassifiedElement.styles,
css`
* {
--astra-table-background-color: #f5f5f5;
--astra-table-border-color: #d4d4d4;
--astra-table-column-header-background-color: #f5f5f5;
--astra-table-row-even-background-color: #f5f5f5;
}

* .dark {
--astra-table-background-color: #121212;
--astra-table-border-color: #404040;
--astra-table-column-header-background-color-dark: #121212;
--astra-table-row-even-background-color-dark: #121212;
}

.space-mono-regular {
font-family: 'Space Mono', monospace;
font-weight: 400;
Expand Down
13 changes: 9 additions & 4 deletions src/components/table/core/td.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,11 +247,13 @@ export class TableData extends MutableElement {
'relative focus:z-[1]': true,
'h-[34px] flex items-center justify-center': true,
'border-theme-table-border dark:border-theme-table-border-dark': true,
'backdrop-blur-sm': this.blank || this.pinned,
// TODO support odd vs even again
'text-theme-table-column-content dark:text-theme-table-column-content-dark': true,
'text-theme-table-content dark:text-theme-table-content-dark': !this.isEditing,
'text-theme-table-cell-mutating-content dark:text-theme-table-cell-mutating-content': this.isEditing,
'bg-theme-table-row-new dark:bg-theme-table-row-new-dark': this.rowIsNew,
// 'hover:bg-theme-table-row-selected-hover dark:hover:bg-theme-row-selected-hover-dark': this.isActive,
'bg-theme-table-row-even dark:bg-theme-table-row-even-dark': !this.rowIsNew && !this.isActive && (!this.dirty || this.hideDirt),
'bg-theme-table-row dark:bg-theme-table-row-dark': !this.rowIsNew && !this.isActive && (!this.dirty || this.hideDirt),
'bg-theme-table-row-selected dark:bg-theme-table-row-selected-dark':
!this.rowIsNew && this.isActive && (!this.dirty || this.hideDirt), // i.e. this is the column being sorted
'bg-theme-table-cell-dirty dark:bg-theme-table-cell-dirty-dark': !this.rowIsNew && this.dirty && !this.hideDirt, // dirty cells
Expand Down Expand Up @@ -303,6 +305,9 @@ export class TableData extends MutableElement {
@property({ attribute: 'row-is-new', type: Boolean })
public rowIsNew = false

@property({ attribute: 'pinned', type: Boolean })
pinned = false

@state() menuIsOpen = false
@state() isContentEditable = true // this property is to toggle off the contenteditableness of to resolve quirky focus and text selection that can happen when, say, right-clicking to trigger the context menu
@state() protected options = RW_OPTIONS
Expand Down Expand Up @@ -534,9 +539,9 @@ export class TableData extends MutableElement {
cellContents = commonCellContents
}

const themeClass = this.theme === 'dark' ? 'dark' : ''
const themeClass = this.theme === 'dark' ? 'dark ' : ''
const inputEl = this.isEditing //   prevents the row from collapsing (in height) when there is only 1 column
? html`<div class="text-sm ${themeClass}">&nbsp;<input .value=${typeof displayValue === 'string' ? displayValue : (displayValue ?? '')} ?readonly=${this.readonly} @input=${this.onChange} class="z-[2] absolute top-0 bottom-0 right-0 left-0 bg-theme-table-cell-mutating-background dark:bg-theme-table-cell-mutating-background-dark outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 px-3 focus:rounded-[4px] font-table" @blur=${this.onBlur}></input></div>`
? html`<div class="text-sm ${themeClass}">&nbsp;<input .value=${typeof displayValue === 'string' ? displayValue : (displayValue ?? '')} ?readonly=${this.readonly} @input=${this.onChange} class="z-[2] absolute top-0 bottom-0 right-0 left-0 bg-theme-table-cell-mutating-background dark:bg-theme-table-cell-mutating-background-dark outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 px-3 focus:rounded-[4px] font-table dark:text-theme-table-cell-mutating-content-dark text-theme-table-cell-mutating-content" @blur=${this.onBlur}></input></div>`
: html``
const emptySlot = this.blank ? html`<slot></slot>` : html``
const menuOptions = this.dirty
Expand Down
5 changes: 0 additions & 5 deletions src/pages/components/table.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,6 @@ const columns = {
}
---

<style>
* {
/* --astra-font-family: 'American Typewriter'; */
}
</style>
<Layout title="Astra-UI - Table Component">
<h1 class="text-xl font-bold">light</h1>
<div class="relative h-96 mb-2">
Expand Down
18 changes: 8 additions & 10 deletions tailwind.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,10 @@ export default {

// TABLE
// background
table: 'var(--astra-table-background-color, rgba(255,255,255, 0))',
'table-dark': 'var(--astra-table-background-color, rgba(10,10,10, 0))',
table: 'var(--astra-table-background-color, rgba(255,255,255, 1))',
'table-dark': 'var(--astra-table-background-color-dark, rgba(0, 0, 0, 1))',
'table-row': 'var(--astra-table-row-background-color, rgba(255,255,255, 1))',
'table-row-dark': 'var(--astra-table-row-background-color-dark, rgba(0, 0, 0, 1))',

// text
'table-content': 'var(--astra-table-content-color, #000000)',
Expand All @@ -52,24 +54,20 @@ export default {
'table-column-content-dark': 'var(--astra-table-column-header-content-color-dark, #ffffff)',

// rows
'table-row-even': 'var(--astra-table-row-even-background-color, rgb(255,255,255))',
'table-row-even-dark': 'var(--astra-table-row-even-background-color-dark, rgb(0,0,0))',
'table-row-odd': 'var(--astra-table-row-even-background-color, rgb(255,255,255))',
'table-row-odd-dark': 'var(--astra-table-row-even-background-color-dark, rgb(0,0,0))',
'table-row-new': 'var(--astra-table-row-new-background-color, #DDF0DF)',
'table-row-new-dark': 'var(--astra-table-row-new-background-color-dark, #14532D)',
'table-row-hover': 'var(--astra-table-row-hover-background-color, rgba(0,0,0,0.03))',
'table-row-hover-dark': 'var(--astra-table-row-hover-background-color-dark, rgb(30,30,30))',
'table-row-selected': 'var(--astra-table-row-selected-background-color, rgba(245, 245, 245, 1))',
'table-row-selected-dark': 'var(--astra-table-row-selected-background-color-dark, rgb(23 23 23))',
'table-row-selected-dark': 'var(--astra-table-row-selected-background-color-dark, rgb(23, 23, 23))',
'table-row-selected-hover': 'var(--astra-table-row-selected-hover-background-color, rgba(229, 229, 229, 1))',
'table-row-selected-hover-dark': 'var(--astra-table-row-selected-hover-background-color-dark, rgb(38 38 38))',
'table-row-selected-hover-dark': 'var(--astra-table-row-selected-hover-background-color-dark, rgb(38, 38, 38))',

// editing cells
'table-cell-mutating-background': 'var(--astra-cell-mutating-background-color, rgb(239 246 255))',
'table-cell-mutating-background-dark': 'var(--astra-cell-mutating-background-color-dark, rgb(23 37 84))',
'table-cell-mutating-content': 'var(--astra-cell-mutating-content-color, rgb(0,0,255))',
'table-cell-mutating-content-dark': 'var(--astra-cell-mutating-content-color-dark, rgb(255,0,255))',
'table-cell-mutating-content': 'var(--astra-cell-mutating-content-color, rgb(0,0,0))',
'table-cell-mutating-content-dark': 'var(--astra-cell-mutating-content-color-dark, rgb(255,255,255))',

// dirty cells
'table-cell-dirty': 'var(--astra-cell-dirty-background-color, rgb(253 230 138))',
Expand Down