Skip to content

Commit c91a537

Browse files
gg0074xBrayan-724
gg0074x
authored and
Brayan-724
committed
chore: changed colab layout
1 parent 2104e44 commit c91a537

File tree

5 files changed

+140
-86
lines changed

5 files changed

+140
-86
lines changed

‎frontend/.env.example

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎frontend/src/features/colab/services/project.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,12 @@ onWsMessage(ServerMessageKind.ProjectConfig, (msg) => {
6161
});
6262

6363
onWsMessage(ServerMessageKind.RequestAccess, (msg) => {
64-
setProjectInfo("requests", msg.user_id, msg.user_name);
64+
showToast("info", {
65+
titleText: `${msg.user_name} is requesting access`,
66+
timer: 5_000,
67+
}).then(() => {
68+
setProjectInfo("requests", msg.user_id, msg.user_name);
69+
});
6570
});
6671

6772
export function setProject(project: ProjectInfo, shouldFork: boolean) {

‎frontend/src/features/colab/views/Colab.module.sass

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
gap: 2rem
3737

3838
> div
39-
width: 100%
39+
width: 250px
4040
max-width: 250px
4141

4242
display: flex
@@ -49,7 +49,7 @@
4949

5050
.buttons_container
5151
display: flex
52-
justify-content: space-around
52+
justify-content: center
5353
flex-wrap: wrap
5454
gap: 0.25rem
5555

@@ -61,6 +61,25 @@
6161
background: var(--colors-primary-400)
6262
color: black
6363

64+
.title_button_container
65+
display: flex
66+
justify-content: space-between
67+
align-content: center
68+
margin-top: 1rem
69+
70+
> .subtitle
71+
margin: 0
72+
73+
> button
74+
+neobrutalism
75+
76+
aspect-ratio: 1/1
77+
padding: 0.25rem
78+
font-weight: 600
79+
background: var(--colors-primary-400)
80+
color: black
81+
82+
6483
.title
6584
text-align: center
6685
margin-bottom: 0rem

‎frontend/src/features/colab/views/Colab.tsx

Lines changed: 95 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -20,93 +20,112 @@ import {
2020
import { forkProject } from "../services";
2121

2222
import styles from "./Colab.module.sass";
23+
import { AddIcon } from "@icons/Add";
24+
import { SolidUserIcon } from "@icons/SolidUser";
2325

2426
export function Colab() {
27+
const [addMenu, setAddMenu] = createSignal(false);
28+
2529
return (
2630
<Dialog open={isColabOpen()} onOpenChange={setIsColabOpen}>
2731
<Dialog.Portal>
2832
<Dialog.Overlay class={styles.overlay} />
2933
<Dialog.Content class={styles.content}>
3034
<h2 class={styles.title}>Live Collaboration</h2>
35+
<ColabButtons />
3136

3237
<div class={styles.container}>
33-
<div>
34-
<h3 class={styles.subtitle}>Room settings</h3>
35-
36-
<ColabPublicPassword />
37-
<ColabButtons />
38-
</div>
38+
<Show when={isProjectOwner()}>
39+
<div>
40+
<h3 class={styles.subtitle}>Room settings</h3>
41+
<ColabPublicPassword />
42+
</div>
43+
</Show>
3944

4045
<div>
41-
<h3 class={styles.subtitle}>Members</h3>
42-
43-
<TextField
44-
beforeIcon={<BrandsGithubIcon />}
45-
placeholder="Username"
46-
/>
47-
48-
<ul class={styles.user_list}>
49-
<For each={Object.entries(projectInfo.users)}>
50-
{([user_id, [username, access]]) => (
51-
<li class={styles.member}>
52-
<span class={styles.member_name}>
53-
{username}
54-
</span>
55-
56-
<SelectField
57-
value={access}
58-
disabled={!isProjectOwner()}
59-
options={[AccessLevel.Editor, AccessLevel.ReadOnly]}
60-
onValueChange={(access) => {
61-
sendMessage(ClientMessageKind.PermitAccess, {
62-
user_id,
63-
access,
64-
});
65-
}}
66-
/>
67-
</li>
68-
)}
69-
</For>
70-
</ul>
71-
72-
<h3 class={styles.subtitle}>Pending Requests</h3>
73-
<ul class={styles.user_list}>
74-
<For each={Object.entries(projectInfo.requests)}>
75-
{([user, name]) => (
76-
<li class={styles.member}>
77-
<span class={styles.member_name}>
78-
{name}
79-
</span>
80-
81-
<ul class={styles.button_group}>
82-
<button
83-
class={styles.success}
84-
onClick={() => {
85-
setProjectInfo("users", user, [
86-
name,
87-
AccessLevel.ReadOnly,
88-
]);
46+
<Show when={!addMenu()}>
47+
<div class={styles.title_button_container}>
48+
<h3 class={styles.subtitle}>Members</h3>
49+
<Show when={isProjectOwner()}>
50+
<button onClick={() => setAddMenu(true)}>
51+
<AddIcon />
52+
</button>
53+
</Show>
54+
</div>
55+
56+
<ul class={styles.user_list}>
57+
<For each={Object.entries(projectInfo.users)}>
58+
{([user_id, [username, access]]) => (
59+
<li class={styles.member}>
60+
<span class={styles.member_name}>{username}</span>
61+
62+
<SelectField
63+
value={access}
64+
disabled={!isProjectOwner()}
65+
options={[AccessLevel.Editor, AccessLevel.ReadOnly]}
66+
onValueChange={(access) => {
8967
sendMessage(ClientMessageKind.PermitAccess, {
90-
user_id: user,
91-
access: AccessLevel.ReadOnly,
68+
user_id,
69+
access,
9270
});
9371
}}
94-
>
95-
Allow
96-
</button>
97-
<button
98-
class={styles.error}
99-
onClick={() => {
100-
setProjectInfo("requests", user, undefined);
101-
}}
102-
>
103-
Kick
104-
</button>
105-
</ul>
106-
</li>
107-
)}
108-
</For>
109-
</ul>
72+
/>
73+
</li>
74+
)}
75+
</For>
76+
</ul>
77+
</Show>
78+
79+
<Show when={addMenu()}>
80+
<div class={styles.title_button_container}>
81+
<h3 class={styles.subtitle}>Add</h3>
82+
<Show when={isProjectOwner()}>
83+
<button onClick={() => setAddMenu(false)}>
84+
<SolidUserIcon />
85+
</button>
86+
</Show>
87+
</div>
88+
89+
<TextField
90+
beforeIcon={<BrandsGithubIcon />}
91+
placeholder="Username"
92+
/>
93+
<ul class={styles.user_list}>
94+
<For each={Object.entries(projectInfo.requests)}>
95+
{([user, name]) => (
96+
<li class={styles.member}>
97+
<span class={styles.member_name}>{name}</span>
98+
99+
<ul class={styles.button_group}>
100+
<button
101+
class={styles.success}
102+
onClick={() => {
103+
setProjectInfo("users", user, [
104+
name,
105+
AccessLevel.ReadOnly,
106+
]);
107+
sendMessage(ClientMessageKind.PermitAccess, {
108+
user_id: user,
109+
access: AccessLevel.ReadOnly,
110+
});
111+
}}
112+
>
113+
Allow
114+
</button>
115+
<button
116+
class={styles.error}
117+
onClick={() => {
118+
setProjectInfo("requests", user, undefined);
119+
}}
120+
>
121+
Kick
122+
</button>
123+
</ul>
124+
</li>
125+
)}
126+
</For>
127+
</ul>
128+
</Show>
110129
</div>
111130
</div>
112131
</Dialog.Content>
@@ -123,7 +142,7 @@ function ColabPublicPassword() {
123142
createEffect(() => {
124143
let pass = password();
125144

126-
if (first_time && (first_time = false, true)) return;
145+
if (first_time && ((first_time = false), true)) return;
127146

128147
if (debounce) clearTimeout(debounce);
129148

@@ -170,15 +189,9 @@ function ColabButtons() {
170189

171190
return (
172191
<div class={styles.buttons_container}>
173-
<button onClick={() => copyPath()}>
174-
Copy colab link
175-
</button>
176-
<button onClick={() => copyPath("/fork")}>
177-
Copy fork link
178-
</button>
179-
<button onClick={() => forkProject(projectInfo.id)}>
180-
Fork
181-
</button>
192+
<button onClick={() => copyPath()}>Copy colab link</button>
193+
<button onClick={() => copyPath("/fork")}>Copy fork link</button>
194+
<button onClick={() => forkProject(projectInfo.id)}>Fork</button>
182195
</div>
183196
);
184197
}

‎frontend/src/icons/Add.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ComponentProps } from "solid-js";
2+
3+
export function AddIcon(props: ComponentProps<"svg">) {
4+
return (
5+
<svg
6+
fill="currentColor"
7+
stroke-width="0"
8+
xmlns="http://www.w3.org/2000/svg"
9+
viewBox="0 0 448 512"
10+
style="overflow: visible; color: currentcolor;"
11+
height="1em"
12+
width="1em"
13+
{...props}
14+
>
15+
<path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32v144H48c-17.7 0-32 14.3-32 32s14.3 32 32 32h144v144c0 17.7 14.3 32 32 32s32-14.3 32-32V288h144c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"></path>
16+
</svg>
17+
);
18+
}

0 commit comments

Comments
 (0)