From e91a30385b5b3276d814844205e2be8522edd26b Mon Sep 17 00:00:00 2001 From: Joseph Martinsen Date: Tue, 27 Aug 2024 22:40:36 +0000 Subject: [PATCH 1/3] feat(ui): add reciept boilerplate --- .vscode/launch.json | 15 +++++++++++++ ui/src/App.css | 6 +++--- ui/src/App.tsx | 6 ++++-- ui/src/FacePile.css | 21 ++++++++++++++++++ ui/src/FacePile.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++ ui/src/Reciept.css | 30 ++++++++++++++++++++++++++ ui/src/Reciept.tsx | 18 ++++++++++++++++ ui/src/UserIcon.css | 34 +++++++++++++++++++++++++++++ ui/src/UserIcon.tsx | 38 +++++++++++++++++++++++++++++++++ ui/src/index.css | 12 +++++------ 10 files changed, 221 insertions(+), 11 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 ui/src/FacePile.css create mode 100644 ui/src/FacePile.tsx create mode 100644 ui/src/Reciept.css create mode 100644 ui/src/Reciept.tsx create mode 100644 ui/src/UserIcon.css create mode 100644 ui/src/UserIcon.tsx diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..2aad12c --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "https://studious-space-chainsaw-q75x57g4jg5hq4q-5173.app.github.dev", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/ui/src/App.css b/ui/src/App.css index 0f7868b..c451b5c 100644 --- a/ui/src/App.css +++ b/ui/src/App.css @@ -4,8 +4,8 @@ */ #root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; + /* max-width: 1280px; */ + /* margin: 0 auto; */ + /* padding: 2rem; */ text-align: center; } diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 4a77ac0..fd0e600 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -4,12 +4,14 @@ */ import './App.css' +import FacePile from './FacePile' +import Reciept from "./Reciept" function App() { return ( <> -

Go Splitsies!

-

Coming soon...

