mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-02 06:41:14 +00:00
123 lines
4.7 KiB
Text
123 lines
4.7 KiB
Text
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
|
// SPDX-License-Identifier: MIT
|
|
import { Palette, Measurements, Colors, Style } from "../common.slint";
|
|
import { FancySlider } from "general/fancySlider.slint";
|
|
import { InnerShadowRectangle } from "general/innerShadowRectangle.slint";
|
|
import { Control } from "control.slint";
|
|
import { AppState } from "../appState.slint";
|
|
import { HaText } from "general/haText.slint";
|
|
import { DropShadowToggle} from "general/toggle.slint";
|
|
|
|
|
|
export component Lamp inherits Control {
|
|
in property <length> tilePadding: (root.height > Measurements.small-height-tile) ? 36px : 18px;
|
|
show-label: false;
|
|
tile-shadow-blur: 0px;
|
|
|
|
tile := InnerShadowRectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
clip: true;
|
|
inner-color: Palette.lamp-background.mix(Palette.lamp-shadow,(slider.value / 24));
|
|
inner-shadow-color: Palette.lamp-shadow;
|
|
inner-shadow-blur: tile.height / 5;
|
|
|
|
TouchArea {
|
|
clicked => {
|
|
slider.toggle();
|
|
}
|
|
}
|
|
Rectangle {
|
|
x: tile.width - self.width + 40px;
|
|
y: (root.width > Measurements.small-width-tile) ? -120px : -80px;
|
|
animate y {
|
|
duration: 300ms;
|
|
easing: ease-in-out-sine;
|
|
}
|
|
clip: true;
|
|
width: 70%;
|
|
height: 100%;
|
|
|
|
sh := Image {
|
|
property <[image]> frames: [
|
|
@image-url("../images/lamp/0000.png"),
|
|
@image-url("../images/lamp/0001.png"),
|
|
@image-url("../images/lamp/0002.png"),
|
|
@image-url("../images/lamp/0003.png"),
|
|
@image-url("../images/lamp/0004.png"),
|
|
@image-url("../images/lamp/0005.png"),
|
|
@image-url("../images/lamp/0006.png"),
|
|
@image-url("../images/lamp/0007.png"),
|
|
@image-url("../images/lamp/0008.png"),
|
|
@image-url("../images/lamp/0009.png"),
|
|
@image-url("../images/lamp/0010.png"),
|
|
@image-url("../images/lamp/0011.png"),
|
|
@image-url("../images/lamp/0012.png"),
|
|
@image-url("../images/lamp/0013.png"),
|
|
@image-url("../images/lamp/0014.png"),
|
|
@image-url("../images/lamp/0015.png"),
|
|
@image-url("../images/lamp/0016.png"),
|
|
@image-url("../images/lamp/0017.png"),
|
|
@image-url("../images/lamp/0018.png"),
|
|
@image-url("../images/lamp/0019.png"),
|
|
@image-url("../images/lamp/0020.png"),
|
|
@image-url("../images/lamp/0021.png"),
|
|
@image-url("../images/lamp/0022.png"),
|
|
@image-url("../images/lamp/0023.png"),
|
|
@image-url("../images/lamp/0024.png"),
|
|
];
|
|
|
|
property <int> frame: 0;
|
|
source: frames[slider.value];
|
|
animate frame {
|
|
duration: 300ms;
|
|
easing: ease-in-out-sine;
|
|
}
|
|
}
|
|
}
|
|
|
|
v := VerticalLayout {
|
|
padding: tilePadding;
|
|
width: 100%;
|
|
height: 100%;
|
|
alignment: space-between;
|
|
Rectangle {
|
|
width: 100%;
|
|
|
|
VerticalLayout {
|
|
alignment: start;
|
|
HaText {
|
|
text: root.name;
|
|
font-size: Style.tile-title-font-size;
|
|
font-weight: 400;
|
|
color: Palette.lamp-foreground;
|
|
}
|
|
}
|
|
}
|
|
|
|
slider := FancySlider {
|
|
maxValue: 24;
|
|
value: self.maxValue;
|
|
width: root.width * 0.8;
|
|
|
|
icon: @image-url("../images/brightness.svg");
|
|
colorize-icon: Colors.black;
|
|
}
|
|
}
|
|
|
|
switch := DropShadowToggle {
|
|
y: root.height < Measurements.medium-height-tile ? root.height - self.height - tilePadding : tilePadding * 2.5;
|
|
x: root.height < Measurements.medium-height-tile ? root.width - self.width : root.x + tilePadding/2;
|
|
labelOff: "";
|
|
labelOn: "";
|
|
scale: 33%;
|
|
toggleOpacity: 0.4;
|
|
active: slider.value > 0;
|
|
touchEnabled: false;
|
|
control-color: self.active ? Palette.lamp-background : Palette.lamp-shadow ;
|
|
inner-shadow-color: self.active ? Palette.shadow-color : Palette.slider-background.darker(0.1);
|
|
inner-color-inactive: Palette.slider-background;
|
|
inner-color-active: Palette.slider-foreground;
|
|
}
|
|
}
|
|
}
|