[gnome-characters/bilelmoussaoui/gtk4: 21/27] refactor CategoryListView to a proper Sidebar
- From: Bilal Elmoussaoui <bilelmoussaoui src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-characters/bilelmoussaoui/gtk4: 21/27] refactor CategoryListView to a proper Sidebar
- Date: Sun, 21 Nov 2021 14:35:44 +0000 (UTC)
commit 36d786244d391acadf6ee1d6fd3bf882c28619e7
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date: Sat Nov 20 18:00:35 2021 +0100
refactor CategoryListView to a proper Sidebar
data/mainwindow.ui | 11 +++-
data/org.gnome.Characters.data.gresource.xml | 1 +
data/sidebar.ui | 51 +++++++++++++++
src/categoryList.js | 95 ++++++++++------------------
src/window.js | 30 ++++-----
5 files changed, 105 insertions(+), 83 deletions(-)
---
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
index 021dc9e..8d39dc1 100644
--- a/data/mainwindow.ui
+++ b/data/mainwindow.ui
@@ -44,7 +44,7 @@
</object>
</child>
<child>
- <object class="GtkBox" id="sidebar">
+ <object class="GtkBox">
<property name="hexpand">False</property>
<property name="vexpand">True</property>
<property name="orientation">vertical</property>
@@ -58,6 +58,15 @@
</child>
</object>
</child>
+ <child>
+ <object class="GtkScrolledWindow">
+ <property name="hexpand">false</property>
+ <property name="hscrollbar-policy">never</property>
+ <child>
+ <object class="Gjs_Sidebar" id="sidebar" />
+ </child>
+ </object>
+ </child>
</object>
</child>
</object>
diff --git a/data/org.gnome.Characters.data.gresource.xml b/data/org.gnome.Characters.data.gresource.xml
index bf3c978..5564d15 100644
--- a/data/org.gnome.Characters.data.gresource.xml
+++ b/data/org.gnome.Characters.data.gresource.xml
@@ -7,6 +7,7 @@
<file preprocess="xml-stripblanks">characterlist.ui</file>
<file preprocess="xml-stripblanks">shortcuts.ui</file>
<file preprocess="xml-stripblanks">menu.ui</file>
+ <file preprocess="xml-stripblanks">sidebar.ui</file>
<file>style.css</file>
</gresource>
<gresource prefix="/org/gnome/Characters/icons/scalable/categories">
diff --git a/data/sidebar.ui b/data/sidebar.ui
new file mode 100644
index 0000000..a3cf106
--- /dev/null
+++ b/data/sidebar.ui
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <template class="Gjs_Sidebar" parent="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="vexpand">True</property>
+ <property name="hexpand">True</property>
+ <child>
+ <object class="Gjs_RecentCategoryListWidget" id="recentSection" />
+ </child>
+ <child>
+ <object class="GtkSeparator">
+ <property name="orientation">horizontal</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Emojis</property>
+ <property name="halign">start</property>
+ <property name="margin-top">12</property>
+ <property name="margin-start">12</property>
+ <property name="margin-bottom">12</property>
+ <property name="margin-end">12</property>
+ <style>
+ <class name="heading" />
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="Gjs_EmojiCategoryListWidget" id="emojisSection" />
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Letters & Symbols</property>
+ <property name="halign">start</property>
+ <property name="margin-top">12</property>
+ <property name="margin-start">12</property>
+ <property name="margin-bottom">12</property>
+ <property name="margin-end">12</property>
+ <style>
+ <class name="heading" />
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="Gjs_LetterCategoryListWidget" id="lettersSection" />
+ </child>
+ <style>
+ <class name="categories-list" />
+ </style>
+ </template>
+</interface>
diff --git a/src/categoryList.js b/src/categoryList.js
index 12ba4cd..9ce4ecc 100644
--- a/src/categoryList.js
+++ b/src/categoryList.js
@@ -172,7 +172,6 @@ const CategoryListWidget = GObject.registerClass({
this.list = Gtk.ListBox.new();
this._categories = categories;
- this.populateCategoryList();
this._lastSelectedRow = null;
this._selectedCategory = null;
@@ -193,9 +192,6 @@ const CategoryListWidget = GObject.registerClass({
this.set_child(this.list);
}
- populateCategoryList() {
- }
-
getCategoryList() {
return this._categories;
}
@@ -224,6 +220,11 @@ const CategoryListWidget = GObject.registerClass({
const LetterCategoryListWidget = GObject.registerClass({
}, class LetterCategoryListWidget extends CategoryListWidget {
+ _init() {
+ super._init(LetterCategoryList);
+ this.populateCategoryList();
+ }
+
_finishListEngines(sources, bus, res) {
try {
let engines = bus.list_engines_async_finish(res);
@@ -346,8 +347,8 @@ const LetterCategoryListWidget = GObject.registerClass({
const EmojiCategoryListWidget = GObject.registerClass({
}, class EmojiCategoryListWidget extends CategoryListWidget {
- _init(categories) {
- super._init(categories);
+ _init() {
+ super._init(EmojiCategoryList);
}
getCategory(name) {
@@ -358,14 +359,14 @@ const EmojiCategoryListWidget = GObject.registerClass({
const RecentCategoryListWidget = GObject.registerClass({
}, class RecentCategoryListWidget extends CategoryListWidget {
- _init(categories) {
- super._init(categories);
+ _init() {
this.recentCategory = {
name: 'recent',
category: Gc.Category.NONE,
title: N_('Recently Used'),
icon_name: 'document-open-recent-symbolic',
};
+ super._init([this.recentCategory]);
this.recentRow = new CategoryListRowWidget(this.recentCategory);
this.recentRow.add_css_class('category');
this.recentRow.add_css_class('recent-category');
@@ -377,77 +378,45 @@ const RecentCategoryListWidget = GObject.registerClass({
}
});
-var CategoryListView = GObject.registerClass({
-}, class CategoryListView extends Gtk.Box {
+var Sidebar = GObject.registerClass({
+ Template: 'resource:///org/gnome/Characters/sidebar.ui',
+ InternalChildren: [
+ 'recentSection', 'emojisSection', 'lettersSection'
+ ],
+}, class Sidebar extends Gtk.Box {
_init() {
+ super._init();
this._lastSelectedList = null;
- super._init({
- hexpand: true,
- vexpand: true,
- orientation: Gtk.Orientation.VERTICAL,
- });
- this.add_css_class('categories-list');
- this._recentCategoryList = new RecentCategoryListWidget();
- this._recentCategoryList.list.connect('row-selected', (list, row) => {
- this._letterCategoryList.unselect();
- this._emojiCategoryList.unselect();
- this._lastSelectedList = this._recentCategoryList;
+ this._recentSection.list.connect('row-selected', (list, row) => {
+ this._lettersSection.unselect();
+ this._emojisSection.unselect();
+ this._lastSelectedList = this._recentSection;
list.select_row(row);
});
- this.append(this._recentCategoryList)
- this.append(new Gtk.Separator({orientation: Gtk.Orientation.HORIZONTAL}));
-
- let emojis_label = new Gtk.Label ({
- label: MainCategories[0].title,
- halign: Gtk.Align.START,
- margin_top: 12,
- margin_start: 12,
- margin_bottom: 12,
- margin_end: 12,
- });
- emojis_label.add_css_class("heading");
- this.append(emojis_label);
-
- this._emojiCategoryList = new EmojiCategoryListWidget(EmojiCategoryList);
- this._emojiCategoryList.list.connect('row-selected', (list, row) => {
- this._letterCategoryList.unselect();
- this._recentCategoryList.unselect();
- this._lastSelectedList = this._emojiCategoryList;
+ this._emojisSection.list.connect('row-selected', (list, row) => {
+ this._recentSection.unselect();
+ this._lettersSection.unselect();
+ this._lastSelectedList = this._emojisSection;
list.select_row(row);
});
- this.append(this._emojiCategoryList);
-
- let letters_label = new Gtk.Label ({
- label: MainCategories[1].title,
- halign: Gtk.Align.START,
- margin_top: 12,
- margin_start: 12,
- margin_bottom: 12,
- margin_end: 12,
- });
- letters_label.add_css_class("heading");
- this.append(letters_label);
-
- this._letterCategoryList = new LetterCategoryListWidget(LetterCategoryList);
- this._letterCategoryList.list.connect('row-selected', (list, row) => {
- this._emojiCategoryList.unselect();
- this._recentCategoryList.unselect();
- this._lastSelectedList = this._letterCategoryList;
+
+ this._lettersSection.list.connect('row-selected', (list, row) => {
+ this._emojisSection.unselect();
+ this._recentSection.unselect();
+ this._lastSelectedList = this._lettersSection;
list.select_row(row);
});
- this.append(this._letterCategoryList);
-
}
getCategoryByName(name) {
switch (name) {
case 'emojis':
- return this._emojiCategoryList
+ return this._emojisSection
case 'recent':
- return this._recentCategoryList
+ return this._recentSection
default:
- return this._letterCategoryList
+ return this._lettersSection
}
}
diff --git a/src/window.js b/src/window.js
index e2a088f..8afe14b 100644
--- a/src/window.js
+++ b/src/window.js
@@ -26,7 +26,7 @@
const {Adw, Gio, GLib, GObject, Gtk } = imports.gi;
-const {CategoryListView, MainCategories} = imports.categoryList;
+const {Sidebar, MainCategories} = imports.categoryList;
const {CharacterDialog} = imports.characterDialog;
const {CharacterListView, FontFilter, RecentCharacterListView} = imports.characterList;
const {MenuPopover} = imports.menu;
@@ -99,15 +99,7 @@ var MainWindow = GObject.registerClass({
this._menu_popover = new MenuPopover();
this._menu_button.set_popover(this._menu_popover);
- this._categoryListView = new CategoryListView();
- let scroll = new Gtk.ScrolledWindow({
- hscrollbar_policy: Gtk.PolicyType.NEVER,
- hexpand: false,
- });
- scroll.set_child(this._categoryListView);
- this._sidebar.append(scroll);
-
- this._mainView = new MainView(this._categoryListView);
+ this._mainView = new MainView(this._sidebar);
this._container.append(this._mainView);
@@ -135,9 +127,9 @@ var MainWindow = GObject.registerClass({
_selectFirstSubcategory() {
let categoryList;
if (this._mainView.recentCharacters.length !== 0) {
- categoryList = this._categoryListView.getCategoryByName('recent').list;
+ categoryList = this._sidebar.getCategoryByName('recent').list;
} else {
- categoryList = this._categoryListView.getCategoryByName('emojis').list;
+ categoryList = this._sidebar.getCategoryByName('emojis').list;
}
categoryList.select_row(categoryList.get_row_at_index(0));
}
@@ -153,11 +145,11 @@ var MainWindow = GObject.registerClass({
this._searchActive = v;
if (this._searchActive) {
- let categoryList = this._categoryListView.selectedList.list;
+ let categoryList = this._sidebar.selectedList.list;
categoryList.unselect_all();
this._updateTitle(_("Search Result"));
} else {
- this._categoryListView.restorePreviousSelection();
+ this._sidebar.restorePreviousSelection();
}
this.notify('search-active');
@@ -227,7 +219,7 @@ var MainWindow = GObject.registerClass({
} else {
categoryName = "letters";
}
- let categoryList = this._categoryListView.getCategoryByName(categoryName);
+ let categoryList = this._sidebar.getCategoryByName(categoryName);
let category = categoryList.getCategory(name);
if (category) {
this._mainView.setPage(category);
@@ -289,7 +281,7 @@ const MainView = GObject.registerClass({
this._fontFilter.setFilterFont(this._filterFontFamily);
}
- _init(categoryView) {
+ _init(sidebar) {
super._init({
hexpand: true, vexpand: true,
transition_type: Gtk.StackTransitionType.CROSSFADE
@@ -299,7 +291,7 @@ const MainView = GObject.registerClass({
this._filterFontFamily = null;
this._characterLists = {};
this._recentCharacterLists = {};
- this._categoryListView = categoryView;
+ this._sidebar = sidebar;
let characterList;
let recentBox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
@@ -307,7 +299,7 @@ const MainView = GObject.registerClass({
for (let i in MainCategories) {
let category = MainCategories[i];
- let categoryList = this._categoryListView.getCategoryByName(category.name);
+ let categoryList = this._sidebar.getCategoryByName(category.name);
let subcategories = categoryList.getCategoryList();
for (let j in subcategories) {
let subcategory = subcategories[j];
@@ -387,7 +379,7 @@ const MainView = GObject.registerClass({
if (this.recentCharacters.length === 0)
this.visible_child_name = 'empty-recent';
else {
- let categories = this._categoryListView.getCategoryList();
+ let categories = this._sidebar.getCategoryList();
for (let i in categories) {
let category = categories[i];
let characterList = this._recentCharacterLists[category.name];
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
