mirror of
https://github.com/logos-storage/logos-storage-app-skeleton.git
synced 2026-06-16 13:29:32 +00:00
Add files to git
This commit is contained in:
parent
a7d1e092a3
commit
7907ecc6b2
74
src/qml/DotIcon.qml
Normal file
74
src/qml/DotIcon.qml
Normal file
@ -0,0 +1,74 @@
|
||||
import QtQuick
|
||||
|
||||
// Generic Nothing OS style dot grid icon.
|
||||
// Static mode : set `pattern` (flat array of 0/1) and leave `animated: false`
|
||||
// Animated mode: set `animated: true` — wave expands from center automatically
|
||||
Item {
|
||||
id: root
|
||||
|
||||
// Static pattern — flat array of 0/1, row-major
|
||||
property var pattern: []
|
||||
|
||||
// Dimensions
|
||||
property int columns: 5
|
||||
property int dotSize: 6
|
||||
property int dotSpacing: 4
|
||||
|
||||
// Appearance
|
||||
property color dotColor: "white"
|
||||
property real inactiveOpacity: 0.1
|
||||
property real activeOpacity: 0.9
|
||||
|
||||
// Animation
|
||||
property bool animated: false
|
||||
property int animPhase: 0
|
||||
|
||||
readonly property int rows: Math.max(1, Math.ceil(pattern.length / columns))
|
||||
readonly property int count: animated ? columns * columns : pattern.length
|
||||
|
||||
implicitWidth: columns * dotSize + Math.max(0, columns - 1) * dotSpacing
|
||||
implicitHeight: rows * dotSize + Math.max(0, rows - 1) * dotSpacing
|
||||
width: implicitWidth
|
||||
height: implicitHeight
|
||||
|
||||
Timer {
|
||||
interval: 140
|
||||
repeat: true
|
||||
running: root.animated
|
||||
onTriggered: root.animPhase = (root.animPhase + 1) % (root.columns * 2)
|
||||
}
|
||||
|
||||
Grid {
|
||||
columns: root.columns
|
||||
spacing: root.dotSpacing
|
||||
|
||||
Repeater {
|
||||
model: root.count
|
||||
|
||||
Rectangle {
|
||||
width: root.dotSize
|
||||
height: root.dotSize
|
||||
radius: root.dotSize * 0.3
|
||||
color: root.dotColor
|
||||
|
||||
opacity: {
|
||||
if (!root.animated) {
|
||||
return (index < root.pattern.length && root.pattern[index])
|
||||
? root.activeOpacity : root.inactiveOpacity
|
||||
}
|
||||
// Wave from center
|
||||
const cx = Math.floor(root.columns / 2)
|
||||
const cy = Math.floor(root.columns / 2)
|
||||
const col = index % root.columns
|
||||
const row = Math.floor(index / root.columns)
|
||||
const d = Math.abs(col - cx) + Math.abs(row - cy)
|
||||
const wave = root.animPhase % root.columns
|
||||
const diff = Math.abs(d - wave)
|
||||
if (diff === 0) return root.activeOpacity
|
||||
if (diff === 1) return 0.35
|
||||
return root.inactiveOpacity
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
71
src/qml/NodeStatusIcon.qml
Normal file
71
src/qml/NodeStatusIcon.qml
Normal file
@ -0,0 +1,71 @@
|
||||
import QtQuick
|
||||
import Logos.Theme
|
||||
|
||||
// 7x7 animated dot grid for the StartNode screen.
|
||||
// States:
|
||||
// starting=true → white wave expanding from center
|
||||
// starting=false, success → all dots green (Theme.palette.success)
|
||||
// starting=false, !success → red X pattern (Theme.palette.error)
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property bool starting: true
|
||||
property bool success: false
|
||||
property int animPhase: 0
|
||||
|
||||
readonly property int columns: 7
|
||||
readonly property int dotSize: 8
|
||||
readonly property int dotSpacing: 5
|
||||
|
||||
implicitWidth: columns * dotSize + (columns - 1) * dotSpacing
|
||||
implicitHeight: columns * dotSize + (columns - 1) * dotSpacing
|
||||
width: implicitWidth
|
||||
height: implicitHeight
|
||||
|
||||
Timer {
|
||||
interval: 120
|
||||
repeat: true
|
||||
running: root.starting
|
||||
onTriggered: root.animPhase = (root.animPhase + 1) % 14
|
||||
}
|
||||
|
||||
Grid {
|
||||
columns: root.columns
|
||||
spacing: root.dotSpacing
|
||||
|
||||
Repeater {
|
||||
model: root.columns * root.columns
|
||||
|
||||
Rectangle {
|
||||
width: root.dotSize
|
||||
height: root.dotSize
|
||||
radius: root.dotSize * 0.25
|
||||
|
||||
color: {
|
||||
if (root.success) return Theme.palette.success
|
||||
if (!root.starting) return Theme.palette.error
|
||||
return Theme.palette.text
|
||||
}
|
||||
|
||||
opacity: {
|
||||
const col = index % root.columns
|
||||
const row = Math.floor(index / root.columns)
|
||||
const d = Math.abs(col - 3) + Math.abs(row - 3)
|
||||
|
||||
if (root.starting) {
|
||||
const wave = root.animPhase % root.columns
|
||||
const diff = Math.abs(d - wave)
|
||||
if (diff === 0) return 0.9
|
||||
if (diff === 1) return 0.35
|
||||
return 0.1
|
||||
}
|
||||
|
||||
if (root.success) return 0.85
|
||||
|
||||
// Error — X pattern
|
||||
return (col === row || col + row === 6) ? 0.9 : 0.1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user