Magic-Mirror/cryptomator
1
0
Fork 0
mirror of https://github.com/cryptomator/cryptomator.git synced 2024-11-23 12:09:45 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

adjust add vault button position for improved UI

Browse Source
This commit is contained in:
Jan-Peter Klein 2024-07-16 14:31:11 +02:00
parent a88e08147d
commit 7b132adfe2
No known key found for this signature in database
GPG Key ID: 90EDA3A7C822FD0E
5 changed files with 72 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/main/java/org/cryptomator/ui/mainwindow/VaultListController.java
View File

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

81
src/main/resources/css/dark_theme.css
View File

@ -181,31 +181,20 @@
-fx-border-width: 1px; -fx-border-width: 1px;
} }
.main-window .title { .main-window .button-bar {
-fx-background-color: CONTROL_BORDER_NORMAL, TITLE_BG; -fx-background-color: MAIN_BG;
-fx-background-insets: 0, 0 0 1px 0; -fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
-fx-border-width: 1px 0 0 0;
} }
.main-window .title .button { .main-window .button-left {
-fx-pref-height: 30px; -fx-border-color: CONTROL_BORDER_NORMAL;
-fx-pref-width: 30px; -fx-border-width: 0 1px 0 0;
-fx-background-color: none;
-fx-padding: 0;
} }
.main-window .title .button .glyph-icon { .main-window .button-right {
-fx-fill: white; -fx-border-color: CONTROL_BORDER_NORMAL;
} -fx-border-width: 0 0 0 1px;
.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);
} }
/******************************************************************************* /*******************************************************************************
@ -322,46 +311,6 @@
-fx-fill: transparent; -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 * * ScrollBar *
@ -415,16 +364,6 @@
-fx-background-color: MUTED_BG; -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 * * Password Strength Indicator *

80
src/main/resources/css/light_theme.css
View File

@ -181,30 +181,20 @@
-fx-border-width: 1px; -fx-border-width: 1px;
} }
.main-window .title { .main-window .button-bar {
-fx-background-color: TITLE_BG; -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 { .main-window .button-bar .button-left {
-fx-pref-height: 30px; -fx-border-color: CONTROL_BORDER_NORMAL;
-fx-pref-width: 30px; -fx-border-width: 0 1px 0 0;
-fx-background-color: none;
-fx-padding: 0;
} }
.main-window .title .button .glyph-icon { .main-window .button-bar .button-right {
-fx-fill: white; -fx-border-color: CONTROL_BORDER_NORMAL;
} -fx-border-width: 0 0 0 1px;
.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);
} }
/******************************************************************************* /*******************************************************************************
@ -321,46 +311,6 @@
-fx-fill: transparent; -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 * * ScrollBar *
@ -414,16 +364,6 @@
-fx-background-color: MUTED_BG; -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 * * Password Strength Indicator *

95
src/main/resources/fxml/vault_list.fxml
View File

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

11
src/main/resources/i18n/strings.properties
View File

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