[gnome-characters/bilelmoussaoui/ui-cleanup: 7/14] sidebar: remove the use of a sub-categories for now
- From: Christopher Davis <christopherdavis src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-characters/bilelmoussaoui/ui-cleanup: 7/14] sidebar: remove the use of a sub-categories for now
- Date: Fri, 12 Feb 2021 02:57:03 +0000 (UTC)
commit 1c52e32b393d99c83c1c99aa8469fadb4e6afc9f
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date: Fri Feb 12 00:23:52 2021 +0100
sidebar: remove the use of a sub-categories for now
until we switch to gtk4 to be able to do the correctly
data/application.css | 11 +++-
data/mainwindow.ui | 29 +++++++++--
src/categoryList.js | 143 +++++++++++++++++++++------------------------------
src/characterList.js | 2 +-
src/window.js | 68 ++++++++----------------
5 files changed, 118 insertions(+), 135 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 1be44dc..465fa14 100644
--- a/data/application.css
+++ b/data/application.css
@@ -1,7 +1,15 @@
-.categories {
+.categories-list, .categories-list list {
background-color: shade(@theme_bg_color, 0.99);
}
+.category-title {
+ padding-top:8px;
+ padding-left: 8px;
+ padding-bottom:8px;
+ font-weight: 600;
+ font-size:1.1rem;
+}
+
.category {
padding: 15px;
padding-right: 30px;
@@ -11,6 +19,7 @@
padding-right: 10px;
}
+
Gjs_MenuPopover {
padding: 0;
}
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
index ed32ac3..45edc60 100644
--- a/data/mainwindow.ui
+++ b/data/mainwindow.ui
@@ -4,12 +4,14 @@
<template class="Gjs_MainWindow" parent="HdyApplicationWindow">
<property name="height-request">660</property>
<child>
- <object class="HdyLeaflet">
+ <object class="HdyLeaflet" id="leaflet">
<property name="visible">True</property>
+ <property name="can-swipe-back">True</property>
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="visible">True</property>
+ <property name="width-request">280</property>
<child>
<object class="HdyHeaderBar" id="sidebar-headerbar">
<property name="visible">True</property>
@@ -55,18 +57,38 @@
</object>
</child>
<child>
- <object class="HdyWindowHandle" id="header-separator">
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
<property name="visible">True</property>
+ <child>
+ <object class="HdyWindowHandle" id="header-separator">
+ <property name="visible">True</property>
+ <child>
+ <object class="GtkSeparator">
+ <property name="visible">True</property>
+ <property name="orientation">vertical</property>
+ <style>
+ <class name="sidebar"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
<child>
<object class="GtkSeparator">
<property name="visible">True</property>
+ <property name="can_focus">False</property>
<property name="orientation">vertical</property>
+ <property name="vexpand">True</property>
<style>
<class name="sidebar"/>
</style>
</object>
</child>
</object>
+ <packing>
+ <property name="navigatable">False</property>
+ </packing>
</child>
<child>
<object class="GtkBox" id="container">
@@ -81,7 +103,7 @@
<child>
<object class="GtkButton" id="back-button">
<property name="can_focus">True</property>
- <property name="visible">False</property>
+ <property name="visible" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create" />
<style>
<class name="image-button"/>
</style>
@@ -136,5 +158,4 @@
<headerbar name="main-headerbar"/>
</headerbars>
</object>
-
</interface>
diff --git a/src/categoryList.js b/src/categoryList.js
index ccd9b5f..a1348e1 100644
--- a/src/categoryList.js
+++ b/src/categoryList.js
@@ -30,14 +30,12 @@ const CategoryList = [
category: Gc.Category.EMOJI,
title: N_('Emojis'),
icon_name: 'characters-emoji-smileys',
- action_name: 'category'
},
{
name: 'letters',
category: Gc.Category.LETTER,
title: N_('Letters & Symbols'),
icon_name: 'characters-latin-symbolic',
- action_name: 'category'
}
];
@@ -47,49 +45,42 @@ const LetterCategoryList = [
category: Gc.Category.LETTER_PUNCTUATION,
title: N_('Punctuation'),
icon_name: 'characters-punctuation-symbolic',
- action_name: 'subcategory'
},
{
name: 'arrow',
category: Gc.Category.LETTER_ARROW,
title: N_('Arrows'),
icon_name: 'characters-arrow-symbolic',
- action_name: 'subcategory'
},
{
name: 'bullet',
category: Gc.Category.LETTER_BULLET,
title: N_('Bullets'),
icon_name: 'characters-bullet-symbolic',
- action_name: 'subcategory'
},
{
name: 'picture',
category: Gc.Category.LETTER_PICTURE,
title: N_('Pictures'),
icon_name: 'characters-picture-symbolic',
- action_name: 'subcategory'
},
{
name: 'currency',
category: Gc.Category.LETTER_CURRENCY,
title: N_('Currencies'),
icon_name: 'characters-currency-symbolic',
- action_name: 'subcategory'
},
{
name: 'math',
category: Gc.Category.LETTER_MATH,
title: N_('Math'),
icon_name: 'characters-math-symbolic',
- action_name: 'subcategory'
},
{
name: 'letters',
category: Gc.Category.LETTER_LATIN,
title: N_('Letters'),
icon_name: 'characters-latin-symbolic',
- action_name: 'subcategory'
}
];
@@ -99,56 +90,48 @@ const EmojiCategoryList = [
category: Gc.Category.EMOJI_SMILEYS,
title: N_('Smileys & People'),
icon_name: 'characters-emoji-smileys',
- action_name: 'subcategory'
},
{
name: 'emoji-animals',
category: Gc.Category.EMOJI_ANIMALS,
title: N_('Animals & Nature'),
icon_name: 'characters-emoji-animals',
- action_name: 'subcategory'
},
{
name: 'emoji-food',
category: Gc.Category.EMOJI_FOOD,
title: N_('Food & Drink'),
icon_name: 'characters-emoji-food',
- action_name: 'subcategory'
},
{
name: 'emoji-activities',
category: Gc.Category.EMOJI_ACTIVITIES,
title: N_('Activities'),
icon_name: 'characters-emoji-activities',
- action_name: 'subcategory'
},
{
name: 'emoji-travel',
category: Gc.Category.EMOJI_TRAVEL,
title: N_('Travel & Places'),
icon_name: 'characters-emoji-travel',
- action_name: 'subcategory'
},
{
name: 'emoji-objects',
category: Gc.Category.EMOJI_OBJECTS,
title: N_('Objects'),
icon_name: 'characters-emoji-objects',
- action_name: 'subcategory'
},
{
name: 'emoji-symbols',
category: Gc.Category.EMOJI_SYMBOLS,
title: N_('Symbols'),
icon_name: 'characters-emoji-symbols',
- action_name: 'subcategory'
},
{
name: 'emoji-flags',
category: Gc.Category.EMOJI_FLAGS,
title: N_('Flags'),
icon_name: 'characters-emoji-flags',
- action_name: 'subcategory'
}
];
@@ -175,12 +158,12 @@ const CategoryListRowWidget = GObject.registerClass({
label.get_style_context().add_class('category-label');
hbox.pack_start(label, true, true, 0);
- if (category.secondary_icon_name) {
- let pixbuf = Util.loadIcon(category.secondary_icon_name, 16);
- let image = Gtk.Image.new_from_pixbuf(pixbuf);
- image.get_style_context().add_class('category-icon');
- hbox.pack_end(image, false, false, 2);
- }
+ }
+
+ select() {
+ let toplevel = this.get_toplevel();
+ let action = toplevel.lookup_action('category');
+ action.activate(new GLib.Variant('s', this.category.name));
}
});
@@ -191,7 +174,6 @@ const CategoryListWidget = GObject.registerClass({
params = Params.fill(params, {});
super._init(params);
- this.get_style_context().add_class('categories');
this._categoryList = filtered.categoryList;
this.populateCategoryList();
@@ -207,19 +189,9 @@ const CategoryListWidget = GObject.registerClass({
vfunc_row_selected(row) {
if (row != null && row.selectable) {
- this._lastSelectedRow = row;
- let toplevel = row.get_toplevel();
- let action = toplevel.lookup_action(row.category.action_name);
- action.activate(new GLib.Variant('s', row.category.name));
- }
- }
-
- restorePreviousSelection() {
- if (this._lastSelectedRow !== null) {
- this.select_row(this._lastSelectedRow);
+ row.select();
}
}
-
populateCategoryList() {
}
@@ -364,77 +336,82 @@ const EmojiCategoryListWidget = GObject.registerClass({
_init(params) {
params = Params.fill(params, {});
super._init(params);
-
- let category;
- let rowWidget;
-
- category = {
- name: 'recent',
- category: Gc.Category.NONE,
- title: N_('Recently Used'),
- icon_name: 'document-open-recent-symbolic',
- action_name: 'subcategory'
- };
- rowWidget = new CategoryListRowWidget({}, category);
- rowWidget.get_style_context().add_class('category');
- this.prepend(rowWidget);
- this._recentCategory = category;
-
- category = {
- name: 'letters',
- category: Gc.Category.NONE,
- title: N_('Letters & Symbols'),
- icon_name: 'characters-latin-symbolic',
- secondary_icon_name: 'go-next-symbolic',
- action_name: 'category',
- };
- rowWidget = new CategoryListRowWidget({}, category);
- rowWidget.get_style_context().add_class('category');
- let separator = new Gtk.Separator();
- let separatorRowWidget = new Gtk.ListBoxRow({ selectable: false });
- separatorRowWidget.add(separator);
- this.add(separatorRowWidget);
- this.add(rowWidget);
}
getCategory(name) {
- if (name == 'recent')
- return this._recentCategory;
return super.getCategory(name);
}
});
var CategoryListView = GObject.registerClass({
-}, class CategoryListView extends Gtk.Stack {
+}, class CategoryListView extends Gtk.Box {
_init(params) {
params = Params.fill(params, {
hexpand: true, vexpand: true,
- transition_type: Gtk.StackTransitionType.SLIDE_RIGHT
+ orientation: Gtk.Orientation.VERTICAL,
});
super._init(params);
+ this.get_style_context().add_class('categories-list');
- let emojiCategoryList = new EmojiCategoryListWidget({
+ let category = {
+ name: 'recent',
+ category: Gc.Category.NONE,
+ title: N_('Recently Used'),
+ icon_name: 'document-open-recent-symbolic',
+ };
+ let recentRow = new CategoryListRowWidget({}, category);
+ recentRow.get_style_context().add_class('category');
+ this.add(recentRow);
+ this.add(new Gtk.Separator({orientation: Gtk.Orientation.HORIZONTAL}));
+
+ let emojis_label = new Gtk.Label ({
+ label: CategoryList[0].title,
+ halign: Gtk.Align.START,
+ });
+ emojis_label.get_style_context().add_class("category-title");
+ this.add(emojis_label);
+
+ this._emojiCategoryList = new EmojiCategoryListWidget({
categoryList: EmojiCategoryList
});
- this.add_named(emojiCategoryList, 'emojis');
+ this._emojiCategoryList.connect('row-selected', (list, row) => {
+ let selected = this._letterCategoryList.get_selected_row();
+ if (selected)
+ this._letterCategoryList.unselect_row(selected);
- let letterCategoryList = new LetterCategoryListWidget({
- categoryList: LetterCategoryList
+ recentRow.get_style_context().remove_class('selected');
+ list.select_row(row);
});
- this.add_named(letterCategoryList, 'letters');
+ this.add(this._emojiCategoryList);
- this.set_visible_child_name('emojis');
+ let letters_label = new Gtk.Label ({
+ label: CategoryList[1].title,
+ halign: Gtk.Align.START,
+ });
+ letters_label.get_style_context().add_class("category-title");
- this._categoryList = CategoryList.slice();
+ this.add(letters_label);
+ this._letterCategoryList = new LetterCategoryListWidget({
+ categoryList: LetterCategoryList
+ });
+ this._letterCategoryList.connect('row-selected', (list, row) => {
+ let selected = this._emojiCategoryList.get_selected_row();
+ if (selected)
+ this._emojiCategoryList.unselect_row(selected);
+ recentRow.get_style_context().remove_class('selected');
+ list.select_row(row);
+ });
+ this.add(this._letterCategoryList);
- this.connect('notify::visible-child-name', () => this._ensureTransitionType());
+ this._categoryList = CategoryList.slice();
}
- _ensureTransitionType() {
- if (this.get_visible_child_name() == 'emojis') {
- this.transition_type = Gtk.StackTransitionType.SLIDE_RIGHT;
- } else {
- this.transition_type = Gtk.StackTransitionType.SLIDE_LEFT;
+ getCategoryByName(name) {
+ switch (name) {
+ case 'emojis':
+ return this._emojiCategoryList
+ default:
+ return this._letterCategoryList
}
}
diff --git a/src/characterList.js b/src/characterList.js
index 2147078..123ab22 100644
--- a/src/characterList.js
+++ b/src/characterList.js
@@ -27,7 +27,7 @@ const Util = imports.util;
const BASELINE_OFFSET = 0.85;
const CELLS_PER_ROW = 5;
const NUM_ROWS = 5;
-const NUM_COLUMNS = 5;
+const NUM_COLUMNS = 3;
const CELL_SIZE = 50;
function getCellSize(fontDescription) {
diff --git a/src/window.js b/src/window.js
index 865cdba..e8767ad 100644
--- a/src/window.js
+++ b/src/window.js
@@ -38,9 +38,12 @@ const Util = imports.util;
var MainWindow = GObject.registerClass({
Template: 'resource:///org/gnome/Characters/mainwindow.ui',
- InternalChildren: ['main-headerbar', 'search-active-button',
- 'search-bar', 'search-entry', 'back-button',
- 'menu-button', 'container', 'sidebar'],
+ InternalChildren: [
+ 'main-headerbar', 'search-active-button',
+ 'search-bar', 'search-entry', 'back-button',
+ 'menu-button', 'container', 'sidebar',
+ 'leaflet'
+ ],
Properties: {
'search-active': GObject.ParamSpec.boolean(
'search-active', '', '',
@@ -68,10 +71,6 @@ var MainWindow = GObject.registerClass({
{ name: 'category',
activate: this._category,
parameter_type: new GLib.VariantType('s'),
- state: new GLib.Variant('s', 'emojis') },
- { name: 'subcategory',
- activate: this._subcategory,
- parameter_type: new GLib.VariantType('s'),
state: new GLib.Variant('s', 'emoji-smileys') },
{ name: 'character',
activate: this._character,
@@ -94,13 +93,8 @@ var MainWindow = GObject.registerClass({
this._search_entry.connect('search-changed', (entry) => this._handleSearchChanged(entry));
this._back_button.connect('clicked', () => {
- let action = this.lookup_action('category');
- action.activate(new GLib.Variant('s', 'emojis'));
- });
- this._back_button.bind_property('visible',
- this._search_active_button, 'visible',
- GObject.BindingFlags.SYNC_CREATE |
- GObject.BindingFlags.INVERT_BOOLEAN);
+ this._leaflet.navigate(Handy.NavigationDirection.BACK);
+ });
this._menu_popover = new Menu.MenuPopover({});
this._menu_button.set_popover(this._menu_popover);
@@ -134,13 +128,14 @@ var MainWindow = GObject.registerClass({
// Select the first subcategory which contains at least one character.
_selectFirstSubcategory() {
- let categoryList = this._categoryListView.get_visible_child();
+ /*let categoryList = this._categoryListView.get_visible_child();
let index = 0;
let row = categoryList.get_row_at_index(index);
if (row.category.name == 'recent' &&
this._mainView.recentCharacters.length == 0)
index++;
categoryList.select_row(categoryList.get_row_at_index(index));
+ */
}
get search_active() {
@@ -153,14 +148,14 @@ var MainWindow = GObject.registerClass({
this._searchActive = v;
- if (this._searchActive) {
+ /*if (this._searchActive) {
let categoryList = this._categoryListView.get_visible_child();
categoryList.unselect_all();
this._updateTitle(_("Search Result"));
} else {
let categoryList = this._categoryListView.get_visible_child();
categoryList.restorePreviousSelection();
- }
+ }*/
this.notify('search-active');
}
@@ -224,42 +219,23 @@ var MainWindow = GObject.registerClass({
this.search_active = false;
let [name, length] = v.get_string();
-
- this._categoryListView.set_visible_child_name(name);
- let categoryList = this._categoryListView.get_visible_child();
- if (categoryList == null)
- return;
-
- this._selectFirstSubcategory();
- let category = categoryList.get_selected_row().category;
-
- if (name == 'emojis') {
- this._back_button.hide();
- } else {
- this._back_button.show();
+ let categoryName;
+ if(name.startsWith("emoji")) {
+ categoryName = "emojis";
+ } else {
+ categoryName = "letters";
}
-
- Util.assertNotEqual(category, null);
- this._mainView.setPage(category);
- this._updateTitle(category.title);
- }
-
- _subcategory(action, v) {
- this.search_active = false;
-
- let [name, length] = v.get_string();
-
- let categoryList = this._categoryListView.get_visible_child();
- if (categoryList == null)
- return;
-
+ let categoryList = this._categoryListView.getCategoryByName(categoryName);
+
let category = categoryList.getCategory(name);
if (category) {
this._mainView.setPage(category);
this._updateTitle(category.title);
+ this._leaflet.navigate(Handy.NavigationDirection.FORWARD);
}
}
+
_character(action, v) {
const [uc, length] = v.get_string();
this._mainView.addToRecent(uc);
@@ -334,7 +310,7 @@ const MainView = GObject.registerClass({
for (let i in categories) {
let category = categories[i];
- let categoryList = this._categoryListView.get_child_by_name(category.name);
+ let categoryList = this._categoryListView.getCategoryByName(category.name);
let subcategories = categoryList.getCategoryList();
for (let j in subcategories) {
let subcategory = subcategories[j];
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
