Add a new TabIndicator component to inform the user about changes (#1866

) - add a new TabIndicator component to inform the user about changes in a tab
PhoenicisOrg · Mar 2, 2019 · 488ccfe · 488ccfe
1 parent fdd6d01
commit 488ccfe
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 1 deletion.
diff --git a/...cis-javafx/src/main/java/org/phoenicis/javafx/components/common/control/TabIndicator.java b/...cis-javafx/src/main/java/org/phoenicis/javafx/components/common/control/TabIndicator.java
@@ -0,0 +1,47 @@
+package org.phoenicis.javafx.components.common.control;
+
+import javafx.beans.property.SimpleStringProperty;
+import javafx.beans.property.StringProperty;
+import javafx.scene.control.Tab;
+import org.phoenicis.javafx.components.common.skin.TabIndicatorSkin;
+
+/**
+ * An indicator symbol shown inside the header of a {@link Tab} object.
+ * A {@link TabIndicator} can be used to inform the user about changes that occurred since the user visited the tab the
+ * last time
+ */
+public class TabIndicator extends ControlBase<TabIndicator, TabIndicatorSkin> {
+    /**
+     * The text shown inside the tab indicator
+     */
+    private final StringProperty text;
+
+    /**
+     * Constructor
+     */
+    public TabIndicator() {
+        super();
+
+        this.text = new SimpleStringProperty();
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public TabIndicatorSkin createSkin() {
+        return new TabIndicatorSkin(this);
+    }
+
+    public String getText() {
+        return this.text.get();
+    }
+
+    public StringProperty textProperty() {
+        return this.text;
+    }
+
+    public void setText(String text) {
+        this.text.set(text);
+    }
+}
diff --git a/...is-javafx/src/main/java/org/phoenicis/javafx/components/common/skin/TabIndicatorSkin.java b/...is-javafx/src/main/java/org/phoenicis/javafx/components/common/skin/TabIndicatorSkin.java
@@ -0,0 +1,41 @@
+package org.phoenicis.javafx.components.common.skin;
+
+import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
+import javafx.scene.text.Text;
+import org.phoenicis.javafx.components.common.control.TabIndicator;
+
+/**
+ * A skin implementation for the {@link TabIndicator} component
+ */
+public class TabIndicatorSkin extends SkinBase<TabIndicator, TabIndicatorSkin> {
+    /**
+     * Constructor
+     *
+     * @param control The control belonging to the skin
+     */
+    public TabIndicatorSkin(TabIndicator control) {
+        super(control);
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public void initialise() {
+        final Region circle = new Region();
+        circle.getStyleClass().add("indicator-circle");
+
+        final Text text = new Text();
+        text.getStyleClass().add("indicator-information");
+        text.textProperty().bind(getControl().textProperty());
+
+        final StackPane container = new StackPane(circle, text);
+        container.getStyleClass().add("indicator-container");
+
+        final StackPane tabIndicator = new StackPane(container);
+        tabIndicator.getStyleClass().add("tab-indicator");
+
+        getChildren().add(tabIndicator);
+    }
+}
diff --git a/.../src/main/java/org/phoenicis/javafx/views/mainwindow/installations/InstallationsView.java b/.../src/main/java/org/phoenicis/javafx/views/mainwindow/installations/InstallationsView.java
@@ -21,6 +21,7 @@
 import javafx.application.Platform;
 import javafx.beans.Observable;
 import javafx.beans.binding.Bindings;
+import javafx.beans.binding.IntegerBinding;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleObjectProperty;
 import javafx.collections.FXCollections;
@@ -30,14 +31,15 @@
 import org.phoenicis.javafx.collections.ConcatenatedList;
 import org.phoenicis.javafx.collections.MappedList;
 import org.phoenicis.javafx.components.common.control.DetailsPanel;
+import org.phoenicis.javafx.components.common.control.TabIndicator;
 import org.phoenicis.javafx.components.common.widgets.control.CombinedListWidget;
 import org.phoenicis.javafx.components.common.widgets.utils.ListWidgetElement;
 import org.phoenicis.javafx.components.common.widgets.utils.ListWidgetType;
 import org.phoenicis.javafx.components.installation.control.InstallationSidebar;
 import org.phoenicis.javafx.settings.JavaFxSettingsManager;
+import org.phoenicis.javafx.themes.ThemeManager;
 import org.phoenicis.javafx.utils.ObjectBindings;
 import org.phoenicis.javafx.utils.StringBindings;
-import org.phoenicis.javafx.themes.ThemeManager;
 import org.phoenicis.javafx.views.mainwindow.installations.dto.InstallationCategoryDTO;
 import org.phoenicis.javafx.views.mainwindow.installations.dto.InstallationDTO;
 import org.phoenicis.javafx.views.mainwindow.ui.MainWindowView;
@@ -87,6 +89,23 @@ public InstallationsView(ThemeManager themeManager, JavaFxSettingsManager javaFx
 
         this.activeInstallations = createInstallationListWidget();
 
+        // a binding containing the number of currently active installations
+        final IntegerBinding openInstallations = Bindings.createIntegerBinding(
+                () -> this.activeInstallations.getElements().size(), this.activeInstallations.getElements());
+
+        final TabIndicator indicator = new TabIndicator();
+        indicator.textProperty().bind(StringBindings.map(openInstallations, numberOfInstallations -> {
+            if (numberOfInstallations.intValue() < 10) {
+                return String.valueOf(numberOfInstallations);
+            } else {
+                return "+";
+            }
+        }));
+
+        // only show the tab indicator if at least one active installation exists
+        this.graphicProperty().bind(Bindings.when(Bindings.notEqual(openInstallations, 0)).then(indicator)
+                .otherwise(new SimpleObjectProperty<>()));
+
         this.filter.selectedInstallationCategoryProperty().addListener((Observable invalidation) -> closeDetailsView());
 
         this.installationDetailsPanel = createInstallationDetailsPanel();

diff --git a/phoenicis-javafx/src/main/resources/org/phoenicis/javafx/themes/standard/main.less b/phoenicis-javafx/src/main/resources/org/phoenicis/javafx/themes/standard/main.less
@@ -74,6 +74,7 @@
   -fx-text-font-family: "Roboto Light";
   -fx-text-fill: #FFFFFF;
   -fx-font-size: 1.2em;
+  -fx-content-display: right;
   -fx-cursor: hand;
 }
 
@@ -95,6 +96,29 @@
   -fx-opacity: 1;
 }
 
+.tab-indicator {
+  -fx-alignment: top-left;
+
+  .indicator-container {
+    -fx-alignment: center;
+
+    .indicator-circle {
+      -fx-pref-width: 1em;
+      -fx-pref-height: 1em;
+      -fx-border-radius: 1em;
+      -fx-background-radius: 1em;
+      -fx-background-color: #529bda;
+      -fx-background-repeat: no-repeat;
+    }
+
+    .indicator-information {
+      -fx-font-size: 0.8em;
+      -fx-font-weight: bold;
+      -fx-fill: white;
+    }
+  }
+}
+
 /*******************************************************/
 /*********************** sidebar ***********************/
 /*******************************************************/