dragOverlay: Try out new design proposal

Teams/Design/os-mockups#186

data/resources/icons/scalable/actions/image-round-symbolic.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><g fill="#222222"><path d="m 5.972656 5.023438 c -0.550781 0 -1 0.449218 -1 1 c 0 0.554687 0.449219 1 1 1 c 0.550782 0 1 -0.445313 1 -1 c 0 -0.550782 -0.449218 -1 -1 -1 z m 3.164063 2.175781 l -1.75 2.4375 c -0.101563 0.144531 -0.261719 0.234375 -0.4375 0.246093 c -0.175781 0.015626 -0.347657 -0.050781 -0.472657 -0.175781 l -0.410156 -0.417969 c -0.183594 -0.191406 -0.445312 -0.285156 -0.707031 -0.261718 c -0.261719 0.027344 -0.5 0.167968 -0.644531 0.386718 l -0.742188 1.109376 v 1 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.03125 0.5 -0.5 v -2.148438 c 0 -0.242188 -0.082031 -0.476562 -0.238281 -0.664062 l -1.277344 -1.554688 c -0.164062 -0.199219 -0.410156 -0.308594 -0.667969 -0.300781 c -0.261718 0.007812 -0.5 0.136719 -0.652343 0.34375 z m 0 0"/><path d="m 3.972656 1.023438 c -1.644531 0 -3 1.355468 -3 3 v 8 c 0 1.648437 1.355469 3 3 3 h 8 c 1.644532 0 3 -1.351563 3 -3 v -8 c 0 -1.644532 -1.355468 -3 -3 -3 z m 0 2 h 8 c 0.570313 0 1 0.429687 1 1 v 8 c 0 0.574218 -0.429687 1 -1 1 h -8 c -0.570312 0 -1 -0.425782 -1 -1 v -8 c 0 -0.570313 0.429688 -1 1 -1 z m 0 0"/></g></svg>

data/resources/style.css

@@ -39,10 +39,18 @@ outline {
 }
 
 /* Drag overlay */
