Inako
5eb47e45ef
This includes temporary AI-generated frontend scaffolding, none of this will be used in production. It was just used during development for the backend.
96 lines
2.3 KiB
Plaintext
96 lines
2.3 KiB
Plaintext
/// TEMPORARY AI GENERATED FRONTEND \\\
|
|
/// NOT TO BE USED IN PRODUCTION \\\
|
|
|
|
import { Theme } from "../theme.slint";
|
|
import { Icons } from "../icons.slint";
|
|
import { Icon } from "icon.slint";
|
|
import { Avatar } from "avatar.slint";
|
|
import { ToolButton } from "tool-button.slint";
|
|
|
|
// Bottom-left "you" bar: avatar, name, mute / deafen / settings.
|
|
export component UserPanel inherits Rectangle {
|
|
in property <string> name;
|
|
in property <string> user-id;
|
|
in property <string> initial;
|
|
in property <color> tint;
|
|
in-out property <bool> muted;
|
|
in-out property <bool> deafened;
|
|
callback open-settings();
|
|
callback logout();
|
|
|
|
height: 52px;
|
|
background: #232428;
|
|
|
|
Avatar {
|
|
initial: root.initial;
|
|
tint: root.tint;
|
|
diameter: 32px;
|
|
x: 8px;
|
|
y: (parent.height - self.height) / 2;
|
|
}
|
|
|
|
// Presence dot
|
|
Rectangle {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 6px;
|
|
background: Theme.success;
|
|
border-width: 2px;
|
|
border-color: #232428;
|
|
x: 8px + 32px - 10px;
|
|
y: (parent.height - 32px) / 2 + 32px - 10px;
|
|
}
|
|
|
|
Text {
|
|
x: 48px;
|
|
y: 10px;
|
|
width: 100px;
|
|
height: 16px;
|
|
text: root.name;
|
|
color: Theme.text-header;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
overflow: elide;
|
|
}
|
|
|
|
Text {
|
|
x: 48px;
|
|
y: 26px;
|
|
width: 100px;
|
|
height: 14px;
|
|
text: root.user-id;
|
|
color: Theme.text-muted;
|
|
font-size: 11px;
|
|
overflow: elide;
|
|
}
|
|
|
|
HorizontalLayout {
|
|
x: parent.width - self.preferred-width - 4px;
|
|
y: (parent.height - 28px) / 2;
|
|
spacing: 0px;
|
|
// Voice isn't wired yet: these only flip local state for now.
|
|
ToolButton {
|
|
glyph: Icons.mic;
|
|
tint: root.muted ? Theme.danger : Theme.text-muted;
|
|
clicked => {
|
|
root.muted = !root.muted;
|
|
}
|
|
}
|
|
|
|
ToolButton {
|
|
glyph: Icons.headphones;
|
|
tint: root.deafened ? Theme.danger : Theme.text-muted;
|
|
clicked => {
|
|
root.deafened = !root.deafened;
|
|
}
|
|
}
|
|
|
|
ToolButton {
|
|
glyph: Icons.logout;
|
|
clicked => {
|
|
root.logout();
|
|
}
|
|
}
|
|
}
|
|
}
|