wifi: Expose Airplane Mode row outside access point list

The current Wi-Fi panel ties the Airplane Mode row to the access
point list of a given Wi-Fi adapter. That has unintended but
bad side effects: when enabling Airplane Mode, the row disappears
and we have to switch to another panel (e.g. Bluetooth) in order
to disable it. This is functionally wrong: we should be able to
enable or disable Airplane Mode from where we initially changed
it.

This commit reorganizes the widget hierarchy in order to put the
Airplane Mode row outside of the main GtkStack page. This is
necessary in order to fully implement the proposed mockups[1]
and, in general, because it's the right thing to do.

Notice that the logic of the empty states in [1] is not fully
implemented yet; this commit only reorganizes the widgets that
already exist to get closer to the mockups. Subsequent commits
will implement more of the empty states.

[1] https://github.com/gnome-design-team/gnome-mockups/raw/master/system-settings/network/aday3/wi-fi-wires.png

Fixes https://gitlab.gnome.org/GNOME/gnome-control-center/issues/121

1 files changed, 220 insertions, 216 deletions

diff --git a/panels/network/cc-wifi-panel.ui b/panels/network/cc-wifi-panel.ui
index a3eab3889..b50f4eb71 100644
--- a/panels/network/cc-wifi-panel.ui
+++ b/panels/network/cc-wifi-panel.ui
@@ -4,294 +4,298 @@
   <template class="CcWifiPanel" parent="CcPanel">
     <property name="visible">True</property>
     <property name="can-focus">False</property>
+
     <child>
-      <object class="GtkStack" id="main_stack">
+      <object class="GtkScrolledWindow">
         <property name="visible">True</property>
         <property name="can-focus">False</property>
-        <property name="homogeneous">False</property>
-        <property name="transition_type">crossfade</property>
-
-        <!-- "No Wi-Fi Adapter" page -->
+        <property name="hscrollbar-policy">never</property>
         <child>
-          <object class="GtkBox">
+          <object class="GtkGrid">
             <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="expand">True</property>
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <property name="orientation">vertical</property>
-            <child>
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon_name">network-wireless-no-route-symbolic</property>
-                <property name="pixel_size">256</property>
-                <property name="margin-bottom">18</property>
-                <style>
-                  <class name="dim-label" />
-                </style>
-              </object>
-            </child>
+            <property name="margin">32</property>
+
+            <!-- Empty boxes to enforce 1/3 width for the main widgets -->
             <child>
-              <object class="GtkLabel">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="wrap">True</property>
-                <property name="label" translatable="yes">No Wi-Fi Adapter Found</property>
-                <attributes>
-                  <attribute name="weight" value="bold" />
-                  <attribute name="scale" value="1.2" />
-                </attributes>
+                <property name="hexpand">True</property>
               </object>
+              <packing>
+                <property name="left-attach">0</property>
+                <property name="top-attach">0</property>
+              </packing>
             </child>
             <child>
-              <object class="GtkLabel">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="wrap">True</property>
-                <property name="label" translatable="yes">Make sure you have a Wi-Fi adapter plugged and turned on</property>
+                <property name="hexpand">True</property>
               </object>
+              <packing>
+                <property name="left-attach">2</property>
+                <property name="top-attach">0</property>
+              </packing>
             </child>
-          </object>
-          <packing>
-            <property name="name">no-wifi-devices</property>
-          </packing>
-        </child>
 
-        <!-- Wi-Fi connections and devices -->
-        <child>
-          <object class="GtkScrolledWindow">
-            <property name="visible">True</property>
-            <property name="can-focus">False</property>
-            <property name="hscrollbar-policy">never</property>
             <child>
-              <object class="GtkViewport">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="shadow-type">none</property>
+                <property name="hexpand">True</property>
+                <property name="orientation">vertical</property>
+
+                <!-- Airplane Mode -->
                 <child>
-                  <object class="GtkGrid">
+                  <object class="GtkFrame" id="rfkill_widget">
                     <property name="visible">True</property>
