mumble/mumble-web2
6
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

massive css rework

Browse Source
This commit is contained in:
Sam Sartor
2024-11-09 00:55:20 -07:00
parent 30045dd6bd
commit b351f2fe13
7 changed files with 240 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dioxus.toml
-13
View File
@@ -1,46 +1,33 @@
[application]
# App (Project) Name
name = "Mumble Web 2"
# Dioxus App Default Platform
# desktop, web, mobile, ssr
default_platform = "web"
# `build` & `serve` dist path
out_dir = "dist"
# resource (public) file folder
asset_dir = "public"
[web.app]
# HTML title tag content
title = "mumble-web"
[web.watcher]
# when watcher trigger, regenerate the `index.html`
reload_html = true
# which files or dirs will be watcher monitoring
watch_path = ["src", "public"]
# include `assets` in web platform
[web.resource]
# CSS style file
style = []
# Javascript code file
script = []
[web.resource.dev]
# serve: [dev-server] only
# CSS style file
style = []
# Javascript code file
script = []
public/mic-off-svgrepo-com.svg
+16
View File
@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
<g fill="#fff">
<path d="M8 0c-.78 0-1.538.29-2.104.821a2.862 2.862 0 00-.627.857.75.75 0 001.354.644c.07-.147.17-.286.3-.407A1.578 1.578 0 018 1.5c.413 0 .8.154 1.078.415.276.26.422.601.422.946v3.443a.75.75 0 001.5 0V2.861c0-.775-.329-1.507-.896-2.04A3.077 3.077 0 008 0z"/>
<path fill-rule="evenodd" d="M5 6.06L1.22 2.28a.75.75 0 011.06-1.06l12.5 12.5a.75.75 0 11-1.06 1.06L11.338 12.4a5.575 5.575 0 01-2.588 1.05V14.5h1.75a.75.75 0 010 1.5h-5a.75.75 0 010-1.5h1.75v-1.05a5.553 5.553 0 01-3.131-1.514A5.3 5.3 0 012.5 8.135V6.75a.75.75 0 011.5 0v1.385a3.8 3.8 0 001.164 2.725A4.071 4.071 0 008 12c.815 0 1.602-.24 2.262-.677l-.726-.726A3.113 3.113 0 018 11c-.78 0-1.538-.29-2.104-.821A2.797 2.797 0 015 8.139V6.06zm1.5 1.5v.579c0 .345.146.686.422.946.278.26.665.415 1.078.415.134 0 .266-.016.392-.047L6.5 7.56z" clip-rule="evenodd"/>
<path d="M12.03 6.75a.75.75 0 011.5 0v1.385c0 .266-.02.53-.06.79a.75.75 0 11-1.483-.227c.029-.185.043-.374.043-.563V6.75z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

