mirror of
https://github.com/cryptomator/cryptomator.git
synced 2024-11-23 03:59:51 +00:00
adjust add vault button position for improved UI
This commit is contained in:
Jan-Peter Klein
parent
a88e08147d
commit
7b132adfe2
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 .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 {
|
||||
-fx-pref-height: 30px;
|
||||
-fx-pref-width: 30px;
|
||||
-fx-background-color: none;
|
||||
-fx-padding: 0;
|
||||
.main-window .button-left {
|
||||
-fx-border-color: CONTROL_BORDER_NORMAL;
|
||||
-fx-border-width: 0 1px 0 0;
|
||||
}
|
||||
|
||||
.main-window .title .button .glyph-icon {
|
||||
-fx-fill: white;
|
||||
}
|
||||
|
||||
.main-window .title .button:armed .glyph-icon {
|
||||
-fx-fill: GRAY_8;
|
||||
}
|
||||
|
||||
.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 *
|
||||
|
||||
@ -181,30 +181,20 @@
|
||||
-fx-border-width: 1px;
|
||||
}
|
||||
|
||||
.main-window .title {
|
||||
-fx-background-color: TITLE_BG;
|
||||
.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 {
|
||||
-fx-pref-height: 30px;
|
||||
-fx-pref-width: 30px;
|
||||
-fx-background-color: none;
|
||||
-fx-padding: 0;
|
||||
.main-window .button-bar .button-left {
|
||||
-fx-border-color: CONTROL_BORDER_NORMAL;
|
||||
-fx-border-width: 0 1px 0 0;
|
||||
}
|
||||
|
||||
.main-window .title .button .glyph-icon {
|
||||
-fx-fill: white;
|
||||
}
|
||||
|
||||
.main-window .title .button:armed .glyph-icon {
|
||||
-fx-fill: GRAY_8;
|
||||
}
|
||||
|
||||
.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 *
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user