Skip to content

Commit

Permalink
Change hours to text input again
Browse files Browse the repository at this point in the history 
- use @apply and centralize styles
  • Loading branch information
@HendrikSchmidt
HendrikSchmidt committed Mar 2, 2024
1 parent 3138818 commit 2318b2b
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 156 deletions.
4 changes: 2 additions & 2 deletions app/components/common/TimeInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function TimeInput({

return (
<div>
<label className="inline-block mb-2 ml-7" htmlFor={name}>
<label className="inline-block mb-1 ml-7" htmlFor={name}>
{label}
</label>
<div className="flex items-center">
Expand All @@ -36,7 +36,7 @@ export function TimeInput({
</span>
)}
<input
className="mx-1 read-only:bg-gray-200 read-only:cursor-not-allowed read-only:border-gray-200 read-only:mx-7 sm:p-1 md:px-3 md:py-2"
className="mx-1 read-only:bg-gray-200 read-only:cursor-not-allowed read-only:border-gray-200 read-only:mx-7"
id={name}
name={name}
type="time"
Expand Down
191 changes: 84 additions & 107 deletions app/components/projectTime/ProjectTimeDescription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,6 @@ function segmentsToDescription(segments: string[]): string {
return segments.join(", ");
}

const normalAppearance = "border-1 border-b-[1px] border-gray-300 ";
const errorAppearance =
"border border-b-2 border-red-500 focus:ring-red-500 focus:border-red-500";

const textAreaClass =
"inherit border-box absolute top-0 overflow-hidden p-[0.5em] leading-4 ";
const textareaNormalAppearance = textAreaClass + normalAppearance;
const textareaErrorAppearance = textAreaClass + errorAppearance;

const minRows = 4;
const maxRows = 40;
const minHeight = `${1 + minRows * 1.2}em`;
Expand All @@ -36,7 +27,7 @@ type ProjectTimeDescriptionProps = {
phases: TrackyPhase[];
children: React.ReactNode;
calculationPositionId: number;
submitForm: () => void;
onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
hasErrors: boolean;
resetErrors: () => void;
projectTimeId?: number;
Expand All @@ -49,7 +40,7 @@ export default function ProjectTimeDescription({
phases,
children,
calculationPositionId,
submitForm,
onKeyDown,
hasErrors,
resetErrors,
projectTimeId,
Expand Down Expand Up @@ -140,106 +131,94 @@ export default function ProjectTimeDescription({
removeDescriptionSegment(phaseAndTask);
}

async function onKeyDown(e: React.KeyboardEvent) {
// allow shift + enter to add newline
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault(); // dont add newline
submitForm();
}
}

return (
<>
<div className="my-8">
{recurringTasks && phases.length > 0 && (
<>
<label htmlFor="recurring" className="basis-1/4">
Recurring tasks
</label>
<div id="recurring" className="mt-2">
{recurringTasks.map((task) => (
{recurringTasks && phases.length > 0 && (
<div className="mt-5 mb-3">
<label htmlFor="recurring" className="basis-1/4">
Recurring tasks
</label>
<div id="recurring" className="mt-2">
{recurringTasks.map((task) => (
<div
key={task.Id}
className="flex items-start space-x-2 md:inline-flex"
>
<input
checked={descriptionSegments.includes(task.name)}
className="rounded-md border border-gray-300 bg-white p-2"
id={`${calculationPositionId}/${projectTimeId}-${task.name}`}
value={task.name}
type="checkbox"
onChange={onRecurringTaskChange}
/>
<label
className="pr-5"
htmlFor={`${calculationPositionId}/${projectTimeId}-${task.name}`}
>
{task.name}
</label>
</div>
))}
</div>
</div>
)}
{phasesToDisplay.map((phase) => (
<details key={phase.name} className="mb-[20px]" open={phase.open}>
<summary className="flex w-full flex-row items-center gap-4 rounded-t border-b-2 border-solid border-b-[#CED4DA] bg-[#E5E5E5] px-[16px] py-[20px]">
<span>{phase.name}</span>
<svg
className={`ml-auto h-4 w-4 transform transition-transform ${
phase.open ? "rotate-180" : ""
}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
{phaseTasks && (
<div className="flex h-auto flex-wrap border-b-2 border-solid border-b-[#CED4DA] bg-white p-2">
{phaseTasks.map((task) => (
<div
key={task.Id}
className="flex items-start space-x-2 md:inline-flex"
className={`m-2 flex cursor-pointer items-center rounded-full border py-1 px-3 text-sm transition-all duration-150 ease-in-out ${
descriptionSegments.includes(
[task.name, phase.name].join(" "),
)
? "border-black bg-white"
: "bg-[#212121] bg-opacity-10 hover:bg-gray-300"
}`}
onClick={() =>
handleChipClick([task.name, phase.name].join(" "))
}
>
<input
checked={descriptionSegments.includes(task.name)}
className="rounded-md border border-gray-300 bg-white p-2"
id={`${calculationPositionId}/${projectTimeId}-${task.name}`}
value={task.name}
type="checkbox"
onChange={onRecurringTaskChange}
/>
<label
className="pr-5"
htmlFor={`${calculationPositionId}/${projectTimeId}-${task.name}`}
>
{task.name}
</label>
<span>{task.name}</span>
{descriptionSegments.includes(
[task.name, phase.name].join(" "),
) && (
<button
className="ml-2 flex h-4 w-4 items-center justify-center rounded-full bg-gray-600 text-white hover:bg-gray-800"
onClick={(event) => {
event.stopPropagation();
removeChip([task.name, phase.name].join(" "));
}}
>
&#x2715;
</button>
)}
</div>
))}
</div>
</>
)}
</div>
<div className="mb-4">
{phasesToDisplay.map((phase) => (
<details key={phase.name} className="mb-[20px]" open={phase.open}>
<summary className="flex w-full flex-row items-center gap-4 rounded-t border-b-2 border-solid border-b-[#CED4DA] bg-[#E5E5E5] px-[16px] py-[20px]">
<span>{phase.name}</span>
<svg
className={`ml-auto h-4 w-4 transform transition-transform ${
phase.open ? "rotate-180" : ""
}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
{phaseTasks && (
<div className="flex h-auto flex-wrap border-b-2 border-solid border-b-[#CED4DA] bg-white p-2">
{phaseTasks.map((task) => (
<div
key={task.Id}
className={`m-2 flex cursor-pointer items-center rounded-full border py-1 px-3 text-sm transition-all duration-150 ease-in-out ${
descriptionSegments.includes(
[task.name, phase.name].join(" "),
)
? "border-black bg-white"
: "bg-[#212121] bg-opacity-10 hover:bg-gray-300"
}`}
onClick={() =>
handleChipClick([task.name, phase.name].join(" "))
}
>
<span>{task.name}</span>
{descriptionSegments.includes(
[task.name, phase.name].join(" "),
) && (
<button
className="ml-2 flex h-4 w-4 items-center justify-center rounded-full bg-gray-600 text-white hover:bg-gray-800"
onClick={(event) => {
event.stopPropagation();
removeChip([task.name, phase.name].join(" "));
}}
>
&#x2715;
</button>
)}
</div>
))}
</div>
)}
</details>
))}
</div>
)}
</details>
))}
<div className="relative flex w-full flex-col items-center justify-between md:flex-row">
<div className="mb-2 w-full md:mb-0 md:w-4/6">
<pre
Expand All @@ -257,13 +236,11 @@ export default function ProjectTimeDescription({
onInput={handleDescriptionChange}
id="description"
data-testid={descriptionTestId}
className={`${
hasErrors ? textareaErrorAppearance : textareaNormalAppearance
} h-3/5 w-full md:h-full md:w-5/6`}
className={`h-3/5 w-full md:h-full md:w-5/6 absolute top-0 overflow-hidden p-[0.5em] leading-4 ${hasErrors ? " error" : ""} `}
placeholder="Working the work…"
/>
</div>
<div className="flex flex-row space-x-2 md:flex-col md:space-x-0 md:space-y-2">
<div className="flex flex-row space-x-2 md:flex-col md:space-x-0 md:space-y-2 self-end">
{children}
</div>
</div>
Expand Down
Loading

0 comments on commit 2318b2b

Please sign in to comment.