Merge pull request JabRef#6112 from JabRef/order-group-search

ux: move group filter bar to top

Author: stefan-kolb

src/main/java/org/jabref/gui/groups/GroupTree.css

@@ -29,7 +29,7 @@
     -fx-fill: -jr-group-hits-fg;
 }
 
-.disclosureNodeColumn {
+.expansionNodeColumn {
     -fx-alignment: top-right;
 }
 
@@ -73,7 +73,7 @@
     -fx-padding: 0.40em 0.2em 0.40em 0em;
 }
 
-.tree-table-row-cell:root > .disclosureNodeColumn {
+.tree-table-row-cell:root > .expansionNodeColumn {
     -fx-padding: 0.45em 0.2em 0.45em 0.2em;
 }
 
@@ -102,13 +102,17 @@
     -fx-translate-x: -0.4em;
 }
 
-#barBottom {
+#newGroupButton {
+    -fx-padding: 0.1em 1.5em 0.1em 1.5em;
+}
+
+#groupFilterBar {
     -fx-background-color: -jr-sidepane-header-background;
     -fx-border-color: -jr-separator;
     -fx-border-width: 1 0 0 0;
     -fx-padding: 0em 1em 0em 1em;
 }
 
-#barBottom .glyph-icon {
+#groupFilterBar .glyph-icon {
     -fx-font-size: 2em;
 }

src/main/java/org/jabref/gui/groups/GroupTree.fxml

@@ -7,42 +7,36 @@
 <?import javafx.scene.control.TreeTableView?>
 <?import javafx.scene.layout.BorderPane?>
 <?import javafx.scene.layout.HBox?>
-<?import javafx.scene.layout.Region?>
 <?import org.jabref.gui.icon.JabRefIconView?>
 <?import org.controlsfx.control.textfield.CustomTextField?>
 <BorderPane xmlns:fx="http://javafx.com/fxml/1" prefHeight="600.0" prefWidth="150.0"
             xmlns="http://javafx.com/javafx/8.0.112" fx:controller="org.jabref.gui.groups.GroupTreeView">
+    <top>
+        <HBox fx:id="groupFilterBar" alignment="CENTER" spacing="8">
+            <CustomTextField fx:id="searchField" promptText="%Filter groups" HBox.hgrow="ALWAYS"/>
+            <Button fx:id="newGroupButton" onAction="#addNewGroup" styleClass="icon-button"
+                    ButtonBar.buttonData="RIGHT">
+                <graphic>
+                    <JabRefIconView glyph="NEW_GROUP" glyphSize="18"/>
+                </graphic>
+                <tooltip>
+                    <Tooltip text="%New group"/>
+                </tooltip>
+            </Button>
+        </HBox>
+    </top>
     <center>
         <TreeTableView fx:id="groupTree" layoutY="-7.0" prefHeight="600.0" prefWidth="250.0">
             <columns>
                 <TreeTableColumn fx:id="mainColumn"/>
                 <TreeTableColumn fx:id="numberColumn" minWidth="50.0" maxWidth="70.0" prefWidth="60.0"
                                  styleClass="numberColumn"/>
-                <TreeTableColumn fx:id="disclosureNodeColumn" maxWidth="14.0" minWidth="14.0"
-                                 styleClass="disclosureNodeColumn" text="Column X"/>
+                <TreeTableColumn fx:id="expansionNodeColumn" maxWidth="25.0" minWidth="25.0"
+                                 styleClass="expansionNodeColumn"/>
             </columns>
             <columnResizePolicy>
                 <TreeTableView fx:constant="CONSTRAINED_RESIZE_POLICY"/>
             </columnResizePolicy>
         </TreeTableView>
     </center>
-    <bottom>
-        <HBox fx:id="barBottom" alignment="CENTER">
-            <ButtonBar fx:id="buttonBarBottom">
-                <buttons>
-                    <Button fx:id="newGroupButton" onAction="#addNewGroup" styleClass="icon-button"
-                            ButtonBar.buttonData="LEFT">
-                        <graphic>
-                            <JabRefIconView glyph="NEW_GROUP" glyphSize="18"/>
-                        </graphic>
-                        <tooltip>
-                            <Tooltip text="%New group"/>
-                        </tooltip>
-                    </Button>
-                </buttons>
-            </ButtonBar>
-            <Region prefWidth="20.0" HBox.hgrow="ALWAYS"/>
-            <CustomTextField fx:id="searchField" promptText="%Filter groups"/>
-        </HBox>
-    </bottom>
 </BorderPane>

src/main/java/org/jabref/gui/groups/GroupTreeView.java

@@ -61,7 +61,7 @@ public class GroupTreeView {
     @FXML private TreeTableView<GroupNodeViewModel> groupTree;
     @FXML private TreeTableColumn<GroupNodeViewModel, GroupNodeViewModel> mainColumn;
     @FXML private TreeTableColumn<GroupNodeViewModel, GroupNodeViewModel> numberColumn;
-    @FXML private TreeTableColumn<GroupNodeViewModel, GroupNodeViewModel> disclosureNodeColumn;
+    @FXML private TreeTableColumn<GroupNodeViewModel, GroupNodeViewModel> expansionNodeColumn;
     @FXML private CustomTextField searchField;
 
     @Inject private StateManager stateManager;
@@ -158,7 +158,7 @@ public void initialize() {
                     group.toggleExpansion();
                     event.consume();
                 })
-                .install(disclosureNodeColumn);
+                .install(expansionNodeColumn);
 
         // Set pseudo-classes to indicate if row is root or sub-item ( > 1 deep)
         PseudoClass rootPseudoClass = PseudoClass.getPseudoClass("root");