From 9980c73398d23f9dab812f3e1713ecebb5161136 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Wed, 7 Oct 2026 18:52:16 +0200 Subject: feat(island): the animated capsule both pills are made of Co-Authored-By: Claude Opus 5.5 --- desktop/island/Capsule.qml | 51 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 desktop/island/Capsule.qml (limited to 'desktop/island') diff --git a/desktop/island/Capsule.qml b/desktop/island/Capsule.qml new file mode 100644 index 0000000..76329e0 --- /dev/null +++ b/desktop/island/Capsule.qml @@ -0,0 +1,51 @@ +// Copyright (C) 2026 Danilo M. +// +// This program is free software; you can redistribute it and/or modify +// it under the terms of the GNU General Public License version 2 as +// published by the Free Software Foundation. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +import QtQuick +import ".." + +// One pill. Its size animates between the rest size and a panel size; the +// radius is clamped so it is a full capsule at rest and a rounded panel when +// open, and stays a valid shape mid-animation. +Rectangle { + id: cap + + property real restWidth: 0 + property real restHeight: 34 + property bool expanded: false + property real panelWidth: 0 + property real panelHeight: 0 + readonly property bool hovered: hover.hovered + + default property alias content: inner.data + + width: expanded ? panelWidth : restWidth + height: expanded ? panelHeight : restHeight + + // Duration-driven (velocity -1) and Immediate reversing, so a panel + // closed mid-open turns around from where it is instead of restarting. + Behavior on width { + SmoothedAnimation { velocity: -1; duration: 220; reversingMode: SmoothedAnimation.Immediate } + } + Behavior on height { + SmoothedAnimation { velocity: -1; duration: 220; reversingMode: SmoothedAnimation.Immediate } + } + + radius: Math.min(14, width / 2, height / 2) + color: Qt.alpha(Theme.base, 0.92) + border.width: 1 + border.color: Qt.alpha(Theme.text, 0.12) + clip: true + + HoverHandler { id: hover } + + Item { id: inner; anchors.fill: parent } +} -- cgit v1.2.3