Skip to content

Commit 3656603

Browse files
alexandredzialexandredzi
committed
Adjust the layout of controls to handle right to left
1 parent cd8ad8c commit 3656603

File tree

4 files changed

+71
-11
lines changed

4 files changed

+71
-11
lines changed

‎Assets/Resources/UITk/MainView.uxml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<ui:VisualElement name="root" style="flex-grow: 1;">
44
<ui:VisualElement name="background" style="flex-grow: 1; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgb(11, 163, 109);"/>
55
<ui:VisualElement name="viewContainer" style="flex-grow: 1;">
6-
<Unity.Samples.LetterSpell.StackView name="stackView" index="0" style="flex-grow: 1;">
6+
<Unity.Samples.LetterSpell.StackView name="stackView" index="4" style="flex-grow: 1;">
77
<ui:VisualElement name="splashView" style="flex-grow: 1; background-image: url(&quot;project://database/Assets/UI/Images/Splash-Screen.png?fileID=4602334432413793429&amp;guid=364b68ded9ed04f07848b6c7de25fdad&amp;type=3#Intro Screen_0&quot;);">
88
<ui:Label text="A fun spelling game" name="splashSubTitle">
99
<Bindings>
@@ -13,7 +13,7 @@
1313
</ui:VisualElement>
1414
<ui:VisualElement name="loginView" style="flex-grow: 1; align-items: center; justify-content: center;">
1515
<ui:VisualElement name="logo" class="lsp-logo"/>
16-
<ui:TextField placeholder-text="Enter your name" name="loginNameField" label="What is your name?" style="min-width: 252px; width: 949px;">
16+
<ui:TextField placeholder-text="Enter your name" name="loginNameField" label="What is your name?" language-direction="LTR" style="min-width: 252px; width: 949px;">
1717
<Bindings>
1818
<ui:DataBinding property="value" data-source-path="userName" binding-mode="TwoWay"/>
1919
<UnityEngine.Localization.LocalizedString property="placeholderText" table="GUID:cc1d194facb1d9d4380a9ea2032c10ca" entry="Id(775025750016)"/>
@@ -97,7 +97,7 @@
9797
<UnityEngine.Localization.LocalizedString property="text" table="GUID:cc1d194facb1d9d4380a9ea2032c10ca" entry="Id(3051354222592)"/>
9898
</Bindings>
9999
</ui:Label>
100-
<ui:TextField label="Username" placeholder-text="Enter your name" name="settingsUserNameField">
100+
<ui:TextField label="Username" placeholder-text="Enter your name" name="settingsUserNameField" language-direction="LTR">
101101
<Bindings>
102102
<ui:DataBinding property="value" data-source-path="userName" binding-mode="TwoWay"/>
103103
<UnityEngine.Localization.LocalizedString property="label" table="GUID:cc1d194facb1d9d4380a9ea2032c10ca" entry="Id(3183403495424)"/>
@@ -111,7 +111,7 @@
111111
<UnityEngine.Localization.LocalizedStringList property="choices" table="GUID:cc1d194facb1d9d4380a9ea2032c10ca" entry="Id(3801748762624)"/>
112112
</Bindings>
113113
</lsp:ButtonStripField>
114-
<ui:VisualElement name="settingsNumberOfWords" class="unity-base-field" style="flex-direction: row;">
114+
<ui:VisualElement name="settingsNumberOfWords" class="unity-base-field">
115115
<ui:Label name="Label" class="unity-base-field__label">
116116
<Bindings>
117117
<UnityEngine.Localization.LocalizedString property="text" table="GUID:cc1d194facb1d9d4380a9ea2032c10ca" entry="Id(17127719464960)"/>

‎Assets/Resources/UITk/Themes/GreenStyle/GreenStyle.tss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,27 @@
66
font-size: 64px;
77
}
88

9+
:root {
10+
--lsp-row: row;
11+
--lsp-row-reverse: row-reverse;
12+
--lsp-left: left;
13+
--lsp-middle-left: middle-left;
14+
--lsp-right: right;
15+
--lsp-middle-right: middle-right;
16+
}
917

1018
:root.bold-text {
11-
-unity-font-style: bold
19+
-unity-font-style: bold;
20+
}
21+
22+
:root.lsp-dir-rtl {
23+
--lsp-row: row-reverse;
24+
--lsp-row-reverse: row;
25+
--lsp-left: right;
26+
--lsp-middle-left: middle-right;
27+
--lsp-right: left;
28+
--lsp-middle-right: middle-left;
29+
-unity-text-align: right;
1230
}
1331

1432
/* Dropdown */

‎Assets/Resources/UITk/Themes/LetterSpellTheme.uss‎

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,11 @@
217217
padding-left: 70px;
218218
}
219219

220+
.unity-label,
221+
.unity-base-field__label {
222+
-unity-text-align: var(--lsp-middle-left);
223+
}
224+
220225
.unity-base-field__label {
221226
min-width: 680px;
222227
}
@@ -230,7 +235,6 @@
230235
}
231236

