From c85aa9a7580be34cc49e4b3f9b8c63d80f184ea4 Mon Sep 17 00:00:00 2001
From: Simon Hausmann <simon.hausmann@sixtyfps.io>
Date: Wed, 11 Nov 2020 09:35:09 +0100
Subject: [PATCH] Use dashed properties for text alignment

---
 examples/printerdemo/ui/fax_page.60           |  6 +++---
 examples/printerdemo/ui/printerdemo.60        |  6 +++---
 .../widgets/ugly/sixtyfps_widgets.60          | 20 +++++++++----------
 tests/cases/examples/hello.60                 |  4 ++--
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/examples/printerdemo/ui/fax_page.60 b/examples/printerdemo/ui/fax_page.60
index 990f7b617..d6550c99c 100644
--- a/examples/printerdemo/ui/fax_page.60
+++ b/examples/printerdemo/ui/fax_page.60
@@ -26,7 +26,7 @@ export FaxPage := Page {
         x: preview.x + preview.width + 20px;
         y: preview.y + 10px;
         width: parent.width - x - 40px;
-        horizontal_alignment: align_center;
+        horizontal-alignment: align-center;
         font_size: 40px;
         height: 40px;
     }
@@ -58,8 +58,8 @@ export FaxPage := Page {
                 Text {
                     width: 100%;
                     height: 100%;
-                    horizontal_alignment: align_center;
-                    vertical_alignment: align_center;
+                    horizontal-alignment: align-center;
+                    vertical-alignment: align-center;
                     color: white;
                     text: num >= 0 ? num : "⌫";
                 }
diff --git a/examples/printerdemo/ui/printerdemo.60 b/examples/printerdemo/ui/printerdemo.60
index 7f6b0ec28..407b38a93 100644
--- a/examples/printerdemo/ui/printerdemo.60
+++ b/examples/printerdemo/ui/printerdemo.60
@@ -119,8 +119,8 @@ MainWindow := Window {
             x: 5px;
             width: 100%;
             height: 100%;
-            horizontal_alignment: align_center;
-            vertical_alignment: align_center;
+            horizontal-alignment: align-center;
+            vertical-alignment: align-center;
             text: page_info.text;
             font_size: 28px;
             animate x, y {
@@ -155,7 +155,7 @@ MainWindow := Window {
                 img.height: root.height * 10%;
                 text.y: 0phx;
                 text.x: root.height * 25%;
-                //text.horizontal_alignment: align_left;
+                //text.horizontal-alignment: align-left;
             }
             pressed when root.active_page == 0 && touch.pressed : {
                 width: root.width / 5 + 6px;
diff --git a/sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60 b/sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60
index 972e7298b..c0d555fd1 100644
--- a/sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60
+++ b/sixtyfps_compiler/widgets/ugly/sixtyfps_widgets.60
@@ -51,8 +51,8 @@ export Button := Rectangle {
         Text {
             text: root.text;
             font_size: root.font_size;
-            horizontal_alignment: align_center;
-            vertical_alignment: align_center;
+            horizontal-alignment: align-center;
+            vertical-alignment: align-center;
             color: root.enabled ? Palette.text_color : Palette.text_color_disabled;
         }
     }
@@ -105,7 +105,7 @@ export CheckBox := Rectangle {
     Text {
         x: indicator.width + 8px;
         text: root.text;
-        vertical_alignment: align_center;
+        vertical-alignment: align-center;
         width: parent.width - self.x;
         height: parent.height;
         color: root.enabled ? Palette.text_color : Palette.text_color_disabled;
@@ -142,8 +142,8 @@ SpinBoxButton := Rectangle {
         y: touch.pressed ? 1px : 0px;
         width: parent.width;
         height: parent.height;
-        vertical_alignment: align_center;
-        horizontal_alignment: align_center;
+        vertical-alignment: align-center;
+        horizontal-alignment: align-center;
         text: root.text;
         font_size: root.font_size;
         color: root.enabled ? Palette.text_color : Palette.text_color_disabled;
@@ -191,8 +191,8 @@ export SpinBox := Rectangle {
         x: parent.height + 15px;
         width: plus_button.x - self.x - 15px;
         height: parent.height;
-        horizontal_alignment: align_center;
-        vertical_alignment: align_center;
+        horizontal-alignment: align-center;
+        vertical-alignment: align-center;
         color: root.enabled ? Palette.text_color : Palette.text_color_disabled;
     }
 }
@@ -457,8 +457,8 @@ export ComboBox := Rectangle {
 
         t := Text {
             text <=> root.current_value;
-            horizontal_alignment: align_left;
-            vertical_alignment: align_center;
+            horizontal-alignment: align-left;
+            vertical-alignment: align-center;
             color: root.enabled ? Palette.text_color : Palette.text_color_disabled;
             horizontal-stretch: 1;
         }
@@ -466,7 +466,7 @@ export ComboBox := Rectangle {
             text:"▼";
             color: root.enabled ? Palette.text_color : Palette.text_color_disabled;
             horizontal-stretch: 0;
-            vertical-alignment: align_center;
+            vertical-alignment: align-center;
         }
     }
 
diff --git a/tests/cases/examples/hello.60 b/tests/cases/examples/hello.60
index 4db14a2cd..91e0e3513 100644
--- a/tests/cases/examples/hello.60
+++ b/tests/cases/examples/hello.60
@@ -49,8 +49,8 @@ ButtonRectangle := Rectangle {
             text: button_text;
             width: root.width;
             height: root.height;
-            horizontal_alignment: align_left;
-            vertical_alignment: align_center;
+            horizontal-alignment: align-left;
+            vertical-alignment: align-center;
         }
         animate x { duration: 500ms; }
         animate y { duration: 500ms; }