windjammer-ui 0.3.6

Cross-platform UI framework for Windjammer (Web, Desktop, Mobile)
Documentation 
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

#![allow(clippy::all)]
#![allow(noop_method_call)]
use super::traits::Renderable;

#[derive(Clone, Debug, PartialEq, Copy)]
pub enum ModalSize {
    Small,
    Medium,
    Large,
    FullScreen,
}

#[derive(Debug, Clone, PartialEq)]
pub struct Modal {
    pub id: String,
    pub title: String,
    pub content: String,
    pub footer: String,
    pub size: ModalSize,
    pub closeable: bool,
    pub visible: bool,
}

impl Modal {
    #[inline]
    pub fn new(id: String, title: String) -> Modal {
        Modal {
            id,
            title,
            content: String::new(),
            footer: String::new(),
            size: ModalSize::Medium,
            closeable: true,
            visible: false,
        }
    }
    #[inline]
    pub fn content(mut self, content: String) -> Modal {
        self.content = content;
        self
    }
    #[inline]
    pub fn footer(mut self, footer: String) -> Modal {
        self.footer = footer;
        self
    }
    #[inline]
    pub fn size(mut self, size: ModalSize) -> Modal {
        self.size = size;
        self
    }
    #[inline]
    pub fn closeable(mut self, closeable: bool) -> Modal {
        self.closeable = closeable;
        self
    }
    #[inline]
    pub fn visible(mut self, visible: bool) -> Modal {
        self.visible = visible;
        self
    }
}

impl Renderable for Modal {
    #[inline]
    fn render(self) -> String {
        let width = match self.size {
            ModalSize::Small => "400px".to_string(),
            ModalSize::Medium => "600px".to_string(),
            ModalSize::Large => "800px".to_string(),
            ModalSize::FullScreen => "100vw".to_string(),
        };
        let height = match self.size {
            ModalSize::FullScreen => "100vh".to_string(),
            _ => "auto".to_string(),
        };
        let display = {
            if self.visible {
                "flex".to_string()
            } else {
                "none".to_string()
            }
        };
        let mut html = String::new();
        html.push_str("<div id='");
        html.push_str(&self.id);
        html.push_str("-backdrop' style='position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: ");
        html.push_str(&display);
        html.push_str("; align-items: center; justify-content: center; z-index: 1000;'>");
        html.push_str("<div id='");
        html.push_str(&self.id);
        html.push_str("' style='background: white; border-radius: 8px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); max-width: ");
        html.push_str(&width);
        html.push_str("; width: 100%; max-height: ");
        html.push_str(&height);
        html.push_str("; display: flex; flex-direction: column; margin: 16px;'>");
        html.push_str("<div style='padding: 16px 24px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between;'>");
        html.push_str("<h2 style='margin: 0; font-size: 18px; font-weight: 600; color: #1a202c;'>");
        html.push_str(&self.title);
        html.push_str("</h2>");
        if self.closeable {
            html.push_str("<button onclick='document.getElementById(\"");
            html.push_str(&self.id);
            html.push_str("-backdrop\").style.display=\"none\"' style='background: none; border: none; font-size: 24px; cursor: pointer; color: #718096; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;'>&times;</button>")
        }
        html.push_str("</div>");
        html.push_str("<div style='padding: 24px; flex: 1; overflow-y: auto;'>");
        html.push_str(&self.content);
        html.push_str("</div>");
        if self.footer.len() > (0 as usize) {
            html.push_str("<div style='padding: 16px 24px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 8px;'>");
            html.push_str(&self.footer);
            html.push_str("</div>")
        }
        html.push_str("</div>");
        html.push_str("</div>");
        html
    }
}