232237
.unity-base-field__label {
233-
-unity-text-align: middle-left;
234238
margin-right: 30px;
235239
}
236240

@@ -272,6 +276,9 @@
272276
background-color: rgb(161, 116, 244);
273277
}
274278

279+
.unity-toggle__input {
280+
flex-direction: var(--lsp-row);
281+
}
275282
.unity-toggle__checkmark {
276283
background-color: rgba(0, 0, 0, 0);
277284
border-left-color: rgb(0, 0, 0);
@@ -290,6 +297,7 @@
290297
width: 50px;
291298
height: 50px;
292299
margin-right: 30px;
300+
margin-left: 30px;
293301
}
294302

295303
.unity-base-slider__tracker {
@@ -340,6 +348,11 @@
340348
border-bottom-left-radius: 30px;
341349
padding-top: 30px;
342350
padding-bottom: 30px;
351+
flex-direction: var(--lsp-row);
352+
}
353+
354+
.unity-base-popup-field__text {
355+
-unity-text-align: var(--lsp-middle-left);
343356
}
344357

345358
.unity-base-text-field__input--placeholder {
@@ -433,8 +446,12 @@
433446
margin-bottom: 30px;
434447
}
435448

449+
.unity-base-field {
450+
flex-direction: var(--lsp-row);
451+
}
452+
436453
.lsp-button-strip-field__button-container {
437-
flex-direction: row;
454+
flex-direction: var(--lsp-row);
438455
}
439456

440457
.lsp-button-strip-field__button {
@@ -450,20 +467,34 @@
450467
background-color: rgb(116, 45, 243);
451468
}
452469

453-
.lsp-button-strip-field__button--left {
470+
.lsp-dir-ltr .lsp-button-strip-field__button--left {
454471
margin-right: 0;
455472
border-right-width: 5px;
456473
border-top-right-radius: 0;
457474
border-bottom-right-radius: 0;
458475
}
459476

460-
.lsp-button-strip-field__button--right {
477+
.lsp-dir-rtl .lsp-button-strip-field__button--left{
478+
margin-left: 0;
479+
border-left-width: 5px;
480+
border-top-left-radius: 0;
481+
border-bottom-left-radius: 0;
482+
}
483+
484+
.lsp-dir-ltr .lsp-button-strip-field__button--right {
461485
border-top-left-radius: 0;
462486
border-bottom-left-radius: 0;
463487
border-left-width: 5px;
464488
margin-left: 0;
465489
}
466490

491+
.lsp-dir-rtl .lsp-button-strip-field__button--right {
492+
margin-right: 0;
493+
border-right-width: 5px;
494+
border-top-right-radius: 0;
495+
border-bottom-right-radius: 0;
496+
}
497+
467498
.lsp-button-strip-field__button:checked {
468499
background-color: rgb(116, 45, 243);
469500
}
@@ -475,7 +506,7 @@
475506
}
476507

477508
.unity-radio-button {
478-
flex-direction: row-reverse;
509+
flex-direction: var(--lsp-row-reverse);
479510
margin-top: 0;
480511
margin-bottom: 0;
481512
}
@@ -488,13 +519,14 @@
488519
width: 50px;
489520
height: 50px;
490521
margin-right: 30px;
522+
margin-left: 30px;
491523
background-image: url("project://database/Assets/UI/Images/Dropdown-Arrow.png?fileID=2800000&guid=29e091d0e13ce4d928a786bc1ff99351&type=3#Dropdown-Arrow");
492524
margin-top: 14px;
493525
margin-bottom: 14px;
494526
}
495527

496528
.row {
497-
flex-direction: row;
529+
flex-direction: var(--lsp-row);
498530
}
499531

500532
#closeSettingsButton {

‎Assets/Scripts/UITk/MainView.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -441,11 +441,21 @@ void SetupUI()
441441
root.languageDirection = LanguageDirection.RTL;
442442
else
443443
root.languageDirection = LanguageDirection.LTR;
444+
UpdateUSSLangDirection(root);
444445
};
445446

447+
UpdateUSSLangDirection(root);
446448
ShowSplash();
447449
}
448450

451+
void UpdateUSSLangDirection(VisualElement root)
452+
{
453+
if (root.panel == null)
454+
return;
455+
root.panel.visualTree.EnableInClassList("lsp-dir-ltr", LocalizationSettings.SelectedLocale?.Identifier.CultureInfo.TextInfo.IsRightToLeft == false);
456+
root.panel.visualTree.EnableInClassList("lsp-dir-rtl", LocalizationSettings.SelectedLocale?.Identifier.CultureInfo.TextInfo.IsRightToLeft == true);
457+
}
458+
449459
void OnEnable()
450460
{
451461
m_Model.letterCardsChanged += OnLetterCardsChanged;

0 commit comments

Comments
 (0)