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

- L&F improvements on OS X

Browse Source
This commit is contained in:
Sebastian Stenzel
2014-12-22 22:39:22 +01:00
parent 1770bab699
commit 71892108b3
14 changed files with 6923 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
main/ui/src/main/java/org/cryptomator/ui/MainApplication.java
View File

@@ -19,6 +19,7 @@ import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import org.apache.commons.lang3.SystemUtils;
import org.cryptomator.ui.settings.Settings;
import org.cryptomator.ui.util.TrayIconUtil;
import org.eclipse.jetty.util.ConcurrentHashSet;
@@ -35,8 +36,9 @@ public class MainApplication extends Application {
@Override
public void start(final Stage primaryStage) throws IOException {
chooseNativeStylesheet();
final ResourceBundle rb = ResourceBundle.getBundle("localization");
final FXMLLoader loader = new FXMLLoader(getClass().getResource("/main.fxml"), rb);
final FXMLLoader loader = new FXMLLoader(getClass().getResource("/fxml/main.fxml"), rb);
final Parent root = loader.load();
final MainController ctrl = loader.getController();
ctrl.setStage(primaryStage);
@@ -51,6 +53,16 @@ public class MainApplication extends Application {
});
}
private void chooseNativeStylesheet() {
if (SystemUtils.IS_OS_MAC_OSX) {
setUserAgentStylesheet(getClass().getResource("/css/mac_theme.css").toString());
} else if (SystemUtils.IS_OS_LINUX) {
setUserAgentStylesheet(getClass().getResource("/css/linux_theme.css").toString());
} else if (SystemUtils.IS_OS_WINDOWS) {
setUserAgentStylesheet(getClass().getResource("/css/win_theme.css").toString());
}
}
private void quit() {
Platform.runLater(() -> {
CLEAN_SHUTDOWN_PERFORMER.run();

8
main/ui/src/main/java/org/cryptomator/ui/MainController.java
View File

@@ -137,11 +137,11 @@ public class MainController implements Initializable, InitializationListener, Un
}
private void showWelcomeView() {
this.showView("/welcome.fxml");
this.showView("/fxml/welcome.fxml");
}
private void showInitializeView(Directory directory) {
final InitializeController ctrl = showView("/initialize.fxml");
final InitializeController ctrl = showView("/fxml/initialize.fxml");
ctrl.setDirectory(directory);
ctrl.setListener(this);
}
@@ -152,7 +152,7 @@ public class MainController implements Initializable, InitializationListener, Un
}
private void showUnlockView(Directory directory) {
final UnlockController ctrl = showView("/unlock.fxml");
final UnlockController ctrl = showView("/fxml/unlock.fxml");
ctrl.setDirectory(directory);
ctrl.setListener(this);
}
@@ -164,7 +164,7 @@ public class MainController implements Initializable, InitializationListener, Un
}
private void showUnlockedView(Directory directory) {
final UnlockedController ctrl = showView("/unlocked.fxml");
final UnlockedController ctrl = showView("/fxml/unlocked.fxml");
ctrl.setDirectory(directory);
ctrl.setListener(this);
}

17
main/ui/src/main/java/org/cryptomator/ui/controls/DirectoryListCell.java
View File

@@ -13,8 +13,15 @@ import org.cryptomator.ui.model.Directory;
public class DirectoryListCell extends ListCell<Directory> implements ChangeListener<Boolean> {
// TODO: fancy graphics instead of circles ;-)
private final Circle statusIndicator = new Circle(3.0);
// fill: #FD4943, stroke: #E1443F
private static final Color RED_FILL = Color.rgb(253, 73, 67);
private static final Color RED_STROKE = Color.rgb(225, 68, 63);
// fill: #28CA40, stroke: #30B740
private static final Color GREEN_FILL = Color.rgb(40, 202, 64);
private static final Color GREEN_STROKE = Color.rgb(48, 183, 64);
private final Circle statusIndicator = new Circle(4.5);
public DirectoryListCell() {
setGraphic(statusIndicator);
@@ -48,8 +55,10 @@ public class DirectoryListCell extends ListCell<Directory> implements ChangeList
}
private void updateStatusIndicator() {
final Paint statusColor = getItem().isUnlocked() ? Color.LIME : Color.RED;
statusIndicator.setFill(statusColor);
final Paint fillColor = getItem().isUnlocked() ? GREEN_FILL : RED_FILL;
final Paint strokeColor = getItem().isUnlocked() ? GREEN_STROKE : RED_STROKE;
statusIndicator.setFill(fillColor);
statusIndicator.setStroke(strokeColor);
}
}

2977
main/ui/src/main/resources/css/linux_theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

904
main/ui/src/main/resources/css/mac_theme.css Normal file
View File

