diff --git a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/KLEditorMainScreenController.java b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/KLEditorMainScreenController.java index e251dfdca..3955633f0 100644 --- a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/KLEditorMainScreenController.java +++ b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/KLEditorMainScreenController.java @@ -25,12 +25,15 @@ import javafx.collections.ObservableList; import javafx.event.ActionEvent; import javafx.fxml.FXML; +import javafx.scene.control.Button; import javafx.scene.control.ListView; import javafx.scene.control.TextField; import javafx.scene.layout.BorderPane; import org.slf4j.Logger; import org.slf4j.LoggerFactory; +import java.util.Comparator; + import static dev.ikm.komet.kview.events.EventTopics.KL_TOPIC; import static dev.ikm.komet.preferences.KLEditorPreferences.KL_EDITOR_APP; @@ -39,6 +42,9 @@ public class KLEditorMainScreenController { private final EvtBus eventBus = EvtBusFactory.getDefaultEvtBus(); + @FXML + private Button saveButton; + @FXML private PropertiesPane propertiesPane; @@ -49,7 +55,10 @@ public class KLEditorMainScreenController { private TextField titleTextField; @FXML - private ListView patternBrowserListView; + private ListView patternBrowserListView; + + @FXML + private ListView controlsListView; private KLEditorWindowController klEditorWindowController; @@ -64,7 +73,7 @@ public class KLEditorMainScreenController { private ObservableViewNoOverride windowViewCoordinates; private ViewCalculator viewCalculator; - private ObservableList> patterns; + private ObservableList patternsList; public void init(KometPreferences klEditorAppPreferences, WindowSettings windowSettings, String windowToLoad) { this.klEditorAppPreferences = klEditorAppPreferences; @@ -75,6 +84,9 @@ public void init(KometPreferences klEditorAppPreferences, WindowSettings windowS viewCalculator = ViewCalculatorWithCache.getCalculator(windowViewCoordinates.toViewCoordinateRecord()); initPatternsList(viewCalculator); + initControlsList(); + + saveButton.disableProperty().bind(titleTextField.textProperty().isEmpty()); // Init Window initWindow(windowToLoad); @@ -99,18 +111,29 @@ public void shutdown() { } private void initPatternsList(ViewCalculator viewCalculator) { - patterns = FXCollections.observableArrayList(); + patternsList = FXCollections.observableArrayList(); PrimitiveData.get().forEachPatternNid(patternNid -> { Latest latestPattern = viewCalculator.latest(patternNid); latestPattern.ifPresent(patternEntityVersion -> { if (EntityService.get().getEntity(patternEntityVersion.nid()).isPresent()) { - patterns.add(EntityService.get().getEntity(patternNid).get()); + Entity entity = EntityService.get().getEntity(patternNid).get(); + PatternBrowserItem patternBrowserItem = new PatternBrowserItem(entity, viewCalculator); + patternsList.add(patternBrowserItem); } }); }); + // Sort + FXCollections.sort(patternsList, + Comparator.comparing(PatternBrowserItem::getTitle, + String.CASE_INSENSITIVE_ORDER)); + patternBrowserListView.setCellFactory(param -> new PatternBrowserCell(viewCalculator)); - patternBrowserListView.setItems(patterns); + patternBrowserListView.setItems(patternsList); + } + + private void initControlsList() { + } private void initWindow(String windowTitle) { diff --git a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/PatternBrowserItem.java b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/PatternBrowserItem.java new file mode 100644 index 000000000..974fdeb64 --- /dev/null +++ b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/PatternBrowserItem.java @@ -0,0 +1,38 @@ +package dev.ikm.komet.kleditorapp.view; + +import dev.ikm.tinkar.common.id.PublicId; +import dev.ikm.tinkar.coordinate.view.calculator.ViewCalculator; +import dev.ikm.tinkar.entity.Entity; +import dev.ikm.tinkar.entity.EntityVersion; +import dev.ikm.tinkar.terms.PatternFacade; + +import java.util.Optional; + +/** + * Represents an Item in the Pattern Browser List. + */ +public class PatternBrowserItem { + private final String title; + private final PublicId publicId; + private final int nid; + + private final ViewCalculator viewCalculator; + + public PatternBrowserItem(Entity entity, ViewCalculator viewCalculator) { + this.viewCalculator = viewCalculator; + + this.title = retrieveDisplayName(entity.toProxy()); + this.publicId = entity.publicId(); + this.nid = entity.nid(); + } + + private String retrieveDisplayName(PatternFacade patternFacade) { + Optional optionalStringRegularName = viewCalculator.getRegularDescriptionText(patternFacade); + Optional optionalStringFQN = viewCalculator.getFullyQualifiedNameText(patternFacade); + return optionalStringRegularName.orElseGet(optionalStringFQN::get); + } + + public String getTitle() { return title; } + public PublicId getPublicId() { return publicId; } + public int getNid() { return nid; } +} diff --git a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/control/EditorWindowControl.java b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/control/EditorWindowControl.java index 1c0cc0017..fc4535ef9 100644 --- a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/control/EditorWindowControl.java +++ b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/control/EditorWindowControl.java @@ -37,7 +37,7 @@ private void onSectionsChanged(ListChangeListener.Change> { +public class PatternBrowserCell extends ListCell { private static final Logger LOG = LoggerFactory.getLogger(PatternBrowserCell.class); public static final DataFormat KL_EDITOR_VERSION_PROXY = new DataFormat("kl-editor/komet-pattern-version-proxy"); @@ -91,17 +89,17 @@ public PatternBrowserCell(ViewCalculator viewCalculator) { } @Override - protected void updateItem(Entity entity, boolean empty) { - super.updateItem(entity, empty); + protected void updateItem(PatternBrowserItem patternBrowserItem, boolean empty) { + super.updateItem(patternBrowserItem, empty); if (!isEmpty()) { - Latest optionalLatestPattern = viewCalculator.latest(entity.nid()); + Latest optionalLatestPattern = viewCalculator.latest(patternBrowserItem.getNid()); optionalLatestPattern.ifPresentOrElse(latestPattern -> { // Title - titleLabel.setText(retrieveDisplayName(entity.toProxy())); + titleLabel.setText(patternBrowserItem.getTitle()); // Identicon - Image identiconImage = Identicon.generateIdenticonImage(entity.publicId()); + Image identiconImage = Identicon.generateIdenticonImage(patternBrowserItem.getPublicId()); identiconImageView.setImage(identiconImage); currentPatternEntityVersion = latestPattern; @@ -133,12 +131,6 @@ private void clearCellsContent() { lastUpdatedTextLabel.setText(""); } - private String retrieveDisplayName(PatternFacade patternFacade) { - Optional optionalStringRegularName = viewCalculator.getRegularDescriptionText(patternFacade); - Optional optionalStringFQN = viewCalculator.getFullyQualifiedNameText(patternFacade); - return optionalStringRegularName.orElseGet(optionalStringFQN::get); - } - private void setUpDragAndDrop() { // Set up the drag detection event handler setOnDragDetected(mouseEvent -> { diff --git a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/PatternPropertiesPane.java b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/PatternPropertiesPane.java index 33ece1817..df03cf5cf 100644 --- a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/PatternPropertiesPane.java +++ b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/PatternPropertiesPane.java @@ -37,7 +37,7 @@ public PatternPropertiesPane() { titleContainer.getStyleClass().add("title-container"); titleContainer.setSpacing(4); - Label titleLabel = new Label("Title:"); + Label titleLabel = new Label("Pattern Title:"); titleTextField = new TextField(); titleContainer.getChildren().addAll(titleLabel, titleTextField); diff --git a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/SectionPropertiesPane.java b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/SectionPropertiesPane.java index 191edd40b..9bd626307 100644 --- a/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/SectionPropertiesPane.java +++ b/knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/SectionPropertiesPane.java @@ -35,7 +35,7 @@ public SectionPropertiesPane() { sectionNameContainer.getStyleClass().add("section-name-container"); sectionNameContainer.setSpacing(4); - Label nameLabel = new Label("Name of the section:"); + Label nameLabel = new Label("Section Title:"); sectionNameTextField = new TextField(); sectionNameContainer.getChildren().addAll(nameLabel, sectionNameTextField); diff --git a/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/KLEditorMainScreen.fxml b/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/KLEditorMainScreen.fxml index a8652d0d9..9e3c20fee 100644 --- a/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/KLEditorMainScreen.fxml +++ b/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/KLEditorMainScreen.fxml @@ -18,6 +18,7 @@ +
@@ -29,7 +30,6 @@ - + - + + + + + + + + + + + + + + diff --git a/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-core.css b/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-core.css index d48dab318..cb858139c 100644 --- a/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-core.css +++ b/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-core.css @@ -247,3 +247,21 @@ .titled-pane > *.content { -fx-border-width: 0; } + +/************ Titled Pane Dark mode *************/ + +.titled-pane.dark > .title { + -fx-background-color: -Grey-9; +} + +.titled-pane.dark > .title > .text { + -fx-fill: #f0f0f0; +} + +.titled-pane.dark > .title > .arrow-button > .arrow { + -fx-background-color: #f0f0f0; +} + +.titled-pane.dark > *.content { + -fx-background-color: -Grey-9; +} \ No newline at end of file diff --git a/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-editor.css b/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-editor.css index 823fb3359..d7757c13b 100644 --- a/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-editor.css +++ b/knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-editor.css @@ -32,7 +32,7 @@ .top-toolbar, .pattern-browser .header { - height: 40px; + height: 43px; -fx-pref-height: height; -fx-min-height: height; @@ -41,19 +41,28 @@ .top-toolbar { -fx-background-color: -Grey-11; - -fx-padding: 0 8px 0 8px; + -fx-padding: 0 10px 0 10px; } .top-toolbar .label { -fx-text-fill: white; - -fx-font-size: 11px; + -fx-font-size: 13px; + -fx-padding: 0 0 0 7px; } -.top-toolbar .text-field { +.top-toolbar > .text-field { -fx-background-color: -Grey-9; -fx-padding: 0.416667em 0.583em 0.416667em 0.583em; /* 4 7 4 7 */ } +.top-toolbar > .text-field:hover { + -fx-background-color: derive(-Grey-9, 5%); +} + +.top-toolbar > .text-field:focused { + -fx-background-color: -Grey-10; +} + .top-toolbar .separator:vertical .line { -fx-border-color: transparent transparent transparent transparent, transparent transparent transparent #555; @@ -76,6 +85,10 @@ -fx-text-fill: #eee; } +.top-toolbar > .button { + -fx-font-size: 13px; +} + /******************************************************************************* * * * Side Bar * @@ -151,7 +164,7 @@ /******************************************************************************* * * - * Pattern Browser * + * Library * * * ******************************************************************************/ @@ -180,12 +193,12 @@ .pattern-browser > .content-container { -fx-background-color: #545d72; - -fx-padding: 0 7px 0 7px; + -fx-padding: 0 0px 0 0px; } .pattern-browser .content-container .search-container { -fx-background-color: #545d72; - -fx-padding: 10px 0px 10px 0px; + -fx-padding: 10px 7px 10px 7px; } .pattern-browser .content-container .search-container .text-field { @@ -201,11 +214,21 @@ -fx-text-fill: #eee; } +.pattern-browser .content-container .titled-pane { + -fx-max-height: infinity; +} + +.pattern-browser .content-container > .titled-pane.dark > .title { + -fx-background-radius: 0; + -fx-background-color: derive(-Grey-8, 15%); +} + /******************************************************************************* * Pattern Browser ListView * ******************************************************************************/ .pattern-browser .list-view { + -fx-padding: 7px 0 0 0; -fx-background-color: transparent; } @@ -225,7 +248,7 @@ .pattern-browser .list-view .scroll-bar:vertical .thumb { -fx-background-color: #888888; - -fx-background-insets: 3 0 3 3; + -fx-background-insets: 3 4 3 -1; -fx-background-radius: 16px; } @@ -243,7 +266,7 @@ -fx-background-color: transparent; -fx-border-color: transparent; - -fx-padding: 0 0px 5px 0px; + -fx-padding: 0 5px 5px 5px; -fx-effect: dropshadow(gaussian , rgba(0, 0, 0, 0.7), 2, 0, 0 , 2 ); } @@ -307,6 +330,12 @@ -fx-font-size: 10px; } +/************** Controls ***************/ + +.pattern-browser .controls-titled-pane { + -fx-pref-height: 250px; +} + /******************************************************************************* * * * Canvas * diff --git a/knowledge-layout/src/main/java/dev/ikm/komet/layout/editor/EditorWindowManager.java b/knowledge-layout/src/main/java/dev/ikm/komet/layout/editor/EditorWindowManager.java index 05154bb23..101804ffc 100644 --- a/knowledge-layout/src/main/java/dev/ikm/komet/layout/editor/EditorWindowManager.java +++ b/knowledge-layout/src/main/java/dev/ikm/komet/layout/editor/EditorWindowManager.java @@ -70,6 +70,5 @@ public static EditorWindowModel getWindowInstance(String title) { * Called when the Editor "app" gets closed. It should be used to clean up. */ public static void shutdown() { - titleToWindowModel.remove(EditorWindowModel.EMPTY_WINDOW_TITLE); } } diff --git a/knowledge-layout/src/main/java/dev/ikm/komet/layout/editor/model/EditorWindowModel.java b/knowledge-layout/src/main/java/dev/ikm/komet/layout/editor/model/EditorWindowModel.java index 57148dfaf..5c9a302a9 100644 --- a/knowledge-layout/src/main/java/dev/ikm/komet/layout/editor/model/EditorWindowModel.java +++ b/knowledge-layout/src/main/java/dev/ikm/komet/layout/editor/model/EditorWindowModel.java @@ -25,8 +25,6 @@ * Every window has to have at least one section that's why there is a main Section property with a getter. */ public class EditorWindowModel { - public static final String EMPTY_WINDOW_TITLE = "Untitled"; - private static final Logger LOG = LoggerFactory.getLogger(EditorWindowModel.class); private final ObservableList additionalSections = FXCollections.observableArrayList(); @@ -187,7 +185,7 @@ private boolean nameExists(String name, EditorSectionModel excludedEditorSection /** * The title of the Section. */ - private final StringProperty title = new SimpleStringProperty(EMPTY_WINDOW_TITLE); + private final StringProperty title = new SimpleStringProperty(); public String getTitle() { return title.get(); } public StringProperty titleProperty() { return title; } public void setTitle(String title) { this.title.set(title);} diff --git a/kview/src/main/resources/dev/ikm/komet/kview/mvvm/view/kview.css b/kview/src/main/resources/dev/ikm/komet/kview/mvvm/view/kview.css index 2b2596cde..1fae77966 100644 --- a/kview/src/main/resources/dev/ikm/komet/kview/mvvm/view/kview.css +++ b/kview/src/main/resources/dev/ikm/komet/kview/mvvm/view/kview.css @@ -4433,7 +4433,7 @@ Styling a context menu for kview ui/ux controls } /******************************************************************************* - * Landing page - Knownledge Layout Editor * + * Landing page - Knowledge Layout Editor * ******************************************************************************/ .kl-editor-landing-page { @@ -4491,6 +4491,7 @@ Styling a context menu for kview ui/ux controls .kl-editor-landing-page .create-new-container, .kl-editor-landing-page .saved-views-container { -fx-hgap: 15px; + -fx-vgap: 15px; } /******************************** Card *********************************/