Merge pull request #3 from grkek/develop

Add multiple components and fix issues

.ameba.yml

@@ -0,0 +1,15 @@
+# This configuration file was generated by `ameba --gen-config`
+# on 2021-06-26 15:36:50 UTC using Ameba version 0.13.4.
+# The point is for the user to remove these configuration records
+# one by one as the reported problems are removed from the code base.
+
+Style/RedundantBegin:
+  Description: Disallows redundant begin blocks
+  Enabled: false
+  Severity: Convention
+
+Metrics/CyclomaticComplexity:
+  Description: Disallows methods with a cyclomatic complexity higher than `MaxComplexity`
+  MaxComplexity: 30
+  Enabled: true
+  Severity: Convention

.gitignore

@@ -2,3 +2,5 @@
 /lib/
 /bin/
 /.shards/
+
+/shard.lock

example/application.cr

@@ -2,4 +2,5 @@ require "../src/layout"
 
 builder = Layout::Transpiler::Builder.new
 builder.build_from_document("#{__DIR__}/dist/index.html")
+
 builder.run

example/dist/index.html

@@ -1,31 +1,80 @@
-<Application gid="com.example.layout">
-  <!--
-    StyleSheet tags define the style for the components.
-      - src: The location of the file.
-  -->
+<Application gid="com.monkeyshoulder.desktop">
   <StyleSheet src="./example/dist/styles/index.css" />
+  <Script src="./example/dist/scripts/index.js"></Script>
 
-  <!--
-    Import tags define the custom elements imported from other HTML files.
-      - src: The location of the file.
-      - as: The component name exported from the file.
-  -->
-  <Import src="./example/dist/components/authorization.html" as="Authorization"/>
-
-  <!--
-    Script tags define the JavaScript content of our GUI front-end.
-      - src: The location of the file.
-  -->
-  <Script src="./example/dist/scripts/index.js"/>
-
-  <Window id="mainWindow" class="mainWindow" title="Hello, World!" width="800" height="600">
-    <Box class="mainBox">
-      <Label class="mainLabel">
-        Hello, World!
-      </Label>
-
-      <Authorization />
-      <Authorization />
+  <Window className="main-window" title="${appConfiguration.window.title}" width="${appConfiguration.window.width}" height="${appConfiguration.window.height}">
+    <Box className="main-box" orientation="vertical">
+      <Box orientation="horizontal">
+        <Label className="main-label" boxExpand="true" boxFill="true" horizontalAlign="start">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </Label>
+
+        <Label className="main-label" boxExpand="true" boxFill="true" horizontalAlign="end">
+          Morbi varius odio quis metus ullamcorper porttitor.
+        </Label>
+      </Box>
+
+      <Box orientation="horizontal">
+        <Label className="main-label" boxExpand="true" boxFill="true" horizontalAlign="fill">
+          Cras ac erat vitae libero pellentesque scelerisque.
+        </Label>
+
+        <Label className="main-label" boxExpand="true" boxFill="true" horizontalAlign="fill">
+          Vestibulum dictum nisi quam, eget pharetra lorem lacinia in.
+        </Label>
+      </Box>
+
+      <HorizontalSeparator className="horizontal-separator" />
+
+      <Box orientation="horizontal">
+        <TextInput className="main-text-input" placeholder="E-Mail" boxExpand="true" boxFill="true" horizontalAlign="fill" />
+        <TextInput className="main-text-input" placeholder="Password" isPassword="true" boxExpand="true" boxFill="true" horizontalAlign="fill" />
+      </Box>
+
+      <HorizontalSeparator className="horizontal-separator-number" />
+
+      <Box orientation="horizontal">
+        <Button className="main-button" boxExpand="true" boxFill="true" horizontalAlign="fill">Button #1</Button>
+        <Button className="main-button" boxExpand="true" boxFill="true" horizontalAlign="fill">Button #2</Button>
+      </Box>
+
+      <HorizontalSeparator className="horizontal-separator" />
+
+      <Box orientation="horizontal">
+        <Label className="main-label"> Am I useless?</Label>
+        <Switch className="main-switch" boxExpand="true" boxFill="true" horizontalAlign="end" />
+
+        <Label className="main-label"> Am I usefull?</Label>
+        <Switch className="main-switch" boxExpand="true" boxFill="true" horizontalAlign="end" />
+      </Box>
+
+      <HorizontalSeparator className="horizontal-separator-number" />
+
+      <Box className="number-box" orientation="horizontal">
+        <TextInput onChangeText={textMutation.updateNumberOne} className="number-text" boxExpand="true" boxFill="true" placeholder="Number 1" horizontalAlign="fill" />
+        <TextInput onChangeText={textMutation.updateNumberTwo} className="number-text" placeholder="Number 2" boxExpand="true" boxFill="true" horizontalAlign="fill" />
+      </Box>
+
+      <HorizontalSeparator className="horizontal-separator-number" />
+
+      <Box boxExpand="true" boxFill="true">
+        <Frame className="main-frame" value="Collection of Lorem ipsum" boxExpand="true" boxFill="true">
+          <ScrolledWindow className="main-scrolled-window">
+            <ListBox className="main-list-box">
+              <Label>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+              <Label>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+              <Label>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+              <Label>4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+              <Label>5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris in nunc commodo ullamcorper sit amet non lectus. Quisque non fermentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</Label>
+            </ListBox>
+          </ScrolledWindow>
+        </Frame>
+      </Box>
+
+      <Box orientation="horizontal">
+        <Label id="numberOneLabel" className="main-label" boxExpand="true" boxFill="false" horizontalAlign="start">Number 1 TextEntry text!</Label>
+        <Label id="numberTwoLabel" className="main-label" boxExpand="true" boxFill="false" horizontalAlign="end">Number 2 TextEntry text!</Label>
+      </Box>
     </Box>
   </Window>
-</Application>
+</Application>

example/dist/scripts/index.js

@@ -0,0 +1,31 @@
+/**
+ *
+ *
+ * Index.js - Contains the business logic for the main application component.
+ *
+ *
+ */
+
+const appConfiguration = {
+  window: {
+    width: 1200,
+    height: 800,
+    title: "Monkey Shoulder"
+  }
+};
+
+const textMutation = {
+  updateNumberOne: function (_element, text) {
+    var label = getElementByComponentId("numberOneLabel");
+    label.setText(text);
+
+    print(text);
+  },
+
+  updateNumberTwo: function (_element, text) {
+    var label = getElementByComponentId("numberTwoLabel");
+    label.setText(text);
+
+    print(text);
+  },
+};