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.

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

zupass ux improvements #1837

Closed
wants to merge 166 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
166 commits
Select commit Hold shift + click to select a range
4abbb56
install tailwind, add it to build/dev workflows
ichub Jul 24, 2024
8e5e3c1
playing around with styles
ichub Jul 24, 2024
de241de
more experimentation
ichub Jul 24, 2024
38b5dce
more
ichub Jul 24, 2024
827ecd2
more
ichub Jul 24, 2024
9c76b72
more
ichub Jul 24, 2024
092a742
filter out non-event folders from home screen
ichub Jul 24, 2024
bc76ffb
more experimentation
ichub Jul 24, 2024
b1a147a
adding more examples
ichub Jul 24, 2024
7d02f47
more
ichub Jul 24, 2024
36f8ce6
adding test data
ichub Jul 25, 2024
d466f15
styling
ichub Jul 25, 2024
69cda9a
more
ichub Jul 25, 2024
d48487c
moar
ichub Jul 25, 2024
51221e5
more
ichub Jul 25, 2024
86f7e87
more
ichub Jul 25, 2024
958289a
more
ichub Jul 25, 2024
60c4317
added ability to see 'other' PCDs
ichub Jul 25, 2024
efbc82b
blue -> cyan
ichub Jul 25, 2024
d1dd1d5
more
ichub Jul 25, 2024
9f372e7
more
ichub Jul 25, 2024
22bdb58
more
ichub Jul 25, 2024
e707821
add zupass logo
ichub Jul 25, 2024
cc1a7a6
added old event data
ichub Jul 25, 2024
4ade0e0
toggle showing and hiding older events
ichub Jul 25, 2024
6b5546e
adding a just devcon mode
ichub Jul 25, 2024
6b8dea5
adjusting margins on stuff
ichub Jul 25, 2024
7143a78
bring back the icons
ichub Jul 25, 2024
e218006
implement a modal that shows up when the user clicks that they dont s…
ichub Jul 26, 2024
fe5bc20
make the devcon folder special
ichub Jul 26, 2024
b1a6170
fixed up the dates
ichub Jul 26, 2024
36fd3f6
slight animation
ichub Jul 26, 2024
6b31a2e
adding a 'more' screen
ichub Jul 26, 2024
a24a5d5
adding a bunch of examples
ichub Jul 26, 2024
684094f
0xparc brat
ichub Jul 26, 2024
8f7e878
working on more screens
ichub Jul 26, 2024
7c60be9
fleshing out the duck screen
ichub Jul 26, 2024
0fbef20
fix routing
ichub Jul 26, 2024
f5168cc
change the main identity card to display a qr
ichub Jul 26, 2024
1488e18
more
ichub Jul 26, 2024
8bf2fc9
fleshing out the fhe screen
ichub Jul 26, 2024
2024f62
implementing the pod screen
ichub Jul 26, 2024
879e3cc
make the pod screen actually functional
ichub Jul 26, 2024
7edd29e
duck message
ichub Jul 26, 2024
17c9c96
more zk screen stuff
ichub Jul 26, 2024
6b1de23
implementing the 0xparc page
ichub Jul 26, 2024
affa13c
filling out the notes.0xparc section
ichub Jul 26, 2024
5fa75a2
adding the matrix animation
ichub Jul 26, 2024
7c7641a
installing react-three-fiber
ichub Jul 26, 2024
c1ae499
add crazy fucking animation
ichub Jul 26, 2024
320b96f
add test data
ichub Jul 26, 2024
696b5c1
use button component
ichub Jul 26, 2024
41c2ac4
changed green button colors
ichub Jul 26, 2024
dfc1b8a
more
ichub Jul 26, 2024
335efbf
add a POD animation
ichub Jul 26, 2024
f8e325b
pod animated background
ichub Jul 26, 2024
e766d54
animate duck background
ichub Jul 26, 2024
939f6cb
neon brat background
ichub Jul 26, 2024
f6156b2
added images to the zk adventure game
ichub Jul 26, 2024
e3c189e
add link for pc kit
ichub Jul 26, 2024
9992f65
yarn.lock
ichub Jul 30, 2024
4cb92c2
better button colors
ichub Jul 30, 2024
db0af70
add todo
ichub Aug 5, 2024
6268825
adding 'other' screen as a separate component
ichub Aug 6, 2024
598edb6
thinking
ichub Aug 6, 2024
865942c
creating a table
ichub Aug 6, 2024
7061379
show name of pcd
ichub Aug 6, 2024
ddf50b7
added some backgrounds to be able to reason about layout more effecti…
ichub Aug 6, 2024
e6b8b1a
ok, the layout is somewhat working
ichub Aug 6, 2024
75ad2ad
also displaying the folder
ichub Aug 6, 2024
af53bc3
more
ichub Aug 6, 2024
0cdcfb4
a little bit of styling for the pcds
ichub Aug 6, 2024
8f448f1
cleaning it up
ichub Aug 6, 2024
7efcb9b
more
ichub Aug 6, 2024
97745b9
more
ichub Aug 6, 2024
93eda9e
more
ichub Aug 6, 2024
f9f7ba0
removing some stuff, adding pcdscreen
ichub Aug 6, 2024
164f2c1
more
ichub Aug 6, 2024
9d57086
more
ichub Aug 6, 2024
28cb66d
more
ichub Aug 6, 2024
d1049aa
more fleshing out of pcd screen
ichub Aug 6, 2024
0bdd2c5
more
ichub Aug 6, 2024
b93c7b3
more
ichub Aug 6, 2024
147b5c5
implement folder-based filters for gmail view
ichub Aug 6, 2024
3faaee8
search works
ichub Aug 7, 2024
1f67f0e
react context-based implementation of the gmail screen
ichub Aug 7, 2024
3898d1e
more
ichub Aug 7, 2024
9f92aa3
more
ichub Aug 7, 2024
3011666
gmail -> zmail
ichub Aug 7, 2024
3b1bc39
fixing up styling
ichub Aug 7, 2024
e229c98
more
ichub Aug 7, 2024
e0f54d3
more
ichub Aug 7, 2024
b5e0716
more
ichub Aug 7, 2024
06efb64
styling zmail table
ichub Aug 7, 2024
aed0f96
more
ichub Aug 7, 2024
1e84033
more
ichub Aug 7, 2024
5300ae3
more
ichub Aug 7, 2024
6cc9702
more zmail stuff
ichub Aug 7, 2024
8bf15e0
more pcdscreen
ichub Aug 7, 2024
b996ae5
more
ichub Aug 7, 2024
63d1bf3
more
ichub Aug 7, 2024
2e17ead
more zmail styling
ichub Aug 7, 2024
16a00c0
add back to zupass button
ichub Aug 8, 2024
7838113
make modal not ever clip off the screen, and in case it's too small, …
ichub Aug 8, 2024
a27b286
more modal work
ichub Aug 8, 2024
46e7e03
nowrap
ichub Aug 8, 2024
41baf18
zapps button in top row now
ichub Aug 8, 2024
c66a93e
change zupass logo text
ichub Aug 8, 2024
3651994
converting buttons to be new buttons
ichub Aug 8, 2024
496dbbf
more
ichub Aug 8, 2024
0dddc19
more
ichub Aug 8, 2024
077990d
more
ichub Aug 8, 2024
8b09865
moved progcrypto out of devcon folder
ichub Aug 8, 2024
b11089d
bring back list of tickets
ichub Aug 8, 2024
9b192e9
better loading indicator
ichub Aug 8, 2024
154fb89
more
ichub Aug 8, 2024
b487a8e
colors
ichub Aug 8, 2024
47e987b
better loading indicator
ichub Aug 8, 2024
6d7ea73
styling zmail
ichub Aug 8, 2024
91b6109
simplified further
ichub Aug 8, 2024
d66942e
more
ichub Aug 8, 2024
9cc6d61
more styling of zmail screen
ichub Aug 8, 2024
850db35
more styling
ichub Aug 8, 2024
5da2b7d
more
ichub Aug 8, 2024
334e5b0
more
ichub Aug 8, 2024
62363a8
more
ichub Aug 8, 2024
61d51bd
moving the pcd preview into the zmail screen
ichub Aug 8, 2024
071903c
adding a circle back button
ichub Aug 8, 2024
a6c7fee
back button styling
ichub Aug 8, 2024
457c612
adding a pcd metadata interface
ichub Aug 8, 2024
4bdf1d1
pcd metadata now affects the rendering of the zmail screen
ichub Aug 8, 2024
a943784
implemented pcd metadata merge
ichub Aug 8, 2024
4124e36
pcd metadata now persists
ichub Aug 8, 2024
014a502
better hover and active states for the sidebar pills
ichub Aug 8, 2024
59d3fbc
slight refactor of where the top and bottom bars in the email screen …
ichub Aug 8, 2024
01ea913
display quantity of matching PCDs in the top bar
ichub Aug 8, 2024
d53aa22
make it possible to open the settings modal from the zmail screen
ichub Aug 8, 2024
e1e4f9d
added a test button for resetting metadata
ichub Aug 8, 2024
6dc1a56
adding and rendering time added timestamp for pcd metadatas
ichub Aug 8, 2024
34c865d
added time ago formatting for pcd email rows
ichub Aug 9, 2024
7a7e20c
sort the pcds by the order in which they appear
ichub Aug 9, 2024
59a2dae
slightly change padding
ichub Aug 9, 2024
bed0d30
logging out of the zmail screen works properly
ichub Aug 9, 2024
93c738f
more
ichub Aug 9, 2024
fe88fa6
cleaning up the interactions between the various ... interactions
ichub Aug 9, 2024
5ac716f
update todo
ichub Aug 9, 2024
a234e91
more
ichub Aug 9, 2024
e7b7b32
adding pcd preview popover
ichub Aug 9, 2024
d4851ad
more
ichub Aug 9, 2024
4d2e61e
more
ichub Aug 9, 2024
80590b0
display quantity of pcds in the sidebar
ichub Aug 9, 2024
131dbf1
more
ichub Aug 9, 2024
5651d8f
more
ichub Aug 9, 2024
cd2f4a7
add popover for folder list too
ichub Aug 9, 2024
4dd041c
more
ichub Aug 9, 2024
cfb029f
add back button to more places
ichub Aug 9, 2024
13b8d67
more
ichub Aug 9, 2024
4b3594a
the demo does something
ichub Aug 9, 2024
fea68b5
fix problem where new pods dont show up in zmail at the point they're…
ichub Aug 9, 2024
91f7829
added trash button
ichub Aug 9, 2024
ded1496
better timestamp rendering
ichub Aug 9, 2024
9ee9b4b
remove superfluous kitty
ichub Aug 9, 2024
8a8328f
upgrading login screen
ichub Aug 9, 2024
15d35dc
made buttons different from inputs border-radius-wise
ichub Aug 9, 2024
a45a157
more
ichub Aug 9, 2024
ef75640
more
ichub Aug 9, 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
Prev Previous commit
Next Next commit
add popover for folder list too
ichub committed Aug 9, 2024
commit cd2f4a75bde96b446dbb3d90db38677db07db09f
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import { ReactNode, useEffect, useState } from "react";
import { usePCDCollection } from "../../../src/appHooks";
import { PCDCard } from "../../shared/PCDCard";
import { useZmailContext } from "./ZmailContext";
import { PCDtoRow, ZmailRow } from "./ZmailTable";

