Homogenize dialog styling

2026-11-03 16:44:05 +00:00 · 2026-10-14 14:06:53 -05:00
parent 3bdf7972bc
commit a67c0cf073
7 changed files with 37 additions and 19 deletions
--- a/lib/dialogs/about.rb
+++ b/lib/dialogs/about.rb
@@ -4,12 +4,12 @@ module W3DHubLauncher
      def setup
        super

-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0xee_63452c) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
            banner "About", width: 1.0, text_align: :center
          end

-          stack(width: 1.0, fill: true, scroll: true, margin_left: PADDING, margin_right: PADDING, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
+          stack(style_class: [:dialog_container]) do
            title NAME
            tagline format("v%s (%s)", VERSION, VERSION_NAME), margin_left: PADDING
            para "© 2021 - #{Time.now.year} cyberarm", margin_left: PADDING
--- a/lib/dialogs/account.rb
+++ b/lib/dialogs/account.rb
@@ -4,19 +4,19 @@ module W3DHubLauncher
      def setup
        super

-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
-          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
+          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
            banner "Account", width: 1.0, text_align: :center
          end

-          stack(width: 1.0, fill: true, scroll: true, padding_left: PADDING, padding_right: PADDING) do
+          stack(style_class: [:dialog_container]) do
            button "Sign In", tip: "https://sso.w3d.cyberarm.dev" do
              # use SSO service
              pop_state
            end
          end

-          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
          end
        end
      end
--- a/lib/dialogs/downloads.rb
+++ b/lib/dialogs/downloads.rb
@@ -4,12 +4,12 @@ module W3DHubLauncher
      def setup
        super

-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
-          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
+          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
            banner "Downloads", width: 1.0, text_align: :center
          end

-          stack(width: 1.0, fill: true, scroll: true, padding_left: PADDING, padding_right: PADDING) do
+          stack(style_class: [:dialog_container]) do
            50.times do
              stack(width: 1.0, margin_top: HALF_PADDING, margin_bottom: HALF_PADDING) do
                flow(width: 1.0) do
@@ -22,10 +22,10 @@ module W3DHubLauncher
            end
          end

-          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
            flow(fill: true)

-            button "Close" do
+            button "Close", **CTA_BUTTON_THEME do
              pop_state
            end

--- a/lib/dialogs/import_application.rb
+++ b/lib/dialogs/import_application.rb
@@ -7,12 +7,12 @@ module W3DHubLauncher
        @application = @options[:application]
        @channel = @options[:channel]

-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0xee_63452c) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
            banner "Import Application", width: 1.0, text_align: :center
          end

-          stack(width: 1.0, fill: true, scroll: true, margin_left: PADDING, margin_right: PADDING, padding: HALF_PADDING, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
+          stack(style_class: [:dialog_container]) do
            title format("%s (%s)", @application.name, @channel.name)
            caption "Path to application executable:"
            @path_input = edit_line "", width: 1.0
--- a/lib/dialogs/server.rb
+++ b/lib/dialogs/server.rb
@@ -4,12 +4,12 @@ module W3DHubLauncher
      def setup
        super

-        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_BLACK) do
-          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+        stack(width: 1.0, max_width: 600, height: 1.0, max_height: 600, style_class: [:dialog]) do
+          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
            banner "Downloads", width: 1.0, text_align: :center
          end

-          stack(width: 1.0, fill: true, scroll: true, padding_left: PADDING, padding_right: PADDING) do
+          stack(style_class: [:dialog_container]) do
            50.times do
              stack(width: 1.0, margin_top: HALF_PADDING, margin_bottom: HALF_PADDING) do
                flow(width: 1.0) do
@@ -22,10 +22,10 @@ module W3DHubLauncher
            end
          end

-          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: ALPHA_GRAY) do
+          flow(width: 1.0, padding: PADDING, background_nine_slice: NINE_SLICE_ROUNDED_BOTTOM, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
            flow(fill: true)

-            button "Close" do
+            button "Close", **CTA_BUTTON_THEME do
              pop_state
            end

--- a/lib/dialogs/settings.rb
+++ b/lib/dialogs/settings.rb
@@ -4,7 +4,7 @@ module W3DHubLauncher
      def setup
        super

-        stack(width: 0.75, max_width: 1280, height: 0.75, max_height: 800, h_align: :center, v_align: :center, background_nine_slice: NINE_SLICE_ROUNDED, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0xee_63452c) do
+        stack(width: 0.75, max_width: 1280, height: 0.75, max_height: 800, style_class: [:dialog]) do
          flow(width: 1.0, background_nine_slice: NINE_SLICE_ROUNDED_TOP, background_nine_slice_from_edge: NINE_SLICE_EDGE, background_nine_slice_color: 0) do
            banner "Launcher Settings", width: 1.0, text_align: :center
          end
--- a/lib/theme.rb
+++ b/lib/theme.rb
@@ -195,6 +195,24 @@ module W3DHubLauncher
        background_nine_slice_color: 0x88_5e5c64,
        border_color_bottom: 0xff_3584e4
      }
+    },
+    dialog: {
+      h_align: :center,
+      v_align: :center,
+      background_nine_slice: NINE_SLICE_ROUNDED,
+      background_nine_slice_from_edge: NINE_SLICE_EDGE,
+      background_nine_slice_color: 0xee_63452c
+    },
+    dialog_container: {
+      width: 1.0,
+      fill: true,
+      scroll: true,
+      margin_left: PADDING,
+      margin_right: PADDING,
+      padding: HALF_PADDING,
+      background_nine_slice: NINE_SLICE_ROUNDED,
+      background_nine_slice_from_edge: NINE_SLICE_EDGE,
+      background_nine_slice_color: ALPHA_BLACK
    }
  }
 end