Skip to content

Commit c9fc0df

Browse files
darioalessandrodarioalessandro
authored
Redesign yew-ui (#196)
* added new buttons :) * good progress * save * save * save * save * save * save * save * update actions * fmt
1 parent a58a692 commit c9fc0df

File tree

12 files changed

+1554
-70
lines changed

12 files changed

+1554
-70
lines changed

‎.github/workflows/cargo-test.yaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ jobs:
1919

2020
# Cache Docker layers
2121
- name: Cache Docker layers
22-
uses: actions/cache@v2
22+
uses: actions/cache@v3
2323
with:
2424
path: /tmp/.docker
2525
key: ${{ runner.os }}-docker-${{ github.sha }}
@@ -28,7 +28,7 @@ jobs:
2828
2929
# Cache Rust build artifacts
3030
- name: Cache Cargo Registry
31-
uses: actions/cache@v2
31+
uses: actions/cache@v3
3232
with:
3333
path: |
3434
~/.cargo/registry

‎docker/Dockerfile.tailwind

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
FROM node:18-alpine as tailwind
1+
FROM node:18-alpine
22

33
RUN npm install -g tailwindcss
44

5-
ENTRYPOINT [ "tailwindcss" ]
5+
# Create a wrapper script
6+
RUN echo '#!/bin/sh\ntailwindcss "$@"' > /usr/local/bin/tailwind-run.sh && \
7+
chmod +x /usr/local/bin/tailwind-run.sh
8+
9+
ENTRYPOINT ["/usr/local/bin/tailwind-run.sh"]

‎docker/Dockerfile.website.dev

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
FROM rust:1.80-slim-bookworm as builder
1+
FROM rust:1.80-slim-bookworm
22

33
RUN rustup default nightly-2024-08-21
44
RUN rustup target add wasm32-unknown-unknown

‎docker/docker-compose.yaml

+16-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,21 @@ services:
2929
- CARGO_NET_OFFLINE=false
3030
ports:
3131
- "${TRUNK_SERVE_PORT:-80}:${TRUNK_SERVE_PORT:-80}"
32+
depends_on:
33+
- tailwind-yew
3234

35+
tailwind-yew:
36+
build:
37+
dockerfile: ../docker/Dockerfile.tailwind
38+
context: ../docker
39+
volumes:
40+
- type: bind
41+
source: ../
42+
target: /app
43+
working_dir: /app/yew-ui
44+
entrypoint: ["/bin/sh", "-c"]
45+
command: "tailwindcss -i ./static/leptos-style.css -o ./static/tailwind.css --watch --minify"
46+
3347
website:
3448
volumes:
3549
- type: bind
@@ -43,7 +57,7 @@ services:
4357
dockerfile: ../docker/Dockerfile.website.dev
4458
context: ../docker
4559
working_dir: /app/leptos-website
46-
command: bash -c "trunk serve --address 0.0.0.0 --port ${TRUNK_SERVE_PORT:-80}"
60+
command: bash -c "cargo leptos watch"
4761
environment:
4862
- LEPTOS_SITE_ADDR="0.0.0.0:91"
4963
- CARGO_TARGET_DIR=/app/leptos-website/target
@@ -130,6 +144,7 @@ services:
130144
ports:
131145
- 5432
132146

147+
133148
volumes:
134149
rustlemania-actix-web-cargo-registry-cache:
135150
rustlemania-actix-web-cargo-git-cache:

‎leptos-website/src/components/sections/Solutions.rs

