[gnome-clocks/bilelmoussaoui/redesign: 1/10] World View: start implementing the new design
- From: Bilal Elmoussaoui <bilelmoussaoui src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-clocks/bilelmoussaoui/redesign: 1/10] World View: start implementing the new design
- Date: Fri, 20 Sep 2019 19:13:20 +0000 (UTC)
commit 65883e3712dda9097febdcb3c6524f4d6e103bb8
Author: Bilal Elmoussaoui <bil elmoussaoui gmail com>
Date: Wed Sep 18 02:16:32 2019 +0200
World View: start implementing the new design
data/css/gnome-clocks.css | 46 +++-----------
data/flatpak/org.gnome.clocks.json | 19 +++++-
data/ui/worldtile.ui | 120 +++++++++++++++++++++----------------
src/widgets.vala | 40 +++++++------
src/world.vala | 20 ++-----
5 files changed, 123 insertions(+), 122 deletions(-)
---
diff --git a/data/css/gnome-clocks.css b/data/css/gnome-clocks.css
index 883bbed..d942ce6 100644
--- a/data/css/gnome-clocks.css
+++ b/data/css/gnome-clocks.css
@@ -9,18 +9,16 @@ window > stack:backdrop {
}
/* content view */
-
-.tile {
- padding: 12px;
- background-color: transparent;
+.name-label {
+ font-size: 16px;
+ font-weight: 500;
}
-
-.tile .tile-label {
- font-size: 32pt;
-}
-
-.tile .name-label {
- padding-top: 0.5em;
+.time-label {
+ font-weight: normal;
+ font-size: 28px;
+ padding: 10px;
+ background-color: #FCF7B0;
+ border-radius: 22px;
}
.tile .name-icon {
@@ -28,32 +26,6 @@ window > stack:backdrop {
padding-right: 8px;
}
-/* world */
-
-.world-tile .stripe,
-.world-tile .stripe:backdrop {
- color: black;
- background-color: rgba(255, 255, 255, 0.4);
-}
-
-.tile.prelight .world-tile .stripe,
-.tile.prelight .world-tile .stripe:backdrop {
- text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
- background-color: rgba(255, 255, 255, 0.6);
-}
-
-.night .world-tile .stripe,
-.night .world-tile .stripe:backdrop {
- color: white;
- background-color: rgba(0, 0, 0, 0.4);
-}
-
-.tile.prelight .night .world-tile .stripe,
-.tile.prelight .night .world-tile .stripe:backdrop {
- text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.6), 0 0 0.2em rgba(255, 255, 255, 0.6);
- background-color: rgba(0, 0, 0, 0.8);
-}
-
/* alarms */
.alarm-tile,
diff --git a/data/flatpak/org.gnome.clocks.json b/data/flatpak/org.gnome.clocks.json
index 7bf3e0c..b3042ca 100644
--- a/data/flatpak/org.gnome.clocks.json
+++ b/data/flatpak/org.gnome.clocks.json
@@ -78,6 +78,23 @@
}
]
},
+ {
+ "name": "libhandy",
+ "buildsystem": "meson",
+ "config-opts": [
+ "-Dtests=false",
+ "-Dexamples=false",
+ "-Dglade_catalog=disabled",
+ "-Dintrospection=disabled"
+ ],
+ "sources": [
+ {
+ "type": "git",
+ "url": "https://source.puri.sm/Librem5/libhandy.git";,
+ "tag": "v0.0.11"
+ }
+ ]
+ },
{
"name": "gnome-clocks",
"buildsystem": "meson",
@@ -92,4 +109,4 @@
]
}
]
-}
\ No newline at end of file
+}
diff --git a/data/ui/worldtile.ui b/data/ui/worldtile.ui
index 3edce09..6159187 100644
--- a/data/ui/worldtile.ui
+++ b/data/ui/worldtile.ui
@@ -1,87 +1,107 @@
<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.1 -->
<interface>
- <template class="ClocksWorldTile" parent="GtkGrid">
+ <requires lib="gtk+" version="3.20"/>
+ <template class="ClocksWorldTile" parent="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
<property name="valign">start</property>
+ <property name="hexpand">True</property>
<child>
- <object class="GtkOverlay" id="tile_overlay">
+ <object class="GtkBox">
+ <property name="visible">True</property>
<property name="can_focus">False</property>
+ <property name="halign">start</property>
+ <property name="valign">center</property>
+ <property name="orientation">vertical</property>
<child>
- <object class="GtkImage" id="image">
- <property name="width_request">256</property>
- <property name="height_request">256</property>
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- </object>
- </child>
- <child type="overlay">
- <object class="GtkLabel" id="time_label">
- <property name="width_request">256</property>
- <property name="height_request">128</property>
+ <object class="GtkLabel" id="name_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
+ <property name="halign">start</property>
<property name="valign">center</property>
- <property name="use-markup">True</property>
- <property name="justify">center</property>
+ <property name="hexpand">True</property>
+ <property name="wrap">True</property>
+ <property name="ellipsize">end</property>
+ <property name="max_width_chars">30</property>
<style>
- <class name="stripe"/>
- <class name="tile-label"/>
+ <class name="name-label"/>
</style>
</object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
</child>
- <style>
- <class name="world-tile"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkGrid">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="halign">center</property>
<child>
- <object class="GtkImage" id="name_icon">
- <property name="icon_name">find-location-symbolic</property>
- <property name="pixel_size">16</property>
- <property name="visible">False</property>
- <property name="no_show_all">True</property>
+ <object class="GtkLabel" id="delta_label">
+ <property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
+ <property name="halign">start</property>
<property name="valign">center</property>
<style>
<class name="dim-label"/>
- <class name="name-icon"/>
</style>
</object>
<packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">1</property>
</packing>
</child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
<child>
- <object class="GtkLabel" id="name_label">
+ <object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">center</property>
- <property name="valign">center</property>
- <property name="wrap">True</property>
- <property name="max-width-chars">30</property>
+ <property name="icon_name">edit-delete-symbolic</property>
<style>
- <class name="name-label"/>
+ <class name="dim-label"/>
</style>
</object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">0</property>
- </packing>
</child>
+ <style>
+ <class name="flat"/>
+ </style>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="pack_type">end</property>
+ <property name="position">1</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkLabel" id="time_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">end</property>
+ <property name="valign">center</property>
+ <property name="use_markup">True</property>
+ <property name="justify">center</property>
+ <style>
+ <class name="time-label"/>
+ </style>
</object>
<packing>
- <property name="left_attach">0</property>
- <property name="top_attach">1</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="pack_type">end</property>
+ <property name="position">2</property>
</packing>
</child>
</template>
diff --git a/src/widgets.vala b/src/widgets.vala
index d98088c..69e9407 100644
--- a/src/widgets.vala
+++ b/src/widgets.vala
@@ -292,7 +292,7 @@ public class ContentView : Gtk.Bin {
private Mode _mode;
private ContentStore model;
- private Gtk.FlowBox flow_box;
+ private Gtk.ListBox list_box;
private Gtk.Button select_button;
private Gtk.Button cancel_button;
private SelectionMenuButton selection_menubutton;
@@ -304,19 +304,23 @@ public class ContentView : Gtk.Bin {
construct {
get_style_context ().add_class ("content-view");
- flow_box = new Gtk.FlowBox ();
- flow_box.selection_mode = Gtk.SelectionMode.NONE;
- flow_box.min_children_per_line = 3;
-
- flow_box.child_activated.connect ((child) => {
+ list_box = new Gtk.ListBox ();
+ list_box.halign = Gtk.Align.FILL;
+ list_box.valign = Gtk.Align.START;
+ list_box.selection_mode = Gtk.SelectionMode.NONE;
+ list_box.margin = 24;
+ list_box.get_style_context ().add_class ("frame");
+ /*
+ list_box.child_activated.connect ((child) => {
var item = model.get_item (child.get_index ()) as ContentItem;
if (item != null) {
item_activated (item);
}
});
+ */
var scrolled_window = new Gtk.ScrolledWindow (null, null);
- scrolled_window.add (flow_box);
+ scrolled_window.add (list_box);
scrolled_window.hexpand = true;
scrolled_window.vexpand = true;
scrolled_window.halign = Gtk.Align.FILL;
@@ -364,7 +368,7 @@ public class ContentView : Gtk.Bin {
}
});
- flow_box.bind_model (model, (object) => {
+ list_box.bind_model (model, (object) => {
var item = (ContentItem) object;
var inner = create_func (item);
@@ -390,7 +394,7 @@ public class ContentView : Gtk.Bin {
// wrap the widget in overlay for the selection check box
var overlay = new Gtk.Overlay ();
- overlay.halign = Gtk.Align.START;
+ overlay.halign = Gtk.Align.FILL;
overlay.valign = Gtk.Align.START;
overlay.add (event_box);
@@ -417,30 +421,30 @@ public class ContentView : Gtk.Bin {
overlay.add_overlay (check);
// manually wrap in flowboxchild ourselves since we want to set alignment
- var flow_box_child = new Gtk.FlowBoxChild ();
- flow_box_child.halign = Gtk.Align.START;
- flow_box_child.valign = Gtk.Align.START;
- flow_box_child.add (overlay);
- flow_box_child.get_style_context ().add_class ("tile");
+ var list_box_row = new Gtk.ListBoxRow ();
+ list_box_row.halign = Gtk.Align.FILL;
+ list_box_row.valign = Gtk.Align.CENTER;
+ list_box_row.add (overlay);
+ list_box_row.get_style_context ().add_class ("tile");
// flowbox does not handle :hover and setting the PRELIGHT state does not
// seem to get propagated to the children despite what the documentation
// says... emulate it ourselves with css classes :(
event_box.enter_notify_event.connect ((event) => {
- flow_box_child.get_style_context ().add_class ("prelight");
+ list_box_row.get_style_context ().add_class ("prelight");
return false;
});
event_box.leave_notify_event.connect ((event) => {
if (event.detail != Gdk.NotifyType.INFERIOR) {
- flow_box_child.get_style_context ().remove_class ("prelight");
+ list_box_row.get_style_context ().remove_class ("prelight");
}
return false;
});
- flow_box_child.show_all ();
+ list_box_row.show_all ();
- return flow_box_child;
+ return list_box_row;
});
}
diff --git a/src/world.vala b/src/world.vala
index 219b99a..0930e16 100644
--- a/src/world.vala
+++ b/src/world.vala
@@ -248,25 +248,21 @@ public class Item : Object, ContentItem {
}
[GtkTemplate (ui = "/org/gnome/clocks/ui/worldtile.ui")]
-private class Tile : Gtk.Grid {
- private static Gdk.Pixbuf? day_pixbuf = Utils.load_image ("day.png");
- private static Gdk.Pixbuf? night_pixbuf = Utils.load_image ("night.png");
+private class Tile : Gtk.Box {
public Item location { get; construct set; }
- [GtkChild]
- private Gtk.Image image;
[GtkChild]
private Gtk.Label time_label;
[GtkChild]
- private Gtk.Widget name_icon;
+ private Gtk.Label name_label;
[GtkChild]
- private Gtk.Widget name_label;
+ private Gtk.Label delta_label;
public Tile (Item location) {
Object (location: location);
- location.bind_property ("automatic", name_icon, "visible", BindingFlags.DEFAULT |
BindingFlags.SYNC_CREATE);
+ // location.bind_property ("automatic", name_icon, "visible", BindingFlags.DEFAULT |
BindingFlags.SYNC_CREATE);
location.bind_property ("name", name_label, "label", BindingFlags.DEFAULT |
BindingFlags.SYNC_CREATE);
location.tick.connect (update);
@@ -274,14 +270,6 @@ private class Tile : Gtk.Grid {
}
private void update () {
- if (location.is_daytime) {
- get_style_context ().remove_class ("night");
- image.pixbuf = day_pixbuf;
- } else {
- get_style_context ().add_class ("night");
- image.pixbuf = night_pixbuf;
- }
-
if (location.day_label != null && location.day_label != "") {
time_label.label = "%s\n<span size='xx-small'>%s</span>".printf (location.time_label,
location.day_label);
} else {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
