dragOverlay: Try out new design proposal
Teams/Design/os-mockups#186
This commit is contained in:
Sophie Herold
parent
21e7bed0b0
commit
b72811bb9c
7 changed files with 72 additions and 53 deletions
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -39,10 +39,18 @@ outline {
|
|||
}
|
||||
|
||||
/* Drag overlay */
|
||||
.lp-dragging-area-highlight {
|
||||
border-radius: 8px;
|
||||
background-color: color-mix(in srgb, var(--accent-bg-color) 35%, transparent);
|
||||
margin: 24px;
|
||||
lpdragoverlay .overlay-status {
|
||||
color: var(--accent-color);
|
||||
background-color: color-mix(in srgb, var(--accent-bg-color) 8%, transparent);
|
||||
/* 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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)]
|
||||
pub overlayed: Option<gtk::Widget>,
|
||||
pub overlay: gtk::Overlay,
|
||||
pub revealer: gtk::Revealer,
|
||||
#[property(set = Self::set_content)]
|
||||
pub content: PhantomData<Option<gtk::Widget>>,
|
||||
#[template_child]
|
||||
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.overlay.add_overlay(&self.revealer);
|
||||
self.parent_constructed();
|
||||
|
||||
self.revealer.set_can_target(false);
|
||||
self.revealer
|
||||
.set_transition_type(gtk::RevealerTransitionType::Crossfade);
|
||||
self.revealer.set_reveal_child(false);
|
||||
}
|
||||
|
||||
fn dispose(&self) {
|
||||
self.overlay.unparent();
|
||||
//self.revealer.set_reveal_child(false);
|
||||
}
|
||||
}
|
||||
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());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
29
src/widgets/drag_overlay.ui
Normal file
29
src/widgets/drag_overlay.ui
Normal file
|
|
@ -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>
|
||||
|
|
@ -250,15 +250,7 @@
|
|||
<child type="content">
|
||||
<object class="LpDragOverlay" id="drag_overlay">
|
||||
<property name="drop_target">drop_target</property>
|
||||
<property name="overlayed">
|
||||
<object class="AdwBin">
|
||||
<property name="can-target">false</property>
|
||||
<style>
|
||||
<class name="lp-dragging-area-highlight" />
|
||||
</style>
|
||||
</object>
|
||||
</property>
|
||||
<property name="child">
|
||||
<property name="content">
|
||||
<object class="GtkStack" id="stack">
|
||||
<property name="visible-child">status_page</property>
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue