ux: move group filter bar to top

Switch search field and new group button
Cleanups

Co-authored-by: Oliver Kopp <[email protected]>

Author: stefan-kolb

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

@@ -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,11 +7,23 @@
 <?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>
@@ -26,23 +38,4 @@
             </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>