590 lines
22 KiB
Plaintext
590 lines
22 KiB
Plaintext
import { Theme } from "theme.slint";
|
|
import { PrimaryButton } from "widgets.slint";
|
|
|
|
export struct SessionInfo {
|
|
id: string,
|
|
name: string,
|
|
group: string,
|
|
host: string,
|
|
port: int,
|
|
user: string,
|
|
auth: string, // "password" | "key"
|
|
kind: string, // "ssh" | "serial" | "telnet"
|
|
last-used: string, // ISO timestamp or "never"
|
|
}
|
|
|
|
export struct ConnectionFolderInfo {
|
|
name: string,
|
|
expanded: bool,
|
|
}
|
|
|
|
// --- SessionRow ------------------------------------------------------------
|
|
component SessionRow inherits Rectangle {
|
|
in property <SessionInfo> session;
|
|
in property <[string]> folder-names;
|
|
in property <bool> debug-ids: false;
|
|
callback connect();
|
|
callback edit();
|
|
callback remove();
|
|
callback move-folder(string);
|
|
|
|
height: 34px;
|
|
border-radius: Theme.radius-sm;
|
|
background: touch.has-hover ? Theme.bg-hover : transparent;
|
|
animate background { duration: 120ms; }
|
|
|
|
// Remember where the right-click landed so the popup can appear there.
|
|
property <length> ctx-x;
|
|
property <length> ctx-y;
|
|
|
|
touch := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { root.connect(); }
|
|
pointer-event(e) => {
|
|
if (e.kind == PointerEventKind.down && e.button == PointerEventButton.right) {
|
|
ctx-x = self.mouse-x;
|
|
ctx-y = self.mouse-y;
|
|
ctx-menu.show();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Right-click context menu -----------------------------------------------
|
|
ctx-menu := PopupWindow {
|
|
x: ctx-x;
|
|
y: ctx-y;
|
|
width: 142px;
|
|
height: 112px + root.folder-names.length * 28px;
|
|
|
|
Rectangle {
|
|
background: Theme.bg-panel;
|
|
border-radius: Theme.radius-sm;
|
|
border-width: 1px;
|
|
border-color: Theme.border-strong;
|
|
drop-shadow-blur: 10px;
|
|
drop-shadow-color: #00000050;
|
|
|
|
VerticalLayout {
|
|
padding: 4px;
|
|
spacing: 2px;
|
|
|
|
// Edit
|
|
Rectangle {
|
|
height: 28px;
|
|
border-radius: Theme.radius-sm;
|
|
background: edit-ta.has-hover ? Theme.bg-hover : transparent;
|
|
edit-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { root.edit(); }
|
|
}
|
|
HorizontalLayout {
|
|
height: parent.height;
|
|
padding-left: 10px;
|
|
spacing: 8px;
|
|
alignment: center;
|
|
Text { width: 16px; height: parent.height; text: "\u{E3C9}"; font-family: "Material Icons"; color: Theme.text-secondary; font-size: Theme.fs-sm; horizontal-alignment: center; vertical-alignment: center; }
|
|
Text { text: @tr("Edit"); color: Theme.text-primary; font-size: Theme.fs-md; vertical-alignment: center; horizontal-stretch: 1; }
|
|
}
|
|
}
|
|
|
|
Rectangle { height: 1px; background: Theme.border-subtle; }
|
|
|
|
// Move to category
|
|
Rectangle {
|
|
height: 28px;
|
|
border-radius: Theme.radius-sm;
|
|
background: transparent;
|
|
HorizontalLayout {
|
|
height: parent.height;
|
|
padding-left: 10px;
|
|
spacing: 8px;
|
|
alignment: center;
|
|
Text { width: 16px; height: parent.height; text: "\u{E2C8}"; font-family: "Material Icons"; color: Theme.text-secondary; font-size: Theme.fs-sm; horizontal-alignment: center; vertical-alignment: center; }
|
|
Text { text: @tr("Move to category"); color: Theme.text-primary; font-size: Theme.fs-md; vertical-alignment: center; horizontal-stretch: 1; }
|
|
}
|
|
}
|
|
|
|
for folder in root.folder-names : Rectangle {
|
|
height: 26px;
|
|
border-radius: Theme.radius-sm;
|
|
background: folder == root.session.group ? Theme.bg-active : (folder-ta.has-hover ? Theme.bg-hover : transparent);
|
|
folder-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { root.move-folder(folder); }
|
|
}
|
|
Text {
|
|
x: 24px;
|
|
width: parent.width - 34px;
|
|
height: parent.height;
|
|
text: folder;
|
|
color: Theme.text-primary;
|
|
font-size: Theme.fs-sm;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
|
|
Rectangle { height: 1px; background: Theme.border-subtle; }
|
|
|
|
// Delete (red tint)
|
|
Rectangle {
|
|
height: 28px;
|
|
border-radius: Theme.radius-sm;
|
|
background: del-ta.has-hover ? #cc333320 : transparent;
|
|
del-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { root.remove(); }
|
|
}
|
|
HorizontalLayout {
|
|
height: parent.height;
|
|
padding-left: 10px;
|
|
spacing: 8px;
|
|
alignment: center;
|
|
Text { width: 16px; height: parent.height; text: "\u{E872}"; font-family: "Material Icons"; color: #cc3333; font-size: Theme.fs-sm; horizontal-alignment: center; vertical-alignment: center; }
|
|
Text { text: @tr("Delete"); color: #cc3333; font-size: Theme.fs-md; vertical-alignment: center; horizontal-stretch: 1; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Row content ------------------------------------------------------------
|
|
HorizontalLayout {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
spacing: 8px;
|
|
|
|
Rectangle {
|
|
width: 24px;
|
|
height: parent.height;
|
|
Text {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
text: "\u{2514}";
|
|
color: Theme.text-muted;
|
|
font-size: Theme.fs-sm;
|
|
horizontal-alignment: right;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: 18px;
|
|
height: parent.height;
|
|
|
|
Rectangle {
|
|
y: (parent.height - self.height) / 2;
|
|
width: parent.width;
|
|
height: 18px;
|
|
border-radius: 3px;
|
|
background: Theme.bg-elevated;
|
|
Text {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
text: session.kind == "serial" ? "\u{E1B1}"
|
|
: session.kind == "telnet" ? "\u{E8AC}"
|
|
: "\u{E875}";
|
|
font-family: "Material Icons";
|
|
color: Theme.text-secondary;
|
|
font-size: Theme.fs-sm;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
Text {
|
|
height: parent.height;
|
|
text: session.name;
|
|
color: Theme.text-primary;
|
|
font-size: Theme.fs-md;
|
|
vertical-alignment: center;
|
|
width: 170px;
|
|
overflow: elide;
|
|
}
|
|
Rectangle {
|
|
width: 52px;
|
|
height: parent.height;
|
|
|
|
Rectangle {
|
|
y: (parent.height - self.height) / 2;
|
|
width: parent.width;
|
|
height: 20px;
|
|
border-radius: Theme.radius-sm;
|
|
background: Theme.bg-elevated;
|
|
Text {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
text: session.kind == "serial" ? "SERIAL"
|
|
: session.kind == "telnet" ? "TELNET"
|
|
: "SSH";
|
|
color: Theme.text-secondary;
|
|
font-size: Theme.fs-xs;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
Text {
|
|
height: parent.height;
|
|
text: session.kind == "serial"
|
|
? session.host
|
|
: session.host + ":" + session.port;
|
|
color: Theme.text-secondary;
|
|
font-size: Theme.fs-sm;
|
|
vertical-alignment: center;
|
|
width: 220px;
|
|
overflow: elide;
|
|
}
|
|
Text {
|
|
height: parent.height;
|
|
text: session.user;
|
|
color: Theme.text-secondary;
|
|
font-size: Theme.fs-sm;
|
|
vertical-alignment: center;
|
|
horizontal-stretch: 1;
|
|
overflow: elide;
|
|
}
|
|
if root.debug-ids : Text {
|
|
height: parent.height;
|
|
text: "[session-row]";
|
|
color: Theme.warning;
|
|
font-size: Theme.fs-xs;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
component FolderSessionSlot inherits Rectangle {
|
|
in property <string> folder-name;
|
|
in property <bool> folder-expanded: true;
|
|
in property <SessionInfo> session;
|
|
in property <[string]> folder-names;
|
|
in property <bool> debug-ids: false;
|
|
callback connect-session(string);
|
|
callback edit-session(string);
|
|
callback remove-session(string);
|
|
callback move-session-folder(string, string);
|
|
|
|
height: root.folder-expanded && session.group == root.folder-name ? 34px : 0px;
|
|
visible: root.folder-expanded && session.group == root.folder-name;
|
|
|
|
if root.folder-expanded && session.group == root.folder-name : SessionRow {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
session: root.session;
|
|
folder-names: root.folder-names;
|
|
debug-ids: root.debug-ids;
|
|
connect => { root.connect-session(root.session.id); }
|
|
edit => { root.edit-session(root.session.id); }
|
|
remove => { root.remove-session(root.session.id); }
|
|
move-folder(folder) => { root.move-session-folder(root.session.id, folder); }
|
|
}
|
|
}
|
|
|
|
component FolderSection inherits VerticalLayout {
|
|
in property <string> folder-name;
|
|
in property <bool> expanded: true;
|
|
in property <[SessionInfo]> sessions;
|
|
in property <[string]> folder-names;
|
|
in property <bool> debug-ids: false;
|
|
callback connect-session(string);
|
|
callback edit-session(string);
|
|
callback remove-session(string);
|
|
callback rename-folder(string);
|
|
callback delete-folder(string);
|
|
callback new-folder();
|
|
callback toggle-folder(string);
|
|
callback move-session-folder(string, string);
|
|
|
|
spacing: 2px;
|
|
|
|
Rectangle {
|
|
width: parent.width;
|
|
height: 28px;
|
|
border-radius: Theme.radius-sm;
|
|
background: header-ta.has-hover ? Theme.bg-hover : transparent;
|
|
property <length> ctx-x;
|
|
property <length> ctx-y;
|
|
|
|
header-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
pointer-event(e) => {
|
|
if (e.kind == PointerEventKind.down && e.button == PointerEventButton.right) {
|
|
ctx-x = self.mouse-x;
|
|
ctx-y = self.mouse-y;
|
|
folder-menu.show();
|
|
} else if (e.kind == PointerEventKind.down && e.button == PointerEventButton.left) {
|
|
root.toggle-folder(root.folder-name);
|
|
}
|
|
}
|
|
}
|
|
|
|
folder-menu := PopupWindow {
|
|
x: ctx-x;
|
|
y: ctx-y;
|
|
width: 132px;
|
|
height: 108px;
|
|
Rectangle {
|
|
background: Theme.bg-panel;
|
|
border-radius: Theme.radius-sm;
|
|
border-width: 1px;
|
|
border-color: Theme.border-strong;
|
|
drop-shadow-blur: 10px;
|
|
drop-shadow-color: #00000050;
|
|
VerticalLayout {
|
|
padding: 4px;
|
|
spacing: 2px;
|
|
|
|
Rectangle {
|
|
height: 28px;
|
|
border-radius: Theme.radius-sm;
|
|
background: new-folder-ta.has-hover ? Theme.bg-hover : transparent;
|
|
new-folder-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { root.new-folder(); }
|
|
}
|
|
Text { x: 10px; width: parent.width - 20px; height: parent.height; text: @tr("New category"); color: Theme.text-primary; font-size: Theme.fs-md; vertical-alignment: center; }
|
|
}
|
|
Rectangle {
|
|
height: 28px;
|
|
border-radius: Theme.radius-sm;
|
|
background: rename-folder-ta.has-hover ? Theme.bg-hover : transparent;
|
|
rename-folder-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { root.rename-folder(root.folder-name); }
|
|
}
|
|
Text { x: 10px; width: parent.width - 20px; height: parent.height; text: @tr("Rename"); color: Theme.text-primary; font-size: Theme.fs-md; vertical-alignment: center; }
|
|
}
|
|
Rectangle {
|
|
height: 28px;
|
|
border-radius: Theme.radius-sm;
|
|
background: delete-folder-ta.has-hover ? #cc333320 : transparent;
|
|
delete-folder-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { root.delete-folder(root.folder-name); }
|
|
}
|
|
Text { x: 10px; width: parent.width - 20px; height: parent.height; text: @tr("Delete"); color: #cc3333; font-size: Theme.fs-md; vertical-alignment: center; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
HorizontalLayout {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
spacing: 8px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
Rectangle {
|
|
width: 24px;
|
|
height: parent.height;
|
|
Text {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
text: root.expanded ? "\u{E5CF}" : "\u{E5CC}";
|
|
font-family: "Material Icons";
|
|
color: Theme.text-secondary;
|
|
font-size: 16px;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
Text {
|
|
height: parent.height;
|
|
text: root.folder-name;
|
|
color: Theme.text-secondary;
|
|
font-size: Theme.fs-sm;
|
|
font-weight: 600;
|
|
vertical-alignment: center;
|
|
horizontal-stretch: 1;
|
|
overflow: elide;
|
|
}
|
|
if root.debug-ids : Text {
|
|
height: parent.height;
|
|
text: "[folder-section]";
|
|
color: Theme.warning;
|
|
font-size: Theme.fs-xs;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
for session in root.sessions : FolderSessionSlot {
|
|
width: parent.width;
|
|
folder-name: root.folder-name;
|
|
folder-expanded: root.expanded;
|
|
session: session;
|
|
folder-names: root.folder-names;
|
|
debug-ids: root.debug-ids;
|
|
connect-session(id) => { root.connect-session(id); }
|
|
edit-session(id) => { root.edit-session(id); }
|
|
remove-session(id) => { root.remove-session(id); }
|
|
move-session-folder(id, folder) => { root.move-session-folder(id, folder); }
|
|
}
|
|
}
|
|
|
|
// --- Welcome ---------------------------------------------------------------
|
|
export component Welcome inherits Rectangle {
|
|
in property <bool> app-background-active: false;
|
|
in property <float> ui-opacity: 0.72;
|
|
in property <[SessionInfo]> sessions;
|
|
in property <[ConnectionFolderInfo]> folders;
|
|
in property <[string]> all-folder-names;
|
|
in property <string> import-hint; // result text after an import
|
|
in property <bool> debug-ids: false;
|
|
callback new-session();
|
|
callback new-folder();
|
|
callback rename-folder(string);
|
|
callback delete-folder(string);
|
|
callback toggle-folder(string);
|
|
callback move-session-folder(string, string);
|
|
callback import-ssh-config();
|
|
callback connect-session(string);
|
|
callback edit-session(string);
|
|
callback remove-session(string);
|
|
|
|
background: root.app-background-active ? Theme.bg-root.with-alpha(root.ui-opacity) : Theme.bg-root;
|
|
clip: true;
|
|
|
|
Flickable {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
viewport-width: self.width;
|
|
viewport-height: max(self.height, content.preferred-height);
|
|
|
|
content := VerticalLayout {
|
|
width: root.width;
|
|
padding: 24px;
|
|
spacing: 20px;
|
|
|
|
VerticalLayout {
|
|
spacing: 4px;
|
|
Text {
|
|
text: "meatshell";
|
|
color: Theme.text-primary;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
}
|
|
Text {
|
|
text: @tr("meatshell — a lightweight Rust + Slint SSH client by 'lil meatball'");
|
|
color: Theme.text-secondary;
|
|
font-size: Theme.fs-md;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
Rectangle { horizontal-stretch: 1; }
|
|
|
|
PrimaryButton {
|
|
text: @tr("New SSH");
|
|
clicked => { root.new-session(); }
|
|
}
|
|
}
|
|
|
|
// Connection management
|
|
Rectangle {
|
|
background: Theme.bg-panel;
|
|
border-radius: Theme.radius-md;
|
|
border-width: 1px;
|
|
border-color: Theme.border-subtle;
|
|
height: max(240px, min(560px, root.height - 190px));
|
|
|
|
VerticalLayout {
|
|
padding: 16px;
|
|
spacing: 12px;
|
|
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
Text {
|
|
text: @tr("Connection manager");
|
|
color: Theme.text-primary;
|
|
font-size: Theme.fs-lg;
|
|
font-weight: 600;
|
|
vertical-alignment: center;
|
|
horizontal-stretch: 1;
|
|
}
|
|
// Result of the last "Import ~/.ssh/config" (triggered from
|
|
// the settings menu), e.g. "imported 3".
|
|
Text {
|
|
text: root.import-hint;
|
|
color: Theme.text-muted;
|
|
font-size: Theme.fs-sm;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
vertical-stretch: 1;
|
|
clip: true;
|
|
background: transparent;
|
|
|
|
if sessions.length == 0 : Rectangle {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
background: Theme.bg-root;
|
|
border-radius: Theme.radius-sm;
|
|
border-width: 1px;
|
|
border-color: Theme.border-subtle;
|
|
|
|
VerticalLayout {
|
|
alignment: center;
|
|
spacing: 6px;
|
|
Text {
|
|
text: @tr("No sessions yet");
|
|
color: Theme.text-secondary;
|
|
font-size: Theme.fs-md;
|
|
horizontal-alignment: center;
|
|
}
|
|
Text {
|
|
text: @tr("Use the plus button above to add SSH, Serial, or Telnet");
|
|
color: Theme.text-muted;
|
|
font-size: Theme.fs-sm;
|
|
horizontal-alignment: center;
|
|
wrap: word-wrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
if root.folders.length > 0 : Flickable {
|
|
width: parent.width;
|
|
height: parent.height;
|
|
viewport-width: self.width;
|
|
viewport-height: max(self.height, folder-list.preferred-height);
|
|
|
|
folder-list := VerticalLayout {
|
|
width: parent.width;
|
|
spacing: 4px;
|
|
for folder in root.folders : FolderSection {
|
|
width: parent.width;
|
|
folder-name: folder.name;
|
|
expanded: folder.expanded;
|
|
sessions: root.sessions;
|
|
folder-names: root.all-folder-names;
|
|
debug-ids: root.debug-ids;
|
|
connect-session(id) => { root.connect-session(id); }
|
|
edit-session(id) => { root.edit-session(id); }
|
|
remove-session(id) => { root.remove-session(id); }
|
|
rename-folder(name) => { root.rename-folder(name); }
|
|
delete-folder(name) => { root.delete-folder(name); }
|
|
new-folder() => { root.new-folder(); }
|
|
toggle-folder(name) => { root.toggle-folder(name); }
|
|
move-session-folder(id, folder) => { root.move-session-folder(id, folder); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Filler
|
|
Rectangle { vertical-stretch: 1; }
|
|
}
|
|
}
|
|
}
|