From d2e36ef625e15eb9666eb5df436e7a8f198860ea Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Thu, 20 Jul 2023 23:38:45 +0530 Subject: [PATCH 01/13] Add columnview --- src/Library/demos/Column View/main.blp | 41 +++++++++++++++ src/Library/demos/Column View/main.js | 70 +++++++++++++++++++++++++ src/Library/demos/Column View/main.json | 7 +++ 3 files changed, 118 insertions(+) create mode 100644 src/Library/demos/Column View/main.blp create mode 100644 src/Library/demos/Column View/main.js create mode 100644 src/Library/demos/Column View/main.json diff --git a/src/Library/demos/Column View/main.blp b/src/Library/demos/Column View/main.blp new file mode 100644 index 000000000..68eef4477 --- /dev/null +++ b/src/Library/demos/Column View/main.blp @@ -0,0 +1,41 @@ +using Gtk 4.0; +using Adw 1; + +Adw.StatusPage { + title: _("Column View"); + description: _("List and Grid views present a large dynamic list of model items"); + valign: start; + + Adw.Clamp { + maximum-size: 240; + Box { + orientation: vertical; + spacing: 18; + + LinkButton { + label: _("Documentation"); + uri: "https://docs.gtk.org/gtk4/class.ColumnView.html"; + } + + Box { + halign: center; + styles ["linked"] + Button add { + label: _("Add Item"); + tooltip-text: _("Add Item"); + } + + Button remove { + label: _("Remove Item"); + tooltip-text: _("Remove Item"); + } + } + + ColumnView column_view { + show-column-separators: true; + show-row-separators: true; + } + + } + } +} diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js new file mode 100644 index 000000000..1280a122b --- /dev/null +++ b/src/Library/demos/Column View/main.js @@ -0,0 +1,70 @@ +import Gtk from "gi://Gtk"; + +const stack = workbench.builder.get_object("stack"); +const list_view = workbench.builder.get_object("list_view"); +const grid_view = workbench.builder.get_object("grid_view"); +const add = workbench.builder.get_object("add"); +const remove = workbench.builder.get_object("remove"); + +//Model +let item = 1; +const string_model = new Gtk.StringList({ + strings: ["Default Item 1", "Default Item 2", "Default Item 3"], +}); + +const model = new Gtk.SingleSelection({ model: string_model }); + +const factory_for_grid_view = new Gtk.SignalListItemFactory(); +factory_for_grid_view.connect("setup", (factory, listItem) => { + const listBox = new Gtk.Box({ + width_request: 160, + height_request: 160, + css_classes: ["card"], + }); + const label = new Gtk.Label({ + halign: Gtk.Align.CENTER, + hexpand: true, + valign: Gtk.Align.CENTER, + }); + listBox.append(label); + listItem.set_child(listBox); +}); +factory_for_grid_view.connect("bind", (factory, listItem) => { + const listBox = listItem.get_child(); + const modelItem = listItem.get_item(); + const labelWidget = listBox.get_last_child(); + + labelWidget.label = modelItem.string; +}); + +//View +model.model.connect("items-changed", (list, position, removed, added) => { + console.log( + `position: ${position}, Item removed? ${Boolean( + removed, + )}, Item added? ${Boolean(added)}`, + ); +}); + +model.connect("selection-changed", () => { + const selected_item = model.get_selected(); + console.log( + `Model item selected from view: ${model.model.get_string(selected_item)}`, + ); +}); + +list_view.model = model; +grid_view.model = model; +grid_view.factory = factory_for_grid_view; + +// Controller +add.connect("clicked", () => { + const new_item = `New item ${item}`; + model.model.append(new_item); + item++; +}); + +remove.connect("clicked", () => { + const selected_item = model.get_selected(); + model.model.remove(selected_item); +}); diff --git a/src/Library/demos/Column View/main.json b/src/Library/demos/Column View/main.json new file mode 100644 index 000000000..cc066c437 --- /dev/null +++ b/src/Library/demos/Column View/main.json @@ -0,0 +1,7 @@ +{ + "name": "ColumnView", + "category": "layout", + "description": "List and Grid views present a large dynamic list of model items", + "panels": ["ui", "preview"], + "autorun": true +} From a40a5be9233999ed8b868174066cb5b7f4722091 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Fri, 21 Jul 2023 16:21:48 +0530 Subject: [PATCH 02/13] test --- src/Library/demos/Column View/main.js | 83 ++++++++++++++------------- 1 file changed, 44 insertions(+), 39 deletions(-) diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index 1280a122b..3f3b2db58 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -1,40 +1,61 @@ import Gtk from "gi://Gtk"; +import Gio from "gi://Gio"; -const stack = workbench.builder.get_object("stack"); -const list_view = workbench.builder.get_object("list_view"); -const grid_view = workbench.builder.get_object("grid_view"); const add = workbench.builder.get_object("add"); const remove = workbench.builder.get_object("remove"); +const column_view = workbench.builder.get_object("column_view"); +function createCol() { + const factory = new Gtk.SignalListItemFactory(); + const columnViewColumn = new Gtk.ColumnViewColumn({ + factory, + }); + factory.connect("setup", (factory, listItem) => { + const listBox = new Gtk.Box({ + width_request: 160, + height_request: 160, + css_classes: ["card"], + }); + const label = new Gtk.Label({ + halign: Gtk.Align.CENTER, + hexpand: true, + valign: Gtk.Align.CENTER, + }); + listBox.append(label); + listItem.set_child(listBox); + }); + factory.connect("bind", (factory, listItem) => { + const listBox = listItem.get_child(); + const modelItem = listItem.get_item(); + const labelWidget = listBox.get_last_child(); + + labelWidget.label = modelItem.string; + }); + return columnViewColumn; +} //Model let item = 1; const string_model = new Gtk.StringList({ - strings: ["Default Item 1", "Default Item 2", "Default Item 3"], + strings: ["Label 1", "Label 2", "Label 3", "Label 4"], }); const model = new Gtk.SingleSelection({ model: string_model }); -const factory_for_grid_view = new Gtk.SignalListItemFactory(); -factory_for_grid_view.connect("setup", (factory, listItem) => { - const listBox = new Gtk.Box({ - width_request: 160, - height_request: 160, - css_classes: ["card"], - }); - const label = new Gtk.Label({ - halign: Gtk.Align.CENTER, - hexpand: true, - valign: Gtk.Align.CENTER, - }); - listBox.append(label); - listItem.set_child(listBox); +column_view.model = model; +const new_col = createCol(); + +column_view.append_column(new_col); + +// Controller +add.connect("clicked", () => { + const new_item = `New item ${item}`; + model.model.append(new_item); + item++; }); -factory_for_grid_view.connect("bind", (factory, listItem) => { - const listBox = listItem.get_child(); - const modelItem = listItem.get_item(); - const labelWidget = listBox.get_last_child(); - labelWidget.label = modelItem.string; +remove.connect("clicked", () => { + const selected_item = model.get_selected(); + model.model.remove(selected_item); }); //View @@ -52,19 +73,3 @@ model.connect("selection-changed", () => { `Model item selected from view: ${model.model.get_string(selected_item)}`, ); }); - -list_view.model = model; -grid_view.model = model; -grid_view.factory = factory_for_grid_view; - -// Controller -add.connect("clicked", () => { - const new_item = `New item ${item}`; - model.model.append(new_item); - item++; -}); - -remove.connect("clicked", () => { - const selected_item = model.get_selected(); - model.model.remove(selected_item); -}); From 8258b645359ff03980b4307756496570968a9551 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 22 Jul 2023 15:59:52 +0530 Subject: [PATCH 03/13] Update --- src/Library/demos/Column View/main.blp | 18 +----- src/Library/demos/Column View/main.js | 75 ++++++++++++++++--------- src/Library/demos/Column View/main.json | 2 +- 3 files changed, 53 insertions(+), 42 deletions(-) diff --git a/src/Library/demos/Column View/main.blp b/src/Library/demos/Column View/main.blp index 68eef4477..bb5ed8287 100644 --- a/src/Library/demos/Column View/main.blp +++ b/src/Library/demos/Column View/main.blp @@ -3,7 +3,7 @@ using Adw 1; Adw.StatusPage { title: _("Column View"); - description: _("List and Grid views present a large dynamic list of model items"); + description: _("Presents a large dynamic list of items using multiple columns with headers"); valign: start; Adw.Clamp { @@ -17,25 +17,11 @@ Adw.StatusPage { uri: "https://docs.gtk.org/gtk4/class.ColumnView.html"; } - Box { - halign: center; - styles ["linked"] - Button add { - label: _("Add Item"); - tooltip-text: _("Add Item"); - } - - Button remove { - label: _("Remove Item"); - tooltip-text: _("Remove Item"); - } - } - ColumnView column_view { show-column-separators: true; show-row-separators: true; + styles ['view'] } - } } } diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index 3f3b2db58..50ed89744 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -1,8 +1,6 @@ import Gtk from "gi://Gtk"; import Gio from "gi://Gio"; -const add = workbench.builder.get_object("add"); -const remove = workbench.builder.get_object("remove"); const column_view = workbench.builder.get_object("column_view"); function createCol() { @@ -11,28 +9,63 @@ function createCol() { factory, }); factory.connect("setup", (factory, listItem) => { - const listBox = new Gtk.Box({ - width_request: 160, - height_request: 160, - css_classes: ["card"], + const label = new Gtk.Label({ + height_request: 50, + margin_start: 12, + margin_end: 12, }); + listItem.set_child(label); + }); + factory.connect("bind", (factory, listItem) => { + const labelWidget = listItem.get_child(); + const modelItem = listItem.get_item(); + labelWidget.label = modelItem.string; + }); + return columnViewColumn; +} + +function createSecCol() { + const factory = new Gtk.SignalListItemFactory(); + const columnViewColumn = new Gtk.ColumnViewColumn({ + factory, + }); + factory.connect("setup", (factory, listItem) => { const label = new Gtk.Label({ - halign: Gtk.Align.CENTER, - hexpand: true, - valign: Gtk.Align.CENTER, + height_request: 50, + margin_start: 12, + margin_end: 12, }); - listBox.append(label); - listItem.set_child(listBox); + listItem.set_child(label); }); factory.connect("bind", (factory, listItem) => { - const listBox = listItem.get_child(); + const labelWidget = listItem.get_child(); const modelItem = listItem.get_item(); - const labelWidget = listBox.get_last_child(); + labelWidget.label = modelItem.string; + }); + return columnViewColumn; +} +function createThirdCol() { + const factory = new Gtk.SignalListItemFactory(); + const columnViewColumn = new Gtk.ColumnViewColumn({ + factory, + }); + factory.connect("setup", (factory, listItem) => { + const label = new Gtk.Label({ + height_request: 50, + margin_start: 12, + margin_end: 12, + }); + listItem.set_child(label); + }); + factory.connect("bind", (factory, listItem) => { + const labelWidget = listItem.get_child(); + const modelItem = listItem.get_item(); labelWidget.label = modelItem.string; }); return columnViewColumn; } + //Model let item = 1; const string_model = new Gtk.StringList({ @@ -43,20 +76,12 @@ const model = new Gtk.SingleSelection({ model: string_model }); column_view.model = model; const new_col = createCol(); +const sec_col = createSecCol(); +const third_col = createThirdCol(); column_view.append_column(new_col); - -// Controller -add.connect("clicked", () => { - const new_item = `New item ${item}`; - model.model.append(new_item); - item++; -}); - -remove.connect("clicked", () => { - const selected_item = model.get_selected(); - model.model.remove(selected_item); -}); +column_view.append_column(sec_col); +column_view.append_column(third_col); //View model.model.connect("items-changed", (list, position, removed, added) => { diff --git a/src/Library/demos/Column View/main.json b/src/Library/demos/Column View/main.json index cc066c437..95b37b3e0 100644 --- a/src/Library/demos/Column View/main.json +++ b/src/Library/demos/Column View/main.json @@ -1,7 +1,7 @@ { "name": "ColumnView", "category": "layout", - "description": "List and Grid views present a large dynamic list of model items", + "description": "Presents a large dynamic list of items using multiple columns with headers", "panels": ["ui", "preview"], "autorun": true } From 2c78601b9472bd20683258f8d61c6ebb2a2dc498 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 22 Jul 2023 18:38:18 +0530 Subject: [PATCH 04/13] Clean Up and implement colview --- src/Library/demos/Column View/main.js | 31 ++++++++++++++------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index 50ed89744..098216d8f 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -3,7 +3,7 @@ import Gio from "gi://Gio"; const column_view = workbench.builder.get_object("column_view"); -function createCol() { +function createFirstCol() { const factory = new Gtk.SignalListItemFactory(); const columnViewColumn = new Gtk.ColumnViewColumn({ factory, @@ -19,7 +19,7 @@ function createCol() { factory.connect("bind", (factory, listItem) => { const labelWidget = listItem.get_child(); const modelItem = listItem.get_item(); - labelWidget.label = modelItem.string; + labelWidget.label = modelItem.get_name(); }); return columnViewColumn; } @@ -40,7 +40,7 @@ function createSecCol() { factory.connect("bind", (factory, listItem) => { const labelWidget = listItem.get_child(); const modelItem = listItem.get_item(); - labelWidget.label = modelItem.string; + labelWidget.label = modelItem.get_size().toString(); }); return columnViewColumn; } @@ -61,30 +61,33 @@ function createThirdCol() { factory.connect("bind", (factory, listItem) => { const labelWidget = listItem.get_child(); const modelItem = listItem.get_item(); - labelWidget.label = modelItem.string; }); return columnViewColumn; } //Model -let item = 1; -const string_model = new Gtk.StringList({ - strings: ["Label 1", "Label 2", "Label 3", "Label 4"], +const dir = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path( + "Library/demos", +); + +const dir_model = new Gtk.DirectoryList({ + file: dir, + attributes: "standard::*", }); -const model = new Gtk.SingleSelection({ model: string_model }); +const model = new Gtk.SingleSelection({ model: dir_model }); column_view.model = model; -const new_col = createCol(); +const first_col = createFirstCol(); const sec_col = createSecCol(); const third_col = createThirdCol(); -column_view.append_column(new_col); +column_view.append_column(first_col); column_view.append_column(sec_col); column_view.append_column(third_col); //View -model.model.connect("items-changed", (list, position, removed, added) => { +/*model.model.connect("items-changed", (list, position, removed, added) => { console.log( `position: ${position}, Item removed? ${Boolean( removed, @@ -94,7 +97,5 @@ model.model.connect("items-changed", (list, position, removed, added) => { model.connect("selection-changed", () => { const selected_item = model.get_selected(); - console.log( - `Model item selected from view: ${model.model.get_string(selected_item)}`, - ); -}); + console.log(`Model item selected from view: ${model.model}`); +});*/ From 5156e47f82ca2814f4bf4f57b316f51d8abb00fe Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Thu, 3 Aug 2023 19:22:01 +0530 Subject: [PATCH 05/13] Refactoring and applied suggested changes --- src/Library/demos/Column View/main.blp | 16 +++++- src/Library/demos/Column View/main.js | 74 +++++++++++-------------- src/Library/demos/Column View/main.json | 2 +- 3 files changed, 48 insertions(+), 44 deletions(-) diff --git a/src/Library/demos/Column View/main.blp b/src/Library/demos/Column View/main.blp index bb5ed8287..40273433e 100644 --- a/src/Library/demos/Column View/main.blp +++ b/src/Library/demos/Column View/main.blp @@ -20,7 +20,21 @@ Adw.StatusPage { ColumnView column_view { show-column-separators: true; show-row-separators: true; - styles ['view'] + + ColumnViewColumn col1 { + title: _("Name"); + factory: SignalListItemFactory{}; + } + + ColumnViewColumn col2 { + title: _("Size (in bytes)"); + factory: SignalListItemFactory {}; + } + + ColumnViewColumn col3 { + title: _("Date"); + factory: SignalListItemFactory {}; + } } } } diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index 098216d8f..3eabaa3bc 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -2,67 +2,57 @@ import Gtk from "gi://Gtk"; import Gio from "gi://Gio"; const column_view = workbench.builder.get_object("column_view"); +const col1 = workbench.builder.get_object("col1"); +const col2 = workbench.builder.get_object("col2"); +const col3 = workbench.builder.get_object("col3"); function createFirstCol() { - const factory = new Gtk.SignalListItemFactory(); - const columnViewColumn = new Gtk.ColumnViewColumn({ - factory, - }); - factory.connect("setup", (factory, listItem) => { + const factory = col1.factory; + factory.connect("setup", (factory, list_item) => { const label = new Gtk.Label({ - height_request: 50, margin_start: 12, margin_end: 12, }); - listItem.set_child(label); + list_item.set_child(label); }); - factory.connect("bind", (factory, listItem) => { - const labelWidget = listItem.get_child(); - const modelItem = listItem.get_item(); - labelWidget.label = modelItem.get_name(); + factory.connect("bind", (factory, list_item) => { + const label_widget = list_item.get_child(); + const model_item = list_item.get_item(); + label_widget.label = model_item.get_display_name(); }); - return columnViewColumn; } function createSecCol() { - const factory = new Gtk.SignalListItemFactory(); - const columnViewColumn = new Gtk.ColumnViewColumn({ - factory, - }); - factory.connect("setup", (factory, listItem) => { + const factory = col2.factory; + factory.connect("setup", (factory, list_item) => { const label = new Gtk.Label({ - height_request: 50, margin_start: 12, margin_end: 12, }); - listItem.set_child(label); + list_item.set_child(label); }); - factory.connect("bind", (factory, listItem) => { - const labelWidget = listItem.get_child(); - const modelItem = listItem.get_item(); - labelWidget.label = modelItem.get_size().toString(); + factory.connect("bind", (factory, list_item) => { + const label_widget = list_item.get_child(); + const model_item = list_item.get_item(); + label_widget.label = model_item.get_size().toString(); }); - return columnViewColumn; } function createThirdCol() { - const factory = new Gtk.SignalListItemFactory(); - const columnViewColumn = new Gtk.ColumnViewColumn({ - factory, - }); - factory.connect("setup", (factory, listItem) => { + const factory = col3.factory; + factory.connect("setup", (factory, list_item) => { const label = new Gtk.Label({ - height_request: 50, margin_start: 12, margin_end: 12, }); - listItem.set_child(label); + list_item.set_child(label); }); - factory.connect("bind", (factory, listItem) => { - const labelWidget = listItem.get_child(); - const modelItem = listItem.get_item(); + factory.connect("bind", (factory, list_item) => { + const label_widget = list_item.get_child(); + const model_item = list_item.get_item(); + const date = model_item.get_modification_date_time(); + label_widget.label = date.format("%F"); }); - return columnViewColumn; } //Model @@ -72,19 +62,19 @@ const dir = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path( const dir_model = new Gtk.DirectoryList({ file: dir, - attributes: "standard::*", + attributes: "standard::*,time:modified", }); const model = new Gtk.SingleSelection({ model: dir_model }); column_view.model = model; -const first_col = createFirstCol(); -const sec_col = createSecCol(); -const third_col = createThirdCol(); +createFirstCol(); +createSecCol(); +createThirdCol(); -column_view.append_column(first_col); -column_view.append_column(sec_col); -column_view.append_column(third_col); +column_view.append_column(col1); +column_view.append_column(col2); +column_view.append_column(col3); //View /*model.model.connect("items-changed", (list, position, removed, added) => { diff --git a/src/Library/demos/Column View/main.json b/src/Library/demos/Column View/main.json index 95b37b3e0..1c0c72913 100644 --- a/src/Library/demos/Column View/main.json +++ b/src/Library/demos/Column View/main.json @@ -1,5 +1,5 @@ { - "name": "ColumnView", + "name": "Column View", "category": "layout", "description": "Presents a large dynamic list of items using multiple columns with headers", "panels": ["ui", "preview"], From 99ae8521ec2dadcd233cd7e74e3a572a74d372d5 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 5 Aug 2023 03:58:46 +0530 Subject: [PATCH 06/13] Applied changes --- src/Library/demos/Column View/main.blp | 31 ++++++++++++++------------ src/Library/demos/Column View/main.js | 11 +++++---- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/Library/demos/Column View/main.blp b/src/Library/demos/Column View/main.blp index 40273433e..f3ce53f86 100644 --- a/src/Library/demos/Column View/main.blp +++ b/src/Library/demos/Column View/main.blp @@ -8,6 +8,7 @@ Adw.StatusPage { Adw.Clamp { maximum-size: 240; + Box { orientation: vertical; spacing: 18; @@ -17,23 +18,25 @@ Adw.StatusPage { uri: "https://docs.gtk.org/gtk4/class.ColumnView.html"; } - ColumnView column_view { - show-column-separators: true; - show-row-separators: true; + Frame { + ColumnView column_view { + show-column-separators: true; + show-row-separators: true; - ColumnViewColumn col1 { - title: _("Name"); - factory: SignalListItemFactory{}; - } + ColumnViewColumn col1 { + title: _("Name"); + factory: SignalListItemFactory{}; + } - ColumnViewColumn col2 { - title: _("Size (in bytes)"); - factory: SignalListItemFactory {}; - } + ColumnViewColumn col2 { + title: _("Size (in bytes)"); + factory: SignalListItemFactory {}; + } - ColumnViewColumn col3 { - title: _("Date"); - factory: SignalListItemFactory {}; + ColumnViewColumn col3 { + title: _("Date"); + factory: SignalListItemFactory {}; + } } } } diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index 3eabaa3bc..c3ac52013 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -62,7 +62,7 @@ const dir = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path( const dir_model = new Gtk.DirectoryList({ file: dir, - attributes: "standard::*,time:modified", + attributes: "standard::*,time::modified", }); const model = new Gtk.SingleSelection({ model: dir_model }); @@ -72,9 +72,12 @@ createFirstCol(); createSecCol(); createThirdCol(); -column_view.append_column(col1); -column_view.append_column(col2); -column_view.append_column(col3); +const sorter_of_colview = column_view.get_sorter(); + +const sort_model = new Gtk.SortListModel({ + model: dir_model, + sorter: sorter_of_colview, +}); //View /*model.model.connect("items-changed", (list, position, removed, added) => { From bf6ea43ce92cc3f1226bd4a25f805d4ece91e70d Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 5 Aug 2023 04:37:42 +0530 Subject: [PATCH 07/13] Progress --- src/Library/demos/Column View/main.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index c3ac52013..dd1c31545 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -60,25 +60,23 @@ const dir = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path( "Library/demos", ); -const dir_model = new Gtk.DirectoryList({ - file: dir, - attributes: "standard::*,time::modified", +const model = new Gtk.SingleSelection({ + model: new Gtk.SortListModel({ + model: new Gtk.DirectoryList({ + file: dir, + attributes: "standard::*,time::modified", + }), + sorter: column_view.sorter, + }), }); -const model = new Gtk.SingleSelection({ model: dir_model }); +column_view.sort_by_column(col1, "ascending"); column_view.model = model; createFirstCol(); createSecCol(); createThirdCol(); -const sorter_of_colview = column_view.get_sorter(); - -const sort_model = new Gtk.SortListModel({ - model: dir_model, - sorter: sorter_of_colview, -}); - //View /*model.model.connect("items-changed", (list, position, removed, added) => { console.log( From 99c0effa4469205dbd626781b678e4cf6963e54e Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 5 Aug 2023 05:38:29 +0530 Subject: [PATCH 08/13] Updated --- src/Library/demos/Column View/main.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index dd1c31545..b813d0749 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -1,5 +1,6 @@ import Gtk from "gi://Gtk"; import Gio from "gi://Gio"; +import GObject from "gi://GObject"; const column_view = workbench.builder.get_object("column_view"); const col1 = workbench.builder.get_object("col1"); @@ -70,7 +71,29 @@ const model = new Gtk.SingleSelection({ }), }); -column_view.sort_by_column(col1, "ascending"); +col1.sorter = new Gtk.StringSorter({ + expression: new Gtk.ClosureExpression( + GObject.TYPE_STRING, + (fileInfo) => fileInfo.get_display_name(), + null, + ), +}); + +col2.sorter = new Gtk.NumericSorter({ + expression: new Gtk.ClosureExpression( + GObject.TYPE_INT, + (fileInfo) => fileInfo.get_size(), + null, + ), +}); + +col3.sorter = new Gtk.NumericSorter({ + expression: new Gtk.ClosureExpression( + GObject.TYPE_INT, + (fileInfo) => fileInfo.get_modification_date_time(), + null, + ), +}); column_view.model = model; createFirstCol(); From 07b0621cae2a0286cb73d62a26aa430e476b1eb3 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 5 Aug 2023 20:41:45 +0530 Subject: [PATCH 09/13] Update --- src/Library/demos/Column View/main.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index b813d0749..851cb99f1 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -49,10 +49,18 @@ function createThirdCol() { list_item.set_child(label); }); factory.connect("bind", (factory, list_item) => { - const label_widget = list_item.get_child(); - const model_item = list_item.get_item(); - const date = model_item.get_modification_date_time(); - label_widget.label = date.format("%F"); + const info = list_item.item; + const mtime = info.get_modification_date_time(); + const date = new Date(mtime.to_unix() * 1000); + const now = new Date(); + + const options = {}; + if (date.getMonth() < now.getMonth() || date.getDay() < now.getDay()) + options.dateStyle = "long"; + else options.timeStyle = "short"; + + const label = list_item.child; + label.label = Intl.DateTimeFormat(undefined, options).format(date); }); } @@ -89,8 +97,8 @@ col2.sorter = new Gtk.NumericSorter({ col3.sorter = new Gtk.NumericSorter({ expression: new Gtk.ClosureExpression( - GObject.TYPE_INT, - (fileInfo) => fileInfo.get_modification_date_time(), + GObject.TYPE_INT64, + (fileInfo) => fileInfo.get_modification_date_time().to_unix(), null, ), }); From b63cf3b49a0f8385e74b5d58faf3549b854036c2 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 5 Aug 2023 21:56:07 +0530 Subject: [PATCH 10/13] Update --- src/Library/demos/Column View/main.blp | 103 ++++++++++++++++++------- 1 file changed, 75 insertions(+), 28 deletions(-) diff --git a/src/Library/demos/Column View/main.blp b/src/Library/demos/Column View/main.blp index f3ce53f86..4970cbc33 100644 --- a/src/Library/demos/Column View/main.blp +++ b/src/Library/demos/Column View/main.blp @@ -2,41 +2,88 @@ using Gtk 4.0; using Adw 1; Adw.StatusPage { - title: _("Column View"); - description: _("Presents a large dynamic list of items using multiple columns with headers"); - valign: start; + title: _("Launcher"); + description: _("Collect the arguments that are needed to open a File or URI"); Adw.Clamp { - maximum-size: 240; - + maximum-size: 640; Box { orientation: vertical; - spacing: 18; + spacing: 24; - LinkButton { - label: _("Documentation"); - uri: "https://docs.gtk.org/gtk4/class.ColumnView.html"; + Gtk.StackSwitcher { + stack: stack; + halign: center; } - Frame { - ColumnView column_view { - show-column-separators: true; - show-row-separators: true; - - ColumnViewColumn col1 { - title: _("Name"); - factory: SignalListItemFactory{}; - } - - ColumnViewColumn col2 { - title: _("Size (in bytes)"); - factory: SignalListItemFactory {}; - } - - ColumnViewColumn col3 { - title: _("Date"); - factory: SignalListItemFactory {}; - } + Gtk.Stack stack { + transition-type: crossfade; + vexpand: true; + + Gtk.StackPage { + name: "file_launcher"; + title: _("File Launcher"); + child: + Box { + orientation: vertical; + halign: center; + spacing: 24; + Box { + halign: center; + Button launch_file { + label: _("Launch"); + styles ["suggested-action", "pill"] + } + } + + Box { + styles ["linked"] + + Button file_details { + label: _("File Name"); + } + Button file_location { + label: _("Open Folder"); + } + } + + Button change_file { + label: _("Choose another file"); + } + + LinkButton { + label: _("API Reference"); + uri : "https://docs.gtk.org/gtk4/class.FileLauncher.html"; + } + }; + } + + Gtk.StackPage { + name: "uri_launcher"; + title: _("URI Launcher"); + child: + Box { + orientation: vertical; + halign: center; + spacing: 24; + Box { + halign: center; + Button uri_launch { + label: _("Launch"); + sensitive: false; + styles ["suggested-action", "pill"] + } + } + + Entry uri_details { + placeholder-text: _("Enter Uri"); + } + + LinkButton { + label: _("API Reference"); + uri : "https://docs.gtk.org/gtk4/class.UriLauncher.html"; + } + }; } } } From 297d7094ef635c3192640c8b898a9aa6c61b06e4 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Sat, 5 Aug 2023 21:57:08 +0530 Subject: [PATCH 11/13] Reverse --- src/Library/demos/Column View/main.blp | 103 +++++++------------------ 1 file changed, 28 insertions(+), 75 deletions(-) diff --git a/src/Library/demos/Column View/main.blp b/src/Library/demos/Column View/main.blp index 4970cbc33..f3ce53f86 100644 --- a/src/Library/demos/Column View/main.blp +++ b/src/Library/demos/Column View/main.blp @@ -2,88 +2,41 @@ using Gtk 4.0; using Adw 1; Adw.StatusPage { - title: _("Launcher"); - description: _("Collect the arguments that are needed to open a File or URI"); + title: _("Column View"); + description: _("Presents a large dynamic list of items using multiple columns with headers"); + valign: start; Adw.Clamp { - maximum-size: 640; + maximum-size: 240; + Box { orientation: vertical; - spacing: 24; + spacing: 18; - Gtk.StackSwitcher { - stack: stack; - halign: center; + LinkButton { + label: _("Documentation"); + uri: "https://docs.gtk.org/gtk4/class.ColumnView.html"; } - Gtk.Stack stack { - transition-type: crossfade; - vexpand: true; - - Gtk.StackPage { - name: "file_launcher"; - title: _("File Launcher"); - child: - Box { - orientation: vertical; - halign: center; - spacing: 24; - Box { - halign: center; - Button launch_file { - label: _("Launch"); - styles ["suggested-action", "pill"] - } - } - - Box { - styles ["linked"] - - Button file_details { - label: _("File Name"); - } - Button file_location { - label: _("Open Folder"); - } - } - - Button change_file { - label: _("Choose another file"); - } - - LinkButton { - label: _("API Reference"); - uri : "https://docs.gtk.org/gtk4/class.FileLauncher.html"; - } - }; - } - - Gtk.StackPage { - name: "uri_launcher"; - title: _("URI Launcher"); - child: - Box { - orientation: vertical; - halign: center; - spacing: 24; - Box { - halign: center; - Button uri_launch { - label: _("Launch"); - sensitive: false; - styles ["suggested-action", "pill"] - } - } - - Entry uri_details { - placeholder-text: _("Enter Uri"); - } - - LinkButton { - label: _("API Reference"); - uri : "https://docs.gtk.org/gtk4/class.UriLauncher.html"; - } - }; + Frame { + ColumnView column_view { + show-column-separators: true; + show-row-separators: true; + + ColumnViewColumn col1 { + title: _("Name"); + factory: SignalListItemFactory{}; + } + + ColumnViewColumn col2 { + title: _("Size (in bytes)"); + factory: SignalListItemFactory {}; + } + + ColumnViewColumn col3 { + title: _("Date"); + factory: SignalListItemFactory {}; + } } } } From 6eacdbe159b25a8f4a2e82034daf45aceb1247ce Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Tue, 8 Aug 2023 00:05:48 +0530 Subject: [PATCH 12/13] Applied Suggested Changes --- src/Library/demos/Column View/main.blp | 4 +- src/Library/demos/Column View/main.js | 146 +++++++++++-------------- 2 files changed, 66 insertions(+), 84 deletions(-) diff --git a/src/Library/demos/Column View/main.blp b/src/Library/demos/Column View/main.blp index f3ce53f86..b6ed143cc 100644 --- a/src/Library/demos/Column View/main.blp +++ b/src/Library/demos/Column View/main.blp @@ -11,7 +11,7 @@ Adw.StatusPage { Box { orientation: vertical; - spacing: 18; + spacing: 12; LinkButton { label: _("Documentation"); @@ -29,7 +29,7 @@ Adw.StatusPage { } ColumnViewColumn col2 { - title: _("Size (in bytes)"); + title: _("Size"); factory: SignalListItemFactory {}; } diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index 851cb99f1..08ec76b8b 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -7,76 +7,23 @@ const col1 = workbench.builder.get_object("col1"); const col2 = workbench.builder.get_object("col2"); const col3 = workbench.builder.get_object("col3"); -function createFirstCol() { - const factory = col1.factory; - factory.connect("setup", (factory, list_item) => { - const label = new Gtk.Label({ - margin_start: 12, - margin_end: 12, - }); - list_item.set_child(label); - }); - factory.connect("bind", (factory, list_item) => { - const label_widget = list_item.get_child(); - const model_item = list_item.get_item(); - label_widget.label = model_item.get_display_name(); - }); -} - -function createSecCol() { - const factory = col2.factory; - factory.connect("setup", (factory, list_item) => { - const label = new Gtk.Label({ - margin_start: 12, - margin_end: 12, - }); - list_item.set_child(label); - }); - factory.connect("bind", (factory, list_item) => { - const label_widget = list_item.get_child(); - const model_item = list_item.get_item(); - label_widget.label = model_item.get_size().toString(); - }); -} - -function createThirdCol() { - const factory = col3.factory; - factory.connect("setup", (factory, list_item) => { - const label = new Gtk.Label({ - margin_start: 12, - margin_end: 12, - }); - list_item.set_child(label); - }); - factory.connect("bind", (factory, list_item) => { - const info = list_item.item; - const mtime = info.get_modification_date_time(); - const date = new Date(mtime.to_unix() * 1000); - const now = new Date(); - - const options = {}; - if (date.getMonth() < now.getMonth() || date.getDay() < now.getDay()) - options.dateStyle = "long"; - else options.timeStyle = "short"; - - const label = list_item.child; - label.label = Intl.DateTimeFormat(undefined, options).format(date); - }); -} - //Model const dir = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path( "Library/demos", ); -const model = new Gtk.SingleSelection({ - model: new Gtk.SortListModel({ - model: new Gtk.DirectoryList({ - file: dir, - attributes: "standard::*,time::modified", - }), - sorter: column_view.sorter, - }), +const data_model = new Gtk.DirectoryList({ + file: dir, + attributes: "standard::*,time::modified", +}); + +const sort_model = new Gtk.SortListModel({ + model: data_model, + sorter: column_view.sorter, +}); + +column_view.model = new Gtk.SingleSelection({ + model: sort_model, }); col1.sorter = new Gtk.StringSorter({ @@ -97,27 +44,62 @@ col2.sorter = new Gtk.NumericSorter({ col3.sorter = new Gtk.NumericSorter({ expression: new Gtk.ClosureExpression( - GObject.TYPE_INT64, - (fileInfo) => fileInfo.get_modification_date_time().to_unix(), + GObject.TYPE_INT, + (fileInfo) => fileInfo.get_modification_date_time(), null, ), }); -column_view.model = model; -createFirstCol(); -createSecCol(); -createThirdCol(); - //View -/*model.model.connect("items-changed", (list, position, removed, added) => { - console.log( - `position: ${position}, Item removed? ${Boolean( - removed, - )}, Item added? ${Boolean(added)}`, - ); +//Column 1 +const factory_col1 = col1.factory; +factory_col1.connect("setup", (factory, list_item) => { + const label = new Gtk.Label({ + margin_start: 12, + margin_end: 12, + }); + list_item.set_child(label); +}); +factory_col1.connect("bind", (factory, list_item) => { + const label_widget = list_item.get_child(); + const model_item = list_item.get_item(); + label_widget.label = model_item.get_display_name(); }); -model.connect("selection-changed", () => { - const selected_item = model.get_selected(); - console.log(`Model item selected from view: ${model.model}`); -});*/ +//Column 2 +const factory_col2 = col2.factory; +factory_col2.connect("setup", (factory, list_item) => { + const label = new Gtk.Label({ + margin_start: 12, + margin_end: 12, + }); + list_item.set_child(label); +}); +factory_col2.connect("bind", (factory, list_item) => { + const label_widget = list_item.get_child(); + const model_item = list_item.get_item(); + const size = model_item.get_size(); + if (Math.floor(size / 1_000_000_000) > 0) + label_widget.label = `${(size / 1_000_000_000).toFixed(1)} GB`; + else if (Math.floor(size / 1_000_000) > 0) + label_widget.label = `${(size / 1_000_000).toFixed(1)} MB`; + else if (Math.floor(size / 1000) > 0) + label_widget.label = `${(size / 1000).toFixed(1)} kB`; + else label_widget.label = `${size / 1000} bytes`; +}); + +//Column 3 +const factory_col3 = col3.factory; +factory_col3.connect("setup", (factory, list_item) => { + const label = new Gtk.Label({ + margin_start: 12, + margin_end: 12, + }); + list_item.set_child(label); +}); +factory_col3.connect("bind", (factory, list_item) => { + const label_widget = list_item.get_child(); + const model_item = list_item.get_item(); + const date = model_item.get_modification_date_time(); + label_widget.label = date.format("%F"); +}); From 8dff295b3157c27f454afc49bc991f910c97df71 Mon Sep 17 00:00:00 2001 From: Sriyansh Shivam Date: Tue, 8 Aug 2023 00:09:19 +0530 Subject: [PATCH 13/13] Minor Change --- src/Library/demos/Column View/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Library/demos/Column View/main.js b/src/Library/demos/Column View/main.js index 08ec76b8b..32f3d9ebf 100644 --- a/src/Library/demos/Column View/main.js +++ b/src/Library/demos/Column View/main.js @@ -44,8 +44,8 @@ col2.sorter = new Gtk.NumericSorter({ col3.sorter = new Gtk.NumericSorter({ expression: new Gtk.ClosureExpression( - GObject.TYPE_INT, - (fileInfo) => fileInfo.get_modification_date_time(), + GObject.TYPE_INT64, + (fileInfo) => fileInfo.get_modification_date_time().to_unix(), null, ), });