obsidian-plugin/akaswan_table-list
1
0
Fork 0
mirror of https://github.com/akaswan/table-list.git synced 2026-07-22 05:49:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Still cant make default text the right color

Browse source
This commit is contained in:
Akaswan 2025-04-26 15:45:04 -05:00
parent 82ad453bce
commit 0a22f2451a
2 changed files with 14 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/main/components/TaskCell.tsx
View file

@ -32,38 +32,27 @@ interface TaskCellProps {
const TaskCell: React.FC<TaskCellProps> = ({task, removeTask, inputRef, handleTaskNameChange, projectName, status, taskStatuses, editTaskStatus}) => {
document.documentElement.style.setProperty("--task-color", status.color);
document.documentElement.style.setProperty(
"--task-background",
`${status.color}33`
);
document.documentElement.style.setProperty(
"--dark-task-text-color",
transColor(status.color, -40)
);
document.documentElement.style.setProperty(
"--light-task-text-color",
transColor(status.color, 25)
);
document.documentElement.style.setProperty(
"--light-task-background-color",
`${transColor(status.color, 25)}33`
);
const taskColor = status.color;
const taskBackground = `${status.color}33`;
const darkTaskTextColor = transColor(status.color, -40);
const lightTaskTextColor = transColor(status.color, 25);
const lightTaskBackgroundColor = `${transColor(status.color, 25)}33`;
return (
<div className="task-cell">
<div className="task-cell-header">
<div className="task-cell" style={{backgroundColor: taskBackground}}>
<div className="task-cell-header" style={{backgroundColor: taskBackground, color: lightTaskTextColor}}>
{projectName}
<select className="task-cell-status-indicator" onChange={(e) => editTaskStatus(task.id, e.target.value)}>
<select className="task-cell-status-indicator" style={{ border: `1px solid ${lightTaskTextColor}`, color: lightTaskTextColor }} onChange={(e) => editTaskStatus(task.id, e.target.value)} defaultValue={status.id}>
{taskStatuses.map((status) => (
<option key={status.id} value={status.id} selected={status.id === task.status.id}>
<option key={status.id} value={status.id}>
{status.name}
</option>
))}
</select>
</div>
<div className="task-cell-content">
<div className="task-cell-content" >
<input
style={{color: lightTaskTextColor}}
placeholder="Task Name"
onBlur={(e) => {
if (e.target.value === "") removeTask(task.id);

17
styles.css
View file

@ -67,7 +67,6 @@
/* Task Cell */
.task-cell {
background: var(--task-background);
opacity: 0.8;
border-radius: 8px;
padding: 4px;
@ -77,10 +76,8 @@
}
.task-cell-header {
background: var(--task-background);
border-radius: 6px;
margin-bottom: 4px;
color: var(--light-task-text-color);
padding-left: 4px;
display: flex;
justify-content: space-between;
@ -89,36 +86,28 @@
.task-cell-content input {
background: transparent;
border: none;
color: var(--light-task-text-color);
margin-bottom: 4px;
font-size: 14px;
width: 100%;
}
.task-cell-content input::placeholder {
color: var(--light-task-text-color);
opacity: 0.5;
.task-cell-status-indicator:hover {
background: rgba(255, 255, 255, .1)
}
.task-cell-status-indicator {
padding-right: 4px;
padding-left: 4px;
border: var(--light-task-text-color) solid 1px;
border-radius: 6px;
height: min-content;
color: var(--light-task-text-color);
background-color: transparent;
text-align: center;
}
.task-cell-status-indicator:hover {
background-color: var(--light-task-background-color);
cursor: pointer;
}
.task-cell-status-indicator:focus {
background-color: var(--light-task-background-color);
}
/* Table */
.table-container {
border: var(--border-width) solid var(--background-modifier-border);