-.lp-dragging-area-highlight {
+lpdragoverlay .overlay-status {
-  border-radius: 8px;
+  color: var(--accent-color);
-  background-color: color-mix(in srgb, var(--accent-bg-color) 35%, transparent);
+  background-color: color-mix(in srgb, var(--accent-bg-color) 8%, transparent);
-  margin: 24px;
+  /* Same color for border as for icon and label */
+  /* Probably due to a GTK bug, this currently does not give the exact same color */
+  border: 2px dashed color-mix(in srgb, currentColor var(--dim-opacity), transparent);
+  border-radius: 2px;
+  margin: 12px;
+}
+
+lpdragoverlay .overlay-status label {
+  opacity: var(--dim-opacity);
 }
 
 lpprintpreview {

po/POTFILES.in

@@ -20,6 +20,7 @@ src/util.rs
 src/util/gettext.rs
 src/widgets.rs
 src/widgets/drag_overlay.rs
+src/widgets/drag_overlay.ui
 src/widgets/error_details.rs
 src/widgets/error_details.ui
 src/widgets/image.rs

src/util.rs

@@ -1,5 +1,5 @@
 // Copyright (c) 2021-2023 Christopher Davis
-// Copyright (c) 2022-2023 Sophie Herold
+// Copyright (c) 2022-2024 Sophie Herold
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by

src/widgets/drag_overlay.rs

@@ -20,29 +20,31 @@
 //!
 //! This implementation is inspired by [Amberol](https://gitlab.gnome.org/World/amberol)
 
+use std::cell::OnceCell;
+use std::marker::PhantomData;
+
 use adw::prelude::*;
+use adw::subclass::prelude::*;
+use glib::Properties;
+use gtk::CompositeTemplate;
 
 use crate::deps::*;
 
 mod imp {
-    use std::cell::OnceCell;
-
-    use adw::subclass::prelude::*;
-    use glib::{ParamSpec, Properties, Value};
 
     use super::*;
 
-    #[derive(Debug, Default, Properties)]
+    #[derive(Debug, Default, CompositeTemplate, Properties)]
     #[properties(wrapper_type = super::LpDragOverlay)]
+    #[template(file = "drag_overlay.ui")]
     pub struct LpDragOverlay {
-        /// Usual content
-        #[property(set = Self::set_child)]
-        pub child: Option<gtk::Widget>,
         /// Widget overplayed when dragging over child
-        #[property(set = Self::set_overlayed)]
+        #[property(set = Self::set_content)]
-        pub overlayed: Option<gtk::Widget>,
+        pub content: PhantomData<Option<gtk::Widget>>,
-        pub overlay: gtk::Overlay,
+        #[template_child]
-        pub revealer: gtk::Revealer,
+        pub overlay: TemplateChild<gtk::Overlay>,
+        #[template_child]
+        pub revealer: TemplateChild<gtk::Revealer>,
         #[property(set = Self::set_drop_target, get, explicit_notify, construct_only)]
         pub drop_target: OnceCell<gtk::DropTarget>,
     }
@@ -54,49 +56,30 @@ mod imp {
         type ParentType = adw::Bin;
 
         fn class_init(klass: &mut Self::Class) {
+            Self::bind_template(klass);
             klass.set_css_name("lpdragoverlay");
         }
+
+        fn instance_init(obj: &glib::subclass::InitializingObject<Self>) {
+            obj.init_template();
+        }
     }
 
+    #[glib::derived_properties]
     impl ObjectImpl for LpDragOverlay {
-        fn properties() -> &'static [ParamSpec] {
-            Self::derived_properties()
-        }
-
-        fn set_property(&self, id: usize, value: &Value, pspec: &ParamSpec) {
-            self.derived_set_property(id, value, pspec)
-        }
-
-        fn property(&self, id: usize, pspec: &ParamSpec) -> Value {
-            self.derived_property(id, pspec)
-        }
-
         fn constructed(&self) {
-            self.overlay.set_parent(&*self.obj());
+            self.parent_constructed();
-            self.overlay.add_overlay(&self.revealer);
 
             self.revealer.set_can_target(false);
             self.revealer
                 .set_transition_type(gtk::RevealerTransitionType::Crossfade);
-            self.revealer.set_reveal_child(false);
+            //self.revealer.set_reveal_child(false);
-        }
-
-        fn dispose(&self) {
-            self.overlay.unparent();
         }
     }
     impl WidgetImpl for LpDragOverlay {}
     impl BinImpl for LpDragOverlay {}
 
     impl LpDragOverlay {
-        pub fn set_child(&self, child: Option<gtk::Widget>) {
-            self.overlay.set_child(child.as_ref());
-        }
-
-        pub fn set_overlayed(&self, overlayed: Option<gtk::Widget>) {
-            self.revealer.set_child(overlayed.as_ref());
-        }
-
         pub fn set_drop_target(&self, drop_target: gtk::DropTarget) {
             drop_target.connect_current_drop_notify(glib::clone!(
                 #[weak(rename_to = revealer)]
@@ -111,6 +94,10 @@ mod imp {
 
             self.obj().notify("drop-target");
         }
+
+        pub fn set_content(&self, child: Option<gtk::Widget>) {
+            self.overlay.set_child(child.as_ref());
+        }
     }
 }
 

src/widgets/drag_overlay.ui

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="LpDragOverlay" parent="AdwBin">
+    <property name="child">
+      <object class="GtkOverlay" id="overlay">
+        <child type="overlay">
+          <object class="GtkRevealer" id="revealer">
+            <property name="child">
+              <object class="AdwBin">
+                <style>
+                  <class name="background" />
+                </style>
+                <property name="child">
+                  <object class="AdwStatusPage">
+                    <property name="title" translatable="yes">Drop Image to View</property>
+                    <property name="icon-name">image-round-symbolic</property>
+                    <style>
+                      <class name="overlay-status" />
+                    </style>
+                  </object>
+                </property>
+              </object>
+            </property>
+          </object>
+        </child>
+      </object>
+    </property>
+  </template>
+</interface>

src/window.ui

@@ -250,15 +250,7 @@
             <child type="content">
               <object class="LpDragOverlay" id="drag_overlay">
                 <property name="drop_target">drop_target</property>
-                <property name="overlayed">
+                <property name="content">
-                  <object class="AdwBin">
-                    <property name="can-target">false</property>
-                    <style>
-                      <class name="lp-dragging-area-highlight" />
-                    </style>
-                  </object>
-                </property>
-                <property name="child">
                   <object class="GtkStack" id="stack">
                     <property name="visible-child">status_page</property>
                     <style>