[gnome-weather/wip/new-ui] Some more design review
- From: Giovanni Campagna <gcampagna src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-weather/wip/new-ui] Some more design review
- Date: Wed, 30 Jul 2014 16:20:06 +0000 (UTC)
commit 1c6f19648cae71db55e4839ece2f9ed597a65216
Author: Giovanni Campagna <gcampagna src gnome org>
Date: Wed Jul 30 18:20:20 2014 +0200
Some more design review
data/application.css | 19 ++++++++++++----
data/city.ui | 19 +++++++++++++---
data/places-popover.ui | 25 ++++++++++++++++++----
src/app/forecast.js | 7 +++--
src/app/weeklyForecast.js | 15 ++++++-------
src/shared/world.js | 49 ++++++++++++++++++++++++--------------------
6 files changed, 87 insertions(+), 47 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 62938dd..367da2b 100644
--- a/data/application.css
+++ b/data/application.css
@@ -1,8 +1,3 @@
-#weather-page {
- text-shadow: 1px 1px 3px black;
- icon-shadow: 1px 1px 3px black;
-}
-
#weather-page-placeholder-title {
font-weight: bold;
font-size: 1.2em;
@@ -18,41 +13,50 @@
#weather-page-content-view.weather-clear {
background-image: url("weather-clear.jpg");
+ color: rgba(0,0,0,0.8);
}
#weather-page-content-view.weather-clear-night {
background-image: url("weather-clear-night.jpg");
+ color: rgba(255,255,255,0.8);
}
#weather-page-content-view.weather-few-clouds {
background-image: url("weather-few-clouds.jpg");
+ color: rgba(0,0,0,0.6);
}
#weather-page-content-view.weather-few-clouds-night {
background-image: url("weather-few-clouds-night.jpg");
+ color: rgba(255,255,255,0.8);
}
#weather-page-content-view.weather-fog {
background-image: url("weather-fog.jpg");
background-position: center 20%;
+ color: rgba(255,255,255,0.8);
}
#weather-page-content-view.weather-overcast {
background-image: url("weather-overcast.jpg");
+ color: rgba(255,255,255,0.8);
}
#weather-page-content-view.weather-showers,
#weather-page-content-view.weather-showers-scattered {
background-image: url("weather-showers.jpg");
+ color: rgba(255,255,255,0.8);
}
#weather-page-content-view.weather-snow {
background-image: url("weather-snow.jpg");
+ color: rgba(255,255,255,0.8);
}
#weather-page-content-view.weather-storm {
background-image: url("weather-storm.jpg");
background-position: center 80%;
+ color: rgba(255,255,255,0.8);
}
#loading-label {
@@ -83,8 +87,13 @@
#weekly-forecast-frame {
background-color: rgba(0, 0, 0, 0.5);
+ color: white;
}
.content-view.cell {
font-weight: bold;
}
+
+#locations-list-box {
+ border: 1px solid @borders;
+}
\ No newline at end of file
diff --git a/data/city.ui b/data/city.ui
index ab4db9f..f8e63c3 100644
--- a/data/city.ui
+++ b/data/city.ui
@@ -26,7 +26,7 @@
<property name="vexpand">True</property>
<property name="margin-start">50</property>
<property name="margin-end">20</property>
- <property name="row_spacing">11</property>
+ <property name="row_spacing">32</property>
<child>
<object class="GtkGrid" id="inner-grid">
<property name="name">conditions-grid</property>
@@ -58,8 +58,7 @@
<property name="name">temperature-label</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="valign">end</property>
- <property name="vexpand">True</property>
+ <property name="valign">start</property>
<property name="halign">start</property>
</object>
<packing>
@@ -74,7 +73,8 @@
<property name="name">conditions-label</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="valign">end</property>
+ <property name="valign">start</property>
+ <property name="vexpand">True</property>
<property name="halign">start</property>
</object>
<packing>
@@ -98,6 +98,9 @@
<object class="GtkStackSwitcher" id="day-stack-switcher">
<property name="visible">True</property>
<property name="stack">day-stack</property>
+ <style>
+ <class name="osd"/>
+ </style>
</object>
<packing>
<property name="left_attach">0</property>
@@ -148,6 +151,8 @@
<property name="can_focus">True</property>
<property name="vscrollbar_policy">never</property>
<property name="min_content_width">360</property>
+ <property name="margin-start">32</property>
+ <property name="margin-end">32</property>
<child>
<object class="GtkViewport" id="forecast-viewport">
<property name="visible">True</property>
@@ -175,6 +180,9 @@
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="valign">center</property>
+ <style>
+ <class name="osd"/>
+ </style>
<child>
<object class="GtkImage" id="left-image">
<property name="visible">True</property>
@@ -195,6 +203,9 @@
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="valign">center</property>
+ <style>
+ <class name="osd"/>
+ </style>
<child>
<object class="GtkImage" id="right-image">
<property name="visible">True</property>
diff --git a/data/places-popover.ui b/data/places-popover.ui
index 1a084f2..3a80f68 100644
--- a/data/places-popover.ui
+++ b/data/places-popover.ui
@@ -13,6 +13,7 @@
<object class="GWeatherLocationEntry" id="location-entry">
<property name="visible">True</property>
<property name="can_focus">True</property>
+ <property name="width-request">300</property>
</object>
<packing>
<property name="left_attach">0</property>
@@ -40,9 +41,12 @@
<object class="GtkLabel" id="auto-location-label">
<property name="visible">True</property>
<property name="can-focus">False</property>
- <property name="label">Automatic location</property>
+ <property name="label" translatable="yes">Automatic Location</property>
<property name="halign">start</property>
<property name="vexpand">False</property>
+ <attributes>
+ <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+ </attributes>
<style>
<class name="dim-label"/>
</style>
@@ -165,9 +169,12 @@
<object class="GtkLabel" id="recently-viewed-label">
<property name="visible">True</property>
<property name="can-focus">False</property>
- <property name="label">Viewed recently</property>
+ <property name="label">Viewed Recently</property>
<property name="halign">start</property>
<property name="vexpand">False</property>
+ <attributes>
+ <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+ </attributes>
<style>
<class name="dim-label"/>
</style>
@@ -180,11 +187,19 @@
</packing>
</child>
<child>
- <object class="GtkListBox" id="locations-list-box">
+ <object class="GtkFrame" id="locations-frame">
+ <property name="name">locations-frame</property>
<property name="visible">True</property>
<property name="can-focus">False</property>
- <property name="hexpand">True</property>
- <property name="vexpand">False</property>
+ <child>
+ <object class="GtkListBox" id="locations-list-box">
+ <property name="name">locations-list-box</property>
+ <property name="visible">True</property>
+ <property name="can-focus">False</property>
+ <property name="hexpand">True</property>
+ <property name="vexpand">False</property>
+ </object>
+ </child>
</object>
<packing>
<property name="left_attach">0</property>
diff --git a/src/app/forecast.js b/src/app/forecast.js
index 786432f..f850762 100644
--- a/src/app/forecast.js
+++ b/src/app/forecast.js
@@ -40,9 +40,10 @@ const ForecastBox = new Lang.Class({
this._settings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
this._grid = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL,
- column_spacing: 24,
+ column_spacing: 32,
row_spacing: 6,
- margin: 12,
+ margin_top: 12,
+ margin_bottom: 12,
column_homogeneous: true });
this.add(this._grid);
},
@@ -134,7 +135,7 @@ const ForecastBox = new Lang.Class({
this._grid.attach(label, col, 0, 1, 1);
let image = new Gtk.Image({ icon_name: info.get_symbolic_icon_name(),
- icon_size: Gtk.IconSize.DIALOG,
+ pixel_size: 32,
use_fallback: true,
visible: true });
this._grid.attach(image, col, 1, 1, 1);
diff --git a/src/app/weeklyForecast.js b/src/app/weeklyForecast.js
index 4da3597..b135fa3 100644
--- a/src/app/weeklyForecast.js
+++ b/src/app/weeklyForecast.js
@@ -31,18 +31,16 @@ const WeeklyForecastFrame = new Lang.Class({
_init: function(params) {
params = Params.fill(params, { shadow_type: Gtk.ShadowType.NONE,
- name: _("weekly-forecast-frame") });
+ name: _("weekly-forecast-frame"),
+ width_request: 220 });
this.parent(params);
this.get_accessible().accessible_name = _("WeeklyForecast");
this._settings = new Gio.Settings({ schema_id: 'org.gnome.desktop.interface' });
this._grid = new Gtk.Grid({ orientation: Gtk.Orientation.VERTICAL,
- margin_top: 10,
- margin_bottom: 30,
- margin_start: 50,
- margin_end: 50,
- valign: Gtk.Align.CENTER,
+ margin: 24,
+ valign: Gtk.Align.START,
halign: Gtk.Align.START,
row_spacing: 25,
row_homogeneous: true });
@@ -113,7 +111,7 @@ const WeeklyForecastFrame = new Lang.Class({
row_spacing: 5,
column_spacing: 10 });
- let label = new Gtk.Label({ label: datetime.format(timeFormat),
+ let label = new Gtk.Label({ label: datetime.format(timeFormat).bold(),
use_markup: true,
halign: Gtk.Align.START,
visible: true });
@@ -127,7 +125,8 @@ const WeeklyForecastFrame = new Lang.Class({
grid.attach(image, 0, 1, 1, 1);
let temperature = new Gtk.Label({ label: Util.getTemperature(info),
- halign: Gtk.Align.END,
+ halign: Gtk.Align.START,
+ valign: Gtk.Align.START,
visible: true });
grid.attach(temperature, 1, 1, 1, 1);
grid.show();
diff --git a/src/shared/world.js b/src/shared/world.js
index 84c5b27..ea6653e 100644
--- a/src/shared/world.js
+++ b/src/shared/world.js
@@ -157,47 +157,42 @@ const WorldModel = new Lang.Class({
_addLocationInternal: function(location, listbox, isCurrentLocation) {
let grid = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL,
- column_spacing: 15,
- margin_top: 6,
- margin_bottom: 6,
- column_homogeneous: true });
+ column_spacing: 12,
+ margin: 12 });
let name = location.get_city_name();
+ let locationGrid = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL,
+ column_spacing: 12,
+ halign: Gtk.Align.START,
+ hexpand: true,
+ visible: true });
let locationLabel = new Gtk.Label({ label: name,
- use_markup: true,
- halign: Gtk.Align.START,
- visible: true });
- grid.attach(locationLabel, 0, 0, 1, 1);
-
- let conditionGrid = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL,
- column_spacing: 1,
- column_homogeneous: true });
+ use_markup: true,
+ halign: Gtk.Align.START,
+ visible: true });
+ locationGrid.attach(locationLabel, 0, 0, 1, 1);
+ grid.attach(locationGrid, 0, 0, 1, 1);
let tempLabel = new Gtk.Label({ use_markup: true,
halign: Gtk.Align.END,
+ margin_start: 12,
visible: true });
- conditionGrid.attach(tempLabel, 0, 0, 1, 1);
+ grid.attach(tempLabel, 1, 0, 1, 1);
if (isCurrentLocation) {
let image = new Gtk.Image({ icon_size: Gtk.IconSize.LARGE_TOOLBAR,
icon_name: 'mark-location-symbolic',
use_fallback: true,
- halign: Gtk.Align.END,
+ halign: Gtk.Align.START,
visible: true });
- conditionGrid.attach(image, 1, 0, 1, 1);
+ locationGrid.attach(image, 1, 0, 1, 1);
}
let image = new Gtk.Image({ icon_size: Gtk.IconSize.LARGE_TOOLBAR,
use_fallback: true,
halign: Gtk.Align.END,
visible: true });
- if (isCurrentLocation)
- conditionGrid.attach(image, 2, 0, 1, 1);
- else
- conditionGrid.attach(image, 1, 0, 2, 1);
-
- conditionGrid.show();
- grid.attach(conditionGrid, 1, 0, 1, 1);
+ grid.attach(image, 2, 0, 1, 1);
grid.show();
if(isCurrentLocation) {
@@ -294,6 +289,16 @@ const WorldContentView = new Lang.Class({
this.model = application.model;
let listbox = builder.get_object('locations-list-box');
+ listbox.set_header_func(function (row, previous) {
+ let hasHeader = row.get_header() != null;
+ let shouldHaveHeader = previous != null;
+ if (hasHeader != shouldHaveHeader) {
+ if (shouldHaveHeader)
+ row.set_header(new Gtk.Separator());
+ else
+ row.set_header(null);
+ }
+ });
let initialGridLocEntry = builder.get_object('initial-grid-location-entry');
initialGridLocEntry.connect('notify::location', Lang.bind(this, function(entry) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
