mirrors/cryptomator
1
0
Fork 0
mirror of https://github.com/cryptomator/cryptomator.git synced 2026-05-28 15:40:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

new vault detail layout for unlocked state

Browse Source
This commit is contained in:
Tobias Hagemann
2019-09-03 10:31:42 +02:00
parent 2ab823239c
commit 4f039b9708
5 changed files with 102 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
main/ui/src/main/resources/css/dark_theme.css
View File

@@ -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 *
@@ -429,66 +417,6 @@
-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4;
}
/*******************************************************************************
* *
* 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 *
@@ -496,6 +424,7 @@
******************************************************************************/
.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 *

105
main/ui/src/main/resources/css/light_theme.css
View File

@@ -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 *
@@ -429,66 +417,6 @@
-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4;
}
/*******************************************************************************
* *
* 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 *
@@ -496,6 +424,7 @@
******************************************************************************/
.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 *

115
main/ui/src/main/resources/fxml/vault_detail.fxml
View File

@@ -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>

7
main/ui/src/main/resources/i18n/strings.properties
View File

@@ -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

7
main/ui/src/main/resources/i18n/strings_de.properties
View File

@@ -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