Put a scrollbar on the collections sidebar
A tree longer than the panel looked, to a mouse, like the whole tree. Same shape as the develop column: the Flickable fills a Rectangle that takes its stretch, and a ScrollBar is drawn over its right edge. It is drawn only when the tree overflows.
This commit is contained in:
File diff suppressed because one or more lines are too long
+1
-1
@@ -407,7 +407,7 @@ Double-click is what a file manager and a Lightroom panel use for the same thing
|
|||||||
|
|
||||||
Under the trash because the trash is where the spare copies go, and only while the catalog holds any: a row that is always there and usually empty is noise.
|
Under the trash because the trash is where the spare copies go, and only while the catalog holds any: a row that is always there and usually empty is noise.
|
||||||
|
|
||||||
<sub>`ui/dr-ui/ui/collections.slint:870`</sub>
|
<sub>`ui/dr-ui/ui/collections.slint:884`</sub>
|
||||||
|
|
||||||
## Duplicate originals
|
## Duplicate originals
|
||||||
|
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
import { Theme } from "theme.slint";
|
import { Theme } from "theme.slint";
|
||||||
import { Duplicates } from "duplicates.slint";
|
import { Duplicates } from "duplicates.slint";
|
||||||
import { Keys } from "keys.slint";
|
import { Keys } from "keys.slint";
|
||||||
import { Button, Icon } from "widgets.slint";
|
import { Button, Icon, ScrollBar } from "widgets.slint";
|
||||||
|
|
||||||
// One row of the collection tree.
|
// One row of the collection tree.
|
||||||
export struct CollectionRow {
|
export struct CollectionRow {
|
||||||
@@ -673,76 +673,90 @@ export component CollectionsPanel inherits Rectangle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// --- the tree -----------------------------------------------------
|
// --- the tree -----------------------------------------------------
|
||||||
Flickable {
|
Rectangle {
|
||||||
vertical-stretch: 1;
|
vertical-stretch: 1;
|
||||||
viewport-height: root.rows.length * (Theme.row-height + 2px);
|
tree-flick := Flickable {
|
||||||
|
|
||||||
// Wrapped rather than made draggable from the inside: the grid's
|
|
||||||
// cells take the same shape, and a `DragArea` around the whole row
|
|
||||||
// keeps the row's own TouchArea nested under it, which is what lets
|
|
||||||
// a click still select while a drag reparents.
|
|
||||||
for row[i] in root.rows: DragArea {
|
|
||||||
y: i * (Theme.row-height + 2px);
|
|
||||||
width: parent.width;
|
width: parent.width;
|
||||||
height: Theme.row-height;
|
height: parent.height;
|
||||||
|
viewport-height: root.rows.length * (Theme.row-height + 2px);
|
||||||
|
|
||||||
// Move, not copy. A collection has one parent, so dragging it
|
// Wrapped rather than made draggable from the inside: the grid's
|
||||||
// somewhere takes it out of where it was — unlike a photograph,
|
// cells take the same shape, and a `DragArea` around the whole row
|
||||||
// which is filed in as many collections as you like.
|
// keeps the row's own TouchArea nested under it, which is what lets
|
||||||
allow-move: true;
|
// a click still select while a drag reparents.
|
||||||
data: root.collection-drag-payload(row.id);
|
for row[i] in root.rows: DragArea {
|
||||||
|
y: i * (Theme.row-height + 2px);
|
||||||
|
width: parent.width;
|
||||||
|
height: Theme.row-height;
|
||||||
|
|
||||||
// The hold armed this drag and lifted the row; this is where
|
// Move, not copy. A collection has one parent, so dragging it
|
||||||
// Rust learns the movement actually began, so the release that
|
// somewhere takes it out of where it was — unlike a photograph,
|
||||||
// ends it opens no menu.
|
// which is filed in as many collections as you like.
|
||||||
changed dragging => { root.drag-active(row.id, self.dragging); }
|
allow-move: true;
|
||||||
|
data: root.collection-drag-payload(row.id);
|
||||||
|
|
||||||
TreeRow {
|
// The hold armed this drag and lifted the row; this is where
|
||||||
width: 100%;
|
// Rust learns the movement actually began, so the release that
|
||||||
height: 100%;
|
// ends it opens no menu.
|
||||||
entry: row;
|
changed dragging => { root.drag-active(row.id, self.dragging); }
|
||||||
selected: row.id == root.selected-id;
|
|
||||||
lifted: row.id == root.lifted-id;
|
|
||||||
// A saved filter's membership is computed, so a drop cannot
|
|
||||||
// land there. Refused in `can-drop`, so the cursor says no
|
|
||||||
// before the release rather than after.
|
|
||||||
drop-allowed: !row.smart;
|
|
||||||
renaming: row.id == root.renaming-id;
|
|
||||||
|
|
||||||
clicked => { root.select(row.id); }
|
TreeRow {
|
||||||
toggle => { root.toggle(row.id); }
|
width: 100%;
|
||||||
context-menu => { root.row-menu(row.id); }
|
height: 100%;
|
||||||
offline-menu => { root.offline-menu(row.id); }
|
entry: row;
|
||||||
press-changed(down) => { root.row-press(row.id, down); }
|
selected: row.id == root.selected-id;
|
||||||
dropped => { root.dropped-on(row.id); }
|
lifted: row.id == root.lifted-id;
|
||||||
drag-over(over) => { root.drag-over(row.id, over); }
|
// A saved filter's membership is computed, so a drop cannot
|
||||||
rename-requested => { root.rename-start(row.id); }
|
// land there. Refused in `can-drop`, so the cursor says no
|
||||||
rename-committed(name) => { root.rename-commit(row.id, name); }
|
// before the release rather than after.
|
||||||
rename-cancelled => { root.rename-cancel(); }
|
drop-allowed: !row.smart;
|
||||||
keys-released => { root.keys-released(); }
|
renaming: row.id == root.renaming-id;
|
||||||
|
|
||||||
|
clicked => { root.select(row.id); }
|
||||||
|
toggle => { root.toggle(row.id); }
|
||||||
|
context-menu => { root.row-menu(row.id); }
|
||||||
|
offline-menu => { root.offline-menu(row.id); }
|
||||||
|
press-changed(down) => { root.row-press(row.id, down); }
|
||||||
|
dropped => { root.dropped-on(row.id); }
|
||||||
|
drag-over(over) => { root.drag-over(row.id, over); }
|
||||||
|
rename-requested => { root.rename-start(row.id); }
|
||||||
|
rename-committed(name) => { root.rename-commit(row.id, name); }
|
||||||
|
rename-cancelled => { root.rename-cancel(); }
|
||||||
|
keys-released => { root.keys-released(); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Empty state. A blank panel gives no hint that collections exist
|
||||||
|
// at all, let alone that images can be dragged into them.
|
||||||
|
if root.rows.length == 0: VerticalLayout {
|
||||||
|
alignment: center;
|
||||||
|
spacing: Theme.gap-sm;
|
||||||
|
padding: Theme.gap;
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "No collections yet";
|
||||||
|
color: Theme.ink-dim;
|
||||||
|
font-size: Theme.text-sm;
|
||||||
|
horizontal-alignment: center;
|
||||||
|
}
|
||||||
|
Text {
|
||||||
|
text: "Press + to make one, then drag photographs onto it.";
|
||||||
|
color: Theme.ink-faint;
|
||||||
|
font-size: Theme.text-sm;
|
||||||
|
horizontal-alignment: center;
|
||||||
|
wrap: word-wrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Empty state. A blank panel gives no hint that collections exist
|
// A bar for a pointer: a tree of collections longer than the panel
|
||||||
// at all, let alone that images can be dragged into them.
|
// otherwise looks, to a mouse, like the whole tree.
|
||||||
if root.rows.length == 0: VerticalLayout {
|
ScrollBar {
|
||||||
alignment: center;
|
x: parent.width - self.width;
|
||||||
spacing: Theme.gap-sm;
|
y: 0px;
|
||||||
padding: Theme.gap;
|
viewport-y <=> tree-flick.viewport-y;
|
||||||
|
viewport-height: tree-flick.viewport-height;
|
||||||
Text {
|
visible-height: tree-flick.height;
|
||||||
text: "No collections yet";
|
|
||||||
color: Theme.ink-dim;
|
|
||||||
font-size: Theme.text-sm;
|
|
||||||
horizontal-alignment: center;
|
|
||||||
}
|
|
||||||
Text {
|
|
||||||
text: "Press + to make one, then drag photographs onto it.";
|
|
||||||
color: Theme.ink-faint;
|
|
||||||
font-size: Theme.text-sm;
|
|
||||||
horizontal-alignment: center;
|
|
||||||
wrap: word-wrap;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user