public/mic-svgrepo-com.svg
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
<g fill="#fff">
<path fill-rule="evenodd" d="M8 0c-.78 0-1.538.29-2.104.821A2.797 2.797 0 005 2.861V8.14c0 .775.328 1.507.896 2.04.566.53 1.323.821 2.104.821.78 0 1.538-.29 2.104-.821A2.797 2.797 0 0011 8.139V2.86c0-.775-.329-1.507-.896-2.04A3.077 3.077 0 008 0zM6.922 1.915A1.578 1.578 0 018 1.5c.413 0 .8.154 1.078.415.276.26.422.601.422.946V8.14c0 .345-.146.686-.422.946A1.578 1.578 0 018 9.5c-.413 0-.8-.154-1.078-.415-.276-.26-.422-.601-.422-.946V2.86c0-.345.146-.686.422-.946z" clip-rule="evenodd"/>
<path d="M4 6.75a.75.75 0 00-1.5 0v1.385a5.3 5.3 0 001.619 3.801A5.553 5.553 0 007.25 13.45v1.05H5.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5H8.75v-1.05a5.553 5.553 0 003.131-1.514A5.3 5.3 0 0013.5 8.135V6.75a.75.75 0 00-1.5 0v1.385a3.8 3.8 0 01-1.164 2.725A4.071 4.071 0 018 12a4.071 4.071 0 01-2.836-1.14A3.8 3.8 0 014 8.135V6.75z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/speaker-medium-svgrepo-com.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0355 8.52113C13.4261 8.1306 14.0674 8.12674 14.3881 8.57637C15.0882 9.55788 15.5 10.7592 15.5 12.0567C15.5 13.3541 15.0882 14.5554 14.3881 15.537C14.0674 15.9866 13.4261 15.9827 13.0355 15.5922C12.645 15.2017 12.6586 14.5725 12.9408 14.0978C13.296 13.5002 13.5 12.8023 13.5 12.0567C13.5 11.3111 13.296 10.6131 12.9408 10.0156C12.6586 9.54084 12.645 8.91165 13.0355 8.52113Z" fill="#fff"/>
<path d="M15.864 5.69316C16.2545 5.30263 16.8921 5.29976 17.2419 5.72712C18.6532 7.45118 19.5 9.65526 19.5 12.0571C19.5 14.459 18.6532 16.6631 17.2419 18.3871C16.8921 18.8145 16.2545 18.8116 15.864 18.4211C15.4734 18.0306 15.4792 17.4007 15.8183 16.9648C16.8723 15.6098 17.5 13.9068 17.5 12.0571C17.5 10.2075 16.8723 8.50445 15.8183 7.14944C15.4792 6.71351 15.4734 6.08368 15.864 5.69316Z" fill="#fff"/>
<path d="M11 16.5858V7.41421C11 6.52331 9.92286 6.07714 9.29289 6.70711L7.29289 8.70711C7.10536 8.89464 6.851 9 6.58579 9H5C4.44772 9 4 9.44772 4 10V14C4 14.5523 4.44772 15 5 15H6.58579C6.851 15 7.10536 15.1054 7.29289 15.2929L9.29289 17.2929C9.92286 17.9229 11 17.4767 11 16.5858Z" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

public/speaker-muted-svgrepo-com.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="2 2 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 16.5858V7.41421C11 6.52331 9.92286 6.07714 9.29289 6.70711L7.29289 8.70711C7.10536 8.89464 6.851 9 6.58579 9H5C4.44772 9 4 9.44772 4 10V14C4 14.5523 4.44772 15 5 15H6.58579C6.851 15 7.10536 15.1054 7.29289 15.2929L9.29289 17.2929C9.92286 17.9229 11 17.4767 11 16.5858Z" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
<path d="M20 9.5L15 14.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
<path d="M20 14.5L15 9.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 737 B