+30
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,36 @@ pub fn SolutionsSection() -> impl IntoView {
1313
<div class="px-6 max-w-4xl mx-auto relative z-10">
1414
<h2 class="text-8xl !text-8xl font-black tracking-tight mb-16 text-left gradient-text" style="font-size: 3.84rem;">{"Solutions"}</h2>
1515
<div class="grid md:grid-cols-3 gap-8 md:gap-8 lg:gap-12">
16+
<div class="group sharp-card accent-glow p-8 md:p-10 lg:p-12 rounded-xl backdrop-blur-sm" style="margin-bottom: 1em;">
17+
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-primary/20"></div>
18+
<h3 class="text-2xl font-semibold mb-6 text-foreground">{"Why WebTransport?"}</h3>
19+
<p class="text-foreground-muted mb-10 text-lg leading-relaxed">{"A modern, simpler alternative to WebRTC that's designed for scalability and performance."}</p>
20+
<ul class="space-y-6 mb-10">
21+
<li class="flex items-center text-foreground-muted">
22+
<span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary/10 mr-3">
23+
<span class="text-primary text-sm">{"✓"}</span>
24+
</span>
25+
{"No STUN/TURN complexity"}
26+
</li>
27+
<li class="flex items-center text-foreground-muted">
28+
<span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary/10 mr-3">
29+
<span class="text-primary text-sm">{"✓"}</span>
30+
</span>
31+
{"HTTP/3 based scaling"}
32+
</li>
33+
<li class="flex items-center text-foreground-muted">
34+
<span class="inline-flex items-center justify-center h-6 w-6 rounded-full bg-primary/10 mr-3">
35+
<span class="text-primary text-sm">{"✓"}</span>
36+
</span>
37+
{"Simpler server infrastructure"}
38+
</li>
39+
</ul>
40+
<SecondaryButton
41+
title="Learn More"
42+
href=Some("https://github.com/security-union/videocall-rs".to_string())
43+
class="mt-4"
44+
/>
45+
</div>
1646
<div class="group sharp-card accent-glow p-8 md:p-10 lg:p-12 rounded-xl backdrop-blur-sm" style="margin-bottom: 1em;">
1747
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-secondary to-secondary/20"></div>
1848
<h3 class="text-2xl font-semibold mb-6 text-foreground">{"Developers"}</h3>

‎leptos-website/src/global.css

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/* Global styles for the website, inspired by LiveKit */
21

32
/* Base styles */
43
html {

‎yew-ui/index.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html class="dark">
33
<head>
44
<meta charset="utf-8" />
5-
<title>VideoCall.rs</title>
5+
<title>videocall.rs</title>
66
<meta name="viewport" content="width=device-width, user-scalable=no">
77
<link data-trunk rel="copy-dir" href="./assets" />
8+
<link data-trunk rel="css" href="./static/leptos-style.css" />
89
<link data-trunk rel="css" href="./static/tailwind.css" />
910
<link data-trunk rel="css" href="./static/style.css" />
11+
<link data-trunk rel="css" href="./static/global.css">
1012
<!-- Matomo -->
1113
<script>
1214
var _paq = window._paq = window._paq || [];
@@ -24,4 +26,6 @@
2426
</script>
2527
<!-- End Matomo Code -->
2628
</head>
29+
<body class="bg-background text-foreground">
30+
</body>
2731
</html>

‎yew-ui/src/components/attendants.rs

+122-21
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ impl Component for AttendantsComponent {
235235
);
236236

237237
html! {
238-
<div id="main-container">
238+
<div id="main-container" class="meeting-page">
239239
<div id="grid-container" style={if self.peer_list_open {"width: 80%;"} else {"width: 100%;"}}>
240240
{ self.error.as_ref().map(|error| html! { <p>{ error }</p> }) }
241241
{ rows }
@@ -244,26 +244,127 @@ impl Component for AttendantsComponent {
244244
html! {
245245
<nav class="host">
246246
<div class="controls">
247-
<button
248-
class="bg-yew-blue p-2 rounded-md text-white"
249-
onclick={ctx.link().callback(|_| MeetingAction::ToggleScreenShare)}>
250-
{ if self.share_screen { "Stop Screen Share"} else { "Share Screen"} }
251-
</button>
252-
<button
253-
class="bg-yew-blue p-2 rounded-md text-white"
254-
onclick={ctx.link().callback(|_| MeetingAction::ToggleVideoOnOff)}>
255-
{ if !self.video_enabled { "Start Video"} else { "Stop Video"} }
256-
</button>
257-
<button
258-
class="bg-yew-blue p-2 rounded-md text-white"
259-
onclick={ctx.link().callback(|_| MeetingAction::ToggleMicMute)}>
260-
{ if !self.mic_enabled { "Unmute"} else { "Mute"} }
261-
</button>
262-
<button
263-
class="bg-yew-blue p-2 rounded-md text-white"
264-
onclick={toggle_peer_list.clone()}>
265-
{ if !self.peer_list_open { "Open Peers"} else { "Close Peers"} }
266-
</button>
247+
<nav class="video-controls-container">
248+
<button
249+
class={classes!("video-control-button", self.mic_enabled.then_some("active"))}
250+
onclick={ctx.link().callback(|_| MeetingAction::ToggleMicMute)}>
251+
{
252+
if self.mic_enabled {
253+
html! {
254+
<>
255+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
256+
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path>
257+
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
258+
<line x1="12" y1="19" x2="12" y2="22"></line>
259+
</svg>
260+
<span class="tooltip">{ "Mute" }</span>
261+
</>
262+
}
263+
} else {
264+
html! {
265+
<>
266+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
267+
<line x1="1" y1="1" x2="23" y2="23"></line>
268+
<path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V5a3 3 0 0 0-5.94-.6"></path>
269+
<path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path>
270+
<line x1="12" y1="19" x2="12" y2="22"></line>
271+
</svg>
272+
<span class="tooltip">{ "Unmute" }</span>
273+
</>
274+
}
275+
}
276+
}
277+
</button>
278+
<button
279+
class={classes!("video-control-button", self.video_enabled.then_some("active"))}
280+
onclick={ctx.link().callback(|_| MeetingAction::ToggleVideoOnOff)}>
281+
{
282+
if self.video_enabled {
283+
html! {
284+
<>
285+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
286+
<polygon points="23 7 16 12 23 17 23 7"></polygon>
287+
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
288+
</svg>
289+
<span class="tooltip">{ "Stop Video" }</span>
290+
</>
291+
}
292+
} else {
293+
html! {
294+
<>
295+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
296+
<path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10"></path>
297+
<line x1="1" y1="1" x2="23" y2="23"></line>
298+
</svg>
299+
<span class="tooltip">{ "Start Video" }</span>
300+
</>
301+
}
302+
}
303+
}
304+
</button>
305+
<button
306+
class={classes!("video-control-button", self.share_screen.then_some("active"))}
307+
onclick={ctx.link().callback(|_| MeetingAction::ToggleScreenShare)}>
308+
{
309+
if self.share_screen {
310+
html! {
311+
<>
312+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
313+
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
314+
<line x1="8" y1="21" x2="16" y2="21"></line>
315+
<line x1="12" y1="17" x2="12" y2="21"></line>
316+
</svg>
317+
<span class="tooltip">{ "Stop Screen Share" }</span>
318+
</>
319+
}
320+
} else {
321+
html! {
322+
<>
323+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
324+
<path d="M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3"></path>
325+
<polyline points="8 21 12 17 16 21"></polyline>
326+
<polyline points="16 7 20 7 20 3"></polyline>
327+
<line x1="10" y1="14" x2="21" y2="3"></line>
328+
</svg>
329+
<span class="tooltip">{ "Share Screen" }</span>
330+
</>
331+
}
332+
}
333+
}
334+
</button>
335+
<button
336+
class={classes!("video-control-button", self.peer_list_open.then_some("active"))}
337+
onclick={toggle_peer_list.clone()}>
338+
{
339+
if self.peer_list_open {
340+
html! {
341+
<>
342+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
343+
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
344+
<circle cx="9" cy="7" r="4"></circle>
345+
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
346+
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
347+
<line x1="1" y1="1" x2="23" y2="23"></line>
348+
</svg>
349+
<span class="tooltip">{ "Close Peers" }</span>
350+
</>
351+
}
352+
} else {
353+
html! {
354+
<>
355+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
356+
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
357+
<circle cx="9" cy="7" r="4"></circle>
358+
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
359+
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
360+
</svg>
361+
<span class="tooltip">{ "Open Peers" }</span>
362+
</>
363+
}
364+
}
365+
}
366+
</button>
367+
</nav>
267368
</div>
268369
{
269370
if media_access_granted {

0 commit comments

Comments
 (0)