GNOME.org
 

[gnome-builder/wip/gtk4-port] libide/gui: start on style variant selection

commit 61302e9a3860729c48e7e82c1732641a21f92e59
Author: Christian Hergert <chergert redhat com>
Date:   Thu Mar 31 17:36:35 2022 -0700

    libide/gui: start on style variant selection

 src/libide/gui/ide-preferences-builtin.c           |  74 +++++++-
 src/libide/gui/ide-preferences-window.c            |   1 +
 src/libide/gui/ide-style-variant-preview-private.h |  33 ++++
 src/libide/gui/ide-style-variant-preview.c         | 206 +++++++++++++++++++++
 src/libide/gui/ide-style-variant-preview.ui        |  75 ++++++++
 src/libide/gui/images/style-preview-dark.png       | Bin 0 -> 56178 bytes
 src/libide/gui/images/style-preview-default.png    | Bin 0 -> 64441 bytes
 src/libide/gui/images/style-preview-light.png      | Bin 0 -> 60807 bytes
 src/libide/gui/libide-gui.gresource.xml            |   5 +
 src/libide/gui/meson.build                         |   2 +
 src/libide/gui/style.css                           |  42 +++++
 11 files changed, 434 insertions(+), 4 deletions(-)
---
diff --git a/src/libide/gui/ide-preferences-builtin.c b/src/libide/gui/ide-preferences-builtin.c
index 43dadaabb..f92f36c18 100644
--- a/src/libide/gui/ide-preferences-builtin.c
+++ b/src/libide/gui/ide-preferences-builtin.c
@@ -29,6 +29,7 @@
 #include <libpeas/peas.h>
 
 #include "ide-preferences-builtin-private.h"
+#include "ide-style-variant-preview-private.h"
 
 static gboolean is_plugin_category (const char *name);
 
@@ -580,14 +581,73 @@ ide_preferences_builtin_register_vcs (DzlPreferences *preferences)
   g_clear_object (&extensions);
 }
 #endif
+#endif
 
 static void
-ide_preferences_builtin_register_sdks (DzlPreferences *preferences)
+handle_style_variant (const char                   *page_name,
+                      const IdePreferenceItemEntry *entry,
+                      AdwPreferencesGroup          *group,
+                      gpointer                      user_data)
 {
-  /* only the page goes here, plugins will fill in the details */
-  dzl_preferences_add_page (preferences, "sdk", _("SDKs"), 550);
+  static const struct {
+    const char *key;
+    AdwColorScheme color_scheme;
+    const char *title;
+  } variants[] = {
+    { "default", ADW_COLOR_SCHEME_DEFAULT, N_("Follow") },
+    { "light", ADW_COLOR_SCHEME_FORCE_LIGHT, N_("Light") },
+    { "dark", ADW_COLOR_SCHEME_FORCE_DARK, N_("Dark") },
+  };
+  GtkBox *box;
+  GtkBox *options;
+
+  g_assert (ADW_IS_PREFERENCES_GROUP (group));
+
+  box = g_object_new (GTK_TYPE_BOX,
+                      "css-name", "list",
+                      NULL);
+  gtk_widget_add_css_class (GTK_WIDGET (box), "boxed-list");
+  gtk_widget_add_css_class (GTK_WIDGET (box), "style-variant");
+
+  options = g_object_new (GTK_TYPE_BOX,
+                          "halign", GTK_ALIGN_CENTER,
+                          NULL);
+
+  for (guint i = 0; i < G_N_ELEMENTS (variants); i++)
+    {
+      IdeStyleVariantPreview *preview;
+      GtkButton *button;
+      GtkLabel *label;
+      GtkBox *vbox;
+
+      vbox = g_object_new (GTK_TYPE_BOX,
+                           "orientation", GTK_ORIENTATION_VERTICAL,
+                           "spacing", 8,
+                           "margin-top", 18,
+                           "margin-bottom", 18,
+                           "margin-start", 9,
+                           "margin-end", 9,
+                           NULL);
+      preview = g_object_new (IDE_TYPE_STYLE_VARIANT_PREVIEW,
+                              "color-scheme", variants[i].color_scheme,
+                              NULL);
+      button = g_object_new (GTK_TYPE_TOGGLE_BUTTON,
+                             "action-name", "app.style-variant",
+                             "child", preview,
+                             NULL);
+      gtk_actionable_set_action_target (GTK_ACTIONABLE (button), "s", variants[i].key);
+      label = g_object_new (GTK_TYPE_LABEL,
+                            "xalign", 0.5f,
+                            "label", g_dgettext (NULL, variants[i].title),
+                            NULL);
+      gtk_box_append (vbox, GTK_WIDGET (button));
+      gtk_box_append (vbox, GTK_WIDGET (label));
+      gtk_box_append (options, GTK_WIDGET (vbox));
+    }
+
+  gtk_box_append (box, GTK_WIDGET (options));
+  adw_preferences_group_add (group, GTK_WIDGET (box));
 }
