From 212fd37eca292a4a6fe84651ceefe44371e7f6a2 Mon Sep 17 00:00:00 2001 From: Alain Date: Wed, 20 Mar 2024 06:21:26 -0500 Subject: [PATCH] Update styles --- core/Layouts/HeaderItem.vala | 9 +- core/Util/Util.vala | 2 +- core/Widgets/ContextMenu/MenuItem.vala | 4 +- .../DateTimePicker/DateTimePicker.vala | 4 +- data/io.github.alainm23.planify.gresource.xml | 2 + .../icons/permissions-generic-symbolic.svg | 8 ++ data/resources/icons/work-week-symbolic.svg | 4 + data/resources/stylesheet/stylesheet.css | 8 +- data/resources/stylesheet/typography.css | 30 ---- src/Dialogs/DatePicker.vala | 4 +- src/Dialogs/Preferences/Pages/Sidebar.vala | 1 - .../Preferences/PreferencesWindow.vala | 4 +- src/Layouts/ItemRow.vala | 14 +- src/Layouts/LabelRow.vala | 136 ++++++++++-------- src/Views/Project/Project.vala | 2 +- .../ReminderPicker/ReminderPicker.vala | 3 +- 16 files changed, 124 insertions(+), 111 deletions(-) create mode 100644 data/resources/icons/permissions-generic-symbolic.svg create mode 100644 data/resources/icons/work-week-symbolic.svg diff --git a/core/Layouts/HeaderItem.vala b/core/Layouts/HeaderItem.vala index ecf946e6a..8cf98188f 100644 --- a/core/Layouts/HeaderItem.vala +++ b/core/Layouts/HeaderItem.vala @@ -122,7 +122,7 @@ public class Layouts.HeaderItem : Adw.Bin { set { if (value) { listbox.css_classes = { "boxed-list" }; - listbox.margin_top = 3; + listbox.margin_top = 12; listbox.margin_bottom = 3; listbox.margin_start = 3; listbox.margin_end = 3; @@ -147,11 +147,12 @@ public class Layouts.HeaderItem : Adw.Bin { halign = Gtk.Align.START }; - name_label.add_css_class (Granite.STYLE_CLASS_H4_LABEL); - name_label.add_css_class (Granite.STYLE_CLASS_SMALL_LABEL); + name_label.add_css_class ("h4"); + name_label.add_css_class ("heading"); listbox = new Gtk.ListBox () { - hexpand = true + hexpand = true, + margin_top = 6 }; listbox.set_placeholder (get_placeholder ()); diff --git a/core/Util/Util.vala b/core/Util/Util.vala index aea4ae6a1..9182d71df 100644 --- a/core/Util/Util.vala +++ b/core/Util/Util.vala @@ -749,7 +749,7 @@ public class Util : GLib.Object { dialog.body_use_markup = true; dialog.add_response ("cancel", _("Cancel")); - dialog.add_response ("delete", _("Reset all")); + dialog.add_response ("delete", _("Delete All")); dialog.set_response_appearance ("delete", Adw.ResponseAppearance.DESTRUCTIVE); dialog.show (); diff --git a/core/Widgets/ContextMenu/MenuItem.vala b/core/Widgets/ContextMenu/MenuItem.vala index 69036ac41..80af1f085 100644 --- a/core/Widgets/ContextMenu/MenuItem.vala +++ b/core/Widgets/ContextMenu/MenuItem.vala @@ -101,7 +101,7 @@ public class Widgets.ContextMenu.MenuItem : Gtk.Button { } construct { - add_css_class (Granite.STYLE_CLASS_FLAT); + add_css_class ("flat"); add_css_class ("no-font-bold"); menu_icon = new Gtk.Image () { @@ -125,7 +125,7 @@ public class Widgets.ContextMenu.MenuItem : Gtk.Button { child = select_icon }; - var arrow_icon = new Gtk.Image.from_icon_name ("pan-end-symbolic") { + var arrow_icon = new Gtk.Image.from_icon_name ("go-next-symbolic") { css_classes = { "dim-label" }, margin_start = 6 }; diff --git a/core/Widgets/DateTimePicker/DateTimePicker.vala b/core/Widgets/DateTimePicker/DateTimePicker.vala index 3d80e5697..a8c6eeeae 100644 --- a/core/Widgets/DateTimePicker/DateTimePicker.vala +++ b/core/Widgets/DateTimePicker/DateTimePicker.vala @@ -79,8 +79,8 @@ public class Widgets.DateTimePicker.DateTimePicker : Gtk.Popover { construct { today_item = new Widgets.ContextMenu.MenuItem (_("Today"), "star-outline-thick-symbolic"); - tomorrow_item = new Widgets.ContextMenu.MenuItem (_("Tomorrow"), "month-symbolic"); - next_week_item = new Widgets.ContextMenu.MenuItem (_("Next week"), "month-symbolic"); + tomorrow_item = new Widgets.ContextMenu.MenuItem (_("Tomorrow"), "today-calendar-symbolic"); + next_week_item = new Widgets.ContextMenu.MenuItem (_("Next week"), "work-week-symbolic"); date_item = new Widgets.ContextMenu.MenuItem (_("Choose a date"), "month-symbolic"); date_item.arrow = true; diff --git a/data/io.github.alainm23.planify.gresource.xml b/data/io.github.alainm23.planify.gresource.xml index f6c1e6cee..3be9d9034 100644 --- a/data/io.github.alainm23.planify.gresource.xml +++ b/data/io.github.alainm23.planify.gresource.xml @@ -74,5 +74,7 @@ resources/icons/list-drag-handle-symbolic.svg resources/icons/mailbox-symbolic.svg resources/icons/checkmark-small-symbolic.svg + resources/icons/work-week-symbolic.svg + resources/icons/permissions-generic-symbolic.svg diff --git a/data/resources/icons/permissions-generic-symbolic.svg b/data/resources/icons/permissions-generic-symbolic.svg new file mode 100644 index 000000000..89b383792 --- /dev/null +++ b/data/resources/icons/permissions-generic-symbolic.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/data/resources/icons/work-week-symbolic.svg b/data/resources/icons/work-week-symbolic.svg new file mode 100644 index 000000000..d938b7686 --- /dev/null +++ b/data/resources/icons/work-week-symbolic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/data/resources/stylesheet/stylesheet.css b/data/resources/stylesheet/stylesheet.css index 79c4bf66a..078ef6b23 100644 --- a/data/resources/stylesheet/stylesheet.css +++ b/data/resources/stylesheet/stylesheet.css @@ -209,7 +209,10 @@ entry.flat:focus-within { .card-selected { transition: all 225ms ease-in-out; - margin: 24px; + margin-bottom: 24px; + margin-top: 24px; + margin-left: 3px; + margin-right: 3px; padding-left: 9px; padding-top: 3px; padding-right: 3px; @@ -535,7 +538,8 @@ checkbutton.theme-selector radio:checked { color: @theme_selected_fg_color; } -.header-item-button { +.header-item-button, +.header-item-button button { padding: 3px; min-height: 16px; min-width: 16px; diff --git a/data/resources/stylesheet/typography.css b/data/resources/stylesheet/typography.css index ac3c48657..d8b73b580 100644 --- a/data/resources/stylesheet/typography.css +++ b/data/resources/stylesheet/typography.css @@ -1,33 +1,3 @@ -.h1, -.title-1 { - font-size: 24pt; - font-weight: 700; - letter-spacing: -0.04em; -} - -.h2, -.title-2 { - font-weight: 300; - font-size: 18pt; - letter-spacing: -0.05em; -} - -.h3, -.title-3 { - font-size: 11pt; -} - -label.h4, -.h4 label, -.heading, -.title-4, -.title-4 label { - font-weight: 700; - opacity: 0.8; - padding-bottom: 0.5em; - padding-top: 0.5em; -} - .small-label { font-size: 0.85em; } diff --git a/src/Dialogs/DatePicker.vala b/src/Dialogs/DatePicker.vala index 678126789..e819e9bd2 100644 --- a/src/Dialogs/DatePicker.vala +++ b/src/Dialogs/DatePicker.vala @@ -65,10 +65,10 @@ public class Dialogs.DatePicker : Adw.Window { today_item.secondary_text = new GLib.DateTime.now_local ().format ("%a"); today_item.margin_top = 6; - var tomorrow_item = new Widgets.ContextMenu.MenuItem (_("Tomorrow"), "month-symbolic"); + var tomorrow_item = new Widgets.ContextMenu.MenuItem (_("Tomorrow"), "today-calendar-symbolic"); tomorrow_item.secondary_text = new GLib.DateTime.now_local ().add_days (1).format ("%a"); - var next_week_item = new Widgets.ContextMenu.MenuItem (_("Next Week"), "month-symbolic"); + var next_week_item = new Widgets.ContextMenu.MenuItem (_("Next Week"), "work-week-symbolic"); next_week_item.secondary_text = Util.get_default ().get_relative_date_from_date ( Util.get_default ().get_format_date (new GLib.DateTime.now_local ().add_days (7)) ); diff --git a/src/Dialogs/Preferences/Pages/Sidebar.vala b/src/Dialogs/Preferences/Pages/Sidebar.vala index 3fcc49467..97832f65f 100644 --- a/src/Dialogs/Preferences/Pages/Sidebar.vala +++ b/src/Dialogs/Preferences/Pages/Sidebar.vala @@ -28,7 +28,6 @@ public class Dialogs.Preferences.Pages.Sidebar : Adw.Bin { var settings_header = new Dialogs.Preferences.SettingsHeader (_("Sidebar")); var views_group = new Layouts.HeaderItem (_("Show in Sidebar")) { - listbox_no_margin = true, card = true, reveal = true, margin_top = 12 diff --git a/src/Dialogs/Preferences/PreferencesWindow.vala b/src/Dialogs/Preferences/PreferencesWindow.vala index 5076ae5d4..30d6ba06e 100644 --- a/src/Dialogs/Preferences/PreferencesWindow.vala +++ b/src/Dialogs/Preferences/PreferencesWindow.vala @@ -298,8 +298,8 @@ public class Dialogs.Preferences.PreferencesWindow : Adw.PreferencesWindow { delete_row.activated.connect (() => { destroy (); - Util.get_default ().clear_database (_("Are you sure you want to reset all?"), - _("The process removes all stored information without the possibility of undoing it"), + Util.get_default ().clear_database (_("Delete All Data?"), + _("Deletes all your lists, tasks, and reminders irreversibly"), Planify.instance.main_window); }); diff --git a/src/Layouts/ItemRow.vala b/src/Layouts/ItemRow.vala index bf44ae74a..777444a86 100644 --- a/src/Layouts/ItemRow.vala +++ b/src/Layouts/ItemRow.vala @@ -266,7 +266,7 @@ public class Layouts.ItemRow : Layouts.ItemBase { child = content_textview }; - hide_loading_button = new Widgets.LoadingButton.with_icon ("pan-down-symbolic", 16) { + hide_loading_button = new Widgets.LoadingButton.with_icon ("go-up-symbolic", 16) { valign = Gtk.Align.START, css_classes = { "flat", "dim-label", "no-padding" } }; @@ -971,6 +971,8 @@ public class Layouts.ItemRow : Layouts.ItemBase { } private Gtk.Popover build_button_context_menu () { + var back_item = new Widgets.ContextMenu.MenuItem (_("Back"), "go-previous-symbolic"); + var copy_clipboard_item = new Widgets.ContextMenu.MenuItem (_("Copy to Clipboard"), "clipboard-symbolic"); var duplicate_item = new Widgets.ContextMenu.MenuItem (_("Duplicate"), "tabs-stack-symbolic"); var move_item = new Widgets.ContextMenu.MenuItem (_("Move"), "arrow3-right-symbolic"); @@ -1006,7 +1008,7 @@ public class Layouts.ItemRow : Layouts.ItemBase { }; menu_stack.add_named (menu_box, "menu"); - menu_stack.add_named (get_repeat_widget (popover), "repeat"); + menu_stack.add_named (get_repeat_widget (popover, back_item), "repeat"); popover.child = menu_stack; @@ -1046,6 +1048,10 @@ public class Layouts.ItemRow : Layouts.ItemBase { menu_stack.set_visible_child_name ("menu"); }); + back_item.clicked.connect (() => { + menu_stack.set_visible_child_name ("menu"); + }); + popover.show.connect (() => { more_information_item.title = get_updated_info (); }); @@ -1058,7 +1064,7 @@ public class Layouts.ItemRow : Layouts.ItemBase { return popover; } - private Gtk.Widget get_repeat_widget (Gtk.Popover popover) { + private Gtk.Widget get_repeat_widget (Gtk.Popover popover, Widgets.ContextMenu.MenuItem back_item) { var none_item = new Widgets.ContextMenu.MenuItem (_("None")); var daily_item = new Widgets.ContextMenu.MenuItem (_("Daily")); var weekly_item = new Widgets.ContextMenu.MenuItem (_("Weekly")); @@ -1068,6 +1074,8 @@ public class Layouts.ItemRow : Layouts.ItemBase { var menu_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0); menu_box.margin_top = menu_box.margin_bottom = 3; + menu_box.append (back_item); + menu_box.append (new Widgets.ContextMenu.MenuSeparator ()); menu_box.append (daily_item); menu_box.append (weekly_item); menu_box.append (monthly_item); diff --git a/src/Layouts/LabelRow.vala b/src/Layouts/LabelRow.vala index 099f27d67..e0f84390f 100644 --- a/src/Layouts/LabelRow.vala +++ b/src/Layouts/LabelRow.vala @@ -36,12 +36,12 @@ public class Layouts.LabelRow : Gtk.ListBoxRow { } construct { - css_classes = { "no-selectable", "transition" }; + css_classes = { "selectable-item", "transition" }; widget_color = new Gtk.Grid () { valign = Gtk.Align.CENTER, - height_request = 16, - width_request = 16, + height_request = 19, + width_request = 19, css_classes = { "circle-color" } }; @@ -63,27 +63,30 @@ public class Layouts.LabelRow : Gtk.ListBoxRow { }; - var edit_button = new Gtk.Button.from_icon_name ("edit-symbolic") { - css_classes = { "flat", "padding-3" } - }; - - var trash_button = new Gtk.Button.from_icon_name ("user-trash-symbolic") { - css_classes = { "flat", "padding-3" } - }; + var menu_button = new Gtk.MenuButton () { + valign = Gtk.Align.CENTER, + halign = Gtk.Align.CENTER, + popover = build_context_menu (), + icon_name = "view-more-symbolic", + css_classes = { "flat", "header-item-button", "dim-label" } + }; var buttons_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6); - buttons_box.append (edit_button); - buttons_box.append (trash_button); - - var buttons_box_revealer = new Gtk.Revealer (); - buttons_box_revealer.transition_type = Gtk.RevealerTransitionType.SLIDE_LEFT; - buttons_box_revealer.child = buttons_box; + buttons_box.append (menu_button); + buttons_box.append (new Gtk.Image.from_icon_name ("go-next-symbolic") { + css_classes = { "dim-label" } + }); - handle_grid = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6); + handle_grid = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6) { + margin_start = 6, + margin_end = 6, + margin_top = 3, + margin_bottom = 3 + }; handle_grid.append (widget_color); handle_grid.append (name_label); handle_grid.append (count_revealer); - handle_grid.append (buttons_box_revealer); + handle_grid.append (buttons_box); var reorder_child = new Widgets.ReorderChild (handle_grid, this); @@ -110,19 +113,61 @@ public class Layouts.LabelRow : Gtk.ListBoxRow { count_revealer.reveal_child = int.parse (count_label.label) > 0; }); - var motion_gesture = new Gtk.EventControllerMotion (); - add_controller (motion_gesture); - motion_gesture.enter.connect (() => { - buttons_box_revealer.reveal_child = true; - count_revealer.reveal_child = false; + reorder_child.on_drop_end.connect ((listbox) => { + update_labels_item_order (listbox); }); + } - motion_gesture.leave.connect (() => { - buttons_box_revealer.reveal_child = false; - count_revealer.reveal_child = int.parse (count_label.label) > 0; - }); + public void update_request () { + name_label.label = label.name; + Util.get_default ().set_widget_color (Util.get_default ().get_color (label.color), widget_color); + } + + private void update_labels_item_order (Gtk.ListBox listbox) { + unowned Layouts.LabelRow? label_row = null; + var row_index = 0; + + do { + label_row = (Layouts.LabelRow) listbox.get_row_at_index (row_index); + + if (label_row != null) { + label_row.label.item_order = row_index; + Services.Database.get_default ().update_label (label_row.label); + } + + row_index++; + } while (label_row != null); + } + + private Gtk.Popover build_context_menu () { + var edit_item = new Widgets.ContextMenu.MenuItem (_("Edit Label"), "edit-symbolic"); + var delete_item = new Widgets.ContextMenu.MenuItem (_("Delete Label"), "user-trash-symbolic"); + delete_item.add_css_class ("menu-item-danger"); + + var menu_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0); + menu_box.margin_top = menu_box.margin_bottom = 3; + menu_box.append (edit_item); + menu_box.append (new Widgets.ContextMenu.MenuSeparator ()); + menu_box.append (delete_item); + + var menu_popover = new Gtk.Popover () { + has_arrow = false, + child = menu_box, + position = Gtk.PositionType.BOTTOM, + width_request = 250 + }; + + edit_item.clicked.connect (() => { + menu_popover.popdown (); + + Services.EventBus.get_default ().close_labels (); + var dialog = new Dialogs.Label (label); + dialog.show (); + }); + + delete_item.clicked.connect (() => { + menu_popover.popdown (); - trash_button.clicked.connect (() => { Services.EventBus.get_default ().close_labels (); var dialog = new Adw.MessageDialog ((Gtk.Window) Planify.instance.main_window, @@ -145,39 +190,10 @@ public class Layouts.LabelRow : Gtk.ListBoxRow { } } }); - }); - - edit_button.clicked.connect (() => { - Services.EventBus.get_default ().close_labels (); - var dialog = new Dialogs.Label (label); - dialog.show (); - }); + }); - reorder_child.on_drop_end.connect ((listbox) => { - update_labels_item_order (listbox); - }); - } - - public void update_request () { - name_label.label = label.name; - Util.get_default ().set_widget_color (Util.get_default ().get_color (label.color), widget_color); - } - - private void update_labels_item_order (Gtk.ListBox listbox) { - unowned Layouts.LabelRow? label_row = null; - var row_index = 0; - - do { - label_row = (Layouts.LabelRow) listbox.get_row_at_index (row_index); - - if (label_row != null) { - label_row.label.item_order = row_index; - Services.Database.get_default ().update_label (label_row.label); - } - - row_index++; - } while (label_row != null); - } + return menu_popover; + } public void hide_destroy () { main_revealer.reveal_child = false; diff --git a/src/Views/Project/Project.vala b/src/Views/Project/Project.vala index 609cbc523..c45c5fa69 100644 --- a/src/Views/Project/Project.vala +++ b/src/Views/Project/Project.vala @@ -245,7 +245,7 @@ public class Views.Project : Adw.Bin { var schedule_item = new Widgets.ContextMenu.MenuItem (_("When?"), "month-symbolic"); var add_section_item = new Widgets.ContextMenu.MenuItem (_("Add Section"), "tab-new-symbolic"); add_section_item.secondary_text = "S"; - var manage_sections = new Widgets.ContextMenu.MenuItem (_("Manage Sections"), "list-large-symbolic"); + var manage_sections = new Widgets.ContextMenu.MenuItem (_("Manage Sections"), "permissions-generic-symbolic"); var filter_by_tags = new Widgets.ContextMenu.MenuItem (_("Filter by Labels"), "planner-tag"); var select_item = new Widgets.ContextMenu.MenuItem (_("Select"), "list-large-symbolic"); diff --git a/src/Widgets/ReminderPicker/ReminderPicker.vala b/src/Widgets/ReminderPicker/ReminderPicker.vala index 005916e11..91c9a0cd7 100644 --- a/src/Widgets/ReminderPicker/ReminderPicker.vala +++ b/src/Widgets/ReminderPicker/ReminderPicker.vala @@ -41,7 +41,8 @@ public class Widgets.ReminderPicker.ReminderPicker : Gtk.Popover { construct { reminders_view = new Layouts.HeaderItem (_("Reminders")) { - margin_bottom = 9 + margin_bottom = 9, + margin_top = 12 }; reminders_view.reveal_child = true; reminders_view.placeholder_message = _("Your list of reminders will show up here. Add one by clicking the '+' button.");