Tweaks

Author: sonnyp

src/Library/demos/CSS Gradients/main.blp

@@ -1,5 +1,6 @@
 using Gtk 4.0;
 using Adw 1;
+using GtkSource 5;
 
 Adw.StatusPage {
   title: "CSS Gradients";
@@ -115,17 +116,15 @@ Adw.StatusPage {
 
       Adw.ComboRow combo_row_gradient_type {
         title: _("Gradient type");
-        model: 
-        StringList list {
+        model: StringList list {
           strings [_("Linear"), _("Radial"), _("Conic")]
         };
       }
 
       Adw.SpinRow spin_row_angle {
         title: _("Angle");
         climb-rate: 0.2;
-        adjustment: 
-        Adjustment adjustment_angle {
+        adjustment: Adjustment adjustment_angle {
           lower: 0;
           upper: 360;
           step-increment: 10;
@@ -135,10 +134,10 @@ Adw.StatusPage {
 
       Adw.ActionRow {
         title: _("First color stop");
-        activatable-widget: color_dialog_button_first_color;
+        activatable-widget: button_color_1;
 
         [suffix]
-        ColorDialogButton color_dialog_button_first_color {
+        ColorDialogButton button_color_1 {
           valign: center;
           dialog: color_dialog;
           rgba: "#e01b24";
@@ -147,10 +146,10 @@ Adw.StatusPage {
 
       Adw.ActionRow {
         title: _("Second color stop");
-        activatable-widget: color_dialog_button_second_color;
+        activatable-widget: button_color_2;
 
         [suffix]
-        ColorDialogButton color_dialog_button_second_color {
+        ColorDialogButton button_color_2 {
           valign: center;
           dialog: color_dialog;
           rgba: "#3584e4";
@@ -159,10 +158,10 @@ Adw.StatusPage {
 
       Adw.ActionRow {
         title: _("Third color stop");
-        activatable-widget: color_dialog_button_third_color;
+        activatable-widget: button_color_3;
 
         [suffix]
-        ColorDialogButton color_dialog_button_third_color {
+        ColorDialogButton button_color_3 {
           valign: center;
           dialog: color_dialog;
           rgba: "#f6d32d";
@@ -173,32 +172,27 @@ Adw.StatusPage {
         title: _("Generated CSS");
 
         Overlay {
-          $GtkSourceView source_view {
-            height-request: "50";
-            sensitive: "false";
-            monospace: "true";
-            auto-indent: "true";
-            indent-width: "2";
-            insert-spaces-instead-of-tabs: "true";
-            tab-width: "2";
-            buffer: 
-            $GtkSourceBuffer gtksource_buffer {
-              highlight-syntax: "true";
-            };
-          }
-
           [overlay]
           Button button_copy_css {
-            margin-top: 6;
+            margin-bottom: 6;
             margin-end: 6;
-            valign: start;
+            valign: end;
             halign: end;
-            tooltip-text: _("Copy CSS");
+            tooltip-text: _("Copy");
             icon-name: "edit-copy-symbolic";
+            styles ["flat"]
+          }
 
-            styles [
-              "flat",
-            ]
+          GtkSource.View source_view {
+            top-margin: 6;
+            bottom-margin: 6;
+            left-margin: 6;
+            right-margin: 6;
+            editable: false;
+            monospace: true;
+            buffer: GtkSource.Buffer gtksource_buffer {
+              highlight-syntax: true;
+            };
           }
         }
       }
@@ -216,5 +210,4 @@ Adw.StatusPage {
   }
 }
 
-ColorDialog color_dialog {
-}
+ColorDialog color_dialog {}

src/Library/demos/CSS Gradients/main.js

@@ -10,91 +10,69 @@ const combo_row_gradient_type = workbench.builder.get_object(
 );
 const adjustment_angle = workbench.builder.get_object("adjustment_angle");
 const spin_row_angle = workbench.builder.get_object("spin_row_angle");
-const color_dialog_button_first_color = workbench.builder.get_object(
-  "color_dialog_button_first_color",
-);
-const color_dialog_button_second_color = workbench.builder.get_object(
-  "color_dialog_button_second_color",
-);
-const color_dialog_button_third_color = workbench.builder.get_object(
-  "color_dialog_button_third_color",
-);
+const button_color_1 = workbench.builder.get_object("button_color_1");
+const button_color_2 = workbench.builder.get_object("button_color_2");
+const button_color_3 = workbench.builder.get_object("button_color_3");
 const gtksource_buffer = workbench.builder.get_object("gtksource_buffer");
 const button_copy_css = workbench.builder.get_object("button_copy_css");
 
-const clipboard = Gdk.Display.get_default().get_clipboard();
-
-button_copy_css.connect("clicked", () => {
-  clipboard.set(gtksource_buffer.text);
-});
+combo_row_gradient_type.connect("notify::selected", update);
+adjustment_angle.connect("value-changed", update);
+button_color_1.connect("notify::rgba", update);
+button_color_2.connect("notify::rgba", update);
+button_color_3.connect("notify::rgba", update);
 
-combo_row_gradient_type.connect("notify::selected", () => {
+function update() {
   spin_row_angle.sensitive = combo_row_gradient_type.selected !== 1;
-  updateGradient();
-});
-
-adjustment_angle.connect("value-changed", () => {
-  updateGradient();
-});
-
-color_dialog_button_first_color.connect("notify::rgba", () => {
-  updateGradient();
-});
-
-color_dialog_button_second_color.connect("notify::rgba", () => {
-  updateGradient();
-});
-
-color_dialog_button_third_color.connect("notify::rgba", () => {
-  updateGradient();
-});
-
-function updateGradient() {
-  const css = getCss();
+  const css = generateCss();
   gtksource_buffer.set_text(css, -1);
   updateCssProvider(css);
 }
+update();
 
-function getCss() {
+function generateCss() {
   const angle_string = adjustment_angle.value;
-  const first_color_string = color_dialog_button_first_color.rgba.to_string();
-  const second_color_string = color_dialog_button_second_color.rgba.to_string();
-  const third_color_string = color_dialog_button_third_color.rgba.to_string();
+  const first_color_string = button_color_1.rgba.to_string();
+  const second_color_string = button_color_2.rgba.to_string();
+  const third_color_string = button_color_3.rgba.to_string();
 
-  switch (combo_row_gradient_type.selected) {
-    case 1:
-      return `
+  let css = "";
+
+  console.log(combo_row_gradient_type.selected);
+
+  if (combo_row_gradient_type.selected === 0) {
+    css = `
 .background-gradient {
-  background-image: radial-gradient(
+  background-image: linear-gradient(
+    ${angle_string}deg,
     ${first_color_string},
     ${second_color_string},
     ${third_color_string}
   );
-}
-`;
-    case 2:
-      return `
+}`;
+  } else if (combo_row_gradient_type.selected === 1) {
+    css = `
 .background-gradient {
-  background-image: conic-gradient(
-    from ${angle_string}deg,
+  background-image: radial-gradient(
     ${first_color_string},
     ${second_color_string},
     ${third_color_string}
   );
 }
 `;
-    default:
-      return `
+  } else if (combo_row_gradient_type.selected === 2) {
+    css = `
 .background-gradient {
-  background-image: linear-gradient(
-    ${angle_string}deg,
+  background-image: conic-gradient(
+    from ${angle_string}deg,
     ${first_color_string},
     ${second_color_string},
     ${third_color_string}
   );
-}
-`;
+}`;
   }
+
+  return css.trimStart();
 }
 
 function updateCssProvider(css) {
@@ -113,6 +91,16 @@ function updateCssProvider(css) {
   );
 }
 
+/*
+ * code view
+ */
+
+const clipboard = Gdk.Display.get_default().get_clipboard();
+
+button_copy_css.connect("clicked", () => {
+  clipboard.set(gtksource_buffer.text);
+});
+
 const scheme_manager = GtkSource.StyleSchemeManager.get_default();
 const style_manager = Adw.StyleManager.get_default();
 style_manager.connect("notify::dark", () => {
@@ -125,11 +113,8 @@ function updateColorScheme() {
   );
   gtksource_buffer.set_style_scheme(scheme);
 }
+updateColorScheme();
 
 const language_manager = GtkSource.LanguageManager.get_default();
 const css_language = language_manager.get_language("css");
 gtksource_buffer.set_language(css_language);
-
-updateColorScheme();
-
-updateGradient();