-                    <property name="border-width">32</property>
-
-                    <!-- Empty boxes to enforce 1/3 width for the main widgets -->
-                    <child>
-                      <object class="GtkBox">
-                        <property name="visible">True</property>
-                        <property name="hexpand">True</property>
-                      </object>
-                      <packing>
-                        <property name="left-attach">0</property>
-                        <property name="top-attach">0</property>
-                        <property name="height">3</property>
-                      </packing>
-                    </child>
+                    <property name="vexpand">False</property>
+                    <property name="margin_bottom">32</property>
                     <child>
-                      <object class="GtkBox">
+                      <object class="GtkListBox">
                         <property name="visible">True</property>
-                        <property name="hexpand">True</property>
-                      </object>
-                      <packing>
-                        <property name="left-attach">2</property>
-                        <property name="top-attach">0</property>
-                        <property name="height">3</property>
-                      </packing>
-                    </child>
-
-                    <!-- Airplane Mode -->
-                    <child>
-                      <object class="GtkFrame" id="rfkill_widget">
-                        <property name="visible">True</property>
-                        <property name="vexpand">False</property>
-                        <property name="margin_bottom">32</property>
+                        <property name="selection-mode">none</property>
                         <child>
-                          <object class="GtkListBox">
+                          <object class="GtkListBoxRow">
                             <property name="visible">True</property>
-                            <property name="selection-mode">none</property>
+                            <property name="can-focus">False</property>
+                            <property name="activatable">False</property>
                             <child>
-                              <object class="GtkListBoxRow">
+                              <object class="GtkGrid">
                                 <property name="visible">True</property>
-                                <property name="can-focus">False</property>
-                                <property name="activatable">False</property>
+                                <property name="border-width">12</property>
+                                <property name="margin_left">6</property>
+                                <property name="margin_right">6</property>
+                                <property name="column-spacing">12</property>
+                                <property name="row-spacing">2</property>
+                                <child>
+                                  <object class="GtkLabel">
+                                    <property name="visible">True</property>
+                                    <property name="hexpand">True</property>
+                                    <property name="label" translatable="yes">Airplane Mode</property>
+                                    <property name="xalign">0.0</property>
+                                    <attributes>
+                                      <attribute name="weight" value="bold"/>
+                                    </attributes>
+                                  </object>
+                                  <packing>
+                                    <property name="left-attach">0</property>
+                                    <property name="top-attach">0</property>
+                                  </packing>
+                                </child>
                                 <child>
-                                  <object class="GtkGrid">
+                                  <object class="GtkLabel">
                                     <property name="visible">True</property>
-                                    <property name="border-width">12</property>
-                                    <property name="margin_left">6</property>
-                                    <property name="margin_right">6</property>
-                                    <property name="column-spacing">12</property>
-                                    <property name="row-spacing">2</property>
-                                    <child>
-                                      <object class="GtkLabel">
-                                        <property name="visible">True</property>
-                                        <property name="hexpand">True</property>
-                                        <property name="label" translatable="yes">Airplane Mode</property>
-                                        <property name="xalign">0.0</property>
-                                        <attributes>
-                                          <attribute name="weight" value="bold"/>
-                                        </attributes>
-                                      </object>
-                                      <packing>
-                                        <property name="left-attach">0</property>
-                                        <property name="top-attach">0</property>
-                                      </packing>
-                                    </child>
-                                    <child>
-                                      <object class="GtkLabel">
-                                        <property name="visible">True</property>
-                                        <property name="hexpand">True</property>
-                                        <property name="label" translatable="yes">Disables Wi-Fi, Bluetooth and mobile broadband</property>
-                                        <property name="xalign">0.0</property>
-                                        <attributes>
-                                          <attribute name="scale" value="0.88"/>
-                                        </attributes>
-                                        <style>
-                                          <class name="dim-label"/>
-                                        </style>
-                                      </object>
-                                      <packing>
-                                        <property name="left-attach">0</property>
-                                        <property name="top-attach">1</property>
-                                      </packing>
-                                    </child>
-                                    <child>
-                                      <object class="GtkSwitch" id="rfkill_switch">
-                                        <property name="visible">True</property>
-                                        <property name="can-focus">True</property>
-                                        <property name="valign">center</property>
-                                        <signal name="notify::active" handler="rfkill_switch_notify_activate_cb" object="CcWifiPanel" swapped="no" />
-                                      </object>
-                                      <packing>
-                                        <property name="left-attach">1</property>
-                                        <property name="top-attach">0</property>
-                                        <property name="height">2</property>
-                                      </packing>
-                                    </child>
+                                    <property name="hexpand">True</property>
+                                    <property name="label" translatable="yes">Disables Wi-Fi, Bluetooth and mobile broadband</property>
+                                    <property name="xalign">0.0</property>
+                                    <attributes>
+                                      <attribute name="scale" value="0.88"/>
+                                    </attributes>
+                                    <style>
+                                      <class name="dim-label"/>
+                                    </style>
                                   </object>
