Browse Source

updated "add vault" button styling

Tobias Hagemann 5 years ago
parent
commit
73bc2d06a7

+ 12 - 18
main/ui/src/main/resources/css/dark_theme.css

@@ -312,29 +312,22 @@
 	-fx-fill: transparent;
 }
 
-.toolbar-container {
-	-fx-min-height: 31px;
-	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
-	-fx-border-width: 1px 0 0 0;
-}
-
-.toolbar-container .button {
-	-fx-pref-height: 30px;
-	-fx-pref-width: 31px;
+.button.toolbar-button {
+	-fx-min-height: 40px;
 	-fx-background-color: transparent;
 	-fx-background-insets: 0;
 	-fx-background-radius: 0;
-	-fx-border-color: transparent CONTROL_BORDER_NORMAL transparent transparent;
-	-fx-border-width: 0 1px 0 0;
+	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
+	-fx-border-width: 1px 0 0 0;
 	-fx-padding: 0;
 }
 
-.toolbar-container .button:focused {
+.button.toolbar-button:focused {
 	-fx-background-color: CONTROL_BORDER_FOCUSED, MAIN_BG;
-	-fx-background-insets: 0, 1px 2px 1px 1px;
+	-fx-background-insets: 0, 2px 1px 1px 1px;
 }
 
-.toolbar-container .button:armed {
+.button.toolbar-button:armed {
 	-fx-background-color: CONTROL_BG_ARMED;
 }
 
@@ -469,13 +462,13 @@
  ******************************************************************************/
 
 .button {
-	-fx-pref-height: 25px;
 	-fx-text-fill: TEXT_FILL;
 	-fx-alignment: CENTER;
 	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
-	-fx-padding: 0.2em 1em 0.2em 1em;
+	-fx-padding: 0.3em 1em 0.3em 1em;
+	-fx-graphic-text-gap: 6px;
 }
 
 .button:focused {
@@ -514,9 +507,9 @@
 }
 
 .button-large {
-	-fx-graphic-text-gap: 9px;
 	-fx-font-size: 1.25em;
-	-fx-padding: 0.6em 1.25em 0.6em 1.25em;
+	-fx-padding: 0.6em 1.5em 0.6em 1.5em;
+	-fx-graphic-text-gap: 9px;
 }
 
 /*******************************************************************************
@@ -527,6 +520,7 @@
 
 .hyperlink {
 	-fx-text-fill: TEXT_FILL;
+	-fx-graphic-text-gap: 6px;
 }
 
 .hyperlink.hyperlink-secondary {

+ 12 - 18
main/ui/src/main/resources/css/light_theme.css

@@ -312,29 +312,22 @@
 	-fx-fill: transparent;
 }
 
-.toolbar-container {
-	-fx-min-height: 31px;
-	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
-	-fx-border-width: 1px 0 0 0;
-}
-
-.toolbar-container .button {
-	-fx-pref-height: 30px;
-	-fx-pref-width: 31px;
+.button.toolbar-button {
+	-fx-min-height: 40px;
 	-fx-background-color: transparent;
 	-fx-background-insets: 0;
 	-fx-background-radius: 0;
-	-fx-border-color: transparent CONTROL_BORDER_NORMAL transparent transparent;
-	-fx-border-width: 0 1px 0 0;
+	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
+	-fx-border-width: 1px 0 0 0;
 	-fx-padding: 0;
 }
 
-.toolbar-container .button:focused {
+.button.toolbar-button:focused {
 	-fx-background-color: CONTROL_BORDER_FOCUSED, MAIN_BG;
-	-fx-background-insets: 0, 1px 2px 1px 1px;
+	-fx-background-insets: 0, 2px 1px 1px 1px;
 }
 
-.toolbar-container .button:armed {
+.button.toolbar-button:armed {
 	-fx-background-color: CONTROL_BG_ARMED;
 }
 
@@ -469,13 +462,13 @@
  ******************************************************************************/
 
 .button {
-	-fx-pref-height: 25px;
 	-fx-text-fill: TEXT_FILL;
 	-fx-alignment: CENTER;
 	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
-	-fx-padding: 0.2em 1em 0.2em 1em;
+	-fx-padding: 0.3em 1em 0.3em 1em;
+	-fx-graphic-text-gap: 6px;
 }
 
 .button:focused {
@@ -514,9 +507,9 @@
 }
 
 .button-large {
-	-fx-graphic-text-gap: 9px;
 	-fx-font-size: 1.25em;
-	-fx-padding: 0.6em 1.25em 0.6em 1.25em;
+	-fx-padding: 0.6em 1.5em 0.6em 1.5em;
+	-fx-graphic-text-gap: 9px;
 }
 
 /*******************************************************************************
@@ -527,6 +520,7 @@
 
 .hyperlink {
 	-fx-text-fill: TEXT_FILL;
+	-fx-graphic-text-gap: 6px;
 }
 
 .hyperlink.hyperlink-secondary {

+ 5 - 17
main/ui/src/main/resources/fxml/vault_list.fxml

@@ -5,15 +5,12 @@
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.ListView?>
 <?import javafx.scene.control.MenuItem?>
-<?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.StackPane?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.shape.Arc?>
-<?import javafx.scene.text.Font?>
 <?import org.cryptomator.ui.controls.FontAwesome5IconView?>
-<?import java.lang.Double?>
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.mainwindow.VaultListController"
@@ -37,18 +34,9 @@
 			<Arc styleClass="onboarding-overlay-arc" AnchorPane.bottomAnchor="5" type="OPEN" centerX="-10" centerY="0" radiusY="100" radiusX="60" startAngle="0" length="-60" strokeWidth="1"/>
 		</AnchorPane>
 	</StackPane>
-	<HBox HBox.hgrow="ALWAYS" alignment="CENTER">
-		<Button contentDisplay="LEFT" mnemonicParsing="false" onAction="#didClickAddVault" HBox.hgrow="ALWAYS" alignment="BASELINE_CENTER" minHeight="60" text="%main.vaultlist.addVaultBtn.text">
-			<Font size="30"/>
-			<graphic>
-				<FontAwesome5IconView glyph="PLUS" glyphSize="15"/>
-			</graphic>
-			<tooltip>
-				<Tooltip text="%main.vaultlist.addVaultBtn.tooltip"/>
-			</tooltip>
-			<maxWidth>
-				<Double fx:constant="MAX_VALUE"/>
-			</maxWidth>
-		</Button>
-	</HBox>
+	<Button styleClass="toolbar-button" text="%main.vaultlist.addVaultBtn" onAction="#didClickAddVault" alignment="BASELINE_CENTER" maxWidth="Infinity" mnemonicParsing="false">
+		<graphic>
+			<FontAwesome5IconView glyph="PLUS" glyphSize="15"/>
+		</graphic>
+	</Button>
 </VBox>

+ 1 - 2
main/ui/src/main/resources/i18n/strings.properties

@@ -106,8 +106,7 @@ main.preferencesBtn.tooltip=Preferences
 main.vaultlist.emptyList.onboardingInstruction=Click here to add a vault
 main.vaultlist.contextMenu.add=Add Vault
 main.vaultlist.contextMenu.remove=Remove Vault
-main.vaultlist.addVaultBtn.tooltip=Add Vault
-main.vaultlist.addVaultBtn.text=Add Vault
+main.vaultlist.addVaultBtn=Add Vault
 ## Vault Detail
 main.vaultDetail.lockedStatus=LOCKED
 main.vaultDetail.unlockedStatus=UNLOCKED

+ 1 - 2
main/ui/src/main/resources/i18n/strings_de.properties

@@ -106,8 +106,7 @@ main.preferencesBtn.tooltip=Einstellungen
 main.vaultlist.emptyList.onboardingInstruction=Klicke hier, um einen Tresor hinzuzufügen
 main.vaultlist.contextMenu.add=Tresor hinzufügen
 main.vaultlist.contextMenu.remove=Tresor entfernen
-main.vaultlist.addVaultBtn.tooltip=Tresor hinzufügen
-main.vaultlist.addVaultBtn.text=Tresor hinzufügen
+main.vaultlist.addVaultBtn=Tresor hinzufügen
 ## Vault Detail
 main.vaultDetail.lockedStatus=GESPERRT
 main.vaultDetail.unlockedStatus=ENTSPERRT