crossdesk/apps/desktop/src/gui/ui/settings_controls.slint

import { UiRadius } from "ui_radius.slint";
import { CompactComboBox, ToggleSwitch, DialogSurface, IconButton, FontAwesomeIcons } from "common.slint";
import { WorkbenchStyle } from "workbench_controls.slint";

// Shared visual treatment for the global settings pages.
export component SettingsButton inherits Rectangle {
    in property <string> text;
    in property <bool> primary: false;
    in property <bool> quiet: false;
    in property <bool> align-left: false;
    in property <bool> enabled: true;
    callback clicked();
    width: 88px; height: 32px; border-radius: UiRadius.control;
    background: !root.enabled ? #f0f3f7
        : root.primary ? (touch.pressed ? #1e4fa3 : touch.has-hover ? #2866c9 : #3275dc)
        : touch.pressed ? #e9eef5 : touch.has-hover ? #f0f4fa : root.quiet ? transparent : white;
    border-width: root.quiet || root.primary ? 0px : 1px;
    border-color: !root.enabled ? WorkbenchStyle.border
        : touch.has-hover ? WorkbenchStyle.hover-border : WorkbenchStyle.control-border;
    accessible-role: button; accessible-label: root.text;
    accessible-action-default => { if root.enabled { root.clicked(); } }
    Text {
        x: 12px; width: parent.width - 24px;
        text: root.text; font-size: 12px; font-weight: root.primary ? 600 : 400;
        color: !root.enabled ? #98a2b3 : root.primary ? white : root.quiet ? #65758b : #3c4d63;
        horizontal-alignment: root.align-left ? left : center; vertical-alignment: center; overflow: elide;
    }
    touch := TouchArea { enabled: root.enabled; mouse-cursor: pointer; clicked => { root.clicked(); } }
}

export component SettingsDialog inherits DialogSurface {
    in property <string> title;
    in property <string> close-label;
    in property <int> badge-count: 0;
    in property <string> badge-label;
    in property <string> header-status;
    in property <string> action-text;
    in property <bool> action-enabled: true;
    out property <length> content-top: 64px;
    callback action();
    callback close();
    background: #f8fafc;
    border-color: WorkbenchStyle.separator;
    drop-shadow-color: #14294424;
    drop-shadow-blur: 24px;
    drop-shadow-offset-y: 8px;
    TouchArea { }
    HorizontalLayout {
        x: 24px; y: 18px; width: parent.width - 48px; height: 28px;
        spacing: 10px;
        Text {
            text: root.title; font-size: 20px; font-weight: 600;
            color: WorkbenchStyle.text; vertical-alignment: center;
        }
        if root.badge-count > 0: Rectangle {
            width: max(24px, count-label.preferred-width + 14px); height: 22px;
            border-radius: 11px; background: #e8efff;
            accessible-role: text; accessible-label: root.badge-label;
            count-label := Text {
                text: "" + root.badge-count; color: WorkbenchStyle.accent;
                font-size: 11px; font-weight: 600;
                horizontal-alignment: center; vertical-alignment: center;
                accessible-role: none;
            }
        }
        Rectangle { horizontal-stretch: 1; }
        if root.header-status != "": Text {
            text: root.header-status; color: WorkbenchStyle.muted;
            font-size: 11px; vertical-alignment: center;
        }
        if root.action-text != "": SettingsButton {
            width: action-label-metrics.preferred-width + 24px; height: 28px;
            text: root.action-text; enabled: root.action-enabled;
            clicked => { root.action(); }
            action-label-metrics := Text { visible: false; text: root.action-text; font-size: 12px; }
        }
        IconButton {
            width: 28px; height: 28px;
            icon: FontAwesomeIcons.xmark; icon-size: 14px;
            icon-color: WorkbenchStyle.muted;
            hover-background: WorkbenchStyle.hover-surface;
            pressed-background: WorkbenchStyle.pressed-surface;
            accessible-role: button; accessible-label: root.close-label;
            accessible-action-default => { root.close(); }
            clicked => { root.close(); }
        }
    }
    @children
}

export component SettingsSelect inherits CompactComboBox {
    subtle: true;
    show-arrow: false;
    normal-border-color: WorkbenchStyle.control-border;
    hover-border-color: WorkbenchStyle.hover-border;
    height: 28px;
}

export component SettingsGroup inherits Rectangle {
    in property <string> title;
    in property <int> rows: 1;
    height: 24px + root.rows * 36px;
    Text {
        x: 2px; y: 0px; width: parent.width - 4px; height: 18px; text: root.title;
        font-size: 11px; font-weight: 600; color: #718096; vertical-alignment: center;
    }
    Rectangle {
        y: 24px; width: parent.width; height: parent.height - self.y;
        background: white; border-radius: UiRadius.surface; border-color: WorkbenchStyle.border; border-width: 1px;
        VerticalLayout { padding: 0px; spacing: 0px; @children }
    }
}

export component SettingsRow inherits Rectangle {
    in property <string> label;
    in property <bool> enabled: true;
    in property <bool> divider: true;
    in property <length> label-reserve: 128px;
    height: 36px;
    Text {
        x: 12px; width: parent.width - root.label-reserve; height: parent.height;
        text: root.label; color: root.enabled ? #34445a : #9ba5b3;
        font-size: 12px; overflow: elide; vertical-alignment: center;
    }
    if root.divider: Rectangle {
        x: 12px; y: parent.height - 1px; width: parent.width - 24px; height: 1px; background: #d9e1ec;
    }
    @children
}

export component SettingsToggleRow inherits SettingsRow {
    in-out property <bool> checked;
    in property <bool> toggle-on-click: true;
    callback clicked();
    label-reserve: 64px;
    ToggleSwitch {
        x: parent.width - self.width - 12px; y: (parent.height - self.height) / 2;
        checked <=> root.checked; enabled: root.enabled;
        toggle-on-click: root.toggle-on-click;
        clicked => { root.clicked(); }
    }
}