~exprez135/cryptomator-libre

4f039b970865bd42761a43d149a163302f928276 — Tobias Hagemann 2 years ago 2ab8232
new vault detail layout for unlocked state
M main/ui/src/main/resources/css/dark_theme.css => main/ui/src/main/resources/css/dark_theme.css +23 -82
@@ 102,6 102,15 @@
	-fx-text-fill: TEXT_FILL_SECONDARY;
}

.label-large {
	-fx-font-family: 'Open Sans SemiBold';
	-fx-font-size: 1.5em;
}

.label-small {
	-fx-font-size: 0.8em;
}

.text-flow > * {
	-fx-fill: TEXT_FILL;
}


@@ 351,27 360,6 @@
	-fx-padding: 0 3 0 3;
}


/*******************************************************************************
 *                                                                             *
 * Vault Detail                                                                *
 *                                                                             *
 ******************************************************************************/

.vault-detail .vault-name {
	-fx-font-family: 'Open Sans SemiBold';
	-fx-font-size: 1.5em;
}

.vault-detail .vault-path {
	-fx-content-display: text-only;
	-fx-text-fill: TEXT_FILL_SECONDARY;
}

.vault-detail .vault-path:hover {
	-fx-content-display: right;
}

/*******************************************************************************
 *                                                                             *
 * Badge                                                                       *


@@ 431,71 419,12 @@

/*******************************************************************************
 *                                                                             *
 * ButtonGroup                                                                 *
 *                                                                             *
 ******************************************************************************/

.button-group {
	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
	-fx-background-insets: 0, 0 1px 0 1px;
}

.button-group.first {
	-fx-background-insets: 0, 1px 1px 0 1px;
	-fx-background-radius: 4px 4px 0 0;
}

.button-group.last {
	-fx-background-insets: 0, 0 1px 1px 1px;
	-fx-background-radius: 0 0 4px 4px;
}

.button-group:hover {
	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_HOVER;
}

.button-group:hover:focused {
	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_HOVER;
}

.button-group:hover:armed {
	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
}

.button-group:hover .button-group-action {
	visibility: visible;
	managed: true;
}

.button-group-labels {
	-fx-padding: 0.5em 0 0.5em 0;
	-fx-spacing: 0.25em;
}

.button-group-heading {
	-fx-text-fill: TEXT_FILL_SECONDARY;
	-fx-font-size: 0.8em;
}

.button-group-action {
	visibility: collapse;
	managed: false;
	-fx-text-fill: TEXT_FILL_PRIMARY;
	-fx-font-family: 'Open Sans Bold';
}

.button-group-separator {
	-fx-background-color: CONTROL_BORDER_NORMAL;
	-fx-pref-height: 1px;
}

/*******************************************************************************
 *                                                                             *
 * Tooltip                                                                     *
 *                                                                             *
 ******************************************************************************/

.tooltip {
	-fx-font-family: 'Open Sans';
	-fx-text-fill: TEXT_FILL;
	-fx-font-size: 0.8em;
	-fx-background-color: CONTROL_BG_NORMAL;


@@ 587,7 516,7 @@

/*******************************************************************************
 *                                                                             *
 * Buttons                                                                     *
 * Hyperlinks                                                                  *
 *                                                                             *
 ******************************************************************************/



@@ 595,6 524,18 @@
	-fx-text-fill: TEXT_FILL;
}

.hyperlink.hyperlink-secondary {
	-fx-text-fill: TEXT_FILL_SECONDARY;
}

.hyperlink-hover-icon {
	-fx-content-display: text-only;
}

.hyperlink-hover-icon:hover {
	-fx-content-display: right;
}

/*******************************************************************************
 *                                                                             *
 * CheckBox                                                                    *

M main/ui/src/main/resources/css/light_theme.css => main/ui/src/main/resources/css/light_theme.css +23 -82
@@ 102,6 102,15 @@
	-fx-text-fill: TEXT_FILL_SECONDARY;
}

.label-large {
	-fx-font-family: 'Open Sans SemiBold';
	-fx-font-size: 1.5em;
}

.label-small {
	-fx-font-size: 0.8em;
}

.text-flow > * {
	-fx-fill: TEXT_FILL;
}


@@ 351,27 360,6 @@
	-fx-padding: 0 3 0 3;
}


/*******************************************************************************
 *                                                                             *
 * Vault Detail                                                                *
 *                                                                             *
 ******************************************************************************/

