mirror of
https://github.com/flectar/mail.git
synced 2026-11-11 17:57:54 +00:00
42 lines
3.0 KiB
Plaintext
42 lines
3.0 KiB
Plaintext
import { HorizontalBox } from "std-widgets.slint";
|
|
import { LineEdit, ToolbarIconButton } from "controls.slint";
|
|
import { AppTheme, LayoutMetrics } from "../design-system.slint";
|
|
import { TypeScale } from "../typography.slint";
|
|
|
|
export global ZoomApi { pure callback resolve(string, float, float, float) -> float; }
|
|
|
|
// One command vocabulary for email bodies and document previews.
|
|
export component ZoomControls inherits HorizontalBox {
|
|
in property <bool> compact: false;
|
|
in property <bool> available: true;
|
|
in property <bool> fitting: false;
|
|
in property <float> zoom: 1;
|
|
in property <float> minimum: 0.5;
|
|
in property <float> maximum: 3;
|
|
in property <int> revision: 0;
|
|
callback command(string);
|
|
padding: 0px; spacing: 4px; horizontal-stretch: 0; cross-axis-alignment: center;
|
|
height: root.compact ? LayoutMetrics.touch-target : LayoutMetrics.control-height;
|
|
ToolbarIconButton { compact: root.compact; icon-color: AppTheme.body; icon: @image-url("../icons/lucide/outline/zoom-out.svg"); tooltip-text: @tr("Zoom out"); tooltip-above: true; tooltip-align-left: true; interactive: root.available && root.zoom > root.minimum; clicked => { root.command("zoom-out"); } }
|
|
if !root.compact : ToolbarIconButton { icon-color: AppTheme.body; icon: @image-url("../icons/lucide/outline/history.svg"); tooltip-text: @tr("Reset zoom ({}%)", round(root.zoom * 100)); tooltip-above: true; interactive: root.available; clicked => { root.command("zoom-reset"); } }
|
|
// The field shows the widest percentage, inside the editor's 12px insets,
|
|
// at the platform font.
|
|
Rectangle {
|
|
width: max(62px, widest-zoom.preferred-width + 24px);
|
|
height: root.compact ? LayoutMetrics.touch-target : LayoutMetrics.control-height;
|
|
widest-zoom := Text { visible: false; text: "300%"; font-size: TypeScale.body; }
|
|
editor := LineEdit {
|
|
in property <float> applied: root.zoom;
|
|
in property <int> revision: root.revision;
|
|
changed applied => { self.text = "\{round(root.zoom * 100)}%"; }
|
|
changed revision => { self.text = "\{round(root.zoom * 100)}%"; }
|
|
width: parent.width; height: parent.height;
|
|
enabled: root.available; input-label: @tr("Zoom percentage");
|
|
text: "\{round(root.zoom * 100)}%";
|
|
accepted(value) => { root.command("zoom-set:" + value); self.text = "\{round(root.zoom * 100)}%"; }
|
|
}
|
|
}
|
|
ToolbarIconButton { compact: root.compact; icon-color: AppTheme.body; icon: @image-url("../icons/lucide/outline/zoom-in.svg"); tooltip-text: @tr("Zoom in"); tooltip-above: true; interactive: root.available && root.zoom < root.maximum; clicked => { root.command("zoom-in"); } }
|
|
ToolbarIconButton { compact: root.compact; icon-color: AppTheme.body; icon: root.fitting ? @image-url("../icons/lucide/filled/screen-full.svg") : @image-url("../icons/lucide/outline/screen-full.svg"); tooltip-text: @tr("Fit to width"); tooltip-above: true; active: root.fitting; interactive: root.available; clicked => { root.command("fit"); } }
|
|
}
|