improved layout and added styleClass for add-box

This commit is contained in:
Jan-Peter Klein
2024-01-26 15:42:25 +01:00
parent 8104c35d76
commit e9a412ae16
4 changed files with 53 additions and 42 deletions

View File

@@ -936,3 +936,16 @@
-fx-padding: 0.5px;
-fx-background-color: CONTROL_BORDER_NORMAL;
}
/*******************************************************************************
* *
* Add box *
* *
******************************************************************************/
.add-box {
-fx-padding: 12px;
-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
-fx-background-insets: 0, 1px;
-fx-background-radius: 4px;
}

View File

@@ -935,3 +935,16 @@
-fx-padding: 0.5px;
-fx-background-color: CONTROL_BORDER_NORMAL;
}
/*******************************************************************************
* *
* Add box *
* *
******************************************************************************/
.add-box {
-fx-padding: 12px;
-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
-fx-background-insets: 0, 1px;
-fx-background-radius: 4px;
}

View File

@@ -15,13 +15,10 @@
<?import javafx.scene.control.Hyperlink?>
<?import javafx.scene.control.Tooltip?>
<?import javafx.scene.Group?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.RowConstraints?>
<HBox xmlns:fx="http://javafx.com/fxml"
xmlns="http://javafx.com/javafx"
fx:controller="org.cryptomator.ui.sharevault.ShareVaultController"
prefWidth="580"
prefWidth="540"
spacing="12">
<padding>
<Insets topRightBottomLeft="12"/>
@@ -37,49 +34,36 @@
</Group>
<VBox>
<VBox HBox.hgrow="ALWAYS" visible="${controller.hubVault}" managed="${controller.hubVault}">
<Label text="%shareVault.hub.message" styleClass="label-extra-large" wrapText="true"/>
<Region minHeight="12"/>
<Label text="%shareVault.hub.message" styleClass="label-large" wrapText="true">
<padding>
<Insets bottom="6" top="6"/>
</padding>
</Label>
<Label text="%shareVault.hub.description" wrapText="true"/>
<GridPane alignment="CENTER_LEFT">
<VBox>
<padding>
<Insets left="6"/>
</padding>
<columnConstraints>
<ColumnConstraints minWidth="20" halignment="LEFT"/>
</columnConstraints>
<rowConstraints>
<RowConstraints valignment="TOP"/>
<RowConstraints valignment="TOP"/>
</rowConstraints>
<Label text="1." GridPane.rowIndex="0" GridPane.columnIndex="0"/>
<Label text="%shareVault.hub.instruction.1" wrapText="true" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
<Label text="2." GridPane.rowIndex="1" GridPane.columnIndex="0"/>
<Label text="%shareVault.hub.instruction.2" wrapText="true" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>
<Label text="%shareVault.hub.instruction.1" wrapText="true"/>
<Label text="%shareVault.hub.instruction.2" wrapText="true"/>
</VBox>
</VBox>
<VBox HBox.hgrow="ALWAYS" visible="${!controller.hubVault}" managed="${!controller.hubVault}">
<Label text="%shareVault.message" styleClass="label-extra-large" wrapText="true"/>
<Region minHeight="12"/>
<Label text="%shareVault.message" styleClass="label-large" wrapText="true">
<padding>
<Insets bottom="6" top="6"/>
</padding>
</Label>
<Label text="%shareVault.description" wrapText="true"/>
<GridPane alignment="CENTER_LEFT">
<VBox>
<padding>
<Insets left="6"/>
</padding>
<columnConstraints>
<ColumnConstraints minWidth="20" halignment="LEFT"/>
</columnConstraints>
<rowConstraints>
<RowConstraints valignment="TOP"/>
<RowConstraints valignment="TOP"/>
</rowConstraints>
<Label text="1." GridPane.rowIndex="0" GridPane.columnIndex="0"/>
<Label text="%shareVault.instruction.1" wrapText="true" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
<Label text="2." GridPane.rowIndex="1" GridPane.columnIndex="0"/>
<Label text="%shareVault.instruction.2" wrapText="true" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>
<Region minHeight="12"/>
<HBox HBox.hgrow="ALWAYS" spacing="6">
<Label text="%shareVault.remarkBestPractices" wrapText="true" VBox.vgrow="ALWAYS"/>
<Label text="%shareVault.instruction.1" wrapText="true"/>
<Label text="%shareVault.instruction.2" wrapText="true"/>
</VBox>
<Region minHeight="6"/>
<HBox spacing="6">
<Hyperlink contentDisplay="GRAPHIC_ONLY" onAction="#visitBestPractices">
<graphic>
<FontAwesome5IconView glyph="QUESTION_CIRCLE" styleClass="glyph-icon-muted"/>
@@ -88,9 +72,10 @@
<Tooltip text="%shareVault.docsTooltip" showDelay="100ms"/>
</tooltip>
</Hyperlink>
<Label text="%shareVault.remarkBestPractices" wrapText="true"/>
</HBox>
<Region minHeight="12"/>
<HBox alignment="CENTER_LEFT" spacing="6" style="-fx-padding: 10px; -fx-background-color: white; -fx-border-color: #dddddd; -fx-border-width: 2px; -fx-border-radius: 5px;">
<HBox alignment="CENTER_LEFT" spacing="6" styleClass="add-box">
<VBox spacing="6" alignment="CENTER_LEFT">
<ImageView HBox.hgrow="ALWAYS" fitWidth="180" preserveRatio="true" cache="true">
<Image url="@../img/hub_logo.png"/>

View File

@@ -534,8 +534,8 @@ updateReminder.yesAutomatically=Yes, Automatically
shareVault.title=Share Vault
shareVault.message=Would you like to share your vault with others?
shareVault.description=Always be careful when sharing your vault with other people. In short, follow these steps:
shareVault.instruction.1=Share access of the encrypted vault folder via cloud storage.
shareVault.instruction.2=Share the vault password in a secure way.
shareVault.instruction.1=1. Share access of the encrypted vault folder via cloud storage.
shareVault.instruction.2=2. Share the vault password in a secure way.
shareVault.remarkBestPractices=For more information, check out the best practices suggestions in our docs.
shareVault.docsTooltip=Open the documentation to learn more about sharing of vaults.
shareVault.hubAd.description=The secure way to work in teams
@@ -546,6 +546,6 @@ shareVault.visitHub=Visit Cryptomator Hub
shareVault.hub.message=How to share a Hub vault
shareVault.hub.description=In order to share the vault content with another team member, you have to perform two steps:
shareVault.hub.instruction.1=Share access of the encrypted vault folder via cloud storage.
shareVault.hub.instruction.2=Grant access to team member in Cryptomator Hub.
shareVault.hub.instruction.1=1. Share access of the encrypted vault folder via cloud storage.
shareVault.hub.instruction.2=2. Grant access to team member in Cryptomator Hub.
shareVault.hub.openHub=Open Cryptomator Hub