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

// Loading - Enhanced loading indicator with text and overlay support

pub struct Loading {
    text: string,
    size: LoadingSize,
    overlay: bool,
    class: string,
}

pub enum LoadingSize {
    Small,
    Medium,
    Large,
}

impl Loading {
    pub fn new() -> Loading {
        Loading {
            text: String::new(),
            size: LoadingSize::Medium,
            overlay: false,
            class: String::new(),
        }
    }
    
    pub fn text(text: string) -> Loading {
        self.text = text
        self
    }
    
    pub fn size(size: LoadingSize) -> Loading {
        self.size = size
        self
    }
    
    pub fn overlay(overlay: bool) -> Loading {
        self.overlay = overlay
        self
    }
    
    pub fn class(class: string) -> Loading {
        self.class = class
        self
    }
    
    pub fn render() -> string {
        let spinner_size = match self.size {
            LoadingSize::Small => "24px",
            LoadingSize::Medium => "40px",
            LoadingSize::Large => "64px",
        }
        
        let border_width = match self.size {
            LoadingSize::Small => "2px",
            LoadingSize::Medium => "3px",
            LoadingSize::Large => "4px",
        }
        
        let mut html = String::new()
        
        if self.overlay {
            html.push_str("<div class=\"wj-loading-overlay\" style=\"position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999;\">")
        }
        
        html.push_str("<div class=\"wj-loading ")
        html.push_str(self.class.as_str())
        html.push_str("\" style=\"display: flex; flex-direction: column; align-items: center; gap: 12px;\">")
        
        // Spinner
        html.push_str("<div style=\"width: ")
        html.push_str(spinner_size)
        html.push_str("; height: ")
        html.push_str(spinner_size)
        html.push_str("; border: ")
        html.push_str(border_width)
        html.push_str(" solid #f3f4f6; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite;\"></div>")
        
        // Loading text
        if !self.text.is_empty() {
            html.push_str("<span style=\"color: ")
            if self.overlay {
                html.push_str("white")
            } else {
                html.push_str("#6b7280")
            }
            html.push_str("; font-size: 14px;\">")
            html.push_str(self.text.as_str())
            html.push_str("</span>")
        }
        
        html.push_str("</div>")
        
        if self.overlay {
            html.push_str("</div>")
        }
        
        // Add animation keyframes
        html.push_str("<style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>")
        
        html
    }
}