Make develop's Help a "?" beside Settings, so Settings fits at 1600
Adding a labelled Help button to develop's top bar made the strip about 100 pixels wider than a 1600-pixel window. The strip scrolls, so nothing became unreachable, but Settings was off the right-hand end until the bar was dragged. Help is now a square IconButton with a drawn question mark (a new "help" icon, drawn rather than typed for the reason icons.slint gives about Android's fonts), and screen readers still hear it as "Help". That saves 60 pixels, which was not enough alone: the strip had fit with 3 to spare before. The rest comes from the spacing. Controls that belong together now sit in groups at gap-sm with gap between groups: Pick and Reject, Undo and Redo, Copy, Paste and Presets, and "?" and Settings. The empty export-status caption no longer takes a slot and two spacings while it has nothing to say. At 1600 wide with the panel open the whole bar now shows, Settings included. The grid's header keeps its worded Help button; it has room for it. The develop "Open this list" gesture now names the "?" button, and the gesture book is regenerated from it.
This commit is contained in:
+96
-68
@@ -10,7 +10,7 @@
|
||||
import { Theme } from "theme.slint";
|
||||
import { Develop } from "session.slint";
|
||||
import { Transfer } from "adjust.slint";
|
||||
import { Button, PanelHeading, Label, Value, Caption, Panel } from "widgets.slint";
|
||||
import { Button, IconButton, PanelHeading, Label, Value, Caption, Panel } from "widgets.slint";
|
||||
import { Labels, LabelMark, LabelPicker } from "labels.slint";
|
||||
import { StarStrip } from "library.slint";
|
||||
|
||||
@@ -99,6 +99,11 @@ export component StatusBar inherits Rectangle {
|
||||
viewport-height: self.height;
|
||||
viewport-width: max(self.width, strip.preferred-width);
|
||||
|
||||
// Related controls sit closer together than unrelated ones: Pick and
|
||||
// Reject, Undo and Redo, Copy, Paste and Presets, Help and Settings are
|
||||
// each a group at `gap-sm`, with `gap` between groups. It reads as the
|
||||
// pairs it is, and it is also what keeps Settings on screen at 1600
|
||||
// pixels wide once Help joined the strip.
|
||||
strip := HorizontalLayout {
|
||||
width: parent.viewport-width;
|
||||
height: parent.viewport-height;
|
||||
@@ -175,23 +180,27 @@ export component StatusBar inherits Rectangle {
|
||||
rate(n) => { root.rated(n); }
|
||||
}
|
||||
|
||||
// Pressed again, a flag comes off: two buttons that each toggle,
|
||||
// rather than a third for "none" that is only ever pressed to undo
|
||||
// one of the other two.
|
||||
Button {
|
||||
text: root.flag == 1 ? "Picked" : "Pick";
|
||||
active: root.flag == 1;
|
||||
visible: root.rating >= 0;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.flagged(root.flag == 1 ? 0 : 1); }
|
||||
}
|
||||
HorizontalLayout {
|
||||
spacing: Theme.gap-sm;
|
||||
|
||||
Button {
|
||||
text: root.flag == 2 ? "Rejected" : "Reject";
|
||||
active: root.flag == 2;
|
||||
visible: root.rating >= 0;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.flagged(root.flag == 2 ? 0 : 2); }
|
||||
// Pressed again, a flag comes off: two buttons that each toggle,
|
||||
// rather than a third for "none" that is only ever pressed to undo
|
||||
// one of the other two.
|
||||
Button {
|
||||
text: root.flag == 1 ? "Picked" : "Pick";
|
||||
active: root.flag == 1;
|
||||
visible: root.rating >= 0;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.flagged(root.flag == 1 ? 0 : 1); }
|
||||
}
|
||||
|
||||
Button {
|
||||
text: root.flag == 2 ? "Rejected" : "Reject";
|
||||
active: root.flag == 2;
|
||||
visible: root.rating >= 0;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.flagged(root.flag == 2 ? 0 : 2); }
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle { horizontal-stretch: 1; }
|
||||
@@ -227,18 +236,22 @@ export component StatusBar inherits Rectangle {
|
||||
// mis-drag must not go away with it. Disabled rather than hidden, so
|
||||
// the pair keeps its place and the keyboard shortcut has something
|
||||
// visible to correspond to.
|
||||
Button {
|
||||
text: "Undo";
|
||||
enabled: root.can-undo;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.undo(); }
|
||||
}
|
||||
HorizontalLayout {
|
||||
spacing: Theme.gap-sm;
|
||||
|
||||
Button {
|
||||
text: "Redo";
|
||||
enabled: root.can-redo;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.redo(); }
|
||||
Button {
|
||||
text: "Undo";
|
||||
enabled: root.can-undo;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.undo(); }
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Redo";
|
||||
enabled: root.can-redo;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.redo(); }
|
||||
}
|
||||
}
|
||||
|
||||
// TRACES: FR-DEV-6
|
||||
@@ -251,30 +264,34 @@ export component StatusBar inherits Rectangle {
|
||||
// The paste button names what would be pasted — "3 adjustments", and
|
||||
// whether the crop is staying behind — because "Paste" alone asks the
|
||||
// user to remember what they copied.
|
||||
Button {
|
||||
text: "Copy";
|
||||
enabled: Develop.enabled;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { Transfer.copy(); }
|
||||
}
|
||||
HorizontalLayout {
|
||||
spacing: Theme.gap-sm;
|
||||
|
||||
// Enabled on `armed` rather than on a non-empty summary, so pasting a
|
||||
// neutral copy — which clears this image — stays available.
|
||||
Button {
|
||||
text: !Transfer.armed ? "Paste"
|
||||
: "Paste " + Transfer.summary
|
||||
+ (Transfer.framing-withheld ? ", no crop" : "");
|
||||
enabled: Develop.enabled && Transfer.armed;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { Transfer.paste(); }
|
||||
}
|
||||
Button {
|
||||
text: "Copy";
|
||||
enabled: Develop.enabled;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { Transfer.copy(); }
|
||||
}
|
||||
|
||||
// The saved half: this edit, kept under a name.
|
||||
Button {
|
||||
text: "Presets…";
|
||||
enabled: Develop.enabled;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { Transfer.open-presets(); }
|
||||
// Enabled on `armed` rather than on a non-empty summary, so pasting a
|
||||
// neutral copy — which clears this image — stays available.
|
||||
Button {
|
||||
text: !Transfer.armed ? "Paste"
|
||||
: "Paste " + Transfer.summary
|
||||
+ (Transfer.framing-withheld ? ", no crop" : "");
|
||||
enabled: Develop.enabled && Transfer.armed;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { Transfer.paste(); }
|
||||
}
|
||||
|
||||
// The saved half: this edit, kept under a name.
|
||||
Button {
|
||||
text: "Presets…";
|
||||
enabled: Develop.enabled;
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { Transfer.open-presets(); }
|
||||
}
|
||||
}
|
||||
|
||||
// Show or hide the develop column. On a tablet the panel is 280px of a
|
||||
@@ -289,7 +306,10 @@ export component StatusBar inherits Rectangle {
|
||||
clicked => { root.toggle-panel(); }
|
||||
}
|
||||
|
||||
Caption {
|
||||
// Only while there is something to say. Empty, it still took a slot
|
||||
// and the spacing either side of it, and this strip has no pixels to
|
||||
// spare: at 1600 wide they are what kept Settings on screen.
|
||||
if root.export-status != "": Caption {
|
||||
text: root.export-status;
|
||||
vertical-alignment: center;
|
||||
overflow: elide;
|
||||
@@ -306,24 +326,32 @@ export component StatusBar inherits Rectangle {
|
||||
clicked => { root.export-image(); }
|
||||
}
|
||||
|
||||
// TRACES: FR-UI-4
|
||||
// The pointer and touch way to the reference F1 opens. Beside
|
||||
// Settings, as in the library header, because it is about the
|
||||
// application rather than about the photograph — and in the same
|
||||
// place on both screens, so it is found where it was last seen.
|
||||
Button {
|
||||
text: "Help";
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.open-help(); }
|
||||
}
|
||||
HorizontalLayout {
|
||||
spacing: Theme.gap-sm;
|
||||
|
||||
// Reachable from develop as well as from the grid: export defaults are
|
||||
// most likely to be wanted with a finished photograph on screen, which
|
||||
// is exactly where this bar is and the library header is not.
|
||||
Button {
|
||||
text: "Settings";
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.open-settings(); }
|
||||
// TRACES: FR-UI-4
|
||||
// The pointer and touch way to the reference F1 opens. Beside
|
||||
// Settings, as Help is in the library header, because it is about the
|
||||
// application rather than about the photograph.
|
||||
//
|
||||
// A square "?" rather than a word: this strip is already full at
|
||||
// 1600 pixels, and a labelled button pushed Settings off its end.
|
||||
// Screen readers still hear "Help".
|
||||
IconButton {
|
||||
icon: "help";
|
||||
label: "Help";
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.open-help(); }
|
||||
}
|
||||
|
||||
// Reachable from develop as well as from the grid: export defaults are
|
||||
// most likely to be wanted with a finished photograph on screen, which
|
||||
// is exactly where this bar is and the library header is not.
|
||||
Button {
|
||||
text: "Settings";
|
||||
y: (parent.height - self.height) / 2;
|
||||
clicked => { root.open-settings(); }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user