.vault-detail .vault-name {
	-fx-font-family: 'Open Sans SemiBold';
	-fx-font-size: 1.5em;
}

.vault-detail .vault-path {
	-fx-content-display: text-only;
	-fx-text-fill: TEXT_FILL_SECONDARY;
}

.vault-detail .vault-path:hover {
	-fx-content-display: right;
}

/*******************************************************************************
 *                                                                             *
 * Badge                                                                       *


@@ 431,71 419,12 @@

/*******************************************************************************
 *                                                                             *
 * ButtonGroup                                                                 *
 *                                                                             *
 ******************************************************************************/

.button-group {
	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
	-fx-background-insets: 0, 0 1px 0 1px;
}

.button-group.first {
	-fx-background-insets: 0, 1px 1px 0 1px;
	-fx-background-radius: 4px 4px 0 0;
}

.button-group.last {
	-fx-background-insets: 0, 0 1px 1px 1px;
	-fx-background-radius: 0 0 4px 4px;
}

.button-group:hover {
	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_HOVER;
}

.button-group:hover:focused {
	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_HOVER;
}

.button-group:hover:armed {
	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
}

.button-group:hover .button-group-action {
	visibility: visible;
	managed: true;
}

.button-group-labels {
	-fx-padding: 0.5em 0 0.5em 0;
	-fx-spacing: 0.25em;
}

.button-group-heading {
	-fx-text-fill: TEXT_FILL_SECONDARY;
	-fx-font-size: 0.8em;
}

.button-group-action {
	visibility: collapse;
	managed: false;
	-fx-text-fill: TEXT_FILL_PRIMARY;
	-fx-font-family: 'Open Sans Bold';
}

.button-group-separator {
	-fx-background-color: CONTROL_BORDER_NORMAL;
	-fx-pref-height: 1px;
}

/*******************************************************************************
 *                                                                             *
 * Tooltip                                                                     *
 *                                                                             *
 ******************************************************************************/

.tooltip {
	-fx-font-family: 'Open Sans';
	-fx-text-fill: TEXT_FILL;
	-fx-font-size: 0.8em;
	-fx-background-color: CONTROL_BG_NORMAL;


@@ 587,7 516,7 @@

/*******************************************************************************
 *                                                                             *
 * Buttons                                                                     *
 * Hyperlinks                                                                  *
 *                                                                             *
 ******************************************************************************/



@@ 595,6 524,18 @@
	-fx-text-fill: TEXT_FILL;
}

.hyperlink.hyperlink-secondary {
	-fx-text-fill: TEXT_FILL_SECONDARY;
}

.hyperlink-hover-icon {
	-fx-content-display: text-only;
}

.hyperlink-hover-icon:hover {
	-fx-content-display: right;
}