-#endif
 
 static const IdePreferencePageEntry pages[] = {
   { NULL, "visual",   "appearance", "org.gnome.Builder-appearance-symbolic",    0, N_("Appearance") },
@@ -642,6 +702,8 @@ static const IdePreferenceGroupEntry groups[] = {
 };
 
 static const IdePreferenceItemEntry items[] = {
+  { "appearance", "style", "style-variant", 0, handle_style_variant },
+
   { "appearance", "accessories", "grid", 0, ide_preferences_window_toggle,
     N_("Show Grid Pattern"),
     N_("Display a grid pattern underneath source code"),
@@ -851,6 +913,7 @@ ide_preferences_builtin_add_schemes (const char                   *page_name,
                         "child", preview,
                         "margin-bottom", 12,
                         NULL);
+  gtk_widget_add_css_class (GTK_WIDGET (frame), "text-preview");
   adw_preferences_group_add (group, GTK_WIDGET (frame));
 
   manager = gtk_source_style_scheme_manager_get_default ();
@@ -868,6 +931,9 @@ ide_preferences_builtin_add_schemes (const char                   *page_name,
       GtkSourceStyleScheme *scheme = gtk_source_style_scheme_manager_get_scheme (manager, scheme_ids[i]);
       GtkWidget *selector = gtk_source_style_scheme_preview_new (scheme);
 
+      gtk_actionable_set_action_name (GTK_ACTIONABLE (selector), "app.style-scheme-name");
+      gtk_actionable_set_action_target (GTK_ACTIONABLE (selector), "s", scheme_ids[i]);
+
       gtk_flow_box_append (flowbox, selector);
     }
 
diff --git a/src/libide/gui/ide-preferences-window.c b/src/libide/gui/ide-preferences-window.c
index 8b8244611..18b736655 100644
--- a/src/libide/gui/ide-preferences-window.c
+++ b/src/libide/gui/ide-preferences-window.c
@@ -479,6 +479,7 @@ ide_preferences_window_init (IdePreferencesWindow *self)
   self->info.data = g_array_new (FALSE, FALSE, sizeof (DataDestroy));
 
   gtk_widget_init_template (GTK_WIDGET (self));
+  gtk_widget_add_css_class (GTK_WIDGET (self), "preferences");
 }
 
 GtkWidget *
diff --git a/src/libide/gui/ide-style-variant-preview-private.h 
b/src/libide/gui/ide-style-variant-preview-private.h
new file mode 100644
index 000000000..ed5877c71
--- /dev/null
+++ b/src/libide/gui/ide-style-variant-preview-private.h
@@ -0,0 +1,33 @@
+/* ide-style-variant-preview-private.h
+ *
+ * Copyright 2022 Christian Hergert <chergert redhat com>
+ *
+ * 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
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+#pragma once
+
+#include <adwaita.h>
+
+G_BEGIN_DECLS
+
+#define IDE_TYPE_STYLE_VARIANT_PREVIEW (ide_style_variant_preview_get_type())
+
+G_DECLARE_FINAL_TYPE (IdeStyleVariantPreview, ide_style_variant_preview, IDE, STYLE_VARIANT_PREVIEW, 
GtkWidget)
+
+GtkWidget *ide_style_variant_preview_new (AdwColorScheme color_scheme);
+
+G_END_DECLS
diff --git a/src/libide/gui/ide-style-variant-preview.c b/src/libide/gui/ide-style-variant-preview.c
new file mode 100644
index 000000000..ce9b80f6b
--- /dev/null
+++ b/src/libide/gui/ide-style-variant-preview.c
@@ -0,0 +1,206 @@
+/* ide-style-variant-preview.c
+ *
+ * Copyright 2022 Christian Hergert <unknown domain org>
+ *
+ * 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
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+#define G_LOG_DOMAIN "ide-style-variant-preview"
+
+#include "config.h"
+
+#include "ide-style-variant-preview-private.h"
+
+struct _IdeStyleVariantPreview
+{
+  GtkWidget parent_instance;
+
+  AdwColorScheme color_scheme;
+
+  GtkPicture *wallpaper;
+
+  AdwBin *front;
+  AdwBin *front_header;
+
+  AdwBin *back;
+  AdwBin *back_header;
+};
+
+G_DEFINE_FINAL_TYPE (IdeStyleVariantPreview, ide_style_variant_preview, GTK_TYPE_WIDGET)
+
+enum {
+  PROP_0,
+  PROP_COLOR_SCHEME,
+  N_PROPS
+};
+
+static GParamSpec *properties [N_PROPS];
+
+GtkWidget *
+ide_style_variant_preview_new (AdwColorScheme color_scheme)
+{
+  return g_object_new (IDE_TYPE_STYLE_VARIANT_PREVIEW,
+                       "color-scheme", color_scheme,
+                       NULL);
+}
+
+static void
+ide_style_variant_preview_set_color_scheme (IdeStyleVariantPreview *self,
+                                            AdwColorScheme          color_scheme)
+{
+  const char *wallpaper;
+  const char *front;
+  const char *back;
+
+  g_assert (IDE_IS_STYLE_VARIANT_PREVIEW (self));
+
+  self->color_scheme = color_scheme;
+
+  switch (color_scheme)
+    {
+    case ADW_COLOR_SCHEME_PREFER_LIGHT:
+    case ADW_COLOR_SCHEME_FORCE_LIGHT:
+      front = back = "light";
+      wallpaper = "/org/gnome/libide-gui/images/style-preview-light.png";
+      break;
+
+    case ADW_COLOR_SCHEME_PREFER_DARK:
+    case ADW_COLOR_SCHEME_FORCE_DARK:
+      front = back = "dark";
+      wallpaper = "/org/gnome/libide-gui/images/style-preview-dark.png";
+      break;
+
+    case ADW_COLOR_SCHEME_DEFAULT:
+    default:
+      front = "light";
+      back = "dark";
+      wallpaper = "/org/gnome/libide-gui/images/style-preview-default.png";
+      break;
+    }
+
+  gtk_widget_remove_css_class (GTK_WIDGET (self->front), "dark");
+  gtk_widget_remove_css_class (GTK_WIDGET (self->front), "light");
+  gtk_widget_add_css_class (GTK_WIDGET (self->front), front);
+
+  gtk_widget_remove_css_class (GTK_WIDGET (self->front_header), "dark");
+  gtk_widget_remove_css_class (GTK_WIDGET (self->front_header), "light");
+  gtk_widget_add_css_class (GTK_WIDGET (self->front_header), front);
+
+  gtk_widget_remove_css_class (GTK_WIDGET (self->back), "dark");
+  gtk_widget_remove_css_class (GTK_WIDGET (self->back), "light");
+  gtk_widget_add_css_class (GTK_WIDGET (self->back), back);
+
+  gtk_widget_remove_css_class (GTK_WIDGET (self->back_header), "dark");
+  gtk_widget_remove_css_class (GTK_WIDGET (self->back_header), "light");
+  gtk_widget_add_css_class (GTK_WIDGET (self->back_header), back);
+
+  gtk_picture_set_resource (self->wallpaper, wallpaper);
+}
+
+static void
+ide_style_variant_preview_snapshot (GtkWidget   *widget,
+                                    GtkSnapshot *snapshot)
+{
+  GTK_WIDGET_CLASS (ide_style_variant_preview_parent_class)->snapshot (widget, snapshot);
+}
+
+static void
+ide_style_variant_preview_dispose (GObject *object)
+{
+  IdeStyleVariantPreview *self = (IdeStyleVariantPreview *)object;
+  GtkWidget *child;
+
+  while ((child = gtk_widget_get_first_child (GTK_WIDGET (self))))
+    gtk_widget_unparent (child);
+
+  G_OBJECT_CLASS (ide_style_variant_preview_parent_class)->dispose (object);
+}
+
+static void
+ide_style_variant_preview_get_property (GObject    *object,
+                                        guint       prop_id,
+                                        GValue     *value,
+                                        GParamSpec *pspec)
+{
+  IdeStyleVariantPreview *self = IDE_STYLE_VARIANT_PREVIEW (object);
+
+  switch (prop_id)
+    {
+    case PROP_COLOR_SCHEME:
+      g_value_set_enum (value, self->color_scheme);
+      break;
+
+    default:
+      G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+    }
+}
+
+static void
+ide_style_variant_preview_set_property (GObject      *object,
+                                        guint         prop_id,
+                                        const GValue *value,
+                                        GParamSpec   *pspec)
+{
+  IdeStyleVariantPreview *self = IDE_STYLE_VARIANT_PREVIEW (object);
+
+  switch (prop_id)
+    {
+    case PROP_COLOR_SCHEME:
+      ide_style_variant_preview_set_color_scheme (self, g_value_get_enum (value));
+      break;
+
+    default:
+      G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
+    }
+}
+
+static void
+ide_style_variant_preview_class_init (IdeStyleVariantPreviewClass *klass)
+{
+  GObjectClass *object_class = G_OBJECT_CLASS (klass);
+  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
+
+  object_class->dispose = ide_style_variant_preview_dispose;
+  object_class->get_property = ide_style_variant_preview_get_property;
+  object_class->set_property = ide_style_variant_preview_set_property;
+
+  widget_class->snapshot = ide_style_variant_preview_snapshot;
+
+  properties [PROP_COLOR_SCHEME] =
+    g_param_spec_enum ("color-scheme",
+                       "Color Scheme",
+                       "Color Scheme",
+                       ADW_TYPE_COLOR_SCHEME,
+                       ADW_COLOR_SCHEME_DEFAULT,
+                       (G_PARAM_READWRITE | G_PARAM_STATIC_STRINGS));
+
+  g_object_class_install_properties (object_class, N_PROPS, properties);
+
+  gtk_widget_class_set_css_name (widget_class, "stylevariantpreview");
+  gtk_widget_class_set_layout_manager_type (widget_class, GTK_TYPE_FIXED_LAYOUT);
+  gtk_widget_class_set_template_from_resource (widget_class, 
"/org/gnome/libide-gui/ui/ide-style-variant-preview.ui");
+  gtk_widget_class_bind_template_child (widget_class, IdeStyleVariantPreview, wallpaper);
+  gtk_widget_class_bind_template_child (widget_class, IdeStyleVariantPreview, back);
+  gtk_widget_class_bind_template_child (widget_class, IdeStyleVariantPreview, back_header);
+  gtk_widget_class_bind_template_child (widget_class, IdeStyleVariantPreview, front);
+  gtk_widget_class_bind_template_child (widget_class, IdeStyleVariantPreview, front_header);
+}
+
+static void
+ide_style_variant_preview_init (IdeStyleVariantPreview *self)
+{
+  gtk_widget_init_template (GTK_WIDGET (self));
+}
diff --git a/src/libide/gui/ide-style-variant-preview.ui b/src/libide/gui/ide-style-variant-preview.ui
new file mode 100644
index 000000000..2df9e4867
--- /dev/null
+++ b/src/libide/gui/ide-style-variant-preview.ui
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="IdeStyleVariantPreview" parent="GtkWidget">
+    <child>
+      <object class="AdwBin">
+        <style>
+          <class name="wallpaper"/>
+        </style>
+        <property name="margin-top">2</property>
+        <property name="margin-bottom">2</property>
+        <property name="margin-start">2</property>
+        <property name="margin-end">2</property>
+        <property name="overflow">hidden</property>
+        <child>
+          <object class="GtkPicture" id="wallpaper">
+            <property name="keep-aspect-ratio">false</property>
+            <property name="width-request">164</property>
+            <property name="height-request">90</property>
+          </object>
+        </child>
+      </object>
+    </child>
+
+    <child>
+      <object class="AdwBin" id="back">
+        <style>
+          <class name="window"/>
+        </style>
+        <property name="width-request">75</property>
+        <property name="height-request">50</property>
+        <layout>
+          <property name="transform">translate(60, 15)</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="AdwBin" id="back_header">
+        <style>
+          <class name="header"/>
+        </style>
+        <property name="width-request">75</property>
+        <property name="height-request">10</property>
+        <layout>
+          <property name="transform">translate(60, 15)</property>
+        </layout>
+      </object>
+    </child>
+
+    <child>
+      <object class="AdwBin" id="front">
+        <style>
+          <class name="window"/>
+        </style>
+        <property name="width-request">75</property>
+        <property name="height-request">50</property>
+        <layout>
+          <property name="transform">translate(20, 30)</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="AdwBin" id="front_header">
+        <style>
+          <class name="header"/>
+        </style>
+        <property name="width-request">75</property>
+        <property name="height-request">10</property>
+        <layout>
+          <property name="transform">translate(20, 30)</property>
+        </layout>
+      </object>
+    </child>
+
+  </template>
+</interface>
diff --git a/src/libide/gui/images/style-preview-dark.png b/src/libide/gui/images/style-preview-dark.png
new file mode 100644
index 000000000..44515ae09
Binary files /dev/null and b/src/libide/gui/images/style-preview-dark.png differ
diff --git a/src/libide/gui/images/style-preview-default.png b/src/libide/gui/images/style-preview-default.png
new file mode 100644
index 000000000..6ad011597
Binary files /dev/null and b/src/libide/gui/images/style-preview-default.png differ
diff --git a/src/libide/gui/images/style-preview-light.png b/src/libide/gui/images/style-preview-light.png
new file mode 100644
index 000000000..d887e4e22
Binary files /dev/null and b/src/libide/gui/images/style-preview-light.png differ
diff --git a/src/libide/gui/libide-gui.gresource.xml b/src/libide/gui/libide-gui.gresource.xml
index 8235d4336..616e09255 100644
--- a/src/libide/gui/libide-gui.gresource.xml
+++ b/src/libide/gui/libide-gui.gresource.xml
@@ -5,6 +5,10 @@
   </gresource>
   <gresource prefix="/org/gnome/libide-gui">
     <file preprocess="xml-stripblanks">gtk/menus.ui</file>
+    <file>images/style-preview-dark.png</file>
+    <file>images/style-preview-default.png</file>
+    <file>images/style-preview-light.png</file>
+    <file>style.css</file>
   </gresource>
   <gresource prefix="/org/gnome/libide-gui/ui">
     <file preprocess="xml-stripblanks">ide-environment-editor-row.ui</file>
@@ -16,5 +20,6 @@
     <file preprocess="xml-stripblanks">ide-preferences-window.ui</file>
     <file preprocess="xml-stripblanks">ide-primary-workspace.ui</file>
     <file preprocess="xml-stripblanks">ide-run-button.ui</file>
+    <file preprocess="xml-stripblanks">ide-style-variant-preview.ui</file>
   </gresource>
 </gresources>
diff --git a/src/libide/gui/meson.build b/src/libide/gui/meson.build
index d138c6a45..1a908602a 100644
--- a/src/libide/gui/meson.build
+++ b/src/libide/gui/meson.build
@@ -53,6 +53,7 @@ libide_gui_private_headers = [
   'ide-primary-workspace-private.h',
   'ide-recoloring-private.h',
   'ide-session-private.h',
+  'ide-style-variant-preview-private.h',
 ]
 
 libide_gui_private_sources = [
@@ -67,6 +68,7 @@ libide_gui_private_sources = [
   'ide-primary-workspace-actions.c',
   'ide-recoloring.c',
   'ide-session.c',
+  'ide-style-variant-preview.c',
   'ide-workspace-actions.c',
 ]
 
diff --git a/src/libide/gui/style.css b/src/libide/gui/style.css
new file mode 100644
index 000000000..67247f929
--- /dev/null
+++ b/src/libide/gui/style.css
@@ -0,0 +1,42 @@
+/* Preferences */
+window.preferences list.boxed-list.style-variant button {
+  padding: 0;
+  margin: 0;
+  border: 3px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+}
+window.preferences list.boxed-list.style-variant button:checked {
+  border-color: @theme_selected_bg_color;
+}
+stylevariantpreview widget.wallpaper {
+  border-radius: 6px;
+  box-shadow: 0 0 9px 1px rgba(0,0,0,.2);
+}
+stylevariantpreview widget.window {
+  box-shadow: 0 0 9px 2px rgba(0,0,0,.25);
+  border-radius: 7px;
+  border: 1px solid alpha(white, .075);
+}
+stylevariantpreview widget.window.dark {
+  background: #242424;
+}
+stylevariantpreview widget.window.light {
+  background: #fafafa;
+}
+stylevariantpreview widget.header {
+  border-radius: 7px 7px 0 0;
+  border-bottom: 1px solid alpha(white, 0.075);
+}
+stylevariantpreview widget.header.dark {
+  background: #484848;
+}
+stylevariantpreview widget.header.light {
+  background: #cccccc;
+}
+frame.text-preview,
+GtkSourceStyleSchemePreview frame {
+  box-shadow: 0 0 0 1px rgba(0,0,0,.03),
+              0 1px 3px 1px rgba(0,0,0,.07),
+              0 2px 6px 2px rgba(0,0,0,.03);
+}
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]