Use layout groups to standardize spacing

This commit is contained in:
Bronley 2021-07-09 06:24:21 -04:00
parent ebd49cefb3
commit 566e31018c
2 changed files with 24 additions and 23 deletions

View File

@ -6,6 +6,9 @@ sub init()
m.top.minWidth = 0
end sub
'
' Whenever the text changes, pad both sides with whitespace so we can center the button text
'
sub onTextChanged()
addSpaceAfter = true
minChars = m.top.minChars

View File

@ -2,39 +2,37 @@
<component name="SetServerScreen" extends="JFGroup">
<interface>
<field id="serverUrl" type="string" alias="serverUrlTextbox.text" />
<field id="serverWidth" alias="serverUrlOutline.width,serverUrlTextbox.width,serverUrlContainer.width" value="1570" />
<field id="serverWidth" alias="serverUrlOutline.width,serverUrlTextbox.width,serverUrlContainer.width,submitSizer.width" value="1620" />
<field id="serverHeight" alias="serverUrlOutline.height,serverUrlTextbox.height,serverUrlContainer.height" value="60" />
</interface>
<children>
<Group translation="[150,0]">
<label text="Connect to Server" id="prompt" font="font:LargeBoldSystemFont" translation="[0, 150]" />
<label text="Pick a Jellyfin server from the local network" translation="[0, 200]" />
<LayoutGroup translation="[150,150]" itemSpacings="44">
<LayoutGroup>
<label text="Connect to Server" id="prompt" font="font:LargeBoldSystemFont" />
<label text="Pick a Jellyfin server from the local network" />
</LayoutGroup>
<!--background for server picker-->
<Rectangle color="0x00000020" width="1690" height="400" translation="[0, 250]">
<Rectangle color="0x00000020" width="1620" height="400">
<Spinner id="spinner" translation="[717, 136]" />
<MarkupList id="serverPicker" translation="[50, 20]" itemComponentName="JFServer" itemSpacing="[0, 10]" itemSize="[1590, 100]" numRows="3" vertFocusAnimationStyle="fixedFocus" />
<MarkupList id="serverPicker" translation="[50, 20]" itemComponentName="JFServer" itemSpacing="[0, 10]" itemSize="[1520, 100]" numRows="3" vertFocusAnimationStyle="fixedFocus" />
</Rectangle>
<label text="...or enter server URL manually" translation="[0, 690]" />
<label text="...or enter server URL manually:" translation="[0, 690]" />
<Group width="1690" height="140" translation="[0, 730]">
<LayoutGroup layoutDirection="horiz" vertAlignment="center" translation="[10, 70]">
<Label text="URL: " font="font:MediumSystemFont" translation="[0, 25]" />
<Rectangle id="serverUrlContainer" color="0x00000000">
<TextEditBox id="serverUrlTextbox" hintText="e.g. 192.168.1.100:8096 or https://example.com/jellyfin"></TextEditBox>
<Poster id="serverUrlOutline" visible="false" uri="pkg:/images/hd_focus.9.png" />
</Rectangle>
</LayoutGroup>
</Group>
<label text="" id="alert" font="font:MediumSystemFont" translation="[0, 555]" />
</Group>
<LayoutGroup layoutDirection="vert" horizAlignment="center" vertAlignment="top" translation="[960, 930]">
<JFButton id="submit" minChars="30" text="Submit" translation="[120, 930]"></JFButton>
<!--add a known width invisibile element to allow the button to be centered-->
<Rectangle width="1920" height="12" color="#00000000" />
<Rectangle id="serverUrlContainer" color="0x00000000">
<TextEditBox id="serverUrlTextbox" hintText="e.g. 192.168.1.100:8096 or https://example.com/jellyfin"></TextEditBox>
<Poster id="serverUrlOutline" visible="false" uri="pkg:/images/hd_focus.9.png" />
</Rectangle>
<!-- <label text="" id="alert" font="font:MediumSystemFont" /> -->
<LayoutGroup horizAlignment="center">
<JFButton id="submit" minChars="30" text="Submit"></JFButton>
<!--add a known width invisibile element to allow the button to be centered-->
<Rectangle id="submitSizer" width="1920" height="0" color="#00000000" />
</LayoutGroup>
</LayoutGroup>
</children>
<script type="text/brightscript" uri="SetServerScreen.brs" />