navigation View

README.md

@@ -13,19 +13,21 @@
 
 ## FluentFX - Fluent design for javafx
 
-# NEW LOOK AND FEEL
+# Demo application
 
-<img src="./Experimental_look.png"/>
+Demo application I am workin on. Next commit going to create a navigation view helper. The navigation view styles are ready themselfs. The demo works with controlsfx for icons. The theme is evolving to a full library. You can run the demo by cloning the repo and "mvn javafx:run" the demo-maven folder.
 
-Simple css file for fluent design in javafx
-
-![Gif](https://github.com/Ivan-Kalatchev/FluentFX/blob/master/Preview.gif?raw=true)
+<img src="./demo-covid.PNG"/>
+Demo application for coronavirus statistics.
 
 MenuBar
 
 ![Gif](https://github.com/Ivan-Kalatchev/FluentFX/blob/master/menu.gif?raw=true)
 
 ### What's new
-Experimental new look 
 
-Migrating to the web controls - https://developer.microsoft.com/en-us/fluentui#/controls/
+<ul>
+<li>Navigation view</li>
+<li>Data grid</li>
+<li>Demo application</li>
+</ul>

demo-maven/demo/src/main/java/demo/Person.java

@@ -0,0 +1,19 @@
+package demo;
+
+public class Person {
+    private String name;
+    private String surname;
+
+    public Person(String name, String surname) {
+        this.name = name;
+        this.surname = surname;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public String getSurname() {
+        return surname;
+    }
+}

demo-maven/demo/src/main/java/demo/PrimaryController.java

@@ -10,15 +10,14 @@
 import javafx.scene.paint.Paint;
 import javafx.scene.text.Font;
 import javafx.scene.control.*;
+import javafx.scene.control.cell.PropertyValueFactory;
 
 import org.controlsfx.glyphfont.FontAwesome;
 import org.controlsfx.glyphfont.Glyph;
 import org.controlsfx.glyphfont.GlyphFont;
 import org.controlsfx.glyphfont.GlyphFontRegistry;
 import org.kordamp.ikonli.javafx.FontIcon;
 
-import impl.fluentfx.styles.demo.CustomTreeCellSkin;
-
 public class PrimaryController {
 
     @FXML
@@ -39,6 +38,9 @@ public class PrimaryController {
     @FXML
     public VBox Nav;
 
+    @FXML
+    public javafx.scene.control.TableView Table1;
+
     @FXML
     public TreeView<TreeItem<String>> Settings;
 
@@ -76,15 +78,33 @@ protected void initialize() {
         NavigationView2.getItems().add(a);
 
         Label files = new Label();
-        files.setText("Historical wethers");
+        files.setText("Stats");
         files.setGraphic(fontAwesome.create(FontAwesome.Glyph.LINE_CHART));
         NavigationView2.getItems().add(files);
 
         Label user = new Label();
-        user.setText("Favourites");
-        user.setGraphic(fontAwesome.create(FontAwesome.Glyph.STAR_ALT));
+        user.setText("Check person");
+        user.setGraphic(fontAwesome.create(FontAwesome.Glyph.SEARCH));
         NavigationView2.getItems().add(user);
 
+        TableColumn nameColumn = new TableColumn("Name");
+        nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));
+
+        TableColumn surnameColumn = new TableColumn("Surname");
+        surnameColumn.setCellValueFactory(new PropertyValueFactory<>("surname"));
+
+        Table1.getColumns().addAll(nameColumn, surnameColumn);
+        // Person person = new Person("John", "Doe");
+        Table1.getItems().add(new Person("Jhon", "Doe"));
+        Table1.getItems().add(new Person("Ivan", "Petrov"));
+        Table1.getItems().add(new Person("Petar", "Malinov"));
+        Table1.getItems().add(new Person("Kalin", "Goranov"));
+        Table1.getItems().add(new Person("Gosho", "Marinov"));
+        Table1.getItems().add(new Person("Cvetan", "Kirkov"));
+        Table1.getItems().add(new Person("Ivailo", "Kirchev"));
+        Table1.getItems().add(new Person("Nikolai", "Petrov"));
+        Table1.getItems().add(new Person("Nikola", "Radev"));
+
         // for (Object i : NavigationView2.getItems()) {
         //     ((Label)i).getParent().Text(((Label)i).getText());
         // }
@@ -139,3 +159,4 @@ private void updateSelectedItem(Object newValue) {
         System.out.println(newValue);
     }
 }
+

demo-maven/demo/src/main/resources/demo/Styles/NewThemeCssFluent.css

@@ -611,77 +611,76 @@
 
 /* TableView */
 .table-view {
-    -fx-border-width: 1;
-    -fx-border-radius: 0;
-    -fx-border-color: #222222;
-    -fx-background-radius: 0;
-    -fx-background-color: #1A1A1A;
-    -fx-table-cell-border-color: #222222;
+
+    -fx-border-width:0;
+    -fx-border-color:transparent;
+    -fx-border-style:none;
+
 }
 
 .table-view:focused {
-    -fx-border-width: 1;
-    -fx-border-radius: 0;
-    -fx-border-color: #007ACC;
-    -fx-background-insets: 1;
-    -fx-background-radius: 0;
-    -fx-background-color: #1A1A1A;
+    -fx-text-fill:black;
 }
 
 .table-view .column-header-background {
-    -fx-border-width: 0 0 1 0;
-    -fx-border-color: #222222;
-    -fx-background-radius: 0;
-    -fx-background-color: #1A1A1A;
-    -fx-text-fill: #AFB1B3;
+    -fx-background-color: white;
+
+    /* -fx-background-color: transparent; */
 }
 
 .table-view .column-header {
-    -fx-background-color: transparent;
-    -fx-border-color: #222222;
+    -fx-background-color: white;
+    /* -fx-background-color: transparent; */
 }
 
 .table-view .column-resize-line {
-    -fx-background-color: #007ACC;
-    -fx-pref-width: 1;
+
+    -fx-background-color: gray;
+
 }
 
 .table-row-cell {
-    -fx-background-color: #1A1A1A;
-    -fx-text-background-color: #AFB1B3;
-    -fx-margin: 1;
+    -fx-text-fill:black;
+    -fx-background-color: white;
+}
+
+.table-view:focused .table-row-cell:focused {
+    -fx-border-color: derive(-fx-base, 20%);
+    -fx-background-insets: 0 0 0 0;
+    -fx-table-cell-border-color: transparent;
 }
 
 .table-row-cell:hover {
-    -fx-background-color: #3E3E40;
-    -fx-background-insets: 0;
-    -fx-background-radius: 0;
+    -fx-text-fill:black;
 }
 
 .table-row-cell:selected {
-    -fx-table-cell-border-color: #222222;
-    -fx-background-color: #3E3E40;
-    -fx-background-insets: 0;
-    -fx-background-radius: 0;
+    -fx-text-fill:black;
+    -fx-background-color: rgba(173, 216, 230, 0.24);
 }
 
 .table-row-cell:pressed {
-    -fx-background-color: #007ACC;
-    -fx-background-insets: 0;
-    -fx-background-radius: 0;
+    -fx-text-fill:black;
 }
 
 .table-view .column-header .label {
-    -fx-alignment: center-left;
-    -fx-cursor: HAND;
+    -fx-alignment: LEFT;
 }
 
+.table-view .column-header {
+    -fx-text-alignment: END;
+    -fx-background-color: white;
+    -fx-border-style: solid;
+    -fx-border-color: transparent rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204);
+    -fx-border-width: 1px;
+}
+
+
 .table-view .filler {
-    -fx-background-color: transparent;
+    -fx-background-color: white;
 }
 
 .table-view .column-drag-header {
-    -fx-background-color: #007ACC;
 }