synpad 0.1.0

A full-featured Matrix chat client built with Dioxus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

use dioxus::prelude::*;

use crate::utils::room_helpers::format_file_size;

/// Upload progress bar component showing file upload status.
#[component]
pub fn UploadBar(
    file_name: String,
    bytes_sent: u64,
    total_bytes: u64,
    on_cancel: EventHandler<()>,
) -> Element {
    let percentage = if total_bytes > 0 {
        (bytes_sent as f64 / total_bytes as f64 * 100.0).min(100.0) as u32
    } else {
        0
    };

    let sent_text = format_file_size(bytes_sent);
    let total_text = format_file_size(total_bytes);
    let is_complete = bytes_sent >= total_bytes && total_bytes > 0;

    rsx! {
        div {
            class: if is_complete { "upload-bar upload-bar--complete" } else { "upload-bar" },

            div {
                class: "upload-bar__info",
                span {
                    class: "upload-bar__file-name",
                    title: "{file_name}",
                    "{file_name}"
                }
                span {
                    class: "upload-bar__size-text",
                    "{sent_text} / {total_text}"
                }
            }

            div {
                class: "upload-bar__track",
                div {
                    class: "upload-bar__fill",
                    style: "width: {percentage}%;",
                }
            }

            div {
                class: "upload-bar__footer",
                span {
                    class: "upload-bar__percentage",
                    "{percentage}%"
                }
                if !is_complete {
                    button {
                        class: "upload-bar__cancel-btn",
                        title: "Cancel upload",
                        onclick: move |_| on_cancel.call(()),
                        "Cancel"
                    }
                }
            }
        }
    }
}