+ + ) } diff --git a/ui/src/FacePile.css b/ui/src/FacePile.css new file mode 100644 index 0000000..feb96e7 --- /dev/null +++ b/ui/src/FacePile.css @@ -0,0 +1,21 @@ +/* SPDX-License-Identifier: AGPL-3.0-or-later + * + * SPDX-FileCopyrightText: 2024 Joseph Martinsen + */ + + .header { + background: #555; + color: #f1f1f1; + z-index: 1; + } + +.sticky { + position: fixed; + top: 0; + width: 100%; +} + +.face-pile { + display: flex; + place-content: start; +} \ No newline at end of file diff --git a/ui/src/FacePile.tsx b/ui/src/FacePile.tsx new file mode 100644 index 0000000..586606e --- /dev/null +++ b/ui/src/FacePile.tsx @@ -0,0 +1,52 @@ +/* SPDX-License-Identifier: AGPL-3.0-or-later + * + * SPDX-FileCopyrightText: 2024 Joseph Martinsen + */ + +import { useReducer } from "react"; +import "./FacePile.css"; +import UserIcon, { UserIconProps } from "./UserIcon"; + +type SplitUser = Omit; + +function splitUserReducer(state: SplitUser[], action: {type: "add" | "remove", item: SplitUser}) { + switch (action.type) { + case "add": + return [...state, action.item]; + case "remove": + return state.filter(item => item !== action.item) + default: + return state; + } +} + +function useSplitUser() { + return useReducer(splitUserReducer, []); +} + +function FacePile() { + const [splitUsers, dispatchSplitUser] = useSplitUser(); + + function removeSplitUser(user: SplitUser) { + dispatchSplitUser({ type: "remove", item: user}) + } + + return ( +
+
+ {splitUsers.map(splitUser => { + return + })} + + {/* This should be an "add" icon */} + + + +
+
+ ) +} + +export default FacePile; \ No newline at end of file diff --git a/ui/src/Reciept.css b/ui/src/Reciept.css new file mode 100644 index 0000000..9150d5f --- /dev/null +++ b/ui/src/Reciept.css @@ -0,0 +1,30 @@ +/* SPDX-License-Identifier: AGPL-3.0-or-later + * + * SPDX-FileCopyrightText: 2024 Joseph Martinsen + */ + + .reciept { + color: black; + background-color: white; + margin-top: 4em; + padding: 3em 0em; + + --mask: conic-gradient(from -47.5deg at bottom,#0000,#000 1deg 94deg,#0000 95deg) 50%/65.48px 100%; + -webkit-mask: var(--mask); + mask: var(--mask); + } + + .reciept-title { + border: none; + background: white; + color: black; + font-family: inherit; + font-size: inherit; + font-style: italic; + } + + .title { + text-decoration: underline; + border-bottom: 1px solid black; + } + \ No newline at end of file diff --git a/ui/src/Reciept.tsx b/ui/src/Reciept.tsx new file mode 100644 index 0000000..99dd675 --- /dev/null +++ b/ui/src/Reciept.tsx @@ -0,0 +1,18 @@ +/* SPDX-License-Identifier: AGPL-3.0-or-later + * + * SPDX-FileCopyrightText: 2024 Joseph Martinsen + */ + +import { useState } from "react"; +import "./Reciept.css" + +function Reciept() { + const [title, updateTitle] = useState("Location"); + return
+

+ GoSplitsies: updateTitle(e.target.value)} /> +

+
+} + +export default Reciept; diff --git a/ui/src/UserIcon.css b/ui/src/UserIcon.css new file mode 100644 index 0000000..46aab0d --- /dev/null +++ b/ui/src/UserIcon.css @@ -0,0 +1,34 @@ +/* SPDX-License-Identifier: AGPL-3.0-or-later + * + * SPDX-FileCopyrightText: 2024 Joseph Martinsen + */ + + .user-icon-outline { + border: 1px solid white; + width: 6em; + height: 6em; + border-radius: 100%; + font-size: 0.5em; + float: left; + margin: 1em; + } + + .default-user-icon::before{ + content:" "; + display:block; + height:2em; + width:2em; + background:white; + position:relative; left:2em;top:0.8em; + border-radius:2em; + } + + .default-user-icon::after{ + content:" "; + display:block; + height:2em; + width:4em; + background:white; + position:relative; left:1em;top:1em; + border-radius:2em 2em 0 0; + } \ No newline at end of file diff --git a/ui/src/UserIcon.tsx b/ui/src/UserIcon.tsx new file mode 100644 index 0000000..aef9e67 --- /dev/null +++ b/ui/src/UserIcon.tsx @@ -0,0 +1,38 @@ +/* SPDX-License-Identifier: AGPL-3.0-or-later + * + * SPDX-FileCopyrightText: 2024 Joseph Martinsen + */ + +import "./UserIcon.css" + +function DefaultIcon() { + return ( +
+ ) +} + +function ImgUserIcon() { + return +} + + +export type UserIconProps = { + type: "img" + img?: string; + onRemove: (item: UserIconProps) => void; +} | { type: "default" | "add"} + +function UserIcon(props: UserIconProps) { + switch(props.type) { + case "default": + return ; + case "img": + return + case "add": + return
+

ADD

+
+ } +} + +export default UserIcon; \ No newline at end of file diff --git a/ui/src/index.css b/ui/src/index.css index a64b19b..dc49e2f 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -29,10 +29,10 @@ a:hover { body { margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; + /* display: flex; */ + /* place-items: center; */ + /* min-width: 320px; */ + /* min-height: 100vh; */ } h1 { @@ -40,7 +40,7 @@ h1 { line-height: 1.1; } -button { +/* button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; @@ -57,7 +57,7 @@ button:hover { button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; -} +} */ @media (prefers-color-scheme: light) { :root { From 02b452b589326179654d33c7fa206bfff7eac5d6 Mon Sep 17 00:00:00 2001 From: Joseph Martinsen Date: Tue, 27 Aug 2024 22:45:52 +0000 Subject: [PATCH 2/3] lint --- .vscode/launch.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.vscode/launch.json b/.vscode/launch.json index 2aad12c..d0c3a87 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -1,3 +1,7 @@ +/* SPDX-License-Identifier: AGPL-3.0-or-later +* +* SPDX-FileCopyrightText: 2024 Joseph Martinsen +*/ { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. From 7a0a36432e435ee7c5326aea53868d382054d8d9 Mon Sep 17 00:00:00 2001 From: Joseph Martinsen Date: Thu, 29 Aug 2024 21:23:10 +0000 Subject: [PATCH 3/3] Enhance default icon --- ui/src/FacePile.css | 11 +++++++-- ui/src/FacePile.tsx | 22 ++++++++--------- ui/src/UserIcon.css | 59 ++++++++++++++++++++++++--------------------- ui/src/UserIcon.tsx | 5 +++- 4 files changed, 56 insertions(+), 41 deletions(-) diff --git a/ui/src/FacePile.css b/ui/src/FacePile.css index feb96e7..94fafcf 100644 --- a/ui/src/FacePile.css +++ b/ui/src/FacePile.css @@ -15,7 +15,14 @@ width: 100%; } -.face-pile { +.profile-list-container { + width: 100%; + overflow-x: auto; + padding: 10px 0; +} + +.profile-list { display: flex; - place-content: start; + flex-direction: row; + gap: 10px; } \ No newline at end of file diff --git a/ui/src/FacePile.tsx b/ui/src/FacePile.tsx index 586606e..e859458 100644 --- a/ui/src/FacePile.tsx +++ b/ui/src/FacePile.tsx @@ -33,18 +33,18 @@ function FacePile() { return (
-
- {splitUsers.map(splitUser => { - return - })} - - {/* This should be an "add" icon */} - - - +
+
+ {splitUsers.map((splitUser, index) => ( +
+ +
+ ))} +
+
) } diff --git a/ui/src/UserIcon.css b/ui/src/UserIcon.css index 46aab0d..45a28c8 100644 --- a/ui/src/UserIcon.css +++ b/ui/src/UserIcon.css @@ -3,32 +3,37 @@ * SPDX-FileCopyrightText: 2024 Joseph Martinsen */ - .user-icon-outline { - border: 1px solid white; - width: 6em; - height: 6em; - border-radius: 100%; - font-size: 0.5em; - float: left; - margin: 1em; - } + +.profile-item { + flex: 0 0 auto; + width: 60px; + height: 60px; + border-radius: 50%; + overflow: hidden; + border: 2px solid #ccc; + display: flex; + align-items: center; + justify-content: center; + background-color: #f0f0f0; /* Light gray background for the default avatar */ +} - .default-user-icon::before{ - content:" "; - display:block; - height:2em; - width:2em; - background:white; - position:relative; left:2em;top:0.8em; - border-radius:2em; - } +.profile-item img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} - .default-user-icon::after{ - content:" "; - display:block; - height:2em; - width:4em; - background:white; - position:relative; left:1em;top:1em; - border-radius:2em 2em 0 0; - } \ No newline at end of file +.default-avatar { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: #007bff; /* Blue background for default avatar */ + color: #fff; + font-size: 24px; + font-weight: bold; + border-radius: 50%; + text-transform: uppercase; +} diff --git a/ui/src/UserIcon.tsx b/ui/src/UserIcon.tsx index aef9e67..d4611a0 100644 --- a/ui/src/UserIcon.tsx +++ b/ui/src/UserIcon.tsx @@ -7,7 +7,10 @@ import "./UserIcon.css" function DefaultIcon() { return ( -
+
+ {/* TODO: {profile.name.charAt(0).toUpperCase()} */} + J +
) }