New design

lainsce · Sep 8, 2023 · f8472a9 · f8472a9
1 parent f7c3b57
commit f8472a9
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 81 deletions.
diff --git a/data/style.css b/data/style.css
@@ -1,6 +1,6 @@
 /* app */
 .clr-hue trough {
-    background: linear-gradient(180deg,
+    background: linear-gradient(90deg,
         rgba(255,0,0,1) 0%,
         rgba(255,255,0,1) 16.66%,
         rgba(0,255,0,1) 33.33%,
@@ -9,11 +9,10 @@
         rgba(255,0,255,1) 83.33%,
         rgba(255,0,0,1) 100%
     );
-    min-width: 20px;
-    padding: 6px 0;
+    min-height: 20px;
+    padding: 0 6px;
 }
 .clr-hue {
-    margin: 0 0 0 6px;
     padding: 0;
 }
 .clr-hue slider {
@@ -22,7 +21,7 @@
 	min-width: 20px;
 	min-height: 20px;
 	background: none;
-  border-radius: 999px;
+    border-radius: 999px;
 }
 
 .clr-palette button image {
@@ -31,7 +30,6 @@
 .clr-palette button.light image {
 	color: #000;
 }
-
-.text-field {
-  min-height: 42px;
+.clr-props {
+    background: @surface_container_high_bg_color;
 }
diff --git a/data/ui/window.blp b/data/ui/window.blp
@@ -8,73 +8,62 @@ template $ColorwayMainWindow : He.ApplicationWindow {
   Box main_box {
     orientation: vertical;
 
-    styles [
-      "main-box",
-    ]
-
-    Overlay {
-      [overlay]
-      He.AppBar headerbar {
-        show-back: false;
-        valign: start;
-        viewtitle-widget: 
-        He.TextField color_label {
-          tooltip-text: _("Change color (hexcode)");
-          halign: start;
+      Box {
+        Box {
+          orientation: vertical;
+          spacing: 6;
+          styles [ "clr-props" ]
 
-          styles [
-            "numeric",
-          ]
-        };
+          He.AppBar headerbar1 {
+            show-back: false;
+            show-buttons: false;
+          }
 
-        MenuButton menu_button {
-          icon-name: "open-menu-symbolic";
+          WindowHandle {
+            Box color_box {
+              orientation: vertical;
+              spacing: 6;
+              margin-start: 18;
+              margin-end: 18;
+            }
+          }
         }
-      }
-
-      WindowHandle {
-        vexpand: true;
-        hexpand: true;
-
         Box {
-          orientation: horizontal;
+          orientation: vertical;
+          spacing: 6;
+
+          He.AppBar headerbar {
+            show-back: false;
 
-          Box {
-            orientation: vertical;
-            vexpand: true;
+            MenuButton menu_button {
+              icon-name: "open-menu-symbolic";
+            }
+          }
 
+          WindowHandle {
             He.OverlayButton color_picker_button {
               icon: "color-select-symbolic";
               primary-tooltip: _("Pick Color");
               typeb: primary;
               size: small;
-
-              styles [
-                "clr-preview",
-              ]
+              styles [ "clr-preview" ]
 
               Box {
-                orientation: vertical;
-
                 Box props_box {
                   orientation: vertical;
                   spacing: 6;
                   margin-start: 18;
                   margin-end: 18;
-                  margin-top: 118;
 
-                  Box color_box {
+                  He.TextField color_label {
+                    tooltip-text: _("Change color (hexcode)");
+                    styles [ "numeric" ]
                   }
                 }
-
-                styles [
-                  "clr-props",
-                ]
               }
             }
           }
         }
       }
     }
-  }
-}
+  }
diff --git a/src/chooser.vala b/src/chooser.vala
@@ -21,12 +21,12 @@
 
 public class Colorway.Chooser : Gtk.DrawingArea {
     //  Properties
-    private const uint16 WIDTH = 232;
+    private const uint16 WIDTH = 140;
     private const uint16 HEIGHT = 140;
     private static double r;
     private static double g;
     private static double b;
-    public static double xpos = 232;
+    public static double xpos = 140;
     public static double ypos = 0;
     public static unowned Chooser instance;
     private static Cairo.Surface surface;

diff --git a/src/colorbutton.vala b/src/colorbutton.vala
@@ -52,11 +52,7 @@ public class Colorway.PaletteButton : Gtk.Button {
 	construct {
 		visible = true;
 
-		width_request = 32;
-		height_request = 32;
-
-		hexpand = true;
-		vexpand = true;
+		width_request = 56;
 
 		// We really want to set the background
 		get_style_context().add_provider(provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);
@@ -79,20 +75,6 @@ public class Colorway.PaletteButton : Gtk.Button {
 			leave ();
 		});
 		add_controller (motion);
-
-		var drag = new Gtk.DragSource ();
-		drag.prepare.connect (() => {
-		    Gdk.RGBA colour;
-		    colour.parse (_hex);
-
-		    drag.set_state (CLAIMED);
-
-            return new Gdk.ContentProvider.for_value (colour);
-		});
-		drag.drag_begin.connect (() => {
-	        drag.set_icon (new Gtk.WidgetPaintable (this), 0, 0);
-		});
-		add_controller (drag);
 	}
 
 	public PaletteButton (string hex, bool light) {

diff --git a/src/hue_slider.vala b/src/hue_slider.vala
@@ -30,7 +30,7 @@ public class Colorway.HueSlider : Gtk.Scale {
 
     construct {
         //  Initialize parent's properties
-        this.orientation = Gtk.Orientation.VERTICAL;
+        this.orientation = Gtk.Orientation.HORIZONTAL;
         this.draw_value = false;
         this.digits = 0;
         this.has_origin = false;

diff --git a/src/window.vala b/src/window.vala
@@ -100,26 +100,22 @@ namespace Colorway {
             var expression = new Gtk.PropertyExpression(typeof(string), null, "value");
 
             color_rule_dropdown = new Gtk.DropDown (model, expression);
+            color_rule_dropdown.set_size_request (150, -1);
             color_rule_dropdown.model = model;
             color_rule_dropdown.set_selected (3);
             color_rule_dropdown.set_halign (Gtk.Align.START);
             color_rule_dropdown.margin_bottom = 18;
-            color_rule_dropdown.width_request = 160;
 
             box = new PaletteButton ("#000", false);
-            box.set_size_request(44, 44);
             sbox = new PaletteButton ("#000", false);
-            sbox.set_size_request(44, 44);
             sbox.set_visible(false);
             tbox = new PaletteButton ("#000", false);
-            tbox.set_size_request(44, 44);
             tbox.set_visible(false);
             ubox = new PaletteButton ("#000", false);
-            ubox.set_size_request(44, 44);
 
             mbox = new He.SegmentedButton ();
-            mbox.set_valign (Gtk.Align.START);
-            mbox.get_style_context ().add_class ("clr-palette");
+            mbox.set_size_request (264, -1);
+            mbox.homogeneous = true;
             mbox.append (box);
             mbox.append (sbox);
             mbox.append (tbox);
@@ -262,7 +258,7 @@ namespace Colorway {
                 setup_color_rules.begin (color, contrast, chl, csl, cvl, color_rule_dropdown, sbox, tbox);
             });
 
-            this.set_size_request (295, 400);
+            this.set_size_request (360, 233);
 			this.show ();
 		}