[gnome-weather/wip/cdavis/use-clamp: 2/2] weather-widget: Use HdyClamp to center the forecast
- From: Christopher Davis <christopherdavis src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-weather/wip/cdavis/use-clamp: 2/2] weather-widget: Use HdyClamp to center the forecast
- Date: Mon, 21 Dec 2020 22:15:24 +0000 (UTC)
commit 763d3f65eb49c1ef6fbd22b7bad0d1d68b5118f6
Author: Christopher Davis <brainblasted disroot org>
Date: Mon Dec 21 14:14:21 2020 -0800
weather-widget: Use HdyClamp to center the forecast
Closes https://gitlab.gnome.org/GNOME/gnome-weather/-/issues/126
data/weather-widget.ui | 412 +++++++++++++++++++++++++++----------------------
src/app/city.js | 18 +--
2 files changed, 233 insertions(+), 197 deletions(-)
---
diff --git a/data/weather-widget.ui b/data/weather-widget.ui
index 59665ba..eaaafa0 100644
--- a/data/weather-widget.ui
+++ b/data/weather-widget.ui
@@ -14,55 +14,107 @@
<property name="label_xalign">0</property>
<property name="shadow_type">none</property>
<child>
- <object class="GtkBox" id="outerBox">
+ <object class="HdyClamp">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="orientation">vertical</property>
+ <property name="maximum_size">1010</property>
+ <property name="tightening_threshold">600</property>
<child>
- <object class="GtkGrid" id="inner-grid">
- <property name="name">conditions-grid</property>
+ <object class="GtkBox" id="outerBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="column_spacing">10</property>
+ <property name="orientation">vertical</property>
<child>
- <object class="GtkImage" id="conditionsImage">
- <property name="name">conditions-image</property>
+ <object class="GtkGrid" id="inner-grid">
+ <property name="name">conditions-grid</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
- <property name="valign">center</property>
- <property name="pixel_size">84</property>
- <style>
- <class name="icon-dropshadow"/>
- </style>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
- <property name="height">2</property>
- </packing>
- </child>
- <child>
- <object class="GtkMenuButton" id="placesButton">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="focus_on_click">False</property>
- <property name="receives_default">True</property>
- <property name="halign">start</property>
- <property name="valign">start</property>
+ <property name="column_spacing">10</property>
+ <child>
+ <object class="GtkImage" id="conditionsImage">
+ <property name="name">conditions-image</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">start</property>
+ <property name="valign">center</property>
+ <property name="pixel_size">84</property>
+ <style>
+ <class name="icon-dropshadow"/>
+ </style>
+ </object>
+ <packing>
+ <property name="left_attach">0</property>
+ <property name="top_attach">0</property>
+ <property name="height">2</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkMenuButton" id="placesButton">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="focus_on_click">False</property>
+ <property name="receives_default">True</property>
+ <property name="halign">start</property>
+ <property name="valign">start</property>
+ <child>
+ <object class="GtkBox" id="placesBox">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">12</property>
+ <child>
+ <object class="GtkLabel" id="placesLabel">
+ <property name="name">places-label</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">word-char</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="label" translatable="yes">Places</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkImage" id="placesImage">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon_name">pan-down-symbolic</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">1</property>
+ </packing>
+ </child>
+ </object>
+ </child>
+ <style>
+ <class name="text-button"/>
+ <class name="flat"/>
+ </style>
+ </object>
+ <packing>
+ <property name="left_attach">1</property>
+ <property name="top_attach">0</property>
+ </packing>
+ </child>
<child>
- <object class="GtkBox" id="placesBox">
+ <object class="GtkBox" id="temperatureBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="spacing">12</property>
+ <property name="halign">start</property>
+ <property name="valign">start</property>
+ <property name="spacing">8</property>
+ <property name="baseline_position">bottom</property>
<child>
- <object class="GtkLabel" id="placesLabel">
- <property name="name">places-label</property>
- <property name="wrap">True</property>
- <property name="wrap-mode">word-char</property>
+ <object class="GtkLabel" id="temperatureLabel">
+ <property name="name">temperature-label</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="label" translatable="yes">Places</property>
+ <property name="halign">start</property>
+ <property name="valign">baseline</property>
</object>
<packing>
<property name="expand">False</property>
@@ -71,10 +123,12 @@
</packing>
</child>
<child>
- <object class="GtkImage" id="placesImage">
+ <object class="GtkLabel" id="apparentLabel">
+ <property name="name">apparent-label</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="icon_name">pan-down-symbolic</property>
+ <property name="halign">start</property>
+ <property name="valign">baseline</property>
</object>
<packing>
<property name="expand">False</property>
@@ -83,203 +137,185 @@
</packing>
</child>
</object>
+ <packing>
+ <property name="left_attach">1</property>
+ <property name="top_attach">1</property>
+ </packing>
+ </child>
+ <child internal-child="accessible">
+ <object class="AtkObject" id="inner-grid-atkobject">
+ <property name="AtkObject::accessible-name" translatable="yes">Current
conditions</property>
+ </object>
</child>
- <style>
- <class name="text-button"/>
- <class name="flat"/>
- </style>
</object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">0</property>
- </packing>
</child>
<child>
- <object class="GtkBox" id="temperatureBox">
+ <object class="GtkOverlay" id="forecast-overlay">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
- <property name="valign">start</property>
- <property name="spacing">8</property>
- <property name="baseline_position">bottom</property>
+ <property name="margin_bottom">24</property>
<child>
- <object class="GtkLabel" id="temperatureLabel">
- <property name="name">temperature-label</property>
+ <object class="GtkStack" id="forecastStack">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
- <property name="valign">baseline</property>
+ <child>
+ <object class="GtkScrolledWindow" id="forecast-hourly">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="vscrollbar_policy">never</property>
+ <property name="min_content_width">308</property>
+ <child>
+ <object class="GtkViewport" id="forecast-hourly-viewport">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hscroll_policy">natural</property>
+ <property name="vscroll_policy">natural</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="name">hourly</property>
+ <property name="title" translatable="yes">Hourly</property>
+ <property name="icon-name">preferences-system-time-symbolic</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkScrolledWindow" id="forecast-daily">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="vscrollbar_policy">never</property>
+ <property name="min_content_width">308</property>
+ <child>
+ <object class="GtkViewport" id="forecast-daily-viewport">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hscroll_policy">natural</property>
+ <property name="vscroll_policy">natural</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="name">daily</property>
+ <property name="title" translatable="yes">Daily</property>
+ <property name="icon-name">x-office-calendar-symbolic</property>
+ </packing>
+ </child>
</object>
<packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">0</property>
+ <property name="index">-1</property>
</packing>
</child>
- <child>
- <object class="GtkLabel" id="apparentLabel">
- <property name="name">apparent-label</property>
+ <child type="overlay">
+ <object class="GtkBox" id="rightBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
- <property name="valign">baseline</property>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">1</property>
- </packing>
- </child>
- </object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">1</property>
- </packing>
- </child>
- <child internal-child="accessible">
- <object class="AtkObject" id="inner-grid-atkobject">
- <property name="AtkObject::accessible-name" translatable="yes">Current
conditions</property>
- </object>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkOverlay" id="forecast-overlay">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="margin_bottom">24</property>
- <child>
- <object class="GtkStack" id="forecastStack">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <child>
- <object class="GtkScrolledWindow" id="forecast-hourly">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="vscrollbar_policy">never</property>
- <property name="min_content_width">308</property>
+ <property name="halign">end</property>
+ <child>
+ <object class="GtkButton" id="rightButton">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <property name="halign">end</property>
+ <property name="valign">center</property>
+ <property name="margin_end">28</property>
+ <child>
+ <object class="GtkImage" id="right-image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon_name">go-next-symbolic</property>
+ </object>
+ </child>
+ <style>
+ <class name="osd"/>
+ <class name="circular"/>
+ </style>
+ </object>
+ </child>
<child>
- <object class="GtkViewport" id="forecast-hourly-viewport">
+ <object class="GtkSeparator">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="hscroll_policy">natural</property>
- <property name="vscroll_policy">natural</property>
+ <property name="orientation">vertical</property>
</object>
</child>
</object>
- <packing>
- <property name="name">hourly</property>
- <property name="title" translatable="yes">Hourly</property>
- <property name="icon-name">preferences-system-time-symbolic</property>
- </packing>
</child>
- <child>
- <object class="GtkScrolledWindow" id="forecast-daily">
+ <child type="overlay">
+ <object class="GtkBox" id="leftBox">
<property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="vscrollbar_policy">never</property>
- <property name="min_content_width">308</property>
+ <property name="can_focus">False</property>
+ <property name="halign">start</property>
<child>
- <object class="GtkViewport" id="forecast-daily-viewport">
+ <object class="GtkSeparator">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="hscroll_policy">natural</property>
- <property name="vscroll_policy">natural</property>
+ <property name="orientation">vertical</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton" id="leftButton">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <property name="halign">start</property>
+ <property name="valign">center</property>
+ <property name="margin_start">28</property>
+ <child>
+ <object class="GtkImage" id="left-image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon_name">go-previous-symbolic</property>
+ <property name="icon_size">1</property>
+ </object>
+ </child>
+ <style>
+ <class name="osd"/>
+ <class name="circular"/>
+ </style>
</object>
</child>
</object>
<packing>
- <property name="name">daily</property>
- <property name="title" translatable="yes">Daily</property>
- <property name="icon-name">x-office-calendar-symbolic</property>
+ <property name="index">1</property>
</packing>
</child>
</object>
- <packing>
- <property name="index">-1</property>
- </packing>
</child>
- <child type="overlay">
- <object class="GtkButton" id="rightButton">
+ <child>
+ <object class="GtkGrid">
<property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="halign">end</property>
- <property name="valign">center</property>
- <property name="margin_end">28</property>
+ <property name="can_focus">False</property>
+ <property name="margin_start">18</property>
+ <property name="margin_bottom">20</property>
+ <property name="row_spacing">8</property>
<child>
- <object class="GtkImage" id="right-image">
+ <object class="GtkLabel" id="updatedTimeLabel">
+ <property name="name">updated-time-label</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="icon_name">go-next-symbolic</property>
+ <property name="halign">start</property>
</object>
+ <packing>
+ <property name="left_attach">0</property>
+ <property name="top_attach">0</property>
+ </packing>
</child>
- <style>
- <class name="osd"/>
- <class name="circular"/>
- </style>
- </object>
- </child>
- <child type="overlay">
- <object class="GtkButton" id="leftButton">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="halign">start</property>
- <property name="valign">center</property>
- <property name="margin_start">28</property>
<child>
- <object class="GtkImage" id="left-image">
+ <object class="GtkLabel" id="attributionLabel">
+ <property name="name">attribution-label</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="icon_name">go-previous-symbolic</property>
- <property name="icon_size">1</property>
+ <property name="use_markup">True</property>
+ <property name="wrap">True</property>
+ <property name="track_visited_links">False</property>
+ <property name="xalign">0</property>
</object>
+ <packing>
+ <property name="left_attach">0</property>
+ <property name="top_attach">1</property>
+ </packing>
</child>
- <style>
- <class name="osd"/>
- <class name="circular"/>
- </style>
- </object>
- <packing>
- <property name="index">1</property>
- </packing>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkGrid">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="margin_start">18</property>
- <property name="margin_bottom">20</property>
- <property name="row_spacing">8</property>
- <child>
- <object class="GtkLabel" id="updatedTimeLabel">
- <property name="name">updated-time-label</property>
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="halign">start</property>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
- </packing>
- </child>
- <child>
- <object class="GtkLabel" id="attributionLabel">
- <property name="name">attribution-label</property>
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="use_markup">True</property>
- <property name="wrap">True</property>
- <property name="track_visited_links">False</property>
- <property name="xalign">0</property>
</object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">1</property>
- </packing>
</child>
</object>
</child>
diff --git a/src/app/city.js b/src/app/city.js
index b8cde23..c3c15b7 100644
--- a/src/app/city.js
+++ b/src/app/city.js
@@ -39,7 +39,7 @@ var WeatherWidget = GObject.registerClass({
InternalChildren: ['contentFrame', 'outerBox',
'conditionsImage', 'placesButton', 'placesLabel',
'temperatureLabel', 'apparentLabel',
- 'forecastStack','leftButton', 'rightButton',
+ 'forecastStack', 'leftBox', 'leftButton', 'rightBox', 'rightButton',
'forecast-hourly', 'forecast-hourly-viewport',
'forecast-daily', 'forecast-daily-viewport',
'updatedTimeLabel', 'attributionLabel'],
@@ -127,17 +127,17 @@ var WeatherWidget = GObject.registerClass({
_syncLeftRightButtons() {
let hadjustment = this._forecastStack.visible_child.get_hadjustment();
if ((hadjustment.get_upper() - hadjustment.get_lower()) == hadjustment.page_size) {
- this._leftButton.hide();
- this._rightButton.hide();
+ this._leftBox.hide();
+ this._rightBox.hide();
} else if (hadjustment.value == hadjustment.get_lower()){
- this._leftButton.hide();
- this._rightButton.show();
+ this._leftBox.hide();
+ this._rightBox.show();
} else if (hadjustment.value >= (hadjustment.get_upper() - hadjustment.page_size)){
- this._leftButton.show();
- this._rightButton.hide();
+ this._leftBox.show();
+ this._rightBox.hide();
} else {
- this._leftButton.show();
- this._rightButton.show();
+ this._leftBox.show();
+ this._rightBox.show();
}
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
