From 884c42a754437294a1c71397876bafef9ea2b85f Mon Sep 17 00:00:00 2001 From: Alice Mikhaylenko Date: Thu, 9 Jan 2025 23:52:15 +0400 Subject: [PATCH 1/2] adaptive-preview: Make bezel a bit lighter So it stands out from shell panels at least a bit. Contrast won't be great here, but we have to keep bezels really dark, so that they work for screenshots. --- src/stylesheet/widgets/_inspector.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/stylesheet/widgets/_inspector.scss b/src/stylesheet/widgets/_inspector.scss index d4fabe190..43101cb38 100644 --- a/src/stylesheet/widgets/_inspector.scss +++ b/src/stylesheet/widgets/_inspector.scss @@ -14,7 +14,7 @@ adaptive-preview { } .device-view { - background: black; + background: #101011; color: white; padding: var(--top-bezel) var(--side-bezel) var(--bottom-bezel); border-radius: var(--top-device-corner-radius) @@ -45,6 +45,10 @@ adaptive-preview { drop-shadow(0 3px 0 var(--accent-bg-color)) drop-shadow(0 -3px 0 var(--accent-bg-color)); } + + .shell-top-bar, .shell-bottom-bar { + background: black; + } } } } -- GitLab From e2dd6199b5d178718829d910473e6922fbc9f96f Mon Sep 17 00:00:00 2001 From: Alice Mikhaylenko Date: Thu, 9 Jan 2025 23:55:38 +0400 Subject: [PATCH 2/2] adaptive-preview: Change outline to "Highlight bezel" --- src/adw-adaptive-preview-private.h | 6 ++-- src/adw-adaptive-preview.c | 38 +++++++++++++------------- src/adw-adaptive-preview.ui | 4 +-- src/stylesheet/widgets/_inspector.scss | 16 +++++++++++ 4 files changed, 40 insertions(+), 24 deletions(-) diff --git a/src/adw-adaptive-preview-private.h b/src/adw-adaptive-preview-private.h index 1a2f4bbe5..e9981936b 100644 --- a/src/adw-adaptive-preview-private.h +++ b/src/adw-adaptive-preview-private.h @@ -36,9 +36,9 @@ gboolean adw_adaptive_preview_get_scale_to_fit (AdwAdaptivePreview *self); void adw_adaptive_preview_set_scale_to_fit (AdwAdaptivePreview *self, gboolean scale_to_fit); -gboolean adw_adaptive_preview_get_outline (AdwAdaptivePreview *self); -void adw_adaptive_preview_set_outline (AdwAdaptivePreview *self, - gboolean outline); +gboolean adw_adaptive_preview_get_highlight_bezel (AdwAdaptivePreview *self); +void adw_adaptive_preview_set_highlight_bezel (AdwAdaptivePreview *self, + gboolean highlight_bezel); GtkWidget *adw_adaptive_preview_get_screen (AdwAdaptivePreview *self); diff --git a/src/adw-adaptive-preview.c b/src/adw-adaptive-preview.c index 36868af3b..07f45669d 100644 --- a/src/adw-adaptive-preview.c +++ b/src/adw-adaptive-preview.c @@ -73,7 +73,7 @@ struct _AdwAdaptivePreview float screen_scale; const char *notches; - gboolean outline; + gboolean highlight_bezel; gboolean changing_screen_size; gboolean changing_shell; @@ -93,7 +93,7 @@ enum { PROP_CHILD, PROP_WINDOW_CONTROLS, PROP_SCALE_TO_FIT, - PROP_OUTLINE, + PROP_HIGHLIGHT_BEZEL, LAST_PROP }; @@ -711,8 +711,8 @@ adw_adaptive_preview_get_property (GObject *object, case PROP_SCALE_TO_FIT: g_value_set_boolean (value, adw_adaptive_preview_get_scale_to_fit (self)); break; - case PROP_OUTLINE: - g_value_set_boolean (value, adw_adaptive_preview_get_outline (self)); + case PROP_HIGHLIGHT_BEZEL: + g_value_set_boolean (value, adw_adaptive_preview_get_highlight_bezel (self)); break; default: G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec); @@ -737,8 +737,8 @@ adw_adaptive_preview_set_property (GObject *object, case PROP_SCALE_TO_FIT: adw_adaptive_preview_set_scale_to_fit (self, g_value_get_boolean (value)); break; - case PROP_OUTLINE: - adw_adaptive_preview_set_outline (self, g_value_get_boolean (value)); + case PROP_HIGHLIGHT_BEZEL: + adw_adaptive_preview_set_highlight_bezel (self, g_value_get_boolean (value)); break; default: G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec); @@ -775,8 +775,8 @@ adw_adaptive_preview_class_init (AdwAdaptivePreviewClass *klass) TRUE, G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS | G_PARAM_EXPLICIT_NOTIFY); - props[PROP_OUTLINE] = - g_param_spec_boolean ("outline", NULL, NULL, + props[PROP_HIGHLIGHT_BEZEL] = + g_param_spec_boolean ("highlight-bezel", NULL, NULL, FALSE, G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS | G_PARAM_EXPLICIT_NOTIFY); @@ -966,32 +966,32 @@ adw_adaptive_preview_set_scale_to_fit (AdwAdaptivePreview *self, } gboolean -adw_adaptive_preview_get_outline (AdwAdaptivePreview *self) +adw_adaptive_preview_get_highlight_bezel (AdwAdaptivePreview *self) { g_return_val_if_fail (ADW_IS_ADAPTIVE_PREVIEW (self), FALSE); - return self->outline; + return self->highlight_bezel; } void -adw_adaptive_preview_set_outline (AdwAdaptivePreview *self, - gboolean outline) +adw_adaptive_preview_set_highlight_bezel (AdwAdaptivePreview *self, + gboolean highlight_bezel) { g_return_if_fail (ADW_IS_ADAPTIVE_PREVIEW (self)); - outline = !!outline; + highlight_bezel = !!highlight_bezel; - if (outline == self->outline) + if (highlight_bezel == self->highlight_bezel) return; - self->outline = outline; + self->highlight_bezel = highlight_bezel; - if (outline) - gtk_widget_add_css_class (self->screen_view, "outline"); + if (highlight_bezel) + gtk_widget_add_css_class (self->device_view, "highlight"); else - gtk_widget_remove_css_class (self->screen_view, "outline"); + gtk_widget_remove_css_class (self->device_view, "highlight"); - g_object_notify_by_pspec (G_OBJECT (self), props[PROP_OUTLINE]); + g_object_notify_by_pspec (G_OBJECT (self), props[PROP_HIGHLIGHT_BEZEL]); } GtkWidget * diff --git a/src/adw-adaptive-preview.ui b/src/adw-adaptive-preview.ui index 1591a5142..956fbb1ae 100644 --- a/src/adw-adaptive-preview.ui +++ b/src/adw-adaptive-preview.ui @@ -144,8 +144,8 @@ - Show Outline - + Highlight Bezel + diff --git a/src/stylesheet/widgets/_inspector.scss b/src/stylesheet/widgets/_inspector.scss index 43101cb38..bfce80ca8 100644 --- a/src/stylesheet/widgets/_inspector.scss +++ b/src/stylesheet/widgets/_inspector.scss @@ -33,6 +33,22 @@ adaptive-preview { 0 0 0 1px RGB(0 0 0 / #{if($contrast == 'high', 80%, 5%)}); } + &.highlight { + background: oklab(from var(--accent-bg-color) 0.5 a b); + + .screen-view .shell-top-bar, + .screen-view .shell-bottom-bar { + background: none; + } + + &.custom { + box-shadow: 0 2px 8px 2px RGB(0 0 0 / 7%), + 0 3px 20px 10px RGB(0 0 0 / 5%), + 0 6px 32px 16px RGB(0 0 0 / 2%), + 0 0 0 3px oklab(from var(--accent-bg-color) 0.5 a b); + } + } + .screen-view { border-radius: var(--top-screen-corner-radius) var(--top-screen-corner-radius) -- GitLab