Skip to content

Commit 16ff50a

Browse files
dukkedukke
authored
Feature/kl editor: Improve UI and UX (#849)
* FVKB-129: Add the ability to increase row span * Improve Field Column Span aesthetics and move styling 'code' to CSS * Further refactor and clean code * FVKB-136: Add the ability to increase row span through drag and drop * FVKB-145: Add the ability to toggle the Pattern title visibility * Tweak KL Editor TextField visuals when the TextField is readonly * FVKB-151: Show available factories in the Display section in the Properties Pane when a Field is selected * FVKB-153: Pressing delete to delete a Pattern after it's added is not working * Refactor creating WindowControlFactory to improve code for Window controls creation * Refactor: using Editor model instances instead of Views where appropriate * FVKB-130: Add the ability to tweak Field visibility on or off * UI tweaks: Add hover and armed effects to buttons * FVKB-158: Sort Patterns in Pattern Browser in KL Editor alphabetically * FVKB-159: Remove UI clutter and make the UI more intuitive * FVKB-160: Add a controls section to the left pane in the KL Editor
1 parent edb4374 commit 16ff50a

File tree

12 files changed

+156
-84
lines changed

12 files changed

+156
-84
lines changed

‎knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/KLEditorMainScreenController.java‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,15 @@
2525
import javafx.collections.ObservableList;
2626
import javafx.event.ActionEvent;
2727
import javafx.fxml.FXML;
28+
import javafx.scene.control.Button;
2829
import javafx.scene.control.ListView;
2930
import javafx.scene.control.TextField;
3031
import javafx.scene.layout.BorderPane;
3132
import org.slf4j.Logger;
3233
import org.slf4j.LoggerFactory;
3334

35+
import java.util.Comparator;
36+
3437
import static dev.ikm.komet.kview.events.EventTopics.KL_TOPIC;
3538
import static dev.ikm.komet.preferences.KLEditorPreferences.KL_EDITOR_APP;
3639

@@ -39,6 +42,9 @@ public class KLEditorMainScreenController {
3942

4043
private final EvtBus eventBus = EvtBusFactory.getDefaultEvtBus();
4144

45+
@FXML
46+
private Button saveButton;
47+
4248
@FXML
4349
private PropertiesPane propertiesPane;
4450

@@ -49,7 +55,10 @@ public class KLEditorMainScreenController {
4955
private TextField titleTextField;
5056

5157
@FXML
52-
private ListView patternBrowserListView;
58+
private ListView<PatternBrowserItem> patternBrowserListView;
59+
60+
@FXML
61+
private ListView controlsListView;
5362

5463
private KLEditorWindowController klEditorWindowController;
5564

@@ -64,7 +73,7 @@ public class KLEditorMainScreenController {
6473
private ObservableViewNoOverride windowViewCoordinates;
6574

6675
private ViewCalculator viewCalculator;
67-
private ObservableList<Entity<EntityVersion>> patterns;
76+
private ObservableList<PatternBrowserItem> patternsList;
6877

6978
public void init(KometPreferences klEditorAppPreferences, WindowSettings windowSettings, String windowToLoad) {
7079
this.klEditorAppPreferences = klEditorAppPreferences;
@@ -75,6 +84,9 @@ public void init(KometPreferences klEditorAppPreferences, WindowSettings windowS
7584
viewCalculator = ViewCalculatorWithCache.getCalculator(windowViewCoordinates.toViewCoordinateRecord());
7685

7786
initPatternsList(viewCalculator);
87+
initControlsList();
88+
89+
saveButton.disableProperty().bind(titleTextField.textProperty().isEmpty());
7890

7991
// Init Window
8092
initWindow(windowToLoad);
@@ -99,18 +111,29 @@ public void shutdown() {
99111
}
100112

101113
private void initPatternsList(ViewCalculator viewCalculator) {
102-
patterns = FXCollections.observableArrayList();
114+
patternsList = FXCollections.observableArrayList();
103115
PrimitiveData.get().forEachPatternNid(patternNid -> {
104116
Latest<PatternEntityVersion> latestPattern = viewCalculator.latest(patternNid);
105117
latestPattern.ifPresent(patternEntityVersion -> {
106118
if (EntityService.get().getEntity(patternEntityVersion.nid()).isPresent()) {
107-
patterns.add(EntityService.get().getEntity(patternNid).get());
119+
Entity<EntityVersion> entity = EntityService.get().getEntity(patternNid).get();
120+
PatternBrowserItem patternBrowserItem = new PatternBrowserItem(entity, viewCalculator);
121+
patternsList.add(patternBrowserItem);
108122
}
109123
});
110124
});
111125

126+
// Sort
127+
FXCollections.sort(patternsList,
128+
Comparator.comparing(PatternBrowserItem::getTitle,
129+
String.CASE_INSENSITIVE_ORDER));
130+
112131
patternBrowserListView.setCellFactory(param -> new PatternBrowserCell(viewCalculator));
113-
patternBrowserListView.setItems(patterns);
132+
patternBrowserListView.setItems(patternsList);
133+
}
134+
135+
private void initControlsList() {
136+
114137
}
115138

116139
private void initWindow(String windowTitle) {

‎knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/PatternBrowserItem.java‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
package dev.ikm.komet.kleditorapp.view;
2+
3+
import dev.ikm.tinkar.common.id.PublicId;
4+
import dev.ikm.tinkar.coordinate.view.calculator.ViewCalculator;
5+
import dev.ikm.tinkar.entity.Entity;
6+
import dev.ikm.tinkar.entity.EntityVersion;
7+
import dev.ikm.tinkar.terms.PatternFacade;
8+
9+
import java.util.Optional;
10+
11+
/**
12+
* Represents an Item in the Pattern Browser List.
13+
*/
14+
public class PatternBrowserItem {
15+
private final String title;
16+
private final PublicId publicId;
17+
private final int nid;
18+
19+
private final ViewCalculator viewCalculator;
20+
21+
public PatternBrowserItem(Entity<EntityVersion> entity, ViewCalculator viewCalculator) {
22+
this.viewCalculator = viewCalculator;
23+
24+
this.title = retrieveDisplayName(entity.toProxy());
25+
this.publicId = entity.publicId();
26+
this.nid = entity.nid();
27+
}
28+
29+
private String retrieveDisplayName(PatternFacade patternFacade) {
30+
Optional<String> optionalStringRegularName = viewCalculator.getRegularDescriptionText(patternFacade);
31+
Optional<String> optionalStringFQN = viewCalculator.getFullyQualifiedNameText(patternFacade);
32+
return optionalStringRegularName.orElseGet(optionalStringFQN::get);
33+
}
34+
35+
public String getTitle() { return title; }
36+
public PublicId getPublicId() { return publicId; }
37+
public int getNid() { return nid; }
38+
}

‎knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/control/EditorWindowControl.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ private void onSectionsChanged(ListChangeListener.Change<? extends SectionViewCo
3737
}
3838

3939
// -- title
40-
private final StringProperty title = new SimpleStringProperty(this, "title", "Untitled");
40+
private final StringProperty title = new SimpleStringProperty(this, "title", "");
4141
public StringProperty titleProperty() { return title; }
4242
public String getTitle() { return title.get(); }
4343
public void setTitle(String title) { this.title.set(title); }

‎knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/control/PatternBrowserCell.java‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
import dev.ikm.komet.framework.Identicon;
44
import dev.ikm.komet.framework.controls.TimeUtils;
55
import dev.ikm.komet.framework.dnd.DragImageMaker;
6+
import dev.ikm.komet.kleditorapp.view.PatternBrowserItem;
67
import dev.ikm.tinkar.coordinate.stamp.calculator.Latest;
78
import dev.ikm.tinkar.coordinate.view.calculator.ViewCalculator;
8-
import dev.ikm.tinkar.entity.Entity;
9-
import dev.ikm.tinkar.entity.EntityVersion;
109
import dev.ikm.tinkar.entity.PatternEntityVersion;
1110
import dev.ikm.tinkar.entity.StampEntity;
12-
import dev.ikm.tinkar.terms.PatternFacade;
1311
import javafx.scene.control.ContentDisplay;
1412
import javafx.scene.control.Label;
1513
import javafx.scene.control.ListCell;
@@ -31,7 +29,7 @@
3129
/**
3230
* A Cell that renders each item in the Pattern Browser List.
3331
*/
34-
public class PatternBrowserCell extends ListCell<Entity<EntityVersion>> {
32+
public class PatternBrowserCell extends ListCell<PatternBrowserItem> {
3533
private static final Logger LOG = LoggerFactory.getLogger(PatternBrowserCell.class);
3634

3735
public static final DataFormat KL_EDITOR_VERSION_PROXY = new DataFormat("kl-editor/komet-pattern-version-proxy");
@@ -91,17 +89,17 @@ public PatternBrowserCell(ViewCalculator viewCalculator) {
9189
}
9290

9391
@Override
94-
protected void updateItem(Entity<EntityVersion> entity, boolean empty) {
95-
super.updateItem(entity, empty);
92+
protected void updateItem(PatternBrowserItem patternBrowserItem, boolean empty) {
93+
super.updateItem(patternBrowserItem, empty);
9694

9795
if (!isEmpty()) {
98-
Latest<PatternEntityVersion> optionalLatestPattern = viewCalculator.latest(entity.nid());
96+
Latest<PatternEntityVersion> optionalLatestPattern = viewCalculator.latest(patternBrowserItem.getNid());
9997
optionalLatestPattern.ifPresentOrElse(latestPattern -> {
10098
// Title
101-
titleLabel.setText(retrieveDisplayName(entity.toProxy()));
99+
titleLabel.setText(patternBrowserItem.getTitle());
102100

103101
// Identicon
104-
Image identiconImage = Identicon.generateIdenticonImage(entity.publicId());
102+
Image identiconImage = Identicon.generateIdenticonImage(patternBrowserItem.getPublicId());
105103
identiconImageView.setImage(identiconImage);
106104

107105
currentPatternEntityVersion = latestPattern;
@@ -133,12 +131,6 @@ private void clearCellsContent() {
133131
lastUpdatedTextLabel.setText("");
134132
}
135133

136-
private String retrieveDisplayName(PatternFacade patternFacade) {
137-
Optional<String> optionalStringRegularName = viewCalculator.getRegularDescriptionText(patternFacade);
138-
Optional<String> optionalStringFQN = viewCalculator.getFullyQualifiedNameText(patternFacade);
139-
return optionalStringRegularName.orElseGet(optionalStringFQN::get);
140-
}
141-
142134
private void setUpDragAndDrop() {
143135
// Set up the drag detection event handler
144136
setOnDragDetected(mouseEvent -> {

‎knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/PatternPropertiesPane.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ public PatternPropertiesPane() {
3737
titleContainer.getStyleClass().add("title-container");
3838
titleContainer.setSpacing(4);
3939

40-
Label titleLabel = new Label("Title:");
40+
Label titleLabel = new Label("Pattern Title:");
4141
titleTextField = new TextField();
4242

4343
titleContainer.getChildren().addAll(titleLabel, titleTextField);

‎knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/SectionPropertiesPane.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ public SectionPropertiesPane() {
3535
sectionNameContainer.getStyleClass().add("section-name-container");
3636
sectionNameContainer.setSpacing(4);
3737

38-
Label nameLabel = new Label("Name of the section:");
38+
Label nameLabel = new Label("Section Title:");
3939
sectionNameTextField = new TextField();
4040

4141
sectionNameContainer.getChildren().addAll(nameLabel, sectionNameTextField);

‎knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/KLEditorMainScreen.fxml‎

Lines changed: 21 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
<?import dev.ikm.komet.kleditorapp.view.control.EditorWindowControl?>
2020
<?import dev.ikm.komet.kleditorapp.view.propertiespane.PropertiesPane?>
21+
<?import javafx.scene.control.TitledPane?>
2122
<BorderPane fx:id="klEditorMainContainer" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1"
2223
fx:controller="dev.ikm.komet.kleditorapp.view.KLEditorMainScreenController">
2324
<center>
@@ -29,7 +30,6 @@
2930
<HBox alignment="CENTER_LEFT" prefHeight="44" spacing="8" styleClass="app-header">
3031
<Label alignment="CENTER" contentDisplay="CENTER" maxWidth="1.7976931348623157E308"
3132
styleClass="app-title" text="KNOWLEDGE LAYOUT EDITOR" HBox.hgrow="ALWAYS"/>
32-
<Button styleClass="pill primary" text="DONE"/>
3333
</HBox>
3434
</VBox>
3535
</top>
@@ -47,37 +47,12 @@
4747
<!-- Secondary toolbar under header -->
4848
<HBox alignment="CENTER_LEFT" spacing="10" styleClass="top-toolbar"
4949
BorderPane.alignment="CENTER">
50-
<Label minWidth="-Infinity" text="Name:"/>
51-
<TextField fx:id="titleTextField" prefWidth="260" promptText="Untitled"
50+
51+
<Label minWidth="-Infinity" text="Window Title:"/>
52+
<TextField fx:id="titleTextField" prefWidth="260" promptText="Enter Window Title"
5253
styleClass="title-name-field"/>
53-
<ComboBox prefWidth="150.0" styleClass="dark"/>
54-
<Label minWidth="-Infinity" text="Preview"/>
55-
<Separator orientation="VERTICAL"/>
5654
<Pane HBox.hgrow="ALWAYS"/>
57-
<Button styleClass="light">
58-
<graphic>
59-
<StackPane>
60-
<styleClass>
61-
<String fx:value="icon"/>
62-
<String fx:value="share"/>
63-
</styleClass>
64-
</StackPane>
65-
</graphic>
66-
</Button>
67-
<Button styleClass="light">
68-
<graphic>
69-
<StackPane>
70-
<styleClass>
71-
<String fx:value="icon"/>
72-
<String fx:value="duplicate"/>
73-
</styleClass>
74-
</StackPane>
75-
</graphic>
76-
</Button>
77-
<Button styleClass="dark" text="SAVE AS TEMPLATE"/>
78-
<Separator orientation="VERTICAL" prefHeight="200.0"/>
79-
<Button styleClass="dark" text="CANCEL"/>
80-
<Button defaultButton="true" onAction="#onSave" text="SAVE"/>
55+
<Button defaultButton="true" fx:id="saveButton" onAction="#onSave" text="SAVE WINDOW"/>
8156
</HBox>
8257
</top>
8358
<right>
@@ -89,34 +64,33 @@
8964
<VBox styleClass="pattern-browser" BorderPane.alignment="CENTER">
9065
<!-- Sidebar header -->
9166
<HBox alignment="CENTER_LEFT" spacing="8" styleClass="header">
92-
<Button mnemonicParsing="false" styleClass="clear-button">
93-
<graphic>
94-
<StackPane prefHeight="0.0" prefWidth="0.0">
95-
<styleClass>
96-
<String fx:value="icon"/>
97-
<String fx:value="cross"/>
98-
</styleClass>
99-
</StackPane>
100-
</graphic>
101-
<HBox.margin>
102-
<Insets left="10.0"/>
103-
</HBox.margin>
104-
</Button>
10567
<Label alignment="CENTER" maxWidth="1.7976931348623157E308" styleClass="sidebar-title"
106-
text="Pattern and Semantic Library" wrapText="true" HBox.hgrow="ALWAYS"/>
68+
text="Pattern and Control Library" wrapText="true" HBox.hgrow="ALWAYS"/>
10769
</HBox>
10870
<VBox styleClass="content-container" VBox.vgrow="ALWAYS">
10971
<children>
11072
<!-- Search + options row -->
11173
<HBox spacing="8" styleClass="search-container">
112-
<TextField promptText="Search patterns" HBox.hgrow="ALWAYS">
74+
<TextField promptText="Search patterns and controls" HBox.hgrow="ALWAYS">
11375
</TextField>
11476
<padding>
11577
<Insets bottom="8" left="12" right="12" top="0"/>
11678
</padding>
11779
</HBox>
118-
<ListView fx:id="patternBrowserListView" prefHeight="200.0" prefWidth="200.0"
119-
VBox.vgrow="ALWAYS"/>
80+
<TitledPane text="Patterns" VBox.vgrow="ALWAYS">
81+
<ListView fx:id="patternBrowserListView"/>
82+
<styleClass>
83+
<String fx:value="dark"/>
84+
<String fx:value="patterns-titled-pane"/>
85+
</styleClass>
86+
</TitledPane>
87+
<TitledPane text="Controls" >
88+
<ListView fx:id="controlsListView" />
89+
<styleClass>
90+
<String fx:value="dark"/>
91+
<String fx:value="controls-titled-pane"/>
92+
</styleClass>
93+
</TitledPane>
12094
</children>
12195
</VBox>
12296
</VBox>

‎knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-core.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,3 +247,21 @@
247247
.titled-pane > *.content {
248248
-fx-border-width: 0;
249249
}
250+
251+
/************ Titled Pane Dark mode *************/
252+
253+
.titled-pane.dark > .title {
254+
-fx-background-color: -Grey-9;
255+
}
256+
257+
.titled-pane.dark > .title > .text {
258+
-fx-fill: #f0f0f0;
259+
}
260+
261+
.titled-pane.dark > .title > .arrow-button > .arrow {
262+
-fx-background-color: #f0f0f0;
263+
}
264+
265+
.titled-pane.dark > *.content {
266+
-fx-background-color: -Grey-9;
267+
}

0 commit comments

Comments
 (0)