[gnome-weather/wip/cdavis/use-clamp: 2/2] weather-widget: Use HdyClamp to center the forecast




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]