export function ZmailPopover(): ReactNode {
const ctx = useZmailContext();
@@ -56,19 +57,35 @@ export function ZmailPopover(): ReactNode {

let content: ReactNode;

if (!ctx.hoveringPCDID) {
content = null;
} else {
if (ctx.hoveringPCDID) {
const pcd = pcds.getById(ctx.hoveringPCDID);
if (pcd) {
content = <PCDCard pcd={pcd} expanded={true} />;
content = (
<div className="w-[300px]">
<PCDCard pcd={pcd} expanded={true} />
</div>
);
}
} else if (ctx.hoveringFolder) {
const pcdsInFolder = pcds.getAllPCDsInFolder(ctx.hoveringFolder);

content = (
<div className="border-4 border-green-950 rounded-lg shadow-lg bg-white p-4 text-black">
{(
pcdsInFolder
.map((p) => PCDtoRow(pcds, p))
.filter((r) => !!r) as ZmailRow[]
).map((r) => (
<div className="whitespace-nowrap">{r.name}</div>
))}
</div>
);
}

return (
<div className="absolute top-0 left-0 z-50">
<div
className="w-[300px] absolute"
className="absolute"
style={{ display: "none" }}
ref={(e) => setContainerRef(e ?? undefined)}
>
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Row } from "@tanstack/react-table";
import TimeAgo from "javascript-time-ago";
import en from "javascript-time-ago/locale/en";
import { ReactNode } from "react";
@@ -9,33 +8,33 @@ import { ZmailRow } from "./ZmailTable";
TimeAgo.addDefaultLocale(en);
const timeAgo = new TimeAgo("en-US");

export function ZmailRowElement({ row }: { row: Row<ZmailRow> }): ReactNode {
export function ZmailRowElement({ row }: { row: ZmailRow }): ReactNode {
const ctx = useZmailContext();
const meta = row.original.meta;
const meta = row.meta;

return (
<div
onClick={() => {
ctx.update({
viewingPCDID: row.original.pcd.id,
viewingPCDID: row.pcd.id,
hoveringPCDID: undefined
});
}}
onMouseEnter={() => {
ctx.update({ hoveringPCDID: row.original.pcd.id });
ctx.update({ hoveringPCDID: row.pcd.id });
}}
onMouseLeave={() => {
ctx.update({ hoveringPCDID: undefined });
}}
className="border-b-2 border-gray-200 px-4 py-[0.1em] cursor-pointer hover:bg-gray-100 active:bg-gray-200 select-none flex flex-row items-center justify-between whitespace-nowrap transition-colors duration-100"
>
<span className={cn("flex-grow pr-2", meta?.viewed ? "" : "font-bold")}>
{row.original.name}
{row.name}
</span>
<span className="pr-2">
<span className="italic">{row.original.folder}</span>
<span className="italic">{row.folder}</span>
{" · "}
{row.original.type}
{row.type}
<span className="w-20 inline-block text-right">
{meta?.updatedTimestamp
? timeAgo.format(new Date(meta.updatedTimestamp), "mini")
Original file line number Diff line number Diff line change
@@ -48,10 +48,10 @@ export function ZmailSidebar(): ReactNode {
key={f}
onClick={() => onClick(f)}
onMouseEnter={() => {
ctx.update({ hoveringPCDID: f });
ctx.update({ hoveringFolder: f, hoveringPCDID: undefined });
}}
onMouseLeave={() => {
ctx.update({ hoveringPCDID: undefined });
ctx.update({ hoveringFolder: undefined });
}}
className={cn(
"bg-[#206b5e] border-2 box-border border-[#206b5e] hover:bg-[#1b8473] active:bg-[#239b87]",
Original file line number Diff line number Diff line change
@@ -69,7 +69,7 @@ export function ZmailTable(): ReactNode {

<div className="w-full text-black flex flex-col flex-grow overflow-y-scroll">
{table.getRowModel().rows.map((row) => (
<ZmailRowElement key={row.id} row={row} />
<ZmailRowElement key={row.id} row={row.original} />
))}
</div>
<div className="h-3 bg-gray-300 flex-shrink-0"></div>