Skip to content

Commit 65d4398

Browse files
author
Hanseter
committed
Play around with different theming. Make toggleswitch skin work.
1 parent 5d12095 commit 65d4398

8 files changed

Lines changed: 142 additions & 42 deletions

File tree

‎pom.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,12 @@
210210
<version>21.0.2</version>
211211
<scope>test</scope>
212212
</dependency>
213+
<dependency>
214+
<groupId>io.github.mkpaz</groupId>
215+
<artifactId>atlantafx-base</artifactId>
216+
<version>2.0.1</version>
217+
<scope>test</scope>
218+
</dependency>
213219
</dependencies>
214220

215221
</project>

‎src/main/kotlin/com/github/hanseter/json/editor/JsonPropertiesEditor.kt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ class JsonPropertiesEditor @JvmOverloads constructor(
8888
)
8989
columns.addAll(keyColumn, createControlColumn(), createActionColumn())
9090
isShowRoot = false
91-
columnResizePolicy = TreeTableView.CONSTRAINED_RESIZE_POLICY
91+
columnResizePolicy = TreeTableView.CONSTRAINED_RESIZE_POLICY_FLEX_NEXT_COLUMN
9292
root = rootItem
9393
this.selectionModel.isCellSelectionEnabled = true
9494
TreeTableNavigation.addNavigationToTreeTableView(this)

‎src/main/kotlin/com/github/hanseter/json/editor/ui/PropertiesEditorToolbar.kt‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import javafx.scene.control.Button
55
import javafx.scene.control.ContextMenu
66
import javafx.scene.control.Label
77
import javafx.scene.control.MenuItem
8+
import javafx.scene.control.TextField
89
import javafx.scene.layout.HBox
910
import javafx.scene.layout.Priority
1011
import org.controlsfx.control.textfield.TextFields
12+
import kotlin.apply
1113

1214
class PropertiesEditorToolbar(
1315
private val editor: JsonPropertiesEditor
@@ -20,7 +22,7 @@ class PropertiesEditorToolbar(
2022

2123
val additionalOptions = ArrayList<FilterOption>()
2224

23-
private val filterText = TextFields.createClearableTextField().apply {
25+
private val filterText = TextField().apply {
2426
id = "searchField"
2527
promptText = ""
2628
textProperty().addListener { _ ->

‎src/main/resources/com/github/hanseter/json/editor/ui/skins/toggleSwitch.css‎

Lines changed: 50 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,79 @@
33
* ToggleSwitch *
44
* *
55
******************************************************************************/
6+
7+
.check-box {
8+
-toggle-switch-base-color: #ececec;
9+
-toggle-switch-outer-border: derive(-toggle-switch-base-color, -23%);
10+
-toggle-switch-inner-border: linear-gradient(to bottom,
11+
ladder(-toggle-switch-base-color,
12+
derive(-toggle-switch-base-color, 30%) 0%,
13+
derive(-toggle-switch-base-color, 20%) 40%,
14+
derive(-toggle-switch-base-color, 25%) 60%,
15+
derive(-toggle-switch-base-color, 55%) 80%,
16+
derive(-toggle-switch-base-color, 55%) 90%,
17+
derive(-toggle-switch-base-color, 75%) 100%),
18+
ladder(-toggle-switch-base-color,
19+
derive(-toggle-switch-base-color, 20%) 0%,
20+
derive(-toggle-switch-base-color, 10%) 20%,
21+
derive(-toggle-switch-base-color, 5%) 40%,
22+
derive(-toggle-switch-base-color, -2%) 60%,
23+
derive(-toggle-switch-base-color, -5%) 100%));
24+
-toggle-switch-body-color: linear-gradient(to bottom,
25+
ladder(-toggle-switch-base-color,
26+
derive(-toggle-switch-base-color, 8%) 75%,
27+
derive(-toggle-switch-base-color, 10%) 80%),
28+
derive(-toggle-switch-base-color, -8%));
29+
-toggle-switch-focus-color: #039ED3;
30+
-toggle-switch-hover-color: ladder(-toggle-switch-base-color,
31+
derive(-toggle-switch-base-color, 20%) 20%,
32+
derive(-toggle-switch-base-color, 30%) 35%,
33+
derive(-toggle-switch-base-color, 40%) 50%);
34+
-toggle-switch-active-color: #00BEDC;
35+
-toggle-switch-inactive-color: #FE8389;
36+
}
37+
638
.check-box .thumb {
7-
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
39+
-fx-background-color: -toggle-switch-outer-border, -toggle-switch-inner-border, -toggle-switch-body-color;
840
-fx-background-insets: 0, 1, 2;
9-
-fx-background-radius: 1.0em; /* large value to make sure this remains circular */
41+
-fx-background-radius: 1.0em;/* large value to make sure this remains circular */
1042
-fx-padding: 0.75em;
1143
-fx-alignment: CENTER;
1244
-fx-content-display: LEFT;
1345
-fx-border-color: transparent;
1446
-fx-border-radius: 1em;
1547
}
16-
.check-box:hover .thumb{
17-
-fx-color: -fx-hover-base
48+
49+
.check-box:hover .thumb {
50+
-fx-color: -toggle-switch-hover-color
1851
}
1952

20-
.check-box .thumb-area{
53+
.check-box .thumb-area {
2154
-fx-background-radius: 1em;
22-
-fx-background-color: -fx-outer-border, -fx-inner-border, #FE8389;
55+
-fx-background-color: -toggle-switch-outer-border, -toggle-switch-inner-border, -toggle-switch-inactive-color;
2356
-fx-background-insets: 0, 1;
24-
-fx-padding: 0.75em 1.333333em 0.75em 1.333333em; /* 7 16 7 16 */
57+
-fx-padding: 0.75em 1.333333em 0.75em 1.333333em;/* 7 16 7 16 */
2558
-fx-border-color: transparent;
2659
-fx-border-radius: 1em;
2760
-fx-border-insets: 0, 1;
2861
}
2962

30-
.check-box:selected .thumb-area{
31-
-fx-background-color: -fx-outer-border, -fx-inner-border,#00bedc
63+
.check-box:selected .thumb-area {
64+
-fx-background-color: -toggle-switch-outer-border, -toggle-switch-inner-border, -toggle-switch-active-color
3265
}
3366

34-
.check-box:indeterminate .thumb-area{
35-
-fx-background-color: -fx-outer-border, -fx-inner-border, #f5f5f5;
67+
.check-box:indeterminate .thumb-area {
68+
-fx-background-color: -toggle-switch-outer-border, -toggle-switch-inner-border, #f5f5f5;
3669
}
3770

38-
.check-box:focused .thumb-area{
39-
-fx-border-color: -fx-focus-color;
71+
.check-box:focused .thumb-area {
72+
-fx-border-color: -toggle-switch-focus-color;
4073
}
4174

42-
.check-box:focused .thumb{
43-
-fx-border-color: -fx-focus-color;
75+
.check-box:focused .thumb {
76+
-fx-border-color: -toggle-switch-focus-color;
4477
}
4578

46-
.check-box:disabled
47-
{
79+
.check-box:disabled {
4880
-fx-opacity: 0.4;
49-
}
81+
}

‎src/test/kotlin/com/github/hanseter/json/editor/app/ControlsPreviewTestApp.kt‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,24 @@ import com.github.hanseter.json.editor.controls.TypeControl
99
import com.github.hanseter.json.editor.extensions.SimpleEffectiveSchema
1010
import com.github.hanseter.json.editor.util.*
1111
import javafx.application.Application
12+
import javafx.application.Application.launch
1213
import javafx.scene.Scene
1314
import javafx.scene.control.Label
1415
import javafx.scene.control.ScrollPane
1516
import javafx.scene.control.SplitPane
1617
import javafx.scene.layout.BorderPane
1718
import javafx.scene.layout.GridPane
19+
import javafx.scene.layout.HBox
1820
import javafx.scene.layout.VBox
1921
import javafx.stage.Stage
2022
import org.json.JSONObject
2123

2224

23-
class ControlsPreviewTestApp : Application() {
25+
fun main(args: Array<String>) {
26+
launch(ControlsPreviewTestApp::class.java, *args)
27+
}
2428

25-
companion object {
26-
@JvmStatic
27-
fun main(args: Array<String>) {
28-
launch(ControlsPreviewTestApp::class.java, *args)
29-
}
30-
}
29+
class ControlsPreviewTestApp : Application() {
3130

3231
private val objId = "test"
3332

@@ -61,7 +60,7 @@ class ControlsPreviewTestApp : Application() {
6160
selectionModel.selectFirst()
6261
}
6362

64-
root.top = schemas
63+
root.top = HBox(5.0, schemas, TestUtils.createThemeComboBox())
6564

6665
root.center = SplitPane(propEdit, VBox(10.0).apply {
6766
children.setAll(
@@ -96,8 +95,16 @@ class ControlsPreviewTestApp : Application() {
9695
childs.forEachIndexed { index, it ->
9796
previewContainer.add(Label(it.model.schema.propertyName), 0, index)
9897
previewContainer.add(Label(it.model.previewString.string), 1, index)
99-
if(it.model.previewString.isPseudoValue) previewContainer.add(Label("pseudo"), 2, index)
100-
if(it.model.previewString.isDefaultValue) previewContainer.add(Label("default"), 3, index)
98+
if (it.model.previewString.isPseudoValue) previewContainer.add(
99+
Label("pseudo"),
100+
2,
101+
index
102+
)
103+
if (it.model.previewString.isDefaultValue) previewContainer.add(
104+
Label("default"),
105+
3,
106+
index
107+
)
101108
}
102109
}
103110

‎src/test/kotlin/com/github/hanseter/json/editor/app/JsonPropertiesEditorTestApp.kt‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import com.github.hanseter.json.editor.util.IdRefDisplayMode
1313
import com.github.hanseter.json.editor.util.PropertyGrouping
1414
import com.github.hanseter.json.editor.util.ViewOptions
1515
import javafx.application.Application
16+
import javafx.collections.FXCollections
1617
import javafx.scene.Parent
1718
import javafx.scene.Scene
1819
import javafx.scene.control.CheckBox
@@ -59,7 +60,12 @@ class JsonPropertiesEditorTestApp : Application() {
5960

6061
private fun display(editor: JsonPropertiesEditor, schemaName: String, data: JSONObject) {
6162
editor.clear()
62-
editor.display("test", "isRoot 1 2 3 4 5 long text", SchemaNormalizer.deepCopy(data), loadSchema(schemaName)) {
63+
editor.display(
64+
"test",
65+
"isRoot 1 2 3 4 5 long text",
66+
SchemaNormalizer.deepCopy(data),
67+
loadSchema(schemaName)
68+
) {
6369
println(it.toString(1))
6470
editor.lookup("c2")
6571
it
@@ -70,17 +76,18 @@ class JsonPropertiesEditorTestApp : Application() {
7076

7177
private fun buildUi(propEdit: JsonPropertiesEditor): Parent {
7278

79+
val themeComboBox = TestUtils.createThemeComboBox()
7380

7481
val showStars = CheckBox("Show *")
7582

7683
val groupBy = ComboBox<PropertyGrouping>().apply {
77-
items.addAll(PropertyGrouping.values())
78-
selectionModel.select(0)
84+
items.addAll(PropertyGrouping.entries)
85+
selectionModel.selectFirst()
7986
}
8087

81-
val schemas=TestUtils.createSchemaComboBox().apply {
88+
val schemas = TestUtils.createSchemaComboBox().apply {
8289
this.valueProperty().addListener { _, _, newValue ->
83-
if(newValue!=null){
90+
if (newValue != null) {
8491
display(propEdit, newValue, JSONObject())
8592
}
8693
}
@@ -103,10 +110,11 @@ class JsonPropertiesEditorTestApp : Application() {
103110
showStars,
104111
groupBy,
105112
schemas,
106-
).apply { spacing=10.0 },
113+
themeComboBox
114+
).apply { spacing = 10.0 },
107115
PropertiesEditorToolbar(propEdit).node,
108116
propEdit
109-
).apply { spacing=10.0 }
117+
).apply { spacing = 10.0 }
110118
}
111119

112120
object ReferenceProvider : IdReferenceProposalProvider {

‎src/test/kotlin/com/github/hanseter/json/editor/app/ToggleSwitchTestApp.kt‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package com.github.hanseter.json.editor.app
22

3+
import com.github.hanseter.json.editor.base.TestUtils
34
import com.github.hanseter.json.editor.ui.skins.ToggleSwitchSkin
45
import javafx.application.Application
56
import javafx.geometry.Insets
@@ -39,11 +40,8 @@ class ToggleSwitchTestApp : Application() {
3940
switch3.text = "switch 1 selected: ${switch1.isSelected}"
4041
}
4142

42-
val root = VBox(16.0,
43-
switch1, switch2, switch3
44-
).apply {
45-
padding = Insets(32.0)
46-
}
43+
val root = VBox(16.0, TestUtils.createThemeComboBox(), switch1, switch2, switch3)
44+
.apply { padding = Insets(32.0) }
4745

4846
primaryStage.apply {
4947
title = "Toggle Switches Galore"

‎src/test/kotlin/com/github/hanseter/json/editor/base/TestUtils.kt‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
package com.github.hanseter.json.editor.base
22

3+
import atlantafx.base.theme.CupertinoDark
4+
import atlantafx.base.theme.CupertinoLight
5+
import atlantafx.base.theme.Dracula
6+
import atlantafx.base.theme.NordDark
7+
import atlantafx.base.theme.NordLight
8+
import atlantafx.base.theme.PrimerDark
9+
import atlantafx.base.theme.PrimerLight
10+
import atlantafx.base.theme.Theme
11+
import javafx.application.Application
12+
import javafx.application.Application.setUserAgentStylesheet
13+
import javafx.collections.FXCollections
14+
import javafx.scene.control.ComboBox
15+
import javafx.util.StringConverter
316
import org.controlsfx.control.SearchableComboBox
417
import org.json.JSONObject
518
import org.json.JSONTokener
@@ -30,4 +43,38 @@ object TestUtils {
3043
WaitForAsyncUtils.waitForFxEvents()
3144
return ret
3245
}
46+
47+
fun createThemeComboBox(): ComboBox<Theme?> {
48+
val themeComboBox = ComboBox(
49+
FXCollections.observableArrayList(
50+
null,
51+
PrimerLight(),
52+
CupertinoLight(),
53+
NordLight(),
54+
PrimerDark(),
55+
CupertinoDark(),
56+
NordDark(),
57+
Dracula(),
58+
)
59+
).apply {
60+
converter = object : StringConverter<Theme?>() {
61+
override fun toString(theme: Theme?): String {
62+
return theme?.name ?: Application.STYLESHEET_MODENA
63+
}
64+
65+
override fun fromString(string: String?): Theme? {
66+
TODO("Not yet implemented")
67+
}
68+
}
69+
selectionModel.selectedItemProperty().addListener { _, _, new ->
70+
if (new != null) {
71+
setUserAgentStylesheet(new.userAgentStylesheet)
72+
} else {
73+
setUserAgentStylesheet(null)
74+
}
75+
76+
}
77+
}
78+
return themeComboBox
79+
}
3380
}

0 commit comments

Comments
 (0)