Skip to content

Commit

Permalink
various ui tweaks (#59)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tfuxu
tfuxu authored Jan 9, 2024
2 parents 4aafcb4 + bce9194 commit 2afe4dd
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 118 deletions.
20 changes: 19 additions & 1 deletion data/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,27 @@
button.osd.circular {
button.custom-on-image {
min-width: 42px;
min-height: 42px;
margin: 12px;
}

.dragndrop_overlay {
background-color: alpha(@accent_bg_color, 0.5);
color: @accent_fg_color;
}

headerbar.desktop windowcontrols button image {
color: alpha(white, 0.9);
background: alpha(black, 0.6);
}

headerbar.desktop windowcontrols button:hover image {
background: alpha(mix(black, white, 0.1), 0.5);
}

headerbar.desktop windowcontrols button:active image {
background: alpha(mix(black, white, 0.2), 0.5);
}

.sheet-toolbar {
padding: 12px;
}
194 changes: 88 additions & 106 deletions data/ui/dither_page.blp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ using Adw 1;

template $HalftoneDitherPage: Adw.BreakpointBin {
width-request: 360;
height-request: 360;
height-request: 296;

child: Adw.OverlaySplitView split_view {
sidebar-position: start;
Expand All @@ -27,44 +27,53 @@ template $HalftoneDitherPage: Adw.BreakpointBin {
}

[end]
Gtk.MenuButton {
Gtk.MenuButton sidebar_main_menu {
tooltip-text: _("Main Menu");
icon-name: "open-menu-symbolic";
menu-model: main_menu;

primary: bind split_view.show-sidebar;
}
}
};

content: Adw.ToolbarView dither_view {
[top]
Adw.HeaderBar {
centering-policy: strict;
show-title: false;
extend-content-to-top-edge: true;

styles [
"flat"
]
[top]
Gtk.Stack dither_header_stack {
Gtk.StackPage {
name: "desktop";

[start]
Gtk.Button content_open_button {
tooltip-text: _("Open Image (Ctrl+O)");
icon-name: "arrow-into-box-symbolic";
action-name: "app.open-image";
child: Adw.HeaderBar {
show-title: false;

visible: bind split_view.show-sidebar inverted;
styles [
"desktop"
]
};
}

[end]
Gtk.MenuButton content_main_menu {
tooltip-text: _("Main Menu");
icon-name: "open-menu-symbolic";
menu-model: main_menu;

primary: bind split_view.show-sidebar inverted;
visible: bind split_view.show-sidebar inverted;
Gtk.StackPage {
name: "mobile";

child: Adw.HeaderBar {
[start]
Gtk.Button content_open_button {
tooltip-text: _("Open Image (Ctrl+O)");
icon-name: "arrow-into-box-symbolic";
action-name: "app.open-image";
}

[end]
Gtk.MenuButton content_main_menu {
tooltip-text: _("Main Menu");
icon-name: "open-menu-symbolic";
menu-model: main_menu;
}
};
}

visible-child-name: "desktop";
}

content: Gtk.Box image_box {
Expand All @@ -74,6 +83,7 @@ template $HalftoneDitherPage: Adw.BreakpointBin {
hexpand: true;

Gtk.Stack preview_group_stack {
height-request: 150;
transition-type: crossfade;

Gtk.StackPage {
Expand All @@ -89,43 +99,37 @@ template $HalftoneDitherPage: Adw.BreakpointBin {
can-shrink: false;
halign: center;
valign: center;

styles [
"card"
]
}
};

[overlay]
Gtk.Box {
halign: end;
Gtk.Button toggle_sheet_button {
halign: start;
valign: end;
margin-end: 12;
margin-bottom: 12;
orientation: horizontal;
spacing: 10;

Gtk.Button toggle_sheet_button {
icon-name: "sidebar-show-left-symbolic";
tooltip-text: _("Toggle Sidebar");
action-name: "app.toggle-sheet";

styles [
"osd",
"circular"
]
}

Gtk.Button {
icon-name: "adw-external-link-symbolic";
tooltip-text: _("Open in External Image Viewer");
action-name: "app.show-preview-image";
icon-name: "sidebar-show-left-symbolic";
action-name: "app.toggle-sheet";
tooltip-text: _("Toggle Sidebar");

styles [
"osd",
"circular",
"custom-on-image"
]
}

styles [
"osd",
"circular"
]
}
[overlay]
Gtk.Button {
halign: end;
valign: end;
icon-name: "adw-external-link-symbolic";
tooltip-text: _("Open in External Image Viewer");
action-name: "app.show-preview-image";

styles [
"osd",
"circular",
"custom-on-image"
]
}
};
}
Expand All @@ -146,8 +150,10 @@ template $HalftoneDitherPage: Adw.BreakpointBin {

// TODO: Add SpringAnimation to animate sheet hiding
// TODO: Add scroll and touch drag gestures for triggering bottom sheet hide animation

Gtk.Box bottom_sheet_box {
orientation: vertical;
valign: end;
visible: false;

Gtk.Separator {
Expand All @@ -163,15 +169,22 @@ template $HalftoneDitherPage: Adw.BreakpointBin {
Adw.Breakpoint mobile_breakpoint {
condition ("max-width: 640px")
setters {
sidebar_main_menu.primary: false;
content_main_menu.primary: true;
split_view.collapsed: true;
dither_view.extend-content-to-top-edge: false;
dither_view.top-bar-style: raised_border;
dither_header_stack.visible-child-name: "mobile";
toggle_sheet_button.icon-name: "sheet-show-bottom-symbolic";
toggle_sheet_button.tooltip-text: _("Toggle Bottom Sheet");
bottom_sheet_box.visible: true;
}
}
}

Adw.Bin image_prefs_bin {
child: Gtk.Overlay {
child: Adw.PreferencesPage {
child: Adw.ToolbarView {
content: Adw.PreferencesPage {
Adw.PreferencesGroup options_group {
title: _("Options");

Expand Down Expand Up @@ -285,83 +298,52 @@ Adw.Bin image_prefs_bin {
output => $on_image_height_changed();
}
}

Adw.PreferencesGroup bottom_margin_group {
margin-bottom: 46;
}
};

[overlay]
Gtk.Box result_overlay {
orientation: horizontal;
margin-bottom: 24;
[bottom]
Gtk.Box {
halign: center;
vexpand: true;
valign: end;
spacing: 6;

Gtk.Button more_options_button {
visible: false;
label: _("More Options");

styles [
"pill"
]
}

Gtk.Button save_image_button {
label: _("Dither It!");
label: _("Save Image");
action-name: "app.save-image";

styles [
"pill",
"suggested-action"
]
}

styles [
"sheet-toolbar"
]
}
};
}

Gtk.Popover options_information_popover {
autohide: true;

Gtk.Box {
orientation: vertical;
Gtk.Label {
margin-top: 6;
margin-bottom: 6;
margin-start: 6;
margin-end: 6;

Gtk.Label {
wrap: true;
justify: center;
max-width-chars: 40;
label: _("You can customize some of these parameters to make your image look different. To learn more about individual options, go to the wiki page.");
}

Gtk.LinkButton {
label: _("Wiki Page");
uri: "https://github.com/tfuxu/Halftone/wiki/Options";
}
wrap: true;
justify: center;
max-width-chars: 30;
use-markup: true;
label: _("To learn more about individual options, go to the <a href=\"https://github.com/tfuxu/Halftone/wiki/Options\">wiki page</a>.");
}
}

Gtk.Popover aspect_ratio_popover {
autohide: true;

Gtk.Box {
orientation: vertical;
Gtk.Label {
margin-top: 6;
margin-bottom: 6;
margin-start: 6;
margin-end: 6;

Gtk.Label {
wrap: true;
justify: center;
max-width-chars: 40;
label: _("This option allowes you to preserve original aspect ratio when resizing an image.");
}
wrap: true;
justify: center;
max-width-chars: 30;
label: _("This option allows you to preserve original aspect ratio when resizing an image.");
}
}

Expand Down
6 changes: 1 addition & 5 deletions data/ui/main_window.blp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,7 @@ template $HalftoneMainWindow: Adw.ApplicationWindow {
halign: center;
clicked => $on_open_image();

Adw.ButtonContent {
icon-name: "arrow-into-box-symbolic";
label: _("Open Image");
use-underline: true;
}
label: _("Open Image");

styles [
"suggested-action",
Expand Down
1 change: 1 addition & 0 deletions halftone/views/about_window.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ def setup(self):
issue_url=constants.bugtracker_url,
developers=[
"tfuxu https://github.com/tfuxu",
"Brage Fuglseth https://bragefuglseth.dev",
],
designers=[
"tfuxu https://github.com/tfuxu",
Expand Down
6 changes: 0 additions & 6 deletions halftone/views/dither_page.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,18 +397,12 @@ def on_breakpoint_apply(self, *args):

self.is_mobile = True

self.toggle_sheet_button.set_tooltip_text(_("Toggle Bottom Sheet"))
self.toggle_sheet_button.set_icon_name("sheet-show-bottom-symbolic")

def on_breakpoint_unapply(self, *args):
self.bottom_sheet.set_child(None)
self.sidebar_view.set_content(self.image_prefs_bin)

self.is_mobile = False

self.toggle_sheet_button.set_tooltip_text(_("Toggle Sidebar"))
self.toggle_sheet_button.set_icon_name("sidebar-show-right-symbolic")

""" Module-specific helpers """

def set_original_paintable(self, path: str):
Expand Down

0 comments on commit 2afe4dd

Please sign in to comment.