mirror of
https://github.com/narrrl/proton-drive-linux.git
synced 2026-11-14 09:27:04 +01:00
feat(gui,core): modern Photos layout
Lay the timeline out in justified rows. Each photo keeps its own shape, clamped between 1:2 and 5:2, and every row but a section's last spans the width to the pixel. "Square Tiles" in the page menu restores the even grid, and the Year zoom stays square. The zoom level and the tile shape persist in a new `photos_view` config section. Move Timeline/Albums/Places into the header as an icon-and-label switch that shows only icons in a narrow window. The filters take a single row whose kind tabs scroll sideways. Selection mode follows GNOME apps: - the header shows "N selected" and Cancel; - an ActionBar along the bottom offers Favorite (or unfavorite), Add to Album, Remove from Album, Save Copies and Move to Trash; - each section heading gets a check that selects the whole section. One function, sync_header, decides the header for the page, an open album or place, and selection mode. The heading of the section at the top of the grid floats over the grid. Favorites get a star badge, and video placeholders a video glyph. New bundled icons: pdfs-photos, pdfs-album and pdfs-slideshow. Upload takes several photos and videos at once, and files dropped on the timeline upload too. The media type comes from the MIME database, except that a recording-sized .ts counts as video. The viewer's details panel moves into an OverlaySplitView that lies over the photo below 800sp.
This commit is contained in:
nvrl committed
1 parent
0183f17435
commit
1c50797772
23 files changed
+3751
-1850
No files matched your search
@@ -163,6 +163,10 @@ pub struct AppConfig {
|
||||
/// Defaulted for configs predating the field.
|
||||
#[serde(default)]
|
||||
pub files_view: FilesView,
|
||||
/// How the desktop app's Photos page lays out its grid. Defaulted for
|
||||
/// configs predating the field.
|
||||
#[serde(default)]
|
||||
pub photos_view: PhotosView,
|
||||
/// The desktop app's main window size, remembered between runs. Defaulted
|
||||
/// for configs predating the field.
|
||||
#[serde(default)]
|
||||
@@ -233,6 +237,18 @@ impl Default for FilesView {
|
||||
}
|
||||
}
|
||||
|
||||
/// The Photos page's grid choices, remembered between runs.
|
||||
#[derive(Serialize, Deserialize, Debug, Clone, Copy, PartialEq, Eq, Default)]
|
||||
#[serde(default)]
|
||||
pub struct PhotosView {
|
||||
/// The zoom level: the row height the grid aims for, in logical pixels.
|
||||
/// `None` means the app's default.
|
||||
pub row_height: Option<i32>,
|
||||
/// Crop every photo to a square tile instead of showing it at its own
|
||||
/// shape.
|
||||
pub square: bool,
|
||||
}
|
||||
|
||||
/// The desktop app's main window, as it was when it last closed.
|
||||
#[derive(Serialize, Deserialize, Debug, Clone, Copy, PartialEq, Eq)]
|
||||
#[serde(default)]
|
||||
@@ -762,6 +778,10 @@ mod tests {
|
||||
descending: true,
|
||||
folders_first: false,
|
||||
},
|
||||
photos_view: PhotosView {
|
||||
row_height: Some(240),
|
||||
square: true,
|
||||
},
|
||||
window: WindowState {
|
||||
width: 1200,
|
||||
height: 800,
|
||||
@@ -792,6 +812,7 @@ mod tests {
|
||||
assert_eq!(decoded.upload_limit, Some(500_000));
|
||||
assert_eq!(decoded.download_limit, None);
|
||||
assert_eq!(decoded.files_view, config.files_view);
|
||||
assert_eq!(decoded.photos_view, config.photos_view);
|
||||
assert_eq!(decoded.window, config.window);
|
||||
}
|
||||
|
||||
@@ -837,6 +858,16 @@ mod tests {
|
||||
assert!(partial.folders_first);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn a_config_without_a_photos_view_gets_the_default() {
|
||||
let decoded: AppConfig =
|
||||
serde_json::from_str(r#"{"app_version":"a","user_agent":"b"}"#).unwrap();
|
||||
assert_eq!(decoded.photos_view, PhotosView::default());
|
||||
let partial: PhotosView = serde_json::from_str(r#"{"square":true}"#).unwrap();
|
||||
assert!(partial.square);
|
||||
assert_eq!(partial.row_height, None);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn the_old_proton_accent_setting_turns_on_the_proton_theme() {
|
||||
let decoded: AppConfig =
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<!-- Album: a photo in front of the edge of another, a stack of them. -->
|
||||
<path fill="#222222" d="M 4,1 H 13.5 A 1.5,1.5 0 0 1 15,2.5 V 12 H 13.5 V 2.5 H 4 Z"/>
|
||||
<path fill="#222222" fill-rule="evenodd" d="M 2.5,4 H 10.5 A 1.5,1.5 0 0 1 12,5.5 V 13.5 A 1.5,1.5 0 0 1 10.5,15 H 2.5 A 1.5,1.5 0 0 1 1,13.5 V 5.5 A 1.5,1.5 0 0 1 2.5,4 Z M 2.5,5.5 V 13.5 H 10.5 V 5.5 Z"/>
|
||||
<path fill="#222222" d="M 3.5,12.5 L 5.5,9.2 L 7.2,11.2 L 8.2,10.2 L 9.5,12.5 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 550 B |
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<!-- Photos: a framed landscape with a sun. Stock themes only have
|
||||
image-x-generic, a file type icon, which reads as "an image file"
|
||||
rather than "your photo library". -->
|
||||
<path fill="#222222" fill-rule="evenodd" d="M 3,2 H 13 A 2,2 0 0 1 15,4 V 12 A 2,2 0 0 1 13,14 H 3 A 2,2 0 0 1 1,12 V 4 A 2,2 0 0 1 3,2 Z M 3,3.5 A 0.5,0.5 0 0 0 2.5,4 V 12 A 0.5,0.5 0 0 0 3,12.5 H 13 A 0.5,0.5 0 0 0 13.5,12 V 4 A 0.5,0.5 0 0 0 13,3.5 Z"/>
|
||||
<path fill="#222222" d="M 3.5,11.5 L 6.5,7 L 9,10.2 L 10.5,8.6 L 12.5,11.5 Z"/>
|
||||
<circle fill="#222222" cx="10.5" cy="5.8" r="1.3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 673 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<!-- Slideshow: a play mark inside a photo frame, so it is not mistaken for
|
||||
playing the video on screen. -->
|
||||
<path fill="#222222" fill-rule="evenodd" d="M 3,2 H 13 A 2,2 0 0 1 15,4 V 12 A 2,2 0 0 1 13,14 H 3 A 2,2 0 0 1 1,12 V 4 A 2,2 0 0 1 3,2 Z M 3,3.5 A 0.5,0.5 0 0 0 2.5,4 V 12 A 0.5,0.5 0 0 0 3,12.5 H 13 A 0.5,0.5 0 0 0 13.5,12 V 4 A 0.5,0.5 0 0 0 13,3.5 Z"/>
|
||||
<path fill="#222222" d="M 6.5,5.2 L 11,8 L 6.5,10.8 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 527 B |
@@ -15,6 +15,9 @@
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-link-symbolic.svg</file>
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-map-symbolic.svg</file>
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-people-symbolic.svg</file>
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-photos-symbolic.svg</file>
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-album-symbolic.svg</file>
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-slideshow-symbolic.svg</file>
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-share-symbolic.svg</file>
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-sync-symbolic.svg</file>
|
||||
<file preprocess="xml-stripblanks">scalable/actions/pdfs-synced-symbolic.svg</file>
|
||||
|
||||
@@ -80,7 +80,12 @@ scale.browser-status-meter trough { min-width: 104px; min-height: 6px; }
|
||||
.viewer-info-panel { background-color: var(--window-bg-color); border-left: 1px solid alpha(currentColor, 0.12); }
|
||||
|
||||
/* Photos grid */
|
||||
.gallery-day { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: alpha(currentColor, 0.65); padding: 2px 2px 6px 2px; }
|
||||
.gallery-day { font-size: 1.1rem; font-weight: 700; padding: 4px 2px 8px 2px; }
|
||||
/* The check that picks a whole section: on hover, and always while selecting. */
|
||||
.gallery-day-check { opacity: 0; transition: opacity 160ms ease; min-width: 24px; min-height: 24px; margin-bottom: 4px; }
|
||||
.gallery-heading:hover .gallery-day-check, .gallery-heading.selecting .gallery-day-check, .gallery-day-check:focus-visible { opacity: 1; }
|
||||
/* The section at the top of the grid, floating once its heading scrolled off. */
|
||||
.gallery-float-heading { font-weight: 700; padding: 4px 12px; border-radius: 999px; background-color: color-mix(in srgb, var(--popover-bg-color) 92%, transparent); color: var(--popover-fg-color); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
|
||||
.photo-tile { padding: 0; margin: 0; min-height: 0; min-width: 0; border: none; border-radius: 4px; background: none; box-shadow: none; }
|
||||
.photo-tile:focus { outline: 2px solid var(--accent-color); outline-offset: -2px; }
|
||||
.photo-thumb { transition: transform 220ms ease; }
|
||||
@@ -94,6 +99,7 @@ scale.browser-status-meter trough { min-width: 104px; min-height: 6px; }
|
||||
.photo-video-badge { color: white; background: rgba(0, 0, 0, 0.45); border-radius: 999px; padding: 8px; min-width: 20px; min-height: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); transition: background 160ms ease; }
|
||||
.photo-video-badge-small { padding: 3px; min-width: 0; min-height: 0; }
|
||||
.photo-tile:hover .photo-video-badge { background: color-mix(in srgb, var(--accent-bg-color) 85%, transparent); }
|
||||
.photo-favorite-badge { color: white; -gtk-icon-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
|
||||
.photo-group-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: white; background: rgba(0, 0, 0, 0.55); border-radius: 6px; padding: 1px 5px; margin: 6px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
|
||||
.memory-card { padding: 0; border-radius: 12px; }
|
||||
.memory-cover { border-radius: 12px; background: alpha(currentColor, 0.06); }
|
||||
@@ -103,7 +109,7 @@ scale.browser-status-meter trough { min-width: 104px; min-height: 6px; }
|
||||
.album-cover { border-radius: 16px; background: alpha(currentColor, 0.06); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32); transition: box-shadow 180ms ease; }
|
||||
.album-card:hover .album-cover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
|
||||
.album-card:hover .photo-thumb { transform: scale(1.05); }
|
||||
.view-switch button, .view-switch toggle { padding-left: 18px; padding-right: 18px; }
|
||||
.view-switch button, .view-switch toggle { padding-left: 12px; padding-right: 12px; }
|
||||
|
||||
/* Shared with Me: what a share lets me do, as a tinted pill beside the name. */
|
||||
.role-pill { padding: 2px 10px; border-radius: 999px; font-weight: 600; color: var(--accent-color); background-color: color-mix(in srgb, var(--accent-bg-color) 16%, transparent); }
|
||||
|
||||
@@ -71,7 +71,7 @@ use gtk4::glib::BoxedAnyObject;
|
||||
|
||||
use pdfs_core::auth;
|
||||
|
||||
use pdfs_core::config::{AppDirs, FileSort, FilesView, WindowState};
|
||||
use pdfs_core::config::{AppDirs, FileSort, FilesView, PhotosView, WindowState};
|
||||
|
||||
use pdfs_core::control::{
|
||||
ActivityEntry, ActivityKind, AlbumInfo, BookmarkInfo, ConflictInfo, ConflictKeep, DeviceInfo,
|
||||
@@ -587,10 +587,13 @@ fn build_window(app: &adw::Application) {
|
||||
selected: RefCell::new(HashSet::new()),
|
||||
select_anchor: RefCell::new(None),
|
||||
select_btn: gallery_widgets.select_btn.clone(),
|
||||
select_bar: gallery_widgets.select_bar.clone(),
|
||||
select_label: gallery_widgets.select_label.clone(),
|
||||
select_trash: gallery_widgets.select_trash.clone(),
|
||||
select_album: gallery_widgets.select_album.clone(),
|
||||
selection: gallery_widgets.selection.clone(),
|
||||
more: gallery_widgets.more.clone(),
|
||||
upload_face: gallery_widgets.upload_face.clone(),
|
||||
float_heading: gallery_widgets.float_heading.clone(),
|
||||
float_label: gallery_widgets.float_label.clone(),
|
||||
square: Cell::new(false),
|
||||
zoom_save: RefCell::new(None),
|
||||
},
|
||||
shared: SharedState::new(&shared_widgets),
|
||||
shared_by_me: SharedByMeState::new(&shared_by_me_widgets),
|
||||
@@ -693,7 +696,7 @@ fn build_window(app: &adw::Application) {
|
||||
&ui,
|
||||
&gallery_widgets.list,
|
||||
&gallery_widgets.scroll,
|
||||
&gallery_widgets.select_done,
|
||||
&gallery_widgets.square_action,
|
||||
);
|
||||
wire_gallery_empty(
|
||||
&ui,
|
||||
@@ -795,6 +798,7 @@ fn build_window(app: &adw::Application) {
|
||||
/// split collapsed whatever the width.
|
||||
fn set_narrow(ui: &Ui, narrow: bool) {
|
||||
ui.narrow.set(narrow);
|
||||
set_photos_narrow(ui, narrow);
|
||||
if ui.session.borrow().is_some() {
|
||||
ui.nav.set_collapsed(narrow);
|
||||
}
|
||||
@@ -858,11 +862,7 @@ fn window_hidden(window: &adw::ApplicationWindow) -> bool {
|
||||
/// sync, set off by a separator.
|
||||
const DESTINATIONS: [(&str, &str, &str); 7] = [
|
||||
("browser", gettext_noop("My files"), "folder-symbolic"),
|
||||
(
|
||||
"gallery",
|
||||
gettext_noop("Photos"),
|
||||
"image-x-generic-symbolic",
|
||||
),
|
||||
("gallery", gettext_noop("Photos"), "pdfs-photos-symbolic"),
|
||||
(
|
||||
"shared",
|
||||
gettext_noop("Shared with me"),
|
||||
|
||||
@@ -40,7 +40,7 @@ pub(crate) fn load_albums(ui: &Rc<Ui>) {
|
||||
if ui.gallery.albums_stack.visible_child_name().as_deref() != Some("grid") {
|
||||
albums_status(
|
||||
ui,
|
||||
"view-grid-symbolic",
|
||||
"pdfs-album-symbolic",
|
||||
&gettext("Loading albums…"),
|
||||
&gettext("Reading your Proton Drive albums."),
|
||||
);
|
||||
@@ -62,7 +62,7 @@ pub(crate) fn load_albums(ui: &Rc<Ui>) {
|
||||
),
|
||||
Ok(Ok(Response::Albums { items, .. })) if items.is_empty() => albums_status(
|
||||
&ui,
|
||||
"view-grid-symbolic",
|
||||
"pdfs-album-symbolic",
|
||||
&gettext("No albums"),
|
||||
&gettext("Create one with New Album, or in Proton Photos."),
|
||||
),
|
||||
@@ -136,7 +136,7 @@ fn album_card(ui: &Rc<Ui>, album: &AlbumInfo) -> gtk4::Button {
|
||||
picture.add_css_class("photo-thumb");
|
||||
|
||||
let placeholder = gtk4::Image::builder()
|
||||
.icon_name("view-grid-symbolic")
|
||||
.icon_name("pdfs-album-symbolic")
|
||||
.pixel_size(32)
|
||||
.halign(gtk4::Align::Center)
|
||||
.valign(gtk4::Align::Center)
|
||||
@@ -618,9 +618,7 @@ pub(crate) fn open_album(ui: &Rc<Ui>, album: AlbumInfo) {
|
||||
// would silently do something else. The Photos/Albums switcher goes too: an
|
||||
// album is a level below it, and back is the way out.
|
||||
ui.gallery.filters.set_visible(false);
|
||||
ui.gallery.view_switch.widget().set_visible(false);
|
||||
ui.gallery.upload.set_visible(false);
|
||||
ui.gallery.back.set_visible(true);
|
||||
sync_header(ui);
|
||||
// A stale kind/date filter would otherwise be sent with the album request.
|
||||
ui.gallery.kind.set(None);
|
||||
ui.gallery.range.set(None);
|
||||
@@ -636,9 +634,7 @@ pub(crate) fn close_album(ui: &Rc<Ui>) {
|
||||
return;
|
||||
}
|
||||
ui.gallery.title.set_title(&gettext("Photos"));
|
||||
ui.gallery.view_switch.widget().set_visible(true);
|
||||
ui.gallery.upload.set_visible(true);
|
||||
ui.gallery.back.set_visible(false);
|
||||
sync_header(ui);
|
||||
}
|
||||
|
||||
/// Show the album grid's own status page (loading, empty, or an error).
|
||||
|
||||
@@ -40,7 +40,9 @@ pub(crate) struct Viewer {
|
||||
/// Details panel: the toggle that reveals it, the rows it fills in, and the
|
||||
/// "Show on map" button (hidden when the photo carries no GPS tags).
|
||||
pub(crate) info_toggle: gtk4::ToggleButton,
|
||||
pub(crate) info_revealer: gtk4::Revealer,
|
||||
/// Lays the details panel beside the photo, or over it in a narrow
|
||||
/// window.
|
||||
pub(crate) info_split: adw::OverlaySplitView,
|
||||
pub(crate) info_rows: gtk4::Box,
|
||||
pub(crate) info_map: gtk4::Button,
|
||||
/// Coordinates behind `info_map`, once a photo with GPS tags is shown.
|
||||
@@ -358,9 +360,7 @@ fn stop_slideshow(viewer: &Rc<Viewer>) {
|
||||
if viewer.slide_fullscreened.replace(false) {
|
||||
viewer.window.unfullscreen();
|
||||
}
|
||||
viewer
|
||||
.slideshow
|
||||
.set_icon_name("media-playback-start-symbolic");
|
||||
viewer.slideshow.set_icon_name("pdfs-slideshow-symbolic");
|
||||
if viewer.slideshow.is_active() {
|
||||
viewer.slideshow.set_active(false);
|
||||
}
|
||||
@@ -1004,13 +1004,16 @@ fn show_photo_position(ui: &Rc<Ui>, viewer: &Rc<Viewer>, index: u32, capture_tim
|
||||
pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
|
||||
let parent = ui.stack.root().and_downcast::<gtk4::Window>().unwrap();
|
||||
|
||||
let window = gtk4::Window::builder()
|
||||
// An `adw::Window` for its breakpoints: the details panel lies over the
|
||||
// photo once the window is too narrow to show both side by side.
|
||||
let adw_window = adw::Window::builder()
|
||||
.title(gettext("Photo"))
|
||||
.modal(true)
|
||||
.transient_for(&parent)
|
||||
.default_width(1100)
|
||||
.default_height(760)
|
||||
.build();
|
||||
let window: gtk4::Window = adw_window.clone().upcast();
|
||||
window.add_css_class("photo-viewer-window");
|
||||
|
||||
let overlay = gtk4::Overlay::new();
|
||||
@@ -1120,7 +1123,7 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
|
||||
favorite_btn.add_css_class("viewer-action-btn");
|
||||
|
||||
let slideshow_btn = gtk4::ToggleButton::builder()
|
||||
.icon_name("media-playback-start-symbolic")
|
||||
.icon_name("pdfs-slideshow-symbolic")
|
||||
.tooltip_text(gettext("Slideshow (F5)"))
|
||||
.valign(gtk4::Align::Center)
|
||||
.build();
|
||||
@@ -1205,17 +1208,8 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
|
||||
|
||||
let info_panel = gtk4::Box::new(gtk4::Orientation::Vertical, 0);
|
||||
info_panel.add_css_class("viewer-info-panel");
|
||||
info_panel.set_width_request(320);
|
||||
info_panel.append(&info_scroll);
|
||||
|
||||
// Set explicitly: the title's hexpand would otherwise propagate up and have
|
||||
// the revealer take half the window even while it is closed.
|
||||
let info_revealer = gtk4::Revealer::builder()
|
||||
.transition_type(gtk4::RevealerTransitionType::SlideLeft)
|
||||
.hexpand(false)
|
||||
.child(&info_panel)
|
||||
.build();
|
||||
|
||||
let spinner = spinner();
|
||||
spinner.set_halign(gtk4::Align::Center);
|
||||
spinner.set_valign(gtk4::Align::Center);
|
||||
@@ -1232,10 +1226,23 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
|
||||
status_label.add_css_class("viewer-status");
|
||||
overlay.add_overlay(&status_label);
|
||||
|
||||
let body = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
|
||||
body.append(&overlay);
|
||||
body.append(&info_revealer);
|
||||
window.set_child(Some(&body));
|
||||
// The panel docks beside the photo, or lies over it in a narrow window,
|
||||
// where a click on the photo closes it again.
|
||||
let info_split = adw::OverlaySplitView::builder()
|
||||
.content(&overlay)
|
||||
.sidebar(&info_panel)
|
||||
.sidebar_position(gtk4::PackType::End)
|
||||
.min_sidebar_width(300.0)
|
||||
.max_sidebar_width(360.0)
|
||||
.show_sidebar(false)
|
||||
.build();
|
||||
let narrow = adw::Breakpoint::new(
|
||||
adw::BreakpointCondition::parse("max-width: 800sp").expect("static breakpoint"),
|
||||
);
|
||||
narrow.add_setter(&info_split, "collapsed", Some(&true.to_value()));
|
||||
adw_window.add_breakpoint(narrow);
|
||||
let body = info_split.clone();
|
||||
adw_window.set_content(Some(&body));
|
||||
|
||||
let viewer = Rc::new(Viewer {
|
||||
window: window.clone(),
|
||||
@@ -1250,7 +1257,7 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
|
||||
prev: prev_btn.clone(),
|
||||
next: next_btn.clone(),
|
||||
info_toggle: info_toggle.clone(),
|
||||
info_revealer: info_revealer.clone(),
|
||||
info_split: info_split.clone(),
|
||||
info_rows,
|
||||
info_map: info_map.clone(),
|
||||
favorite: favorite_btn.clone(),
|
||||
@@ -1435,9 +1442,14 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
|
||||
let Some(viewer_info) = viewer_info.upgrade() else {
|
||||
return;
|
||||
};
|
||||
viewer_info
|
||||
.info_revealer
|
||||
.set_reveal_child(toggle.is_active());
|
||||
viewer_info.info_split.set_show_sidebar(toggle.is_active());
|
||||
});
|
||||
// A collapsed panel also closes on its own, by a click on the photo.
|
||||
let toggle_info = info_toggle.clone();
|
||||
info_split.connect_show_sidebar_notify(move |split| {
|
||||
if toggle_info.is_active() != split.shows_sidebar() {
|
||||
toggle_info.set_active(split.shows_sidebar());
|
||||
}
|
||||
});
|
||||
|
||||
let ui_slides = ui.clone();
|
||||
|
||||
+1064
-217
File diff suppressed because it is too large.
Load diff
@@ -422,9 +422,7 @@ fn open_place(ui: &Rc<Ui>, place: PlaceInfo) {
|
||||
|
||||
// As in an album: no filters, no Upload, no view switch — back leads out.
|
||||
ui.gallery.filters.set_visible(false);
|
||||
ui.gallery.view_switch.widget().set_visible(false);
|
||||
ui.gallery.upload.set_visible(false);
|
||||
ui.gallery.back.set_visible(true);
|
||||
sync_header(ui);
|
||||
ui.gallery.kind.set(None);
|
||||
ui.gallery.range.set(None);
|
||||
|
||||
@@ -439,9 +437,7 @@ pub(crate) fn close_place(ui: &Rc<Ui>) {
|
||||
return;
|
||||
}
|
||||
ui.gallery.title.set_title(&gettext("Photos"));
|
||||
ui.gallery.view_switch.widget().set_visible(true);
|
||||
ui.gallery.upload.set_visible(true);
|
||||
ui.gallery.back.set_visible(false);
|
||||
sync_header(ui);
|
||||
}
|
||||
|
||||
/// Show the place grid's own status page (loading, empty, or an error).
|
||||
|
||||
@@ -10,6 +10,12 @@ use crate::*;
|
||||
pub(crate) struct ToggleGroup {
|
||||
widget: gtk4::Widget,
|
||||
options: Options,
|
||||
/// Each option's label, kept while [`Self::set_compact`] shows the icons
|
||||
/// alone.
|
||||
labels: Rc<RefCell<Vec<String>>>,
|
||||
/// Each option's own tooltip, as given.
|
||||
tooltips: Rc<[Option<String>]>,
|
||||
compact: Rc<Cell<bool>>,
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
@@ -47,6 +53,9 @@ impl ToggleGroup {
|
||||
Self {
|
||||
widget,
|
||||
options: Options::Toggles(toggles),
|
||||
labels: Rc::new(RefCell::new(labels_of(options))),
|
||||
tooltips: tooltips_of(options),
|
||||
compact: Rc::default(),
|
||||
}
|
||||
} else {
|
||||
let bar = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
|
||||
@@ -71,6 +80,9 @@ impl ToggleGroup {
|
||||
Self {
|
||||
widget: bar.upcast(),
|
||||
options: Options::Buttons(buttons),
|
||||
labels: Rc::new(RefCell::new(labels_of(options))),
|
||||
tooltips: tooltips_of(options),
|
||||
compact: Rc::default(),
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -115,15 +127,69 @@ impl ToggleGroup {
|
||||
}
|
||||
|
||||
pub(crate) fn set_label(&self, index: u32, label: &str) {
|
||||
if let Some(stored) = self.labels.borrow_mut().get_mut(index as usize) {
|
||||
*stored = label.to_string();
|
||||
}
|
||||
self.show_label(index, label);
|
||||
}
|
||||
|
||||
/// Put an icon before each option's label, in option order.
|
||||
pub(crate) fn set_icons(&self, icons: &[&str]) {
|
||||
match &self.options {
|
||||
Options::Toggles(toggles) => {
|
||||
for (toggle, icon) in toggles.iter().zip(icons) {
|
||||
toggle.set_property("icon-name", *icon);
|
||||
}
|
||||
}
|
||||
Options::Buttons(buttons) => {
|
||||
let labels = self.labels.borrow();
|
||||
for ((button, icon), label) in buttons.iter().zip(icons).zip(labels.iter()) {
|
||||
let face = adw::ButtonContent::builder()
|
||||
.icon_name(*icon)
|
||||
.label(label.as_str())
|
||||
.build();
|
||||
button.set_child(Some(&face));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Show the icons alone, for a narrow window, with each label moved to
|
||||
/// the option's tooltip; or bring the labels back.
|
||||
pub(crate) fn set_compact(&self, compact: bool) {
|
||||
if self.compact.replace(compact) == compact {
|
||||
return;
|
||||
}
|
||||
let labels = self.labels.borrow().clone();
|
||||
for (index, label) in labels.iter().enumerate() {
|
||||
self.show_label(index as u32, label);
|
||||
}
|
||||
}
|
||||
|
||||
/// Show `label` on option `index`, or only in its tooltip while compact.
|
||||
fn show_label(&self, index: u32, label: &str) {
|
||||
let compact = self.compact.get();
|
||||
let shown = if compact { "" } else { label };
|
||||
let given = self.tooltips.get(index as usize).cloned().flatten();
|
||||
let tooltip = if compact {
|
||||
Some(label.to_string())
|
||||
} else {
|
||||
given
|
||||
};
|
||||
match &self.options {
|
||||
Options::Toggles(toggles) => {
|
||||
if let Some(toggle) = toggles.get(index as usize) {
|
||||
toggle.set_property("label", label);
|
||||
toggle.set_property("label", shown);
|
||||
toggle.set_property("tooltip", tooltip.unwrap_or_default());
|
||||
}
|
||||
}
|
||||
Options::Buttons(buttons) => {
|
||||
if let Some(button) = buttons.get(index as usize) {
|
||||
button.set_label(label);
|
||||
match button.child().and_downcast::<adw::ButtonContent>() {
|
||||
Some(face) => face.set_label(shown),
|
||||
None => button.set_label(shown),
|
||||
}
|
||||
button.set_tooltip_text(tooltip.as_deref());
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -271,6 +337,19 @@ fn shortcuts_dialog(groups: &[(String, Vec<(&str, String)>)]) -> adw::Dialog {
|
||||
.build()
|
||||
}
|
||||
|
||||
/// The labels of `(label, tooltip)` options.
|
||||
fn labels_of(options: &[(&str, Option<&str>)]) -> Vec<String> {
|
||||
options.iter().map(|(label, _)| label.to_string()).collect()
|
||||
}
|
||||
|
||||
/// The tooltips of `(label, tooltip)` options.
|
||||
fn tooltips_of(options: &[(&str, Option<&str>)]) -> Rc<[Option<String>]> {
|
||||
options
|
||||
.iter()
|
||||
.map(|(_, tooltip)| tooltip.map(str::to_string))
|
||||
.collect()
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
|
||||
@@ -52,6 +52,7 @@ const STOCK: &[&str] = &[
|
||||
"image-missing-symbolic",
|
||||
"image-x-generic-symbolic",
|
||||
"list-add-symbolic",
|
||||
"list-remove-symbolic",
|
||||
"mark-location-symbolic",
|
||||
"media-playback-pause-symbolic",
|
||||
"media-playback-start-symbolic",
|
||||
@@ -61,10 +62,12 @@ const STOCK: &[&str] = &[
|
||||
"object-select-symbolic",
|
||||
"preferences-system-symbolic",
|
||||
"process-stop-symbolic",
|
||||
"selection-mode-symbolic",
|
||||
"starred-symbolic",
|
||||
"system-search-symbolic",
|
||||
"text-x-generic-symbolic",
|
||||
"user-trash-symbolic",
|
||||
"video-x-generic-symbolic",
|
||||
"view-grid-symbolic",
|
||||
"view-list-symbolic",
|
||||
"view-more-symbolic",
|
||||
|
||||
Reference in new issue
Block a user