+                                  <packing>
+                                    <property name="left-attach">0</property>
+                                    <property name="top-attach">1</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkSwitch" id="rfkill_switch">
+                                    <property name="visible">True</property>
+                                    <property name="can-focus">True</property>
+                                    <property name="valign">center</property>
+                                    <signal name="notify::active" handler="rfkill_switch_notify_activate_cb" object="CcWifiPanel" swapped="no" />
+                                  </object>
+                                  <packing>
+                                    <property name="left-attach">1</property>
+                                    <property name="top-attach">0</property>
+                                    <property name="height">2</property>
+                                  </packing>
                                 </child>
                               </object>
                             </child>
                           </object>
                         </child>
                       </object>
-                      <packing>
-                        <property name="left-attach">1</property>
-                        <property name="top-attach">0</property>
-                      </packing>
                     </child>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkStack" id="main_stack">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="homogeneous">False</property>
+                    <property name="transition_type">crossfade</property>
 
-                    <!-- Visible Networks label & spinner -->
+                    <!-- "No Wi-Fi Adapter" page -->
                     <child>
                       <object class="GtkBox">
                         <property name="visible">True</property>
-                        <property name="hexpand">True</property>
-                        <property name="halign">start</property>
-                        <property name="spacing">6</property>
+                        <property name="can_focus">False</property>
+                        <property name="expand">True</property>
+                        <property name="halign">center</property>
+                        <property name="valign">center</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                          <object class="GtkImage">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">network-wireless-no-route-symbolic</property>
+                            <property name="pixel_size">256</property>
+                            <property name="margin-bottom">18</property>
+                            <style>
+                              <class name="dim-label" />
+                            </style>
+                          </object>
+                        </child>
                         <child>
                           <object class="GtkLabel">
                             <property name="visible">True</property>
-                            <property name="label" translatable="yes">Visible Networks</property>
-                            <property name="xalign">0.0</property>
-                            <property name="margin_bottom">12</property>
+                            <property name="can_focus">False</property>
+                            <property name="wrap">True</property>
+                            <property name="label" translatable="yes">No Wi-Fi Adapter Found</property>
                             <attributes>
-                              <attribute name="weight" value="bold"/>
+                              <attribute name="weight" value="bold" />
+                              <attribute name="scale" value="1.2" />
                             </attributes>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkSpinner" id="spinner">
-                            <property name="hexpand">True</property>
+                          <object class="GtkLabel">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="wrap">True</property>
+                            <property name="label" translatable="yes">Make sure you have a Wi-Fi adapter plugged and turned on</property>
                           </object>
                         </child>
                       </object>
                       <packing>
-                        <property name="left-attach">1</property>
-                        <property name="top-attach">1</property>
+                        <property name="name">no-wifi-devices</property>
                       </packing>
                     </child>
 
-                    <!-- Stack with a listbox for each Wi-Fi device -->
+                    <!-- Wi-Fi connections and devices -->
                     <child>
-                      <object class="GtkFrame">
+                      <object class="GtkBox">
                         <property name="visible">True</property>
-                        <property name="valign">start</property>
-                        <style>
-                          <class name="view" />
-                        </style>
+                        <property name="can-focus">False</property>
+                        <property name="orientation">vertical</property>
+
+                        <!-- Visible Networks label & spinner -->
                         <child>
-                          <object class="GtkStack" id="stack">
+                          <object class="GtkBox">
                             <property name="visible">True</property>
                             <property name="hexpand">True</property>
-                            <property name="vexpand">True</property>
-                            <property name="transition_type">crossfade</property>
+                            <property name="halign">start</property>
+                            <property name="spacing">6</property>
+                            <child>
+                              <object class="GtkLabel">
+                                <property name="visible">True</property>
+                                <property name="label" translatable="yes">Visible Networks</property>
+                                <property name="xalign">0.0</property>
+                                <property name="margin_bottom">12</property>
+                                <attributes>
+                                  <attribute name="weight" value="bold"/>
+                                </attributes>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkSpinner" id="spinner">
+                                <property name="hexpand">True</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+
+                        <!-- Stack with a listbox for each Wi-Fi device -->
+                        <child>
+                          <object class="GtkFrame">
+                            <property name="visible">True</property>
+                            <property name="valign">start</property>
+                            <style>
+                              <class name="view" />
+                            </style>
+                            <child>
+                              <object class="GtkStack" id="stack">
+                                <property name="visible">True</property>
+                                <property name="hexpand">True</property>
+                                <property name="vexpand">True</property>
+                                <property name="transition_type">crossfade</property>
+                              </object>
+                            </child>
                           </object>
                         </child>
                       </object>
                       <packing>
-                        <property name="left-attach">1</property>
-                        <property name="top-attach">2</property>
+                        <property name="name">wifi-connections</property>
+                      </packing>
+                    </child>
+
+                    <!-- "NetworkManager Not Running" page -->
+                    <child>
+                      <object class="GtkBox">
+                        <property name="visible">True</property>
+                        <property name="can_focus">False</property>
+                        <property name="expand">True</property>
+                        <property name="halign">center</property>
+                        <property name="valign">center</property>
+                        <property name="orientation">vertical</property>
+                        <property name="margin">18</property>
+                        <property name="spacing">18</property>
+                        <child type="center">
+                          <object class="GtkImage">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="icon_name">face-sad-symbolic</property>
+                            <property name="pixel_size">128</property>
+                            <style>
+                              <class name="dim-label" />
+                            </style>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="wrap">True</property>
+                            <property name="label" translatable="yes">NetworkManager needs to be running</property>
+                          </object>
+                          <packing>
+                            <property name="pack-type">end</property>
+                          </packing>
+                        </child>
+                        <child>
+                          <object class="GtkLabel">
+                            <property name="visible">True</property>
+                            <property name="can_focus">False</property>
+                            <property name="wrap">True</property>
+                            <property name="label" translatable="yes">Oops, something has gone wrong. Please contact your software vendor.</property>
+                            <attributes>
+                              <attribute name="scale" value="1.42" />
+                            </attributes>
+                          </object>
+                          <packing>
+                            <property name="pack-type">end</property>
+                          </packing>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="name">nm-not-running</property>
                       </packing>
                     </child>
                   </object>
                 </child>
-              </object>
-            </child>
-          </object>
-          <packing>
-            <property name="name">wifi-connections</property>
-          </packing>
-        </child>
 
-        <!-- "NetworkManager Not Running" page -->
-        <child>
-          <object class="GtkBox">
-            <property name="visible">True</property>
-            <property name="can_focus">False</property>
-            <property name="expand">True</property>
-            <property name="halign">center</property>
-            <property name="valign">center</property>
-            <property name="orientation">vertical</property>
-            <property name="margin">18</property>
-            <property name="spacing">18</property>
-            <child type="center">
-              <object class="GtkImage">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="icon_name">face-sad-symbolic</property>
-                <property name="pixel_size">128</property>
-                <style>
-                  <class name="dim-label" />
-                </style>
-              </object>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="wrap">True</property>
-                <property name="label" translatable="yes">NetworkManager needs to be running</property>
-              </object>
-              <packing>
-                <property name="pack-type">end</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkLabel">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="wrap">True</property>
-                <property name="label" translatable="yes">Oops, something has gone wrong. Please contact your software vendor.</property>
-                <attributes>
-                  <attribute name="scale" value="1.42" />
-                </attributes>
+
               </object>
               <packing>
-                <property name="pack-type">end</property>
+                <property name="left-attach">1</property>
+                <property name="top-attach">0</property>
               </packing>
             </child>
+
           </object>
-          <packing>
-            <property name="name">nm-not-running</property>
-          </packing>
         </child>
       </object>
     </child>