@@ -0,0 +1,904 @@
/*
* Copyright (c) 2014 Sebastian Stenzel
* This file is licensed under the terms of the MIT license.
* See the LICENSE.txt file for more info.
*
* Contributors:
* Sebastian Stenzel - initial API and implementation
*
*/
.root {
-fx-font-family: 'lucida-grande';
-fx-font-smoothing-type: lcd;
-fx-font-size: 13.0;
/***************************************************************************
* *
* The main color palette from which the rest of the colors are derived. *
* *
**************************************************************************/
-fx-base: #FFFFFF;
-fx-background: #ECECEC;
/* Used for the inside of text boxes, password boxes, lists, trees, and
* tables. See also -fx-text-inner-color, which should be used as the
* -fx-text-fill value for text painted on top of backgrounds colored
* with -fx-control-inner-background.
*/
-fx-control-inner-background: #FFFFFF;
/* One of these colors will be chosen based upon a ladder calculation
* that uses the brightness of a background color. Instead of using these
* colors directly as -fx-text-fill values, the sections in this file should
* use a derived color to match the background in use. See also:
*
* -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
* -fx-text-background-color for text on top of -fx-background
* -fx-text-inner-color for text on top of -fx-control-inner-color
* -fx-selection-bar-text for text on top of -fx-selection-bar
*/
-fx-dark-text-color: black;
-fx-mid-text-color: #B5B5B5;
-fx-light-text-color: white;
/* A bright blue for highlighting/accenting objects. For example: selected
* text; selected items in menus, lists, trees, and tables; progress bars */
-fx-accent: #B2D7FF;
/* A bright blue for the focus indicator of objects. Typically used as the
* first color in -fx-background-color for the "focused" pseudo-class. Also
* typically used with insets of -1.4 to provide a glowing effect.
*/
-fx-focus-color: #78A6D7;
-fx-faint-focus-color: #8FBDEE;
/* The color that is used in styling controls. The default value is based
* on -fx-base, but is changed by pseudoclasses to change the base color.
* For example, the "hover" pseudoclass will typically set -fx-color to
* -fx-hover-base (see below) and the "armed" pseudoclass will typically
* set -fx-color to -fx-pressed-base.
*/
-fx-color: -fx-base;
/* The opacity level to use for the "disabled" pseudoclass.
*/
-fx-disabled-opacity: 0.6;
/* Chart Color Palette */
CHART_COLOR_1: #28CA40;
CHART_COLOR_2: #FD4943;
CHART_COLOR_3: #2283FB;
CHART_COLOR_4: #FAEA77;
CHART_COLOR_5: #FA9E78;
CHART_COLOR_6: #F47BF8;
CHART_COLOR_7: #c84164;
CHART_COLOR_8: #888888;
/***************************************************************************
* *
* Colors that are derived from the main color palette. *
* *
**************************************************************************/
/* The color to use for -fx-text-fill when text is to be painted on top of
* a background filled with the -fx-background color.
*/
-fx-text-background-color: -fx-dark-text-color;
/* A little darker than -fx-color and used to draw boxes around objects such
* as progress bars, scroll bars, scroll panes, trees, tables, and lists.
*/
-fx-box-border: #C8C8C8;
/* Darker than -fx-background and used to draw boxes around text boxes and
* password boxes.
*/
-fx-text-box-border: #B5B5B5;
/* A gradient that goes from a little darker than -fx-color on the top to
* even more darker than -fx-color on the bottom. Typically is the second
* color in the -fx-background-color list as the small thin border around
* a control. It is typically the same size as the control (i.e., insets
* are 0).
*/
-fx-outer-border: derive(-fx-color,-23%);
/* A gradient that goes from a bit lighter than -fx-color on the top to
* a little darker at the bottom. Typically is the third color in the
* -fx-background-color list as a thin highlight inside the outer border.
* Insets are typically 1.
*/
-fx-inner-border: linear-gradient(to bottom, derive(-fx-color,75%), derive(-fx-color,2%));
/* A gradient that goes from a little lighter than -fx-color at the top to
* a little darker than -fx-color at the bottom and is used to fill the
* body of many controls such as buttons. Typically is the fourth color
* in the -fx-background-color list and represents main body of the control.
* Insets are typically 2.
*/
-fx-body-color: linear-gradient(to bottom, derive(-fx-color,10%) ,derive(-fx-color,-6%));
/* The color to use as -fx-text-fill when painting text on top of
* backgrounds filled with -fx-base, -fx-color, and -fx-body-color.
*/
-fx-text-base-color: -fx-dark-text-color;
/* The color to use as -fx-text-fill when painting text on top of
* backgrounds filled with -fx-control-inner-background.
*/
-fx-text-inner-color: -fx-dark-text-color;
/* Background for items in list like things such as menus, lists, trees,
* and tables.
*
* TODO: it seems like this should be based upon -fx-accent and we should
* remove the setting -fx-background in all the sections that use
* -fx-selection-bar.
*/
-fx-selection-bar: #2283FB;
/* The color to use as -fx-text-fill when painting text on top of
* backgrounds filled with -fx-selection-bar.
*
* TODO: it seems like this should be derived from -fx-selection-bar.
*/
-fx-selection-bar-text: -fx-light-text-color;
/* These are needed for Popup */
-fx-background-color: inherit;
-fx-background-radius: inherit;
-fx-background-insets: inherit;
-fx-padding: inherit;
-fx-cell-focus-inner-border: -fx-selection-bar;
/***************************************************************************
* *
* Set the default background color for the scene *
* *
**************************************************************************/
-fx-background-color: -fx-background;
}
/*******************************************************************************
* *
* Common Styles *
* *
* These are styles that give a standard look to a whole range of controls *
* *
******************************************************************************/
/* ==== BUTTON LIKE THINGS ============================================== */
.button,
.toggle-button,
.radio-button > .radio,
.check-box > .box,
.menu-button,
.choice-box,
.color-picker.split-button > .color-picker-label,
.combo-box-base,
.combo-box-base > .arrow-button {
-fx-background-color: linear-gradient(to bottom, #C1C1C1 0%, #A6A6A6 100%), -fx-base;
-fx-background-insets: 0, 1;
-fx-background-radius: 4;
-fx-padding: 0.2em 0.8em 0.2em 0.8em;
-fx-text-fill: -fx-dark-text-color;
-fx-alignment: CENTER;
-fx-focus-traversable: false;
-fx-effect: dropshadow(one-pass-box, #DCDCDC, 0.0, 0.0, 0.0, 1.0);
}
.button:hover,
.toggle-button:hover,
.radio-button:hover > .radio,
.check-box:hover > .box,
.menu-button:hover,
.split-menu-button > .label:hover,
.split-menu-button > .arrow-button:hover,
.slider .thumb:hover,
.scroll-bar > .thumb:hover,
.scroll-bar > .increment-button:hover,
.scroll-bar > .decrement-button:hover,
.choice-box:hover,
.color-picker.split-button > .arrow-button:hover,
.color-picker.split-button > .color-picker-label:hover,
.combo-box-base:hover,
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:hover {
-fx-color: -fx-base;
}
.button:armed,
.button:default:armed,
.toggle-button:armed,
.radio-button:armed > .radio,
.check-box:armed .box,
.menu-button:armed,
.split-menu-button:armed > .label,
.split-menu-button > .arrow-button:pressed,
.split-menu-button:showing > .arrow-button,
.slider .thumb:pressed,
.scroll-bar > .thumb:pressed,
.scroll-bar > .increment-button:pressed,
.scroll-bar > .decrement-button:pressed,
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button:pressed {
-fx-background-color: linear-gradient(to bottom, #237FFE 0%, #023FDD 100%), linear-gradient(to bottom, #4A97FD 0%, #0867E4 100%);
-fx-text-fill: -fx-light-text-color;
}
.button:focused,
.toggle-button:focused,
.radio-button:focused > .radio,
.check-box:focused > .box,
.menu-button:focused,
.choice-box:focused,
.color-picker.split-button:focused > .color-picker-label {
-fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color;
-fx-background-insets: -2, -0.3, 1, 2;
-fx-background-radius: 7, 6, 4, 3;
}
/* ==== DISABLED THINGS ================================================= */
.button:disabled,
.toggle-button:disabled,
.radio-button:disabled,
.check-box:disabled,
.hyperlink:disabled,
.menu-button:disabled,
.split-menu-button:disabled,
.slider:disabled,
.scroll-pane:disabled,
.progress-bar:disabled,
.progress-indicator:disabled,
.text-input:disabled,
.choice-box:disabled,
.combo-box-base:disabled,
.list-view:disabled,
.tree-view:disabled,
.table-view:disabled,
.tree-table-view:disabled,
.tab-pane:disabled,
.tab-pane > .tab-header-area > .headers-region > .tab:disabled {
-fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2;
-fx-background-insets: 0, 1;
-fx-text-fill: -fx-mid-text-color;
-fx-effect: dropshadow(one-pass-box, #E0E0E0, 0.0, 0.0, 0.0, 0.5);
}
/* ==== MNEMONIC THINGS ================================================= */
.button:show-mnemonics .mnemonic-underline,
.toggle-button:show-mnemonics .mnemonic-underline,
.radio-button:show-mnemonics .mnemonic-underline,
.check-box:show-mnemonics .mnemonic-underline,
.hyperlink:show-mnemonics > .mnemonic-underline,
.split-menu-button:show-mnemonics > .mnemonic-underline,
.menu-button:show-mnemonics > .mnemonic-underline {
-fx-stroke: -fx-text-base-color;
}
/* ==== ARROWS ========================================================== */
.combo-box-base > .arrow-button > .arrow {
-fx-background-color: -fx-light-text-color;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 9px 6px 0 0;
-fx-shape: "M 0 3 l 3 -3 l 3 3 m 0 3 l -3 3 l -3 -3";
}
/* ==== CHOICE BOX LIKE THINGS ========================================== */
.combo-box-base {
-fx-padding: 0;
}
/* ==== BOX LIKE THINGS ================================================= */
.scroll-pane,
.split-pane,
.list-view,
.tree-view,
.table-view,
.tree-table-view {
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-padding: 1;
}
/*******************************************************************************
* *
* Label *
* *
******************************************************************************/
.label {
-fx-text-fill: -fx-text-background-color;
}
/*******************************************************************************
* *
* Button & ToggleButton *
* *
******************************************************************************/
/* ==== DEFAULT ========================================================= */
.button:default {
-fx-background-color: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%), linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%);
-fx-text-fill: -fx-light-text-color;
}
.button:default:disabled {
-fx-background-color: linear-gradient(to bottom, #D2D2D2 0%, #C4C4C4 100%), #F2F2F2;
-fx-background-insets: 0, 1;
-fx-text-fill: -fx-mid-text-color;
}
/*******************************************************************************
* *
* ToolBar *
* *
******************************************************************************/
.tool-bar:horizontal {
-fx-background-color: -fx-box-border, -fx-background;
-fx-background-insets: 0;
-fx-padding: 0.4em;
-fx-spacing: 0.2em;
-fx-alignment: CENTER_LEFT;
}
.tool-bar:horizontal > .container > .separator {
-fx-orientation: vertical;
}
/*******************************************************************************
* *
* ScrollBar *
* *
******************************************************************************/
.scroll-bar:horizontal,
.scroll-bar:vertical {
-fx-background-color: #E8E8E8, #FAFAFA;
}
.scroll-bar:disabled {
-fx-opacity: -fx-disabled-opacity;
}
.scroll-bar > .thumb {
-fx-background-color: #C1C1C1;
-fx-background-insets: 2px;
-fx-background-radius: 4px;
}
.scroll-bar > .thumb:hover {
-fx-background-color: #7D7D7D;
}
.scroll-bar > .increment-button,
.scroll-bar > .decrement-button {
-fx-background-color: transparent;
-fx-color: transparent;
}
.scroll-bar:horizontal > .increment-button,
.scroll-bar:horizontal > .decrement-button {
-fx-padding: 6px 0px;
}
.scroll-bar:vertical > .increment-button,
.scroll-bar:vertical > .decrement-button {
-fx-padding: 0px 6px;
}
/*******************************************************************************
* *
* Separator *
* *
******************************************************************************/
.separator:horizontal .line {
-fx-border-color: -fx-text-box-border transparent transparent transparent;
-fx-border-insets: 0, 1 0 0 0;
}
.separator:vertical .line {
-fx-border-color: transparent transparent transparent -fx-text-box-border;
-fx-border-width: 3, 1;
-fx-border-insets: 0, 0 0 0 1;
}
/*******************************************************************************
* *
* ProgressIndicator *
* *
******************************************************************************/
.progress-indicator {
-fx-indeterminate-segment-count: 12.0;
}
.progress-indicator > .determinate-indicator > .indicator {
-fx-background-color:
rgb(208.0, 208.0, 208.0),
linear-gradient(rgb(176.0, 176.0, 176.0), rgb(207.0, 207.0, 207.0)),
linear-gradient(rgb(190.0, 190.0, 190.0) 0.0%, rgb(213.0, 213.0, 213.0) 15.0%, rgb(230.0, 230.0, 230.0) 50.0%, rgb(235.0, 235.0, 235.0) 100.0%),
linear-gradient(to left, rgb(196.0, 196.0, 196.0, 0.5) 0.0%, rgb(220.0, 220.0, 220.0, 0.2) 2.0% , transparent);
-fx-background-insets: 0.5 0.0 -0.5 0.0, 0.0, 0.5, 1.0;
-fx-padding: 0.083333em;
}
.progress-indicator > .determinate-indicator > .progress {
-fx-background-color:
rgb(208.0, 208.0, 208.0),
radial-gradient(center 50.0% 50.0%, radius 50.0%, rgb(84.0, 170.0, 240.0), rgb(90.0, 192.0, 246.0));
-fx-background-insets: 0.0, 0.5;
-fx-padding: 0.166667em;
}
.progress-indicator > .determinate-indicator > .tick {
-fx-background-color: rgb(208.0, 208.0, 208.0), white;
-fx-background-insets: 1.0 0.0 -1.0 0.0, 0.0;
-fx-padding: 0.416667em;
-fx-shape: "m 18.174523,1027.137 c -0.18077,-0.4575 -0.184364,-0.8913 0.115901,-1.1721 0.300265,-0.2809 0.836622,-0.3601 1.288422,-0.041 0.4518,0.3191 2.020453,2.9316 2.020453,2.9316 l 5.41194,-8.0232 c -4e-6,0 0.516257,-0.6671 1.248682,-0.3099 0.648831,0.3165 0.559153,1.0373 0.559153,1.0373 0,0 -5.940433,9.3556 -6.15501,9.6287 -0.214577,0.273 -1.595078,0.2481 -1.817995,-0.027 -0.222917,-0.2751 -2.490777,-3.567 -2.671546,-4.0244 z";
-fx-scale-shape: false;
}
.progress-indicator > .percentage {
-fx-font-size: 0.916667em;
}
.progress-indicator:disabled {
-fx-opacity: -fx-disabled-opacity;
}
.progress-indicator:indeterminate > .spinner {
-fx-padding: 0.083333em;
}
.progress-indicator:indeterminate .segment {
-fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0);
-fx-background-insets:0.0, 0.5;
}
.progress-indicator:indeterminate .segment0 {
-fx-shape:"m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z";
}
.progress-indicator:indeterminate .segment1 {
-fx-shape:"m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z";
}
.progress-indicator:indeterminate .segment2 {
-fx-shape:"m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z";
}
.progress-indicator:indeterminate .segment3 {
-fx-shape:"m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z";
}
.progress-indicator:indeterminate .segment4 {
-fx-shape:"m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z";
}
.progress-indicator:indeterminate .segment5 {
-fx-shape:"M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z";
}
.progress-indicator:indeterminate .segment6 {
-fx-shape:"M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z";
}
.progress-indicator:indeterminate .segment7 {
-fx-shape:"m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z";
}
.progress-indicator:indeterminate .segment8 {
-fx-shape:"M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z";
}
.progress-indicator:indeterminate .segment9 {
-fx-shape:"M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z";
}
.progress-indicator:indeterminate .segment10 {
-fx-shape:"m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z";
}
.progress-indicator:indeterminate .segment11 {
-fx-shape:"m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z";
}
/*******************************************************************************
* *
* Text COMMON *
* *
******************************************************************************/
.text-input {
-fx-text-fill: -fx-dark-text-color;
-fx-highlight-fill: derive(-fx-control-inner-background,-20%);
-fx-highlight-text-fill: -fx-text-inner-color;
-fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
-fx-border-color: -fx-text-box-border;
-fx-border-width: 1px;
-fx-background-color: #FFFFFF;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-cursor: text;
-fx-padding: 2px;
}
.text-input:focused {
-fx-highlight-fill: -fx-accent;
-fx-border-color: -fx-focus-color;
-fx-border-width: 1px;
-fx-background-color: -fx-faint-focus-color, #FFFFFF;
-fx-background-insets: -3, 0;
-fx-background-radius: 3, 0;
-fx-prompt-text-fill: transparent;
}
/*******************************************************************************
* *
* PopupMenu *
* *
******************************************************************************/
.context-menu {
-fx-background-color: rgba(255.0, 255.0, 255.0, 0.9);
-fx-background-insets: 0;
-fx-background-radius: 4.0;
-fx-padding: 4px 0 4px 0;
-fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0 );
}
.context-menu > .separator {
-fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
}
/*******************************************************************************
* *
* MenuItem *
* *
******************************************************************************/
.menu-item {
-fx-background-color: transparent;
-fx-background-insets:0.0;
-fx-padding:0.2em 1em 0.2em 1em;
-fx-border-width: 0.0 0.0 0.0 0.0;
-fx-border-color:transparent;
}
.menu-item > .left-container {
-fx-padding: 0.458em 0.791em 0.458em 0.458em;
}
.menu-item > .graphic-container {
-fx-padding: 0em 0.333em 0em 0em;
}
.menu-item >.label {
-fx-padding: 0em 0.5em 0em 0em;
-fx-text-fill: -fx-text-base-color;
}
.menu-item:disabled > .label {
-fx-opacity: -fx-disabled-opacity;
}
.menu-item:focused {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-text-fill: -fx-selection-bar-text;
}
.menu-item:focused > .label {
-fx-text-fill: white;
}
.menu-item > .right-container {
-fx-padding: 0em 0em 0em 0.5em;
}
.menu-item:show-mnemonics > .mnemonic-underline {
-fx-stroke: -fx-text-fill;
}
.menu > .right-container > .arrow {
-fx-padding: 0.458em 0.167em 0.458em 0.167em; /* 4.5 2 4.5 2 */
-fx-background-color: -fx-color;
-fx-shape: "M0,-4L4,0L0,4Z";
-fx-scale-shape: false;
}
.menu:selected > .right-container > .arrow {
-fx-background-color: white;
}
.menu-item:disabled {
-fx-opacity: -fx-disabled-opacity;
}
/*******************************************************************************
* *
* ComboBox *
* *
******************************************************************************/
/* Customie the ListCell that appears in the ComboBox button itself */
.combo-box > .list-cell {
-fx-background: transparent;
-fx-background-color: transparent;
-fx-text-fill: -fx-text-base-color;
-fx-padding: 0.2em 0.5em 0.2em 0.5em;
}
.combo-box-base > .arrow-button {
-fx-background-color: linear-gradient(to bottom, #4AA0F9 0%, #045FFF 100%), linear-gradient(to bottom, #69B2FA 0%, #0D81FF 100%);
-fx-background-radius: 0 5 5 0, 0 4 4 0;
-fx-padding: 0.2em 0.5em 0.2em 0.5em;
-fx-background-insets: 0 0 0 1, 1;
}
.combo-box-popup > .list-view {
-fx-background-color: rgba(255.0, 255.0, 255.0, 0.9);
-fx-background-insets: 0;
-fx-background-radius: 4.0;
-fx-padding: 4px 0 4px 0;
-fx-effect: dropshadow(three-pass-box, rgba(0.0,0.0,0.0,0.6), 8.0, 0.0, 0.0, 0.0);
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell {
-fx-background-color: transparent;
-fx-background-insets:0.0;
-fx-padding:0.2em 1em 0.2em 1em;
-fx-border-width: 0.0 0.0 0.0 0.0;
-fx-border-color:transparent;
}
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.combo-box-popup > .list-view > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-text-fill: -fx-selection-bar-text;
}
/*******************************************************************************
* *
* SplitPane *
* *
******************************************************************************/
.split-pane > .split-pane-divider {
-fx-padding: 0 0.25em 0 0.25em; /* 0 3 0 3 */
}
/*******************************************************************************
* *
* ListView and ListCell *
* *
******************************************************************************/
.list-view > .virtual-flow > .scroll-bar:vertical{
-fx-background-insets: 0, 0 0 0 1;
-fx-padding: -1 -1 -1 0;
}
.list-view > .virtual-flow > .scroll-bar:horizontal{
-fx-background-insets: 0, 1 0 0 0;
-fx-padding: 0 -1 -1 -1;
}
.list-view > .virtual-flow > .corner {
-fx-background-color: -fx-box-border, -fx-base;
-fx-background-insets: 0, 1 0 0 1;
}
.list-cell {
-fx-background-color: -fx-control-inner-background;
-fx-padding: 0.8em 0.5em 0.8em 0.5em;
-fx-text-fill: -fx-text-inner-color;
-fx-opacity: 1;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:focused {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
-fx-background-insets: 0, 1, 2;
}
/* When the list-cell is selected and focused */
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected {
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
-fx-background-insets: 0, 1, 2;
-fx-background: -fx-accent;
-fx-text-fill: -fx-selection-bar-text;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-text-fill: -fx-selection-bar-text;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:focused:selected:hover {
-fx-background: -fx-accent;
-fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
-fx-background-insets: 0, 1, 2;
-fx-text-fill: -fx-selection-bar-text;
}
/* When the ListView is _not_ focused, we show alternate selection colors */
.list-cell:filled:selected:focused,
.list-cell:filled:selected,
.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
-fx-background-color: lightgray;
-fx-text-fill: -fx-selection-bar-text;
}
.list-cell:filled:selected:focused:disabled,
.list-cell:filled:selected:disabled {
-fx-opacity: -fx-disabled-opacity;
}
.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
.list-view:horizontal > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected:hover {
-fx-background-color: -fx-selection-bar;
}
/*******************************************************************************
* *
* Tooltip *
* *
******************************************************************************/
.tooltip {
-fx-background-color: -fx-background;
-fx-padding: 0.2em 0.4em 0.2em 0.4em;
-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0);
-fx-font-size: 0.8em;
}
/*******************************************************************************
* *
* Charts *
* *
******************************************************************************/
.chart {
-fx-padding: 5px;
}
.chart-content {
-fx-padding: 10px;
}
.chart-title {
-fx-font-size: 1.4em;
}
.chart-legend {
-fx-background-color: linear-gradient(to bottom, derive(-fx-background, -10%), derive(-fx-background, -5%)),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-background, -5%), derive(-fx-background, 20%));
-fx-background-insets: 0,1;
-fx-background-radius: 6,5;
-fx-padding: 6px;
}
/*******************************************************************************
* *
* Axis *
* *
******************************************************************************/
.axis {
AXIS_COLOR: derive(-fx-background,-20%);
-fx-tick-label-font-size: 0.833333em; /* 10px */
-fx-tick-label-fill: derive(-fx-text-background-color, 30%);
}
.axis:top {
-fx-border-color: transparent transparent AXIS_COLOR transparent;
}
.axis:right {
-fx-border-color: transparent transparent transparent AXIS_COLOR;
}
.axis:bottom {
-fx-border-color: AXIS_COLOR transparent transparent transparent;
}
.axis:left {
-fx-border-color: transparent AXIS_COLOR transparent transparent;
}
.axis-tick-mark,
.axis-minor-tick-mark {
-fx-fill: null;
-fx-stroke: AXIS_COLOR;
}
/*******************************************************************************
* *
* ChartPlot *
* *
******************************************************************************/
.chart-vertical-grid-lines {
-fx-stroke: derive(-fx-background,-10%);
-fx-stroke-dash-array: 0.25em, 0.25em;
}
.chart-horizontal-grid-lines {
-fx-stroke: derive(-fx-background,-10%);
}
.chart-alternative-column-fill {
-fx-fill: null;
-fx-stroke: null;
}
.chart-alternative-row-fill {
-fx-fill: null;
-fx-stroke: null;
}
.chart-vertical-zero-line,
.chart-horizontal-zero-line {
-fx-stroke: derive(-fx-text-background-color, 40%);
}
/*******************************************************************************
* *
* LineChart *
* *
******************************************************************************/
.chart-line-symbol {
-fx-background-color: #f9d900, white;
-fx-background-insets: 0, 2;
-fx-background-radius: 5px;
-fx-padding: 5px;
}
.chart-series-line {
-fx-stroke: #f9d900;
-fx-stroke-width: 3px;
/*-fx-effect: dropshadow( two-pass-box , rgba(0,0,0,0.3) , 8, 0.0 , 0 , 3 );*/
}
.default-color0.chart-line-symbol { -fx-background-color: CHART_COLOR_1, white; }
.default-color1.chart-line-symbol { -fx-background-color: CHART_COLOR_2, white; }
.default-color2.chart-line-symbol { -fx-background-color: CHART_COLOR_3, white; }
.default-color3.chart-line-symbol { -fx-background-color: CHART_COLOR_4, white; }
.default-color4.chart-line-symbol { -fx-background-color: CHART_COLOR_5, white; }
.default-color5.chart-line-symbol { -fx-background-color: CHART_COLOR_6, white; }
.default-color6.chart-line-symbol { -fx-background-color: CHART_COLOR_7, white; }
.default-color7.chart-line-symbol { -fx-background-color: CHART_COLOR_8, white; }
.default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; }
.default-color1.chart-series-line { -fx-stroke: CHART_COLOR_2; }
.default-color2.chart-series-line { -fx-stroke: CHART_COLOR_3; }
.default-color3.chart-series-line { -fx-stroke: CHART_COLOR_4; }
.default-color4.chart-series-line { -fx-stroke: CHART_COLOR_5; }
.default-color5.chart-series-line { -fx-stroke: CHART_COLOR_6; }
.default-color6.chart-series-line { -fx-stroke: CHART_COLOR_7; }
.default-color7.chart-series-line { -fx-stroke: CHART_COLOR_8; }
/*******************************************************************************
* *
* Combinations *
* *
* This section is for special handling of when one control is nested inside *
* another control. There are many cases where we would end up with ugly *
* double borders that are fixed here. *
* *
******************************************************************************/
.split-pane > * > .table-view { -fx-padding: 0px; }
.split-pane > * > .list-view { -fx-padding: 0px; }
.split-pane > * > .tree-view { -fx-padding: 0px; }
.split-pane > * > .scroll-pane { -fx-padding: 0px; }
.split-pane > * > .split-pane {
-fx-background-insets: 0, 0;
-fx-padding: 0;
}
/* ############################################################################
# Workaround for RT-27627 #
############################################################################ */
.choice-box > .open-button > .arrow { doh: true; }
.split-menu-button:openvertically > .arrow-button > .arrow { doh: true; }
.tab-pane > .tab-header-area > .control-buttons-tab > .container > .tab-down-button > .arrow { doh: true; }
.tree-table-view { doh: true; }
.tree-table-view:focused { doh: true; }
.tree-table-view > .virtual-flow > .scroll-bar:vertical { doh: true; }
.tree-table-view > .virtual-flow > .scroll-bar:horizontal { doh: true; }
.tree-table-view > .virtual-flow > .corner { doh: true; }
.tree-table-row-cell:focused { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected > .tree-table-cell { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected { doh: true; }
.tree-table-view:row-selection:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:selected:hover{ doh: true; }
.tree-table-row-cell:filled:selected:focused { doh: true; }
.tree-table-row-cell:filled:selected { doh: true; }
.tree-table-row-cell:selected:disabled { doh: true; }
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:hover { doh: true; }
.tree-table-view:row-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:focused:hover { doh: true; }
.tree-table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:last-visible { doh: true; }
.tree-table-view:constrained-resize > .column-header:last-visible { doh: true; }
.tree-table-view:constrained-resize .filler { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell > .tree-table-cell:focused { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled .tree-table-cell:focused:selected { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; }
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover:selected { doh: true; }
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:selected:hover{ doh: true; }
.tree-table-row-cell:filled > .tree-table-cell:selected:focused { doh: true; }
.tree-table-row-cell:filled > .tree-table-cell:selected { doh: true; }
.tree-table-cell:selected:disabled { doh: true; }
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:hover { doh: true; }
.tree-table-view:cell-selection > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled > .tree-table-cell:focused:hover { doh: true; }
.tree-table-view .column-resize-line { doh: true; }
.tree-table-view > .column-header-background { doh: true; }
.tree-table-view .column-header { doh: true; }
.tree-table-view .filler { doh: true; }
.tree-table-view .column-header .sort-order{ doh: true; }
.tree-table-view > .column-header-background > .show-hide-columns-button{ doh: true; }
.tree-table-view .show-hide-column-image { doh: true; }
.tree-table-view .column-drag-header { doh: true; }
.tree-table-view .column-overlay { doh: true; }
.tree-table-view /*> column-header-background > nested-column-header >*/ .arrow { doh: true; }
.tree-table-view .empty-table { doh: true; }
.axis-minor-tick-mark { doh: true; }
.chart-horizontal-zero-line { doh: true; }
.stacked-bar-chart:horizontal .chart-bar { doh: true; }

2977
main/ui/src/main/resources/css/win_theme.css Normal file
View File

File diff suppressed because it is too large Load Diff

0
main/ui/src/main/resources/initialize.fxml → main/ui/src/main/resources/fxml/initialize.fxml
View File

2
main/ui/src/main/resources/main.fxml → main/ui/src/main/resources/fxml/main.fxml
View File

@@ -34,7 +34,7 @@
<children>
<VBox prefWidth="200.0">
<children>
<ListView fx:id="directoryList" VBox.vgrow="ALWAYS" />
<ListView fx:id="directoryList" VBox.vgrow="ALWAYS" focusTraversable="false" />
<ToolBar VBox.vgrow="NEVER">
<items>
<Button text="+" onAction="#didClickAddDirectory" />

0
main/ui/src/main/resources/unlock.fxml → main/ui/src/main/resources/fxml/unlock.fxml
View File

0
main/ui/src/main/resources/unlocked.fxml → main/ui/src/main/resources/fxml/unlocked.fxml
View File

33
main/ui/src/main/resources/fxml/welcome.fxml Normal file
View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2014 Sebastian Stenzel
This file is licensed under the terms of the MIT license.
See the LICENSE.txt file for more info.
Contributors:
Sebastian Stenzel - initial API and implementation
-->
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import java.lang.String?>
<?import javafx.scene.shape.Arc?>
<?import javafx.scene.shape.QuadCurve?>
<?import javafx.scene.shape.Path?>
<?import javafx.scene.shape.Line?>
<AnchorPane xmlns:fx="http://javafx.com/fxml">
<children>
<Label AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="50.0" style="-fx-font-size: 1.5em;" text="%welcome.welcomeLabel"/>
<Label AnchorPane.leftAnchor="120.0" AnchorPane.topAnchor="280.0" text="%welcome.addButtonInstructionLabel"/>
<QuadCurve AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="300.0" startX="200.0" startY="0.0" endX="0.0" endY="80.0" controlX="180.0" controlY="80.0" fill="TRANSPARENT" stroke="BLACK" strokeWidth="2.0"/>
<Line AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="370.0" startX="0.0" endX="10.0" startY="10.0" endY="0.0" strokeWidth="2.0"/>
<Line AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="380.0" startX="0.0" endX="10.0" startY="0.0" endY="10.0" strokeWidth="2.0"/>
</children>
</AnchorPane>

1
main/ui/src/main/resources/localization.properties
View File

@@ -17,6 +17,7 @@ main.directoryList.contextMenu.changePassword=Change password
# welcome.fxml
welcome.welcomeLabel=Welcome to Cryptomator
welcome.addButtonInstructionLabel=Start by adding a new vault :-)
# initialize.fxml

119
main/ui/src/main/resources/main.css
View File

@@ -1,119 +0,0 @@
@CHARSET "US-ASCII";
.root {
-fx-background-color: linear-gradient(to bottom, #FFFFFF, #DDDDDD);
}
.text {
-fx-font-smoothing-type: lcd;
}
.button,
.combo-box {
-fx-border-color: #888888;
-fx-background-insets: 0.0, 1.0;
-fx-background-radius: 4.0, 4.0;
-fx-border-radius: 3.0;
-fx-border-width: 0.5;
}
.text-field {
-fx-border-radius: 3.0;
-fx-border-width: 0.5;
}
.button.green,
.button.red,
.split-menu-button.green,
.split-menu-button.red {
-fx-background-radius: 3.0;
-fx-background-color: #FFFFFF;
-fx-background-insets: 1px 1px 1px 1px;
}
.button.green,
.button.red,
.split-menu-button.green > .label,
.split-menu-button.red > .label {
-fx-text-fill: #FFF;
-fx-alignment: CENTER;
-fx-font-weight: bold;
-fx-font-family: "lucida-grande";
}
.split-menu-button.green > .arrow-button > .arrow,
.split-menu-button.red > .arrow-button > .arrow {
-fx-background-color: #FFF;
}
.button.green,
.split-menu-button.green > .label,
.split-menu-button.green > .arrow-button {
-fx-background-color: linear-gradient(to bottom, #33EE55, #22AA33);
}
.button.green:hover,
.split-menu-button.green > .label:hover,
.split-menu-button.green > .arrow-button:hover {
-fx-background-color: linear-gradient(to bottom, #33EE55, #118822);
}
.button.green:armed,
.split-menu-button.green:armed > .label,
.split-menu-button.green > .arrow-button:pressed,
.split-menu-button.green:showing > .arrow-button {
-fx-background-color: linear-gradient(to bottom, #118822, #22AA33 20%, #33EE55);
}
.button.green:disabled,
.split-menu-button.green:disabled,
.split-menu-button.green:disabled > .label,
.split-menu-button.green:disabled > .arrow-button {
-fx-background-color: #22AA33;
}
.button.red,
.split-menu-button.red > .label,
.split-menu-button.red > .arrow-button {
-fx-background-color: linear-gradient(to bottom, #EE5533, #AA3322);
}
.button.red:hover,
.split-menu-button.red > .label:hover,
.split-menu-button.red > .arrow-button:hover {
-fx-background-color: linear-gradient(to bottom, #EE5533, #882211);
}
.button.red:armed,
.split-menu-button.red:armed > .label,
.split-menu-button.red > .arrow-button:pressed,
.split-menu-button.red:showing > .arrow-button {
-fx-background-color: linear-gradient(to bottom, #882211, #AA3322 20%, #EE5533);
}
.button.red:disabled,
.split-menu-button.red:disabled,
.split-menu-button.red:disabled > .label,
.split-menu-button.red:disabled > .arrow-button {
-fx-background-color: #AA3322;
}
.split-menu-button .menu-item:focused {
-fx-background-color: #CCC;
}
.split-menu-button .menu-item .label {
-fx-text-fill: #000000;
}
.text-field {
-fx-border-radius: 3.0;
-fx-border-width: 0.5;
-fx-border-color: #888888;
-fx-background-color: #FFFFFF;
-fx-padding: 4 2 4 2;
}
.text-field:focused {
-fx-background-color: #FFFFFF;
}

26
main/ui/src/main/resources/welcome.fxml
View File

@@ -1,26 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2014 Sebastian Stenzel
This file is licensed under the terms of the MIT license.
See the LICENSE.txt file for more info.
Contributors:
Sebastian Stenzel - initial API and implementation
-->
<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import java.lang.String?>
<AnchorPane xmlns:fx="http://javafx.com/fxml">
<children>
<Label fx:id="messageLabel" AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="50.0" text="%welcome.welcomeLabel"/>
</children>
</AnchorPane>