vivi_ui 0.2.0

Custom component library for Slint
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

// SPDX-FileCopyrightText: 2024 vivi developers <vivi-ui@tuta.io>
// SPDX-License-Identifier: MIT

import { ButtonBase, ButtonStyle, LayoutStyle, HorizontalLayoutBase } from "../foundation.slint";
import { StateLayer } from "./state_layer.slint";
import { MagicHorizontalBox } from "./magic_horizontal_box.slint";
import {
    MagicSizeSettings,
    MagicIconSettings,
    MagicPalette
} from "./styling.slint";

export global MagicButtonStyles {
    out property <ButtonStyle> icon_button_style: {
        border_style: {
            border_radius: MagicSizeSettings.control_height / 2,
        },
        icon_style: {
            icon_size: MagicIconSettings.body.icon_size,
            foreground: MagicPalette.foreground,
        },
        layout_style: {
            alignment: LayoutAlignment.center,
        }
    };
}

export enum ButtonAction {
    default,
    primary,
    destructive
}

export component MagicButtonBase inherits ButtonBase {
    in property <length> preferred_min_width;
    in property <length> preferred_min_height;

    min_width: max(root.preferred_min_width, content_layer.min_width);
    min_height: max(root.preferred_min_height, content_layer.min_height);
    vertical_stretch: 0;
    mouse_cursor: root.enabled ? pointer : not-allowed;

    state_layer := StateLayer {
        width: 100%;
        height: 100%;
        border_radius: root.style.border_style.border_radius;
        pressed: root.pressed || root.enter_pressed;
        has_hover: root.has_hover;
        has_focus: root.has_focus;
    }

    content_layer := HorizontalLayoutBase {
        style: root.style.layout_style;

        @children
    }

    states [
        disabled when !root.enabled : {
            root.opacity: 0.5;
        }
    ]
}