From df97bb9349419657ec1414a2d5bab90103bf6c8b Mon Sep 17 00:00:00 2001 From: Alain Date: Tue, 8 Oct 2024 06:10:14 -0500 Subject: [PATCH] * --- data/Application.css | 10 ++++++ meson.build | 1 + src/MainWindow.vala | 63 +++++++++++++++++++++++++++++++++++--- src/Views/Form.vala | 55 +++++++++------------------------ src/Widgets/Stepper.vala | 66 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 150 insertions(+), 45 deletions(-) create mode 100644 src/Widgets/Stepper.vala diff --git a/data/Application.css b/data/Application.css index 897eba9..f457624 100644 --- a/data/Application.css +++ b/data/Application.css @@ -8,4 +8,14 @@ .fancy-turn.animation { animation: fancy-turn 0.7s ease-in-out; +} + +.number { + background: #8cd5ff; + border-radius: 6px; + color: #0d52bf; +} + +.fw-500 { + font-weight: 500; } \ No newline at end of file diff --git a/meson.build b/meson.build index 9adc259..89bc18c 100644 --- a/meson.build +++ b/meson.build @@ -45,6 +45,7 @@ executable( 'src/MainWindow.vala', 'src/Views/Form.vala', 'src/Views/Success.vala', + 'src/Widgets/Stepper.vala', dependencies: deps, install: true ) diff --git a/src/MainWindow.vala b/src/MainWindow.vala index c534b69..1f0878f 100644 --- a/src/MainWindow.vala +++ b/src/MainWindow.vala @@ -1,6 +1,6 @@ /* * SPDX-License-Identifier: GPL-3.0-or-later -* SPDX-FileCopyrightText: 2021 Your Name +* SPDX-FileCopyrightText: 2024 Alain */ public class MainWindow : Gtk.ApplicationWindow { @@ -22,14 +22,46 @@ public class MainWindow : Gtk.ApplicationWindow { } construct { - var dir = Environment.get_user_data_dir (); - print ("DIR: %s".printf (dir)); - var headerbar = new Gtk.HeaderBar () { title_widget = new Gtk.Label (null), hexpand = true }; + var project_icon = new Gtk.Image.from_icon_name ("applications-development") { + pixel_size = 96 + }; + + var title_label = new Gtk.Label (_("App Generator")); + title_label.add_css_class (Granite.STYLE_CLASS_H1_LABEL); + + var description_label = new Gtk.Label (_("Create an elementary OS app using one of the pre-made app templates")) { + wrap = true, + justify = CENTER + }; + description_label.add_css_class (Granite.STYLE_CLASS_DIM_LABEL); + + var left_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 6) { + valign = CENTER, + hexpand = true, + margin_start = 24, + margin_end = 24, + margin_bottom = 24 + }; + left_box.append (project_icon); + left_box.append (title_label); + left_box.append (description_label); + + var stepper = new Widgets.Stepper () { + margin_start = 24 + }; + stepper.add_step ("1", _("App Type")); + stepper.add_step ("2", _("Developer Data")); + stepper.add_step ("3", _("Application Data")); + + stepper.activeStepChange.connect (() => { + print ("Index %d\n".printf (stepper.active_index)); + }); + var form_view = new Views.Form (); var success_view = new Views.Success (); @@ -39,9 +71,30 @@ public class MainWindow : Gtk.ApplicationWindow { main_stack.add_named (form_view, "form"); main_stack.add_named (success_view, "success"); + var form_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 6); + form_box.append (stepper); + form_box.append (new Gtk.Separator (Gtk.Orientation.HORIZONTAL) { + margin_start = 24, + margin_end = 24, + margin_top = 12, + margin_bottom = 12 + }); + form_box.append (main_stack); + + var main_box = new Gtk.CenterBox () { + hexpand = true, + vexpand = true + }; + + main_box.start_widget = left_box; + main_box.center_widget = new Gtk.Separator (Gtk.Orientation.VERTICAL) { + margin_bottom = 32 + }; + main_box.end_widget = form_box; + var toolbar_view = new Adw.ToolbarView (); toolbar_view.add_top_bar (headerbar); - toolbar_view.content = main_stack; + toolbar_view.content = main_box; child = toolbar_view; diff --git a/src/Views/Form.vala b/src/Views/Form.vala index b4cb0c6..cc33f6c 100644 --- a/src/Views/Form.vala +++ b/src/Views/Form.vala @@ -13,30 +13,6 @@ public class Views.Form : Adw.Bin { public signal void created (string project_name, string location); construct { - var project_icon = new Gtk.Image.from_icon_name ("applications-development") { - pixel_size = 96 - }; - - var title_label = new Gtk.Label (_("App Generator")); - title_label.add_css_class (Granite.STYLE_CLASS_H1_LABEL); - - var description_label = new Gtk.Label (_("Create an elementary OS app using one of the pre-made app templates")) { - wrap = true, - justify = CENTER - }; - description_label.add_css_class (Granite.STYLE_CLASS_DIM_LABEL); - - var left_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 6) { - valign = CENTER, - hexpand = true, - margin_start = 24, - margin_end = 24, - margin_bottom = 24 - }; - left_box.append (project_icon); - left_box.append (title_label); - left_box.append (description_label); - Regex? project_name_regex = null; Regex? identifier_regex = null; try { @@ -99,12 +75,22 @@ public class Views.Form : Adw.Bin { var create_button = new Gtk.Button () { child = button_stack, - margin_top = 24, - sensitive = false + margin_bottom = 32, + sensitive = false, + vexpand = true, + valign = END }; create_button.add_css_class (Granite.STYLE_CLASS_SUGGESTED_ACTION); var form_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0); + form_box.append (new Gtk.Label (_("Step 1/3")) { + halign = START, + css_classes = { Granite.STYLE_CLASS_DIM_LABEL } + }); + form_box.append (new Gtk.Label (_("Sign Up")) { + halign = START, + css_classes = { Granite.STYLE_CLASS_H1_LABEL } + }); form_box.append (new Granite.HeaderLabel (_("Project Name:"))); form_box.append (project_name_entry); form_box.append (project_name_description); @@ -117,29 +103,18 @@ public class Views.Form : Adw.Bin { form_box.append (location_entry); form_box.append (create_button); - var right_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0) { + var content_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0) { margin_start = 24, margin_end = 24, hexpand = true }; - right_box.append (form_box); - - var main_box = new Gtk.CenterBox () { - hexpand = true, - vexpand = true - }; - - main_box.start_widget = left_box; - main_box.center_widget = new Gtk.Separator (Gtk.Orientation.VERTICAL) { - margin_bottom = 32 - }; - main_box.end_widget = right_box; + content_box.append (form_box); toast = new Granite.Toast (""); var overlay = new Gtk.Overlay () { - child = main_box + child = content_box }; overlay.add_overlay (toast); overlay.set_measure_overlay (toast, true); diff --git a/src/Widgets/Stepper.vala b/src/Widgets/Stepper.vala new file mode 100644 index 0000000..b9db056 --- /dev/null +++ b/src/Widgets/Stepper.vala @@ -0,0 +1,66 @@ +/* +* SPDX-License-Identifier: GPL-3.0-or-later +* SPDX-FileCopyrightText: 2024 Alain +*/ + +public class Widgets.Stepper : Gtk.Grid { + private Gtk.Box main_box; + + public int index { get; set; default = 0; } + + int _active_index = 0; + public int active_index { + get { + return _active_index; + } + + set { + foreach (Gtk.Button button in stepper_map.values) { + button.remove_css_class (Granite.STYLE_CLASS_SUGGESTED_ACTION); + } + + if (stepper_map.has_key (value)) { + stepper_map.get (value).add_css_class (Granite.STYLE_CLASS_SUGGESTED_ACTION); + } + + _active_index = value; + activeStepChange (); + } + } + + public signal void activeStepChange (); + + private Gee.HashMap stepper_map = new Gee.HashMap (); + + construct { + main_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 24); + attach (main_box, 0, 0); + } + + public void add_step (string number, string name) { + var number_button = new Gtk.Button.with_label (number) { + width_request = 24 + }; + number_button.set_data ("index", index); + + if (index <= 0) { + number_button.add_css_class (Granite.STYLE_CLASS_SUGGESTED_ACTION); + } + + number_button.clicked.connect (() => { + active_index = number_button.get_data ("index"); + }); + + var name_label = new Gtk.Label (name); + name_label.add_css_class ("fw-500"); + + var button_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 6); + button_box.append (number_button); + button_box.append (name_label); + + main_box.append (button_box); + + stepper_map[index] = number_button; + index++; + } +} \ No newline at end of file