/*******************************************************************************
 *                                                                             *
 * CheckBox                                                                    *

M main/ui/src/main/resources/fxml/vault_detail.fxml => main/ui/src/main/resources/fxml/vault_detail.fxml +50 -65
@@ 19,76 19,37 @@
	  minWidth="300"
	  spacing="12">
	<padding>
		<Insets bottom="12" left="12" right="12" top="12"/>
		<Insets topRightBottomLeft="24"/>
	</padding>
	<children>
		<HBox spacing="12" visible="${controller.anyVaultSelected}">
			<padding>
				<Insets bottom="12" left="12" right="12" top="12"/>
			</padding>
			<children>
				<StackPane alignment="CENTER">
					<Circle styleClass="glyph-icon-primary" radius="16"/>
					<FontAwesome5IconView styleClass="glyph-icon-white" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
				</StackPane>
				<VBox spacing="4" HBox.hgrow="ALWAYS">
					<HBox spacing="12">
						<Label styleClass="vault-name" text="${controller.vault.displayableName}">
							<tooltip>
								<Tooltip text="${controller.vault.displayableName}"/>
							</tooltip>
						</Label>
						<Region HBox.hgrow="ALWAYS"/>
						<Label styleClass="badge,badge-pill,badge-secondary" text="%main.vaultDetail.lockedStatus" minWidth="-Infinity" visible="${controller.vault.locked}" managed="${controller.vault.locked}"/>
						<Label styleClass="badge,badge-pill,badge-secondary" text="…" minWidth="-Infinity" visible="${controller.vault.processing}" managed="${controller.vault.processing}"/>
						<Label styleClass="badge,badge-pill,badge-primary" text="%main.vaultDetail.unlockedStatus" minWidth="-Infinity" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}"/>
					</HBox>
					<Hyperlink styleClass="vault-path" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS" onAction="#revealStorageLocation">
						<graphic>
							<FontAwesome5IconView styleClass="glyph-icon-secondary" glyph="EYE"/>
						</graphic>
			<StackPane alignment="CENTER">
				<Circle styleClass="glyph-icon-primary" radius="16"/>
				<FontAwesome5IconView styleClass="glyph-icon-white" glyph="${controller.glyph}" HBox.hgrow="NEVER" glyphSize="16"/>
			</StackPane>
			<VBox spacing="4" HBox.hgrow="ALWAYS">
				<HBox spacing="12">
					<Label styleClass="label-large" text="${controller.vault.displayableName}">
						<tooltip>
							<Tooltip text="${controller.vault.displayablePath}"/>
							<Tooltip text="${controller.vault.displayableName}"/>
						</tooltip>
					</Hyperlink>
				</VBox>
			</children>
					</Label>
					<Region HBox.hgrow="ALWAYS"/>
					<Label styleClass="badge,badge-pill,badge-secondary" text="%main.vaultDetail.lockedStatus" minWidth="-Infinity" visible="${controller.vault.locked}" managed="${controller.vault.locked}"/>
					<Label styleClass="badge,badge-pill,badge-secondary" text="…" minWidth="-Infinity" visible="${controller.vault.processing}" managed="${controller.vault.processing}"/>
					<Label styleClass="badge,badge-pill,badge-primary" text="%main.vaultDetail.unlockedStatus" minWidth="-Infinity" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}"/>
				</HBox>
				<Hyperlink styleClass="hyperlink-secondary,hyperlink-hover-icon" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS" onAction="#revealStorageLocation">
					<graphic>
						<FontAwesome5IconView styleClass="glyph-icon-secondary" glyph="EYE"/>
					</graphic>
					<tooltip>
						<Tooltip text="${controller.vault.displayablePath}"/>
					</tooltip>
				</Hyperlink>
			</VBox>
		</HBox>

		<VBox visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
			<Button styleClass="button-group,first" prefWidth="Infinity" contentDisplay="GRAPHIC_ONLY" onAction="#revealAccessLocation">
				<graphic>
					<HBox alignment="CENTER">
						<VBox styleClass="button-group-labels">
							<Label styleClass="button-group-heading" text="%main.vaultDetail.accessLocation"/>
							<Label text="${controller.vault.accessPoint}"/>
						</VBox>
						<Region HBox.hgrow="ALWAYS"/>
						<Label styleClass="button-group-action" text="%main.vaultDetail.revealAccessLocation" minWidth="-Infinity"/>
					</HBox>
				</graphic>
			</Button>
			<Region styleClass="button-group-separator"/>
			<Button styleClass="button-group,last" prefWidth="Infinity" contentDisplay="GRAPHIC_ONLY">
				<graphic>
					<HBox alignment="CENTER" spacing="24">
						<VBox styleClass="button-group-labels" HBox.hgrow="ALWAYS">
							<Label styleClass="button-group-heading" text="%main.vaultDetail.bytesPerSecondRead"/>
							<ThrougputLabel idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps" mibsFormat="%main.vaultDetail.throughput.mbps"
											bytesPerSecond="${controller.vault.stats.bytesPerSecondRead}"/>
						</VBox>
						<VBox styleClass="button-group-labels" HBox.hgrow="ALWAYS">
							<Label styleClass="button-group-heading" text="%main.vaultDetail.bytesPerSecondWritten"/>
							<ThrougputLabel idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps" mibsFormat="%main.vaultDetail.throughput.mbps"
											bytesPerSecond="${controller.vault.stats.bytesPerSecondWritten}"/>
						</VBox>
						<Region HBox.hgrow="ALWAYS"/>
						<Label styleClass="button-group-action" text="%main.vaultDetail.showChart" minWidth="-Infinity"/>
					</HBox>
				</graphic>
			</Button>
		</VBox>

		<Region prefHeight="12" VBox.vgrow="NEVER"/>

		<VBox alignment="CENTER" spacing="12" visible="${controller.vault.locked}" managed="${controller.vault.locked}">


@@ 104,11 65,35 @@
			</Hyperlink>
		</VBox>
		<VBox alignment="CENTER" spacing="12" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
			<Button styleClass="button-large" text="%main.vaultDetail.lockBtn" minWidth="120" onAction="#lock">
			<VBox alignment="CENTER" spacing="6">
				<Label styleClass="label-secondary" text="%main.vaultDetail.accessLocation"/>
				<Label text="${controller.vault.accessPoint}"/>
			</VBox>
			<Button styleClass="button-large" text="%main.vaultDetail.revealBtn" minWidth="120" onAction="#revealAccessLocation" defaultButton="${controller.vault.unlocked}">
				<graphic>
					<FontAwesome5IconView glyph="KEY" glyphSize="15"/>
					<FontAwesome5IconView glyph="EYE" glyphSize="15"/>
				</graphic>
			</Button>
			<Button text="%main.vaultDetail.lockBtn" minWidth="120" onAction="#lock">
				<graphic>
					<FontAwesome5IconView glyph="KEY"/>
				</graphic>
			</Button>
		</VBox>

		<Region VBox.vgrow="ALWAYS"/>

		<VBox spacing="6" visible="${controller.vault.unlocked}" managed="${controller.vault.unlocked}">
			<HBox alignment="CENTER_RIGHT" spacing="6">
				<Label styleClass="label-small" text="%main.vaultDetail.bytesPerSecondRead"/>
				<ThrougputLabel styleClass="label-small" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
								mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.vault.stats.bytesPerSecondRead}"/>
			</HBox>
			<HBox alignment="CENTER_RIGHT" spacing="6">
				<Label styleClass="label-small" text="%main.vaultDetail.bytesPerSecondWritten"/>
				<ThrougputLabel styleClass="label-small" alignment="CENTER_RIGHT" minWidth="60" idleFormat="%main.vaultDetail.throughput.idle" kibsFormat="%main.vaultDetail.throughput.kbps"
								mibsFormat="%main.vaultDetail.throughput.mbps" bytesPerSecond="${controller.vault.stats.bytesPerSecondWritten}"/>
			</HBox>
		</VBox>
	</children>
</VBox>

M main/ui/src/main/resources/i18n/strings.properties => main/ui/src/main/resources/i18n/strings.properties +3 -4
@@ 109,12 109,11 @@ main.vaultDetail.lockedStatus=LOCKED
main.vaultDetail.unlockedStatus=UNLOCKED
main.vaultDetail.unlockBtn=Unlock
main.vaultDetail.optionsBtn=Vault Options
main.vaultDetail.revealBtn=Reveal
main.vaultDetail.lockBtn=Lock
main.vaultDetail.accessLocation=access location
main.vaultDetail.revealAccessLocation=REVEAL
main.vaultDetail.bytesPerSecondRead=read
main.vaultDetail.bytesPerSecondWritten=written
main.vaultDetail.showChart=SHOW CHART
main.vaultDetail.bytesPerSecondRead=read:
main.vaultDetail.bytesPerSecondWritten=written:
main.vaultDetail.throughput.idle=idle
main.vaultDetail.throughput.kbps=%.1f kiB/s
main.vaultDetail.throughput.mbps=%.1f MiB/s

M main/ui/src/main/resources/i18n/strings_de.properties => main/ui/src/main/resources/i18n/strings_de.properties +3 -4
@@ 109,12 109,11 @@ main.vaultDetail.lockedStatus=GESPERRT
main.vaultDetail.unlockedStatus=ENTSPERRT
main.vaultDetail.unlockBtn=Entsperren
main.vaultDetail.optionsBtn=Tresoroptionen
main.vaultDetail.revealBtn=Anzeigen
main.vaultDetail.lockBtn=Sperren
main.vaultDetail.accessLocation=Tresorlaufwerk
main.vaultDetail.revealAccessLocation=ANZEIGEN
main.vaultDetail.bytesPerSecondRead=Gelesen
main.vaultDetail.bytesPerSecondWritten=Geschrieben
main.vaultDetail.showChart=ZEIGE GRAPH
main.vaultDetail.bytesPerSecondRead=gelesen:
main.vaultDetail.bytesPerSecondWritten=geschrieben:
main.vaultDetail.throughput.idle=idle
main.vaultDetail.throughput.kbps=%.1f kiB/s
main.vaultDetail.throughput.mbps=%.1f MiB/s