Skip to content

Commit

Permalink
Merge pull request #374 from pankona/tweak-ui
Browse files Browse the repository at this point in the history 
tweak space and button sizes
  • Loading branch information
@pankona
pankona committed Dec 9, 2021
2 parents 79ffd24 + 95b5421 commit 458bb65
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 184 deletions.
342 changes: 182 additions & 160 deletions hashira-web/src/App.tsx
View file
Expand Up @@ -3,6 +3,20 @@ import * as firebase from "./firebase";
import Header from "./Header";
import { TaskList } from "./TaskList";
import TaskInput from "./TaskInput";
import styled from "styled-components";

export const StyledVerticalSpacer = styled.div`
min-height: 8px;
`;

export const StyledHorizontalSpacer = styled.div`
min-width: 8px;
`;

const StyledBody = styled.div`
padding-left: 8px;
padding-right: 8px;
`;

const App: React.VFC = () => {
const [user, setUser] = React.useState<firebase.User | null | undefined>(
Expand Down Expand Up @@ -99,179 +113,187 @@ const App: React.VFC = () => {
return (
<div>
<Header user={user} />
<TaskInput
onSubmitTasks={onSubmitTasks}
disabled={isUploading || !user}
/>
{user ? (
<>
<input
type="button"
value={"Mark as Done"}
disabled={
isUploading ||
((): boolean => {
for (const v in checkedTasks) {
if (checkedTasks[v]) {
return false;
}
}
return true;
})()
}
onClick={async (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
if (!user) {
return;
}

const tasksToMarkAsDone: firebase.TasksObject = {};
for (const v in checkedTasks) {
if (checkedTasks[v]) {
const task = tasksAndPriorities["Tasks"][v];
tasksToMarkAsDone[v] = {
ID: task.ID,
IsDeleted: task.Place === "DONE",
Name: task.Name,
Place: "DONE",
};
<StyledBody>
<TaskInput
onSubmitTasks={onSubmitTasks}
disabled={isUploading || !user}
/>
<StyledVerticalSpacer />
{user ? (
<>
<div style={{ display: "flex" }}>
<input
type="button"
value={"Mark as Done"}
style={{ minWidth: "128px" }}
disabled={
isUploading ||
((): boolean => {
for (const v in checkedTasks) {
if (checkedTasks[v]) {
return false;
}
}
return true;
})()
}
}
onClick={async (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
if (!user) {
return;
}

setIsUploading(true);
const tasksToMarkAsDone: firebase.TasksObject = {};
for (const v in checkedTasks) {
if (checkedTasks[v]) {
const task = tasksAndPriorities["Tasks"][v];
tasksToMarkAsDone[v] = {
ID: task.ID,
IsDeleted: task.Place === "DONE",
Name: task.Name,
Place: "DONE",
};
}
}

await firebase.updateTasks(tasksToMarkAsDone);
setIsUploading(true);

// refresh tasks and priorities
const tp = await firebase.fetchTaskAndPriorities(user.uid);
setTasksAndPriorities(tp);
setCheckedTasks({});
await firebase.updateTasks(tasksToMarkAsDone);

setIsUploading(false);
}}
/>
<input
type="button"
value={mode === "move" ? "finish move" : "move"}
disabled={isUploading}
onClick={() => {
setMode((prev) => {
if (prev === "move") {
return "select";
}
setCheckedTasks({});
return "move";
});
}}
/>
// refresh tasks and priorities
const tp = await firebase.fetchTaskAndPriorities(user.uid);
setTasksAndPriorities(tp);
setCheckedTasks({});

{tasksAndPriorities ? (
<div
className="TaskAndPriorities"
style={{
display: "flex",
overflow: "auto",
}}
>
<TaskList
user={user}
place={"BACKLOG"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
user={user}
place={"TODO"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
onMoveTask={onMoveTask}
setIsUploading(false);
}}
/>
<TaskList
user={user}
place={"DOING"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
user={user}
place={"DONE"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
onMoveTask={onMoveTask}
<StyledHorizontalSpacer />
<input
type="button"
value={mode === "move" ? "Finish moving" : "Move"}
style={{ minWidth: "128px" }}
disabled={isUploading}
onClick={() => {
setMode((prev) => {
if (prev === "move") {
return "select";
}
setCheckedTasks({});
return "move";
});
}}
/>
</div>
) : undefined}
<button
onClick={async () => {
await firebase.claimNewAccessToken(user.uid);
<StyledVerticalSpacer />
{tasksAndPriorities ? (
<div
className="TaskAndPriorities"
style={{
display: "flex",
overflow: "auto",
}}
>
<TaskList
user={user}
place={"BACKLOG"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
user={user}
place={"TODO"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
user={user}
place={"DOING"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
user={user}
place={"DONE"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
onMoveTask={onMoveTask}
/>
</div>
) : undefined}
<button
onClick={async () => {
await firebase.claimNewAccessToken(user.uid);

const ret = await firebase.fetchAccessTokens(user.uid);
setAccessTokens(ret);
}}
>
Generate new access token
</button>
<button
disabled={((): boolean => {
for (const v in checkedTokens) {
if (checkedTokens[v]) {
return false;
const ret = await firebase.fetchAccessTokens(user.uid);
setAccessTokens(ret);
}}
>
Generate new access token
</button>
<button
disabled={((): boolean => {
for (const v in checkedTokens) {
if (checkedTokens[v]) {
return false;
}
}
return true;
})()}
onClick={async () => {
const accesstokens: string[] = [];
for (let v in checkedTokens) {
accesstokens.push(v);
}
}
return true;
})()}
onClick={async () => {
const accesstokens: string[] = [];
for (let v in checkedTokens) {
accesstokens.push(v);
}

await firebase.revokeAccessTokens(user.uid, accesstokens);
await firebase.revokeAccessTokens(user.uid, accesstokens);

const ret = await firebase.fetchAccessTokens(user.uid);
setAccessTokens(ret);
}}
>
Revoke access token
</button>
{accesstokens.map((token: string) => {
return (
<li key={token}>
<input
id={token}
type="checkbox"
checked={checkedTokens[token] || false}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setCheckedTokens({
...checkedTokens,
[e.target.id]: e.target.checked,
});
}}
name={token}
value={token}
/>
{token}
</li>
);
})}
</>
) : (
<div>Loading...</div>
)}
const ret = await firebase.fetchAccessTokens(user.uid);
setAccessTokens(ret);
}}
>
Revoke access token
</button>
{accesstokens.map((token: string) => {
return (
<li key={token}>
<input
id={token}
type="checkbox"
checked={checkedTokens[token] || false}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setCheckedTokens({
...checkedTokens,
[e.target.id]: e.target.checked,
});
}}
name={token}
value={token}
/>
{token}
</li>
);
})}
</>
) : (
<div>Loading...</div>
)}
</StyledBody>
</div>
);
};
Expand Down
6 changes: 4 additions & 2 deletions hashira-web/src/Header.tsx
View file
Expand Up @@ -6,8 +6,10 @@ import styled from "styled-components";
const StyledHeader = styled.div`
display: flex;
justify-content: space-between;
padding-left: 24px;
padding-right: 24px;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
`;

const StyledRevision = styled.div`
Expand Down

0 comments on commit 458bb65

Please sign in to comment.