Add basic layouts for XML-based GUI system

This commit is contained in:
Keavon Chambers
2020-05-24 21:22:16 -07:00
parent e72ab7b000
commit 474b2b39f9
12 changed files with 124 additions and 0 deletions
+12
View File
@@ -0,0 +1,12 @@
<input.checkbox-with-dropdown content="OPTION_LIST" :disabled="DISABLED = false" :checked="CHECKED = false" :default="DEFAULT = 0">
<!-- Checkbox -->
<col width="height" height="100%">
<box width="100%" height="100%" x-align="0.5" y-align="0.5" :fill="[accent]">
<input.checkbox :checked="{{CHECKED}}" :disabled="{{DISABLED}}" :inverted="true" />
</box>
</col>
<!-- Dropdown -->
<col width="100%">
<input.dropdown width="100%" :default="{{DEFAULT}}" :disabled="{{DISABLED}}">{{OPTION_LIST}}</input.dropdown>
</col>
</input.checkbox-with-dropdown>
+20
View File
@@ -0,0 +1,20 @@
<input.checkbox :checked="CHECKED = false" :disabled="DISABLED = false" :inverted="INVERTED = false">
<box width="14px" height="14px" :fill="{{BOX_COLOR}}" :round="2px">
<if :a="{{CHECKED}}">
<if :a="{{INVERTED}}" :b="false">
<icon>
<svg width="12.84px" height="11.59px" viewBox="0 0 12.84 11.59">
<polygon points="5.53,11.59 0,6.67 1.66,4.8 5.13,7.88 10.82,0 12.84,1.46" fill="#ffffff" />
</svg>
</icon>
</if>
<if :a="{{INVERTED}}">
<icon>
<svg width="12.84px" height="11.59px" viewBox="0 0 12.84 11.59">
<polygon points="5.53,11.59 0,6.67 1.66,4.8 5.13,7.88 10.82,0 12.84,1.46" fill="#4b79a7" />
</svg>
</icon>
</if>
</if>
</box>
</input.checkbox>
+16
View File
@@ -0,0 +1,16 @@
<input.dropdown content="OPTION_LIST" :default="DEFAULT = 0" :disabled="DISABLED = false">
<box width="100%" :round="4px">
<!-- Current selection text -->
<col width="100%" height="24px">
<text width="100%" height="100%" x-align="0.5" y-align="0.5" :color="mildwhite">{{CURRENT_TEXT}}</text>
</col>
<!-- Dropdown arrow icon -->
<col width="8px" height="100%">
<icon width="8px" height="100%" x-align="0.5" y-align="0.5">
<svg width="7" height="5" viewBox="0 0 7 5">
<path d="M0,.5l3.5,3L7,.5v2l-3.5,3L0,2.5Z" transform="translate(0 -0.5)" fill="#ddd" />
</svg>
</icon>
</col>
</box>
</input.dropdown>