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

Made it more friendly for smaller screens

Browse source
This commit is contained in:
Akaswan 2025-05-26 20:07:22 -05:00
parent 3009321d05
commit 3d6acca491
3 changed files with 80 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/main/components/Table.tsx
View file

@ -74,17 +74,19 @@ const Table: React.FC<TableProps> = ({
<tr>
<th>Projects</th>
{dates.map((date) => (
<th className="date" key={date}>{`${format(
date,
"EEEE"
)} - ${format(date, "yyyy-MM-dd")}`}</th>
<th className="date" key={date}>
<div className="date-header">
<div>{format(date, "EEEE")}</div>
<div>{format(date, "yyyy-MM-dd")}</div>
</div>
</th>
))}
</tr>
</thead>
<tbody>
{projects.map((project) => (
<tr key={project.id}>
<td key={project.id}>
<td key={project.id} className="project-column">
<input
ref={
project.id === nextProjectId - 1
@ -95,7 +97,7 @@ const Table: React.FC<TableProps> = ({
value={project.name}
className="project-input"
placeholder="New Project"
onBlur={(e) => {if (e.target.value === "") removeProject(project.id)}}
onBlur={(e) => { if (e.target.value === "") removeProject(project.id) }}
onChange={(e) =>
handleProjectNameChange(
project.id,
@ -110,14 +112,14 @@ const Table: React.FC<TableProps> = ({
key={`${project.id}:${date}:${index}`}
onClick={(e) => {
if (e.target === e.currentTarget) {
addTaskToProject(project, date);
setTimeout(() => {
if (newTaskInputRef.current) {
newTaskInputRef.current.focus();
}
}, 0);
addTaskToProject(project, date);
setTimeout(() => {
if (newTaskInputRef.current) {
newTaskInputRef.current.focus();
}
}, 0);
}
}}
}}
>
{project.tasks
.filter(

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

@ -32,7 +32,7 @@ const hexToRgba = (hex: string, alpha: number) => {
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};
};
interface TaskCellProps {
task: Task;
@ -72,7 +72,9 @@ const TaskCell: React.FC<TaskCellProps> = ({
color: lightTaskTextColor,
}}
>
{projectName}
<div className="project-name-repeat">
{projectName}
</div>
<Listbox
value={status.id}
onChange={(value) => editTaskStatus(task.id, value)}
@ -93,8 +95,7 @@ const TaskCell: React.FC<TaskCellProps> = ({
key={s.id}
value={s.id}
className={({ active }) =>
`task-cell-dropdown-option ${
active ? "active" : ""
`task-cell-dropdown-option ${active ? "active" : ""
}`
}
>

95
styles.css
View file

@ -67,7 +67,7 @@
/* Task Cell */
.task-cell {
/* opacity: 0.8; */
/* opacity: 0.8; */
border-radius: 8px;
padding: 4px;
display: flex;
@ -84,6 +84,10 @@
align-items: center;
}
.project-name-repeat {
text-overflow: clip;
}
.task-cell-content input {
background: transparent;
border: none;
@ -102,8 +106,10 @@
background-color: transparent !important;
display: flex;
align-items: center; /* <- vertical center */
justify-content: center; /* <- horizontal center */
align-items: center;
/* <- vertical center */
justify-content: center;
/* <- horizontal center */
}
.task-cell-status-indicator:hover {
@ -112,14 +118,15 @@
/* Table */
.table-container {
border: var(--border-width) solid var(--background-modifier-border);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
overflow: hidden;
max-width: 100%;
--one-seventh-width: 0px;
border: var(--border-width) solid var(--background-modifier-border);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
overflow: hidden;
max-width: 100%;
--one-seventh-width: 0px;
}
.new-project-container {
display: flex;
align-items: center;
@ -129,46 +136,64 @@
border-bottom: var(--border-width) solid var(--background-modifier-border);
border-left: var(--border-width) solid var(--background-modifier-border);
border-right: var(--border-width) solid var(--background-modifier-border);
width: 130px;
width: 129.5px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
.project-column {
min-width: 128px;
}
.table {
width: 100%;
border-collapse: collapse;
text-align: left;
width: 100%;
border-collapse: collapse;
text-align: left;
}
.table-header {
background-color: var(--background-secondary);
background-color: var(--background-secondary);
}
.table th {
padding: 12px 16px;
font-size: small;
font-weight: 500;
}
.top-left {
width: 128px;
padding: 12px 16px;
font-size: small;
font-weight: 500;
}
.table td {
padding: 8px;
font-size: small;
height: 80px;
border-top: var(--border-width) solid var(--background-modifier-border);
padding: 8px;
font-size: small;
height: 80px;
border-top: var(--border-width) solid var(--background-modifier-border);
}
.taskcell-enclosure {
border-left: var(--border-width) solid var(--background-modifier-border);
border-left: var(--border-width) solid var(--background-modifier-border);
}
.project-input {
border: none !important;
width: 100%;
border: none !important;
width: 100%;
}
.project-input:focus {
outline: none !important; /* Removes the default focus outline */
border: none !important; /* Ensures no border is applied */
outline: none !important;
/* Removes the default focus outline */
border: none !important;
/* Ensures no border is applied */
}
.date {
border-left: var(--border-width) solid var(--background-modifier-border);
width: var(--taskcell-enclosure-width);
border-left: var(--border-width) solid var(--background-modifier-border);
width: var(--taskcell-enclosure-width);
}
.date-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.task-cell-dropdown-options {
@ -193,8 +218,8 @@
/* Required */
.warning-container {
color: var(--text-normal);
background-color: var(--background-modifier-error);
color: var(--text-normal);
background-color: var(--background-modifier-error);
}
/*# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3R5bGVzLmNzcyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLyogRGVmaW5lIGEgY3VzdG9tIGJvcmRlciBjb2xvciAqL1xyXG4udGFibGUtY29udGFpbmVyIHtcclxuICBib3JkZXI6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgdmFyKC0tYmFja2dyb3VuZC1tb2RpZmllci1ib3JkZXIpOyAvKiBDdXN0b20gYm9yZGVyIGNvbG9yICovXHJcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvKiBSb3VuZGVkIGNvcm5lcnMgKi9cclxuICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gIG1heC13aWR0aDogMTAwJTtcclxuICAtLW9uZS1zZXZlbnRoLXdpZHRoOiAwcHg7XHJcbn1cclxuXHJcbi50YWJsZSB7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcclxuICB0ZXh0LWFsaWduOiBsZWZ0O1xyXG59XHJcblxyXG4udGFibGUtaGVhZGVyIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLXNlY29uZGFyeSk7XHJcbn1cclxuXHJcbi50YWJsZSB0aCB7XHJcbiAgcGFkZGluZzogMTJweCAxNnB4O1xyXG4gIGZvbnQtc2l6ZTogc21hbGw7XHJcbiAgZm9udC13ZWlnaHQ6IDUwMDtcclxufSBcclxuXHJcbi50b3AtbGVmdCB7XHJcbiAgd2lkdGg6IDEyOHB4O1xyXG59XHJcblxyXG4udGFibGUgdGQge1xyXG4gIHBhZGRpbmc6IDEycHggMTZweDtcclxuICBmb250LXNpemU6IHNtYWxsO1xyXG4gIGhlaWdodDogNjhweDtcclxuICBib3JkZXItdG9wOiB2YXIoLS1ib3JkZXItd2lkdGgpIHNvbGlkIHZhcigtLWJhY2tncm91bmQtbW9kaWZpZXItYm9yZGVyKTtcclxufVxyXG5cclxuLnRhc2tjZWxsLWVuY2xvc3VyZSB7XHJcbiAgYm9yZGVyLWxlZnQ6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgdmFyKC0tYmFja2dyb3VuZC1tb2RpZmllci1ib3JkZXIpO1xyXG59XHJcblxyXG4ucHJvamVjdC1pbnB1dCB7XHJcbiAgYm9yZGVyOiBub25lICFpbXBvcnRhbnQ7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbn1cclxuXHJcbi5kYXRlIHtcclxuICBib3JkZXItbGVmdDogdmFyKC0tYm9yZGVyLXdpZHRoKSBzb2xpZCB2YXIoLS1iYWNrZ3JvdW5kLW1vZGlmaWVyLWJvcmRlcik75mdzIjogIjtBQUNBO0FBQ0U7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBR0Y7QUFDRTtBQUNBO0FBQ0E7QUFBQTtBQUdGO0FBQ0U7QUFBQTtBQUdGO0FBQ0U7QUFDQTtBQUNBO0FBQUE7QUFHRjtBQUNFO0FBQUE7QUFHRjtBQUNFO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHRjtBQUNFO0FBQUE7QUFHRjtBQUNFO0FBQ0E7QUFBQTtBQUdGO0FBQ0U7QUFDQTtBQUFBOyIsCiAgIm5hbWVzIjogW10KfQo= */
/*# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsic3R5bGVzLmNzcyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiLyogRGVmaW5lIGEgY3VzdG9tIGJvcmRlciBjb2xvciAqL1xyXG4udGFibGUtY29udGFpbmVyIHtcclxuICBib3JkZXI6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgdmFyKC0tYmFja2dyb3VuZC1tb2RpZmllci1ib3JkZXIpOyAvKiBDdXN0b20gYm9yZGVyIGNvbG9yICovXHJcbiAgYm9yZGVyLXJhZGl1czogOHB4OyAvKiBSb3VuZGVkIGNvcm5lcnMgKi9cclxuICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gIG1heC13aWR0aDogMTAwJTtcclxuICAtLW9uZS1zZXZlbnRoLXdpZHRoOiAwcHg7XHJcbn1cclxuXHJcbi50YWJsZSB7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcclxuICB0ZXh0LWFsaWduOiBsZWZ0O1xyXG59XHJcblxyXG4udGFibGUtaGVhZGVyIHtcclxuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLXNlY29uZGFyeSk7XHJcbn1cclxuXHJcbi50YWJsZSB0aCB7XHJcbiAgcGFkZGluZzogMTJweCAxNnB4O1xyXG4gIGZvbnQtc2l6ZTogc21hbGw7XHJcbiAgZm9udC13ZWlnaHQ6IDUwMDtcclxufSBcclxuXHJcbi50b3AtbGVmdCB7XHJcbiAgd2lkdGg6IDEyOHB4O1xyXG59XHJcblxyXG4udGFibGUgdGQge1xyXG4gIHBhZGRpbmc6IDEycHggMTZweDtcclxuICBmb250LXNpemU6IHNtYWxsO1xyXG4gIGhlaWdodDogNjhweDtcclxuICBib3JkZXItdG9wOiB2YXIoLS1ib3JkZXItd2lkdGgpIHNvbGlkIHZhcigtLWJhY2tncm91bmQtbW9kaWZpZXItYm9yZGVyKTtcclxufVxyXG5cclxuLnRhc2tjZWxsLWVuY2xvc3VyZSB7XHJcbiAgYm9yZGVyLWxlZnQ6IHZhcigtLWJvcmRlci13aWR0aCkgc29saWQgdmFyKC0tYmFja2dyb3VuZC1tb2RpZmllci1ib3JkZXIpO1xyXG59XHJcblxyXG4ucHJvamVjdC1pbnB1dCB7XHJcbiAgYm9yZGVyOiBub25lICFpbXBvcnRhbnQ7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbn1cclxuXHJcbi5kYXRlIHtcclxuICBib3JkZXItbGVmdDogdmFyKC0tYm9yZGVyLXdpZHRoKSBzb2xpZCB2YXIoLS1iYWNrZ3JvdW5kLW1vZGlmaWVyLWJvcmRlcik75mdzIjogIjtBQUNBO0FBQ0U7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUFBO0FBR0Y7QUFDRTtBQUNBO0FBQ0E7QUFBQTtBQUdGO0FBQ0U7QUFBQTtBQUdGO0FBQ0U7QUFDQTtBQUNBO0FBQUE7QUFHRjtBQUNFO0FBQUE7QUFHRjtBQUNFO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFHRjtBQUNFO0FBQUE7QUFHRjtBQUNFO0FBQ0E7QUFBQTtBQUdGO0FBQ0U7QUFDQTtBQUFBOyIsCiAgIm5hbWVzIjogW10KfQo= */