src/app.rs
+196 -54
View File
@@ -1,6 +1,7 @@
#![allow(non_snake_case)]
use dioxus::prelude::*;
use manganis::mg;
use ordermap::OrderSet;
use sir::{css, global_css};
use std::collections::HashMap;
@@ -61,6 +62,16 @@ pub struct UserState {
pub self_mute: bool,
}
impl UserState {
pub fn icon(&self) -> UserIcon {
match (self.mute || self.self_mute, self.deaf || self.self_deaf) {
(false, false) => UserIcon::Normal,
(true, false) => UserIcon::Muted,
(_, true) => UserIcon::Deafened,
}
}
}
pub struct Chat {
pub raw: String,
pub dangerous_html: String,
@@ -91,21 +102,57 @@ pub static STATE: State = State {
server: Signal::global(|| Default::default()),
};
#[derive(Clone, Copy, PartialEq, Eq)]
pub enum UserIcon {
Normal,
Muted,
Deafened,
None,
}
impl UserIcon {
pub fn url(self) -> Option<&'static str> {
// speaker from https://www.svgrepo.com/collection/ikono-bold-line-icons/
// mic from https://www.svgrepo.com/collection/hashicorp-line-interface-icons/
use UserIcon::*;
Some(match self {
Normal => "/mic-svgrepo-com.svg",
Muted => "/mic-off-svgrepo-com.svg",
Deafened => "/speaker-muted-svgrepo-com.svg",
None => return Option::None,
})
}
}
#[component]
pub fn UserPill(name: String) -> Element {
pub fn UserPill(name: String, icon: UserIcon) -> Element {
let pill = css!(
"
border: solid 1px black;
border-radius: 8px;
padding: 4px;
border-radius: 100px;
padding: 4px 8px;
width: fit-content;
img {
height: 1em;
vertical-align: text-bottom;
}
"
);
let color = match icon {
UserIcon::Normal => "var(--accent-a)",
UserIcon::Muted => "var(--accent-b)",
UserIcon::Deafened => "var(--accent-c)",
UserIcon::None => "var(--accent-a)",
};
rsx!(
div {
class: "{pill}",
"{name}"
style: "background-color: {color}",
{ icon.url().map(|url| rsx!(img { src: url })) }
"\u{00A0}{name}\u{00A0}"
}
)
}
@@ -115,7 +162,8 @@ pub fn User(id: UserId) -> Element {
let server = STATE.server.read();
let state = server.users.get(&id)?;
rsx!(UserPill {
name: state.name.clone()
name: state.name.clone(),
icon: state.icon(),
})
}
@@ -129,18 +177,26 @@ pub fn Channel(id: ChannelId) -> Element {
let channel_details = css!(
"
flex: 0 0 100%;
summary {
cursor: pointer;
}
summary:focus-visible {
outline: none;
}
"
);
let channel_children = css!(
"
border-left: solid black 1px;
border-left: solid var(--line-color) var(--line-width);
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
margin-left: 5px;
padding-left: 11px;
"
padding-top: 4px; "
);
rsx!(
@@ -148,16 +204,25 @@ pub fn Channel(id: ChannelId) -> Element {
class: "{channel_details}",
open: true,
summary {
ondoubleclick: move |_| net.send(EnterChannel { channel: id, user }),
"{state.name}"
}
div {
class: "{channel_children}",
for id in state.users.iter() {
User { id: *id }
span {
role: "button",
prevent_default: "onclick",
ondoubleclick: move |evt| {
evt.stop_propagation();
net.send(EnterChannel { channel: id, user })
},
"{state.name}"
}
for child in state.children.iter() {
Channel { id: *child }
}
if state.users.len() + state.children.len() > 0 {
div {
class: "{channel_children}",
for id in state.users.iter() {
User { id: *id }
}
for child in state.children.iter() {
Channel { id: *child }
}
}
}
}
@@ -193,7 +258,7 @@ pub fn ChatView() -> Element {
flex-direction: row;
padding: 16px;
gap: 8px;
border-top: solid black 1px;
border-top: solid var(--line-color) var(--line-width);
input {
flex-grow: 1;
@@ -218,7 +283,10 @@ pub fn ChatView() -> Element {
div {
class: "{chat_message}",
if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
UserPill { name: sender.name.clone() }
UserPill {
name: sender.name.clone(),
icon: UserIcon::None,
}
}
span {
dangerous_inner_html: "{chat.dangerous_html}",
@@ -262,7 +330,7 @@ pub fn ServerView() -> Element {
r#"
display: grid;
height: 100%;
background-color: white;
background-color: var(--bg-color);
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 1fr;
@@ -278,16 +346,12 @@ pub fn ServerView() -> Element {
"tree"
"chat";
}
gap: 4px;
padding: 4px;
"#
);
let channel_box = css!(
"
padding: 16px;
border: solid black 1px;
overflow: auto;
grid-area: tree;
"
@@ -295,18 +359,23 @@ pub fn ServerView() -> Element {
let chat_box = css!(
"
border: solid black 1px;
display: flex;
flex-direction: column;
grid-area: chat;
border-left: solid var(--line-color) var(--line-width);
@media screen and (max-width: 720px) {
border-left:unset;
border-top: solid var(--line-color) var(--line-width);
}
"
);
let top_bar = css!(
"
padding: 16px;
border: solid black 1px;
grid-area: bar;
background-color: var(--login-bg-color);
display: flex;
flex-direction: row;
@@ -315,6 +384,11 @@ pub fn ServerView() -> Element {
button {
padding: 8px;
img {
height: 1em;
vertical-align: text-bottom;
}
}
"
);
@@ -328,31 +402,27 @@ pub fn ServerView() -> Element {
onclick: move |_| net.send(Disconnect),
"Disconnect"
}
span {
input {
r#type: "checkbox",
id: "mute",
checked: mute || self_mute,
disabled: mute,
onchange: move |_| net.send(SetMute { mute: !self_mute }),
}
label {
r#for: "mute",
"Mute"
button {
role: "switch",
aria_checked: mute || self_mute,
disabled: mute,
onclick: move |_| net.send(SetMute { mute: !self_mute }),
match mute || self_mute {
true => rsx!(img { src: "/mic-off-svgrepo-com.svg" }),
false => rsx!(img { src: "/mic-svgrepo-com.svg" }),
}
"\u{00A0}Mute"
}
span {
input {
r#type: "checkbox",
id: "deaf",
checked: deaf || self_deaf,
disabled: deaf,
onchange: move |_| net.send(SetDeaf { deaf: !self_deaf }),
}
label {
r#for: "deaf",
"Deafen"
button {
role: "switch",
aria_checked: deaf || self_deaf,
disabled: deaf,
onclick: move |_| net.send(SetDeaf { deaf: !self_deaf }),
match deaf || self_deaf {
true => rsx!(img { src: "/speaker-muted-svgrepo-com.svg" }),
false => rsx!(img { src: "/speaker-medium-svgrepo-com.svg" }),
}
"\u{00A0}Deafen"
}
}
div {
@@ -382,6 +452,10 @@ pub fn LoginView() -> Element {
let error = css!(
"
background-color: white;
border-radius: 4px;
overflow: auto;
padding: 4px;
color: red;
pre {
color: black;
@@ -393,8 +467,9 @@ pub fn LoginView() -> Element {
"
max-width: 50vw;
align-self: center;
padding: 16px;
background-color: white;
padding: 32px;
border-radius: 16px;
background-color: var(--login-bg-color);
display: flex;
flex-direction: column;
@@ -403,6 +478,18 @@ pub fn LoginView() -> Element {
input,button {
padding: 8px;
}
h1 {
margin: 0;
color: #b3c6b4;
}
"
);
let bttn = css!(
"
font-weight: bold;
font-size: large;
"
);
@@ -418,17 +505,22 @@ pub fn LoginView() -> Element {
let bottom = match &*status.read() {
Disconnected => rsx! {
button {
class: "{bttn}",
onclick: do_connect.clone(),
"Connect!"
"Connect"
}
},
Connecting => rsx! {
"Connecting..."
div {
class: "{bttn}",
"Connecting..."
}
},
Failed(msg) => rsx!(
button {
class: "{bttn}",
onclick: do_connect.clone(),
"Reconnect!"
"Reconnect"
}
div {
class: "{error}",
@@ -443,6 +535,9 @@ pub fn LoginView() -> Element {
rsx!(
div {
class: "{login_box}",
h1 {
"Mumble Web"
}
input {
placeholder: "username",
value: "{username.read()}",
@@ -465,6 +560,18 @@ pub fn app() -> Element {
global_css!(
"
:root {
--txt-color: white;
--bg-color: #372f3a;
--login-bg-color: #5d7680;
--primary-btn-color: #7bad9f;
--accent-a: #8eb29a;
--accent-b: #6a9395;
--accent-c: #464459;
--line-width: 2px;
--line-color: white;
}
body {
margin: 0;
}
@@ -474,8 +581,43 @@ pub fn app() -> Element {
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: grey;
background-color: var(--bg-color);
overflow: auto;
color: var(--txt-color);
font-family: sans-serif;
font-size: large;
}
button {
font-weight: bold;
font-size: medium;
border: none;
border-radius: 4px;
color: var(--txt-color);
background-color: var(--primary-btn-color);
cursor: pointer;
}
input {
border: none;
border-radius: 4px;
background-color: white;
color: black;
}
input:focus,input:focus-visible {
border: none;
outline: solid var(--line-width) var(--accent-a);
outline-offset: -3px;
}
a:link {
color: var(--accent-a);
}
a:visited {
color: var(--accent-b);
}
"
);
src/imp/web.rs
+2 -1
View File
@@ -5,6 +5,7 @@ use futures::AsyncRead;
use futures::AsyncWrite;
use futures_channel::mpsc::UnboundedSender;
use gloo_timers::future::TimeoutFuture;
use manganis::mg;
use mumble_protocol::control::ClientControlCodec;
use mumble_protocol::control::ControlPacket;
use mumble_protocol::voice::VoicePacket;
@@ -240,7 +241,7 @@ async fn create_encoder_worklet(
&wasm_bindgen::module(),
)?;
let module = "rust_mic_worklet.js";
let module = "/rust_mic_worklet.js";
console::log_1(&format!("Loading mic worklet from {module:?}").into());
audio_context
.audio_worklet()?