[xdg-desktop-portal-gnome] wallpaperpreview: Add windows

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 409080aa083906134a5c4b642e2ae3d8df5c0fd0
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Fri May 13 17:15:14 2022 -0300

    wallpaperpreview: Add windows
    
    This commit adds a pair of windows to the preview, as per mockups.
    
    https://gitlab.gnome.org/Teams/Design/os-mockups/-/blob/master/portals/portals.png

 src/wallpaperpreview.css |  27 ++++++++++++
 src/wallpaperpreview.ui  | 106 ++++++++++++++++++++++++++++++++++-------------
 2 files changed, 105 insertions(+), 28 deletions(-)
---
diff --git a/src/wallpaperpreview.css b/src/wallpaperpreview.css
index 90033ce..6a53a2c 100644
--- a/src/wallpaperpreview.css
+++ b/src/wallpaperpreview.css
@@ -13,3 +13,30 @@ box.desktop-preview label {
   font-weight: bold;
   font-size: 6px;
 }
+
+widget.window {
+  min-width: 150px;
+  min-height: 100px;
+  border-radius: 6px;
+  margin-left: 75px;
+  margin-top: 50px;
+  background-color: @window_bg_color;
+  box-shadow: 0 1px 4px 1px alpha(black, 0.13),
+              0 1px 10px 5px alpha(black, 0.09),
+              0 3px 16px 8px alpha(black, 0.04),
+              0 0 0 1px alpha(black, .05);
+}
+
+widget.window .header-bar {
+  min-height: 15px;
+  box-shadow: inset 0 -1px @borders;
+}
+
+widget.window.front {
+  margin-left: -75px;
+  margin-top: -25px;
+}
+
+widget.window.front .header-bar {
+  background-color: @headerbar_bg_color;
+}
diff --git a/src/wallpaperpreview.ui b/src/wallpaperpreview.ui
index caaacf9..61fdafd 100644
--- a/src/wallpaperpreview.ui
+++ b/src/wallpaperpreview.ui
@@ -18,6 +18,7 @@
           <object class="GtkStack" id="stack">
             <property name="hexpand">1</property>
             <property name="vexpand">1</property>
+
             <child>
               <object class="GtkSpinner">
                 <property name="halign">center</property>
@@ -29,53 +30,102 @@
               </object>
             </child>
 
-            <!-- Top panel -->
+            <!-- Desktop preview -->
             <child>
-              <object class="GtkBox" id="desktop_preview">
-                <property name="valign">start</property>
-                <style>
-                  <class name="desktop-preview"/>
-                </style>
+              <object class="GtkOverlay" id="desktop_preview">
+
+                <!-- Top panel -->
                 <child>
                   <object class="GtkBox">
-                    <child>
-                      <object class="GtkLabel">
-                        <property name="label" translatable="yes">Activities</property>
-                      </object>
-                    </child>
-                    <child type="center">
-                      <object class="GtkLabel" id="desktop_clock_label">
-                        <property name="hexpand">1</property>
-                        <property name="label">01 Jan 00:00</property>
-                      </object>
-                    </child>
+                    <property name="valign">start</property>
+                    <style>
+                      <class name="desktop-preview"/>
+                    </style>
                     <child>
                       <object class="GtkBox">
-                        <property name="spacing">4</property>
                         <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">network-wireless-symbolic</property>
-                            <property name="pixel-size">6</property>
+                          <object class="GtkLabel">
+                            <property name="label" translatable="yes">Activities</property>
                           </object>
                         </child>
-                        <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">audio-volume-high-symbolic</property>
-                            <property name="pixel-size">6</property>
+                        <child type="center">
+                          <object class="GtkLabel" id="desktop_clock_label">
+                            <property name="hexpand">1</property>
+                            <property name="label">01 Jan 00:00</property>
                           </object>
                         </child>
                         <child>
-                          <object class="GtkImage">
-                            <property name="icon-name">battery-low-symbolic</property>
-                            <property name="pixel-size">6</property>
+                          <object class="GtkBox">
+                            <property name="spacing">4</property>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="icon-name">network-wireless-symbolic</property>
+                                <property name="pixel-size">6</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="icon-name">audio-volume-high-symbolic</property>
+                                <property name="pixel-size">6</property>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="icon-name">battery-low-symbolic</property>
+                                <property name="pixel-size">6</property>
+                              </object>
+                            </child>
                           </object>
                         </child>
                       </object>
                     </child>
                   </object>
                 </child>
+
+                <!-- Front window -->
+                <child type="overlay">
+                  <object class="AdwBin">
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="overflow">hidden</property>
+                    <style>
+                      <class name="window"/>
+                    </style>
+                    <child>
+                      <object class="AdwBin">
+                        <style>
+                          <class name="header-bar"/>
+                        </style>
+                        <property name="valign">start</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+                <!-- Front window -->
+                <child type="overlay">
+                  <object class="AdwBin">
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <property name="overflow">hidden</property>
+                    <style>
+                      <class name="window"/>
+                      <class name="front"/>
+                    </style>
+                    <child>
+                      <object class="AdwBin">
+                        <style>
+                          <class name="header-bar"/>
+                        </style>
+                        <property name="valign">start</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
               </object>
             </child>
+
           </object>
         </child>