adjust add vault button position for improved UI

src/main/java/org/cryptomator/ui/mainwindow/VaultListController.java

@@ -25,10 +25,8 @@ import javafx.collections.ListChangeListener;
 import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
 import javafx.geometry.Side;
-import javafx.scene.control.Button;
 import javafx.scene.control.ContextMenu;
 import javafx.scene.control.ListView;
-import javafx.scene.control.ScrollPane;
 import javafx.scene.input.ContextMenuEvent;
 import javafx.scene.input.DragEvent;
 import javafx.scene.input.KeyCode;
@@ -75,11 +73,9 @@ public class VaultListController implements FxController {
 	private final FxApplicationWindows appWindows;
 
 	public ListView<Vault> vaultList;
-	public ScrollPane scrollPane;
 	public VBox vbox;
 	public StackPane root;
-	public Button addVaultBtn;
-	public HBox addVaultArea;
+	public HBox addVaultButton;
 	@FXML
 	private ContextMenu addVaultContextMenu;
 
@@ -114,18 +110,6 @@ public class VaultListController implements FxController {
 		vaultList.setItems(vaults);
 		vaultList.setCellFactory(cellFactory);
 
-		vaultList.prefHeightProperty().bind(vaultList.fixedCellSizeProperty().multiply(vaultList.getItems().size()));
-		vaultList.maxHeightProperty().bind(vaultList.prefHeightProperty());
-		vaultList.prefWidthProperty().bind(scrollPane.widthProperty());
-
-		scrollPane.heightProperty().addListener((_, oldValue, newValue) -> {
-			if(newValue.doubleValue()>oldValue.doubleValue()){
-				scrollPane.setVvalue(1.0);
-			}
-		});
-
-		vaultList.prefHeightProperty().bind(Bindings.size(vaultList.getItems()).multiply(vaultList.fixedCellSizeProperty()));
-
 		selectedVault.bind(vaultList.getSelectionModel().selectedItemProperty());
 		vaults.addListener((ListChangeListener.Change<? extends Vault> c) -> {
 			while (c.next()) {
@@ -191,7 +175,7 @@ public class VaultListController implements FxController {
 		if (addVaultContextMenu.isShowing()) {
 			addVaultContextMenu.hide();
 		} else {
-			addVaultContextMenu.show(addVaultArea, Side.BOTTOM, 0.0, 0.0);
+			addVaultContextMenu.show(addVaultButton, Side.BOTTOM, 0.0, 0.0);
 		}
 	}
 

src/main/resources/css/dark_theme.css

@@ -181,31 +181,20 @@
 	-fx-border-width: 1px;
 }
 
-.main-window .title {
-	-fx-background-color: CONTROL_BORDER_NORMAL, TITLE_BG;
-	-fx-background-insets: 0, 0 0 1px 0;
-}
-
-.main-window .title .button {
-	-fx-pref-height: 30px;
-	-fx-pref-width: 30px;
-	-fx-background-color: none;
-	-fx-padding: 0;
-}
-
-.main-window .title .button .glyph-icon {
-	-fx-fill: white;
+.main-window .button-bar {
+	-fx-background-color: MAIN_BG;
+	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
+	-fx-border-width: 1px 0 0 0;
 }
 
-.main-window .title .button:armed .glyph-icon {
-	-fx-fill: GRAY_8;
+.main-window .button-left {
+	-fx-border-color: CONTROL_BORDER_NORMAL;
+	-fx-border-width: 0 1px 0 0;
 }
 
-.main-window .update-indicator {
-	-fx-background-color: white, RED_5;
-	-fx-background-insets: 1px, 2px;
-	-fx-background-radius: 6px, 5px;
-	-fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.8), 2, 0, 0, 0);
+.main-window .button-right {
+	-fx-border-color: CONTROL_BORDER_NORMAL;
+	-fx-border-width: 0 0 0 1px;
 }
 
 /*******************************************************************************
@@ -322,46 +311,6 @@
 	-fx-fill: transparent;
 }
 
-.button.toolbar-button {
-	-fx-min-height: 40px;
-	-fx-background-color: transparent;
-	-fx-background-insets: 0;
-	-fx-background-radius: 0;
-	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
-	-fx-border-width: 1px 0 0 0;
-	-fx-padding: 0;
-}
-
-.button.toolbar-button:focused {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, MAIN_BG;
-	-fx-background-insets: 0, 2px 1px 1px 1px;
-}
-
-.button.toolbar-button:armed {
-	-fx-background-color: CONTROL_BG_ARMED;
-}
-
-.left-side-panel {
-	-fx-background-color: CONTROL_BG_NORMAL;
-}
-
-.add-vault-btn {
-	-fx-background-color: CONTROL_BG_NORMAL;
-}
-.add-vault-btn .icon {
-	-fx-fill: TEXT_FILL_MUTED;
-}
-.add-vault-btn-label {
-	-fx-font-family: 'Open Sans SemiBold';
-	-fx-font-size: 1.0em;
-}
-
-.preferences-btn {
-	-fx-background-color: MAIN_BG;
-	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
-	-fx-border-width: 1px 0 0 0;
-}
-
 /*******************************************************************************
  *                                                                             *
  * ScrollBar                                                                   *
@@ -415,16 +364,6 @@
 	-fx-background-color: MUTED_BG;
 }
 
-/* Note: These values below are kinda random such that it looks ok. I'm pretty sure there is room for improvement. Additionally, fx-text-fill does not work*/
-.badge-debug {
-	-fx-font-family: 'Open Sans Bold';
-	-fx-font-size: 1.0em;
-	-fx-background-radius: 8px;
-	-fx-padding: 0.3em 0.55em 0.3em 0.55em;
-	-fx-background-color: RED_5;
-	-fx-background-radius: 2em;
-}
-
 /*******************************************************************************
  *                                                                             *
  * Password Strength Indicator                                                 *

src/main/resources/css/light_theme.css

@@ -181,30 +181,20 @@
 	-fx-border-width: 1px;
 }
 
-.main-window .title {
-	-fx-background-color: TITLE_BG;
-}
-
-.main-window .title .button {
-	-fx-pref-height: 30px;
-	-fx-pref-width: 30px;
-	-fx-background-color: none;
-	-fx-padding: 0;
-}
-
-.main-window .title .button .glyph-icon {
-	-fx-fill: white;
+.main-window .button-bar {
+	-fx-background-color: MAIN_BG;
+	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
+	-fx-border-width: 1px 0 0 0;
 }
 
-.main-window .title .button:armed .glyph-icon {
-	-fx-fill: GRAY_8;
+.main-window .button-bar .button-left {
+	-fx-border-color: CONTROL_BORDER_NORMAL;
+	-fx-border-width: 0 1px 0 0;
 }
 
-.main-window .update-indicator {
-	-fx-background-color: white, RED_5;
-	-fx-background-insets: 1px, 2px;
-	-fx-background-radius: 6px, 5px;
-	-fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.8), 2, 0, 0, 0);
+.main-window .button-bar .button-right {
+	-fx-border-color: CONTROL_BORDER_NORMAL;
+	-fx-border-width: 0 0 0 1px;
 }
 
 /*******************************************************************************
@@ -321,46 +311,6 @@
 	-fx-fill: transparent;
 }
 
-.button.toolbar-button {
-	-fx-min-height: 40px;
-	-fx-background-color: transparent;
-	-fx-background-insets: 0;
-	-fx-background-radius: 0;
-	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
-	-fx-border-width: 1px 0 0 0;
-	-fx-padding: 0;
-}
-
-.button.toolbar-button:focused {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, MAIN_BG;
-	-fx-background-insets: 0, 2px 1px 1px 1px;
-}
-
-.button.toolbar-button:armed {
-	-fx-background-color: CONTROL_BG_ARMED;
-}
-
-.left-side-panel {
-	-fx-background-color: CONTROL_BG_NORMAL;
-}
-
-.add-vault-btn {
-	-fx-background-color: CONTROL_BG_NORMAL;
-}
-.add-vault-btn .icon {
-	-fx-fill: GRAY_4;
-}
-.add-vault-btn-label {
-	-fx-font-family: 'Open Sans SemiBold';
-	-fx-font-size: 1.0em;
-}
-
-.preferences-btn {
-	-fx-background-color: MAIN_BG;
-	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
-	-fx-border-width: 1px 0 0 0;
-}
-
 /*******************************************************************************
  *                                                                             *
  * ScrollBar                                                                   *
@@ -414,16 +364,6 @@
 	-fx-background-color: MUTED_BG;
 }
 
-/* Note: These values below are kinda random such that it looks ok. I'm pretty sure there is room for improvement. Additionally, fx-text-fill does not work*/
-.badge-debug {
-	-fx-font-family: 'Open Sans Bold';
-	-fx-font-size: 1.0em;
-	-fx-background-radius: 8px;
-	-fx-padding: 0.3em 0.55em 0.3em 0.55em;
-	-fx-background-color: RED_5;
-	-fx-background-radius: 2em;
-}
-
 /*******************************************************************************
  *                                                                             *
  * Password Strength Indicator                                                 *

src/main/resources/fxml/vault_list.fxml

@@ -10,61 +10,62 @@
 <?import javafx.scene.control.MenuItem?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.geometry.Insets?>
-<?import javafx.scene.control.ScrollPane?>
+<?import javafx.scene.shape.Arc?>
 <StackPane xmlns:fx="http://javafx.com/fxml"
 		   xmlns="http://javafx.com/javafx"
 		   fx:id="root"
 		   fx:controller="org.cryptomator.ui.mainwindow.VaultListController"
 		   minWidth="206">
-	<VBox styleClass="left-side-panel">
-		<ScrollPane fx:id="scrollPane" hbarPolicy="NEVER">
-			<VBox>
-				<ListView fx:id="vaultList" editable="true" fixedCellSize="60">
-					<contextMenu>
-						<fx:include source="vault_list_contextmenu.fxml"/>
-					</contextMenu>
-				</ListView>
-				<HBox fx:id="addVaultArea" styleClass="add-vault-btn" spacing="12" onMouseClicked="#toggleMenu">
-					<padding>
-						<Insets topRightBottomLeft="12"/>
-					</padding>
-					<VBox alignment="CENTER" minWidth="20">
-						<FontAwesome5IconView glyph="PLUS" styleClass="icon" HBox.hgrow="NEVER" glyphSize="16"/>
-					</VBox>
-					<VBox spacing="4" HBox.hgrow="ALWAYS" >
-						<Label styleClass="add-vault-btn-label" text="%main.vaultlist.addVaultBtn" />
-					</VBox>
+	<VBox>
+		<StackPane VBox.vgrow="ALWAYS">
+			<ListView fx:id="vaultList" editable="true" fixedCellSize="60">
+				<contextMenu>
+					<fx:include source="vault_list_contextmenu.fxml"/>
+				</contextMenu>
+			</ListView>
+			<VBox visible="${controller.emptyVaultList}" spacing="6" alignment="CENTER">
+				<Region VBox.vgrow="ALWAYS"/>
+				<Label VBox.vgrow="NEVER" text="%main.vaultlist.emptyList.onboardingInstruction" textAlignment="CENTER" wrapText="true"/>
+				<HBox>
+					<Arc styleClass="onboarding-overlay-arc" translateX="20" radiusY="100" radiusX="50" length="-60"/>
 				</HBox>
 			</VBox>
-		</ScrollPane>
-		<Region VBox.vgrow="ALWAYS"/>
-		<HBox spacing="12" styleClass="preferences-btn" onMouseClicked="#showPreferences">
-			<padding>
-				<Insets topRightBottomLeft="12"/>
-			</padding>
-			<VBox alignment="CENTER" minWidth="20">
-				<FontAwesome5IconView glyph="COG" HBox.hgrow="NEVER" glyphSize="16"/>
-			</VBox>
-			<VBox spacing="4" HBox.hgrow="ALWAYS">
-				<Label styleClass="header-label" text="%preferences.title"/>
-			</VBox>
+		</StackPane>
+		<HBox styleClass="button-bar">
+			<HBox fx:id="addVaultButton" spacing="12" onMouseClicked="#toggleMenu" styleClass="button-left">
+				<padding>
+					<Insets topRightBottomLeft="12"/>
+				</padding>
+				<VBox alignment="CENTER" minWidth="20">
+					<FontAwesome5IconView glyph="PLUS" HBox.hgrow="NEVER" glyphSize="16"/>
+				</VBox>
+			</HBox>
+			<Region HBox.hgrow="ALWAYS"/>
+			<HBox spacing="12" onMouseClicked="#showPreferences" styleClass="button-right">
+				<padding>
+					<Insets topRightBottomLeft="12"/>
+				</padding>
+				<VBox alignment="CENTER" minWidth="20">
+					<FontAwesome5IconView glyph="COG" HBox.hgrow="NEVER" glyphSize="16"/>
+				</VBox>
+			</HBox>
 		</HBox>
-		<fx:define>
-			<ContextMenu fx:id="addVaultContextMenu">
-				<items>
-					<MenuItem styleClass="add-vault-menu-item" text="%main.vaultlist.addVaultBtn.menuItemNew" onAction="#didClickAddNewVault" >
-						<graphic>
-							<FontAwesome5IconView glyph="PLUS" textAlignment="CENTER" wrappingWidth="14" />
-						</graphic>
-					</MenuItem>
-					<MenuItem styleClass="add-vault-menu-item" text="%main.vaultlist.addVaultBtn.menuItemExisting" onAction="#didClickAddExistingVault" >
-						<graphic>
-							<FontAwesome5IconView glyph="FOLDER_OPEN" textAlignment="CENTER" wrappingWidth="14" />
-						</graphic>
-					</MenuItem>
-				</items>
-			</ContextMenu>
-		</fx:define>
 	</VBox>
 	<Region styleClass="drag-n-drop-border" visible="${controller.draggingVaultOver}"/>
+	<fx:define>
+		<ContextMenu fx:id="addVaultContextMenu">
+			<items>
+				<MenuItem styleClass="add-vault-menu-item" text="%main.vaultlist.addVaultBtn.menuItemNew" onAction="#didClickAddNewVault" >
+					<graphic>
+						<FontAwesome5IconView glyph="PLUS" textAlignment="CENTER" wrappingWidth="14" />
+					</graphic>
+				</MenuItem>
+				<MenuItem styleClass="add-vault-menu-item" text="%main.vaultlist.addVaultBtn.menuItemExisting" onAction="#didClickAddExistingVault" >
+					<graphic>
+						<FontAwesome5IconView glyph="FOLDER_OPEN" textAlignment="CENTER" wrappingWidth="14" />
+					</graphic>
+				</MenuItem>
+			</items>
+		</ContextMenu>
+	</fx:define>
 </StackPane>

src/main/resources/i18n/strings.properties

@@ -300,7 +300,6 @@ preferences.interface.language.auto=System Default
 preferences.interface.interfaceOrientation=Interface Orientation
 preferences.interface.interfaceOrientation.ltr=Left to Right
 preferences.interface.interfaceOrientation.rtl=Right to Left
-preferences.interface.showMinimizeButton=Show minimize button
 preferences.interface.showTrayIcon=Show tray icon (requires restart)
 ## Volume
 preferences.volume=Virtual Drive
@@ -376,11 +375,6 @@ stats.access.total=Total accesses: %d
 
 
 # Main Window
-main.closeBtn.tooltip=Close
-main.minimizeBtn.tooltip=Minimize
-main.preferencesBtn.tooltip=Preferences
-main.debugModeEnabled.tooltip=Debug mode is enabled
-main.supporterCertificateMissing.tooltip=Please consider donating
 ## Vault List
 main.vaultlist.emptyList.onboardingInstruction=Click here to add a vault
 main.vaultlist.contextMenu.remove=Remove…
@@ -389,9 +383,8 @@ main.vaultlist.contextMenu.unlock=Unlock…
 main.vaultlist.contextMenu.unlockNow=Unlock Now
 main.vaultlist.contextMenu.vaultoptions=Show Vault Options
 main.vaultlist.contextMenu.reveal=Reveal Drive
-main.vaultlist.addVaultBtn=Add Vault
-main.vaultlist.addVaultBtn.menuItemNew=New Vault...
-main.vaultlist.addVaultBtn.menuItemExisting=Existing Vault...
+main.vaultlist.addVaultBtn.menuItemNew=Create New Vault...
+main.vaultlist.addVaultBtn.menuItemExisting=Open Existing Vault...
 ## Vault Detail
 ### Welcome
 main.vaultDetail.welcomeOnboarding=Thanks for choosing Cryptomator to protect your files. If you need any assistance, check out our getting started guides: