[gnome-characters] Adjust to the latest mock
- From: Daiki Ueno <dueno src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-characters] Adjust to the latest mock
- Date: Sun, 15 Feb 2015 05:39:28 +0000 (UTC)
commit 16f1dbef8685e5d6a2bfff561544f30047a4fcc4
Author: Daiki Ueno <dueno src gnome org>
Date: Sun Feb 15 12:18:39 2015 +0900
Adjust to the latest mock
https://github.com/gnome-design-team/gnome-mockups/commit/bc8c9534
data/application.css | 20 +++---------
data/characterlist.ui | 83 +++++++++++++++++++++++++++++++++++++++++-------
data/mainwindow.ui | 34 ++++++++++++--------
data/menu.ui | 12 ++++++-
src/characterList.js | 13 ++++---
src/window.js | 17 ++++++++--
6 files changed, 128 insertions(+), 51 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 5f4fb3c..871857d 100644
--- a/data/application.css
+++ b/data/application.css
@@ -1,28 +1,18 @@
-.list-row.category-list-row {
- border-style: groove;
- border-width: 1pt;
- padding: 10px;
- background-color: @theme_bg_color;
- color: @theme_fg_color;
-}
-
-.list-row.category-list-row:selected,
-.list-row.category-list-row:selected:focus {
- background-color: @theme_selected_bg_color;
- color: @theme_selected_fg_color;
-}
-
.list-row.category-list-row .category-label {
padding: 10pt;
}
+.menu-title {
+ padding: 6pt;
+}
+
.banner {
color: @insensitive_fg_color;
}
.banner-label {
padding: 10pt;
- font-size: large;
+ font-size: x-large;
}
.character-list {
diff --git a/data/characterlist.ui b/data/characterlist.ui
index 6e48526..77117e8 100644
--- a/data/characterlist.ui
+++ b/data/characterlist.ui
@@ -4,49 +4,62 @@
<template class="Gjs_CharacterListView" parent="GtkStack">
<property name="visible">True</property>
<child>
- <object class="GtkGrid" id="search-banner-grid">
+ <object class="GtkGrid" id="unavailable-grid">
<property name="can_focus">False</property>
<property name="visible">True</property>
- <property name="orientation">horizontal</property>
+ <property name="orientation">vertical</property>
<property name="halign">center</property>
<property name="valign">center</property>
<style>
<class name="banner"/>
</style>
<child>
- <object class="GtkImage" id="search-banner-image">
+ <object class="GtkImage" id="unavailable-image">
<property name="can_focus">False</property>
<property name="visible">True</property>
- <property name="icon_name">edit-find-symbolic</property>
+ <property name="halign">center</property>
+ <property name="pixel_size">128</property>
+ <property name="icon_name">action-unavailable-symbolic</property>
</object>
</child>
<child>
- <object class="GtkLabel" id="search-banner-label">
+ <object class="GtkLabel" id="unavailable-label">
<property name="can_focus">False</property>
<property name="visible">True</property>
- <property name="label" translatable="yes">Type to Search</property>
+ <property name="halign">center</property>
+ <property name="label" translatable="yes">Search produced empty result</property>
<style>
<class name="banner-label"/>
</style>
</object>
</child>
+ <child>
+ <object class="GtkLabel" id="unavailable-hint">
+ <property name="can_focus">False</property>
+ <property name="visible">True</property>
+ <property name="halign">center</property>
+ <property name="label" translatable="yes">Try another criteria</property>
+ <style>
+ <class name="banner-hint"/>
+ </style>
+ </object>
+ </child>
</object>
<packing>
- <property name="name">search-banner</property>
+ <property name="name">unavailable</property>
</packing>
</child>
<child>
- <object class="GtkGrid" id="loading-banner-grid">
+ <object class="GtkGrid" id="loading-grid">
<property name="can_focus">False</property>
<property name="visible">True</property>
- <property name="orientation">horizontal</property>
<property name="halign">center</property>
<property name="valign">center</property>
<style>
<class name="banner"/>
</style>
<child>
- <object class="GtkSpinner" id="loading-banner-spinner">
+ <object class="GtkSpinner" id="loading-spinner">
<property name="can_focus">False</property>
<property name="visible">True</property>
<property name="width-request">128</property>
@@ -54,7 +67,7 @@
</object>
</child>
<child>
- <object class="GtkLabel" id="loading-banner-label">
+ <object class="GtkLabel" id="loading-label">
<property name="can_focus">False</property>
<property name="visible">True</property>
<property name="label" translatable="yes">Loading...</property>
@@ -65,7 +78,53 @@
</child>
</object>
<packing>
- <property name="name">loading-banner</property>
+ <property name="name">loading</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkGrid" id="empty-recent-grid">
+ <property name="can_focus">False</property>
+ <property name="visible">True</property>
+ <property name="orientation">vertical</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="banner"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="empty-recent-image">
+ <property name="can_focus">False</property>
+ <property name="visible">True</property>
+ <property name="halign">center</property>
+ <property name="pixel_size">128</property>
+ <property name="icon_name">characters-punctuation-symbolic</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel" id="empty-recent-label">
+ <property name="can_focus">False</property>
+ <property name="visible">True</property>
+ <property name="halign">center</property>
+ <property name="label" translatable="yes">No recent characters found</property>
+ <style>
+ <class name="banner-label"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel" id="empty-recent-hint">
+ <property name="can_focus">False</property>
+ <property name="visible">True</property>
+ <property name="halign">center</property>
+ <property name="label" translatable="yes">Characters will appear here if you use them.</property>
+ <style>
+ <class name="banner-hints"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="name">empty-recent</property>
</packing>
</child>
</template>
diff --git a/data/mainwindow.ui b/data/mainwindow.ui
index e935134..1cdd030 100644
--- a/data/mainwindow.ui
+++ b/data/mainwindow.ui
@@ -2,6 +2,7 @@
<interface>
<requires lib="gtk+" version="3.12"/>
<template class="Gjs_MainWindow" parent="GtkApplicationWindow">
+ <property name="height-request">600</property>
<child type="titlebar">
<object class="GtkHeaderBar" id="main-headerbar">
<property name="can_focus">False</property>
@@ -52,19 +53,7 @@
<property name="can_focus">False</property>
<property name="visible">True</property>
<property name="orientation">vertical</property>
- <child>
- <object class="GtkSearchBar" id="search-bar">
- <property name="visible">True</property>
- <property name="hexpand">True</property>
- <child>
- <object class="GtkSearchEntry" id="search-entry">
- <property name="can_focus">True</property>
- <property name="width-request">500</property>
- <property name="halign">center</property>
- </object>
- </child>
- </object>
- </child>
+ <property name="valign">fill</property>
<child>
<object class="GtkBox" id="main-hbox">
<property name="can_focus">False</property>
@@ -74,13 +63,32 @@
<object class="GtkGrid" id="sidebar-grid">
<property name="can_focus">False</property>
<property name="visible">True</property>
+ <property name="hexpand">False</property>
+ <property name="vexpand">True</property>
<property name="orientation">vertical</property>
<child>
+ <object class="GtkSearchBar" id="search-bar">
+ <property name="visible">True</property>
+ <property name="halign">fill</property>
+ <child>
+ <object class="GtkSearchEntry" id="search-entry">
+ <property name="can_focus">True</property>
+ <property name="halign">fill</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
<placeholder/>
</child>
</object>
</child>
<child>
+ <object class="GtkVSeparator">
+ <property name="visible">True</property>
+ </object>
+ </child>
+ <child>
<placeholder/>
</child>
</object>
diff --git a/data/menu.ui b/data/menu.ui
index d6f1f21..39811c2 100644
--- a/data/menu.ui
+++ b/data/menu.ui
@@ -4,11 +4,21 @@
<template class="Gjs_MenuPopover" parent="GtkPopover">
<property name="vexpand">True</property>
<child>
- <object class="GtkGrid" id="main-grid">
+ <object class="GtkGrid" id="menu-grid">
<property name="can_focus">False</property>
<property name="visible">True</property>
<property name="orientation">vertical</property>
<child>
+ <object class="GtkLabel" id="label1">
+ <property name="visible">True</property>
+ <property name="halign">center</property>
+ <property name="label" translatable="yes">Filter by font</property>
+ <style>
+ <class name="menu-title"/>
+ </style>
+ </object>
+ </child>
+ <child>
<object class="GtkSearchEntry" id="search-entry">
<property name="can_focus">True</property>
<property name="visible">True</property>
diff --git a/src/characterList.js b/src/characterList.js
index 4b7fa80..288e4bc 100644
--- a/src/characterList.js
+++ b/src/characterList.js
@@ -31,6 +31,7 @@ const Util = imports.util;
const BASELINE_OFFSET = 0.85;
const CELLS_PER_ROW = 5;
+const NUM_ROWS = 10;
const CELL_SIZE = 50;
function getCellSize(fontDescription) {
@@ -115,7 +116,7 @@ const CharacterListWidget = new Lang.Class({
},
vfunc_get_preferred_height_for_width: function(width) {
- let height = this._rows.length * getCellSize(this._fontDescription);
+ let height = Math.max(this._rows.length, NUM_ROWS) * getCellSize(this._fontDescription);
return [height, height];
},
@@ -207,7 +208,7 @@ const CharacterListView = new Lang.Class({
Name: 'CharacterListView',
Extends: Gtk.Stack,
Template: 'resource:///org/gnome/Characters/characterlist.ui',
- InternalChildren: ['loading-banner-spinner'],
+ InternalChildren: ['loading-spinner'],
Properties: {
'font': GObject.ParamSpec.string(
'font', '', '',
@@ -263,8 +264,8 @@ const CharacterListView = new Lang.Class({
this._spinnerTimeoutId =
GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1000,
Lang.bind(this, function () {
- this._loading_banner_spinner.start();
- this.visible_child_name = 'loading-banner';
+ this._loading_spinner.start();
+ this.visible_child_name = 'loading';
this.show_all();
}));
},
@@ -273,7 +274,7 @@ const CharacterListView = new Lang.Class({
if (this._spinnerTimeoutId > 0) {
GLib.source_remove(this._spinnerTimeoutId);
this._spinnerTimeoutId = 0;
- this._loading_banner_spinner.stop();
+ this._loading_spinner.stop();
}
let characters = [];
@@ -308,7 +309,7 @@ const CharacterListView = new Lang.Class({
this._characterList.setFontDescription(fontDescription);
this._characterList.setCharacters(characters);
if (characters.length == 0) {
- this.visible_child_name = 'search-banner';
+ this.visible_child_name = 'unavailable';
} else {
this.visible_child_name = 'character-list';
}
diff --git a/src/window.js b/src/window.js
index 080c452..299e192 100644
--- a/src/window.js
+++ b/src/window.js
@@ -95,8 +95,13 @@ const MainWindow = new Lang.Class({
this._menu_popover = new Menu.MenuPopover({});
this._menu_button.set_popover(this._menu_popover);
- this._categoryList = new CategoryList.CategoryListWidget();
- this._sidebar_grid.add(this._categoryList);
+ this._categoryList = new CategoryList.CategoryListWidget({ vexpand: true });
+ let scroll = new Gtk.ScrolledWindow({
+ hscrollbar_policy: Gtk.PolicyType.NEVER,
+ hexpand: false,
+ });
+ scroll.add(this._categoryList);
+ this._sidebar_grid.add(scroll);
this._mainView = new MainView();
this._main_hbox.pack_start(this._mainView, true, true, 0);
@@ -281,8 +286,12 @@ const MainView = new Lang.Class({
this.visible_child.setFilterFont(null);
if (name == 'recent') {
- this.visible_child.setCharacters(this._recentCharacters);
- this.visible_child.updateCharacterList();
+ if (this._recentCharacters.length == 0)
+ this.visible_child.visible_child_name = 'empty-recent';
+ else {
+ this.visible_child.setCharacters(this._recentCharacters);
+ this.visible_child.updateCharacterList();
+ }
} else {
let category = null;
for (let index in CategoryList.Category) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
