Added new version of the UI

Duplicati/Server/webroot/index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=9" />
+<title>Backup</title>
+
+    <link rel="stylesheet" type="text/css" href="stylesheets/common.css" />
+    <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
+    <link rel="stylesheet" type="text/css" href="stylesheets/customized.css" />
+
+    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>
+    <script type="text/javascript" src="scripts/config.js"></script>
+    <script type="text/javascript" src="scripts/app.js"></script>
+    <script type="text/javascript" src="scripts/customized.js"></script>
+
+
+    <script id="backup-item-template" type="text/x-jquery-tmpl">
+            <div id="backup-${ID}" class="main-backup-entry">
+                <div class="backup-details">
+                    <div class="caption-text">${Name}</div>
+                    <ul class="hint-text">
+                        <li class="hint-text-caption">Source</li>
+                        <li class="source-size">${SourceSizeString}</li>
+                    </ul>
+                    <ul class="hint-text">
+                        <li class="hint-text-caption">Backup</li>
+                        <li class="target-size">${TargetSizeString}</li>
+                    </ul>
+                    <ul class="action-links">
+                        <li class="first">Backup</li>
+                        <li>Restore</li>
+                        <li>Edit</li>
+                        <li class="last">Delete</li>
+                    </ul>
+                </div>
+                <div class="backup-progress">
+                    <div class="progress-area">
+                    <div class="${ProgressIconClass}"></div>
+                    <div class="in-progress main-progress-text">${ProgressText}</div>
+                    </div>
+                </div>
+            </div>
+    </script>
+
+</head>
+<body>
+
+    <div id="main-topbar">
+        <div id="main-appname">DUPLICATI</div>
+
+        <ul class="main-shortcuts">
+            <li id="main-donate" class="main-icon-donate"></li>
+            <li id="main-control" class="main-icon-pause"></li>
+            <li id="main-settings" class="main-icon-settings"></li>
+        </ul>
+
+        <ul id="main-control-menu" class="menu">
+            <li>Settings..</li>
+            <li class="menu-sep"></li>
+            <li>Pause ...</li>
+            <li>Throttle ...</li>
+            <li class="menu-sep"></li>
+            <li>About ...</li>
+        </ul>
+    </div>
+
+    <div id="main-bottombar">
+        <a href="http://www.duplicati.com" target="_blank">Version 2.0.1 is available</a>
+    </div>
+
+    <div id="main-list-loader">
+        <div id="main-list-loader-content">
+            <div id="main-list-loader-icon" class="large-loader-icon"></div>
+            <div id="main-list-loader-text">
+                Loading backups ...
+            </div>
+        </div>
+    </div>
+
+    <div id="main-list">
+        <div id="main-list-container">
+            <div id="backup-1" class="main-backup-entry first">
+                <div class="backup-details">
+                    <div class="caption-text">My Music to Backify.com</div>
+                    <ul class="hint-text">
+                        <li class="hint-text-caption">Source</li>
+                        <li class="source-size">12.56 GB</li>
+                    </ul>
+                    <ul class="hint-text">
+                        <li class="hint-text-caption">Backup</li>
+                        <li class="target-size">14.31 GB</li>
+                    </ul>
+                    <ul class="action-links">
+                        <li class="first">Backup</li>
+                        <li>Restore</li>
+                        <li>Edit</li>
+                        <li class="last">Delete</li>
+                    </ul>
+                </div>
+                <div class="backup-progress">
+                    <div class="progress-area">
+                    <div class="in-progress main-progress-text">512 files remanining</div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="backup-2" class="main-backup-entry">
+                <div class="backup-details">
+                    <div class="caption-text">My Photos to SkyDrive</div>
+                    <ul class="hint-text">
+                        <li class="hint-text-caption">Source</li>
+                        <li class="source-size">12.56 GB</li>
+                    </ul>
+                    <ul class="hint-text">
+                        <li class="hint-text-caption">Backup</li>
+                        <li class="target-size">14.31 GB</li>
+                    </ul>
+                    <ul class="action-links">
+                        <li class="first">Backup</li>
+                        <li>Restore</li>
+                        <li>Edit</li>
+                        <li class="last">Delete</li>
+                    </ul>
+                </div>
+                <div class="backup-progress">
+                    <div class="progress-area">
+                    <div class="main-icon-hourglass"></div>
+                    <div class="main-progress-text">#1 in queue</div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="backup-3" class="main-backup-entry last">
+                <div class="backup-details">
+                    <div class="caption-text">My Videos to Amazon S3</div>
+                    <ul class="hint-text">
+                        <li class="hint-text-caption">Source</li>
+                        <li class="source-size">12.56 GB</li>
+                    </ul>
+                    <ul class="hint-text">
+                        <li class="hint-text-caption">Backup</li>
+                        <li class="target-size">14.31 GB</li>
+                    </ul>
+                    <ul class="action-links">
+                        <li class="first">Backup</li>
+                        <li>Restore</li>
+                        <li>Edit</li>
+                        <li class="last">Delete</li>
+                    </ul>
+                </div>
+                <div  class="backup-progress">
+                    <div class="progress-area">
+                    <div class="main-icon-clock"></div>
+                    <div class="main-progress-text">2013-11-02 5.00pm</div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="main-newbackup">
+                <div class="main-icon-plus"></div>
+                <div class="main-button-add-text">Add new backup</div>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>

Duplicati/Server/webroot/scripts/app.js

@@ -0,0 +1,78 @@
+/*
+ * Primary app code
+ */
+
+// Global app settings
+
+APP_DATA = null;
+APP_EVENTS= {};
+
+$(document).ready(function() {
+
+    // Flag as loaded in case we have plugins
+    APP_DATA = {};
+
+    var PRIVATE_DATA = {};
+
+    $('#main-appname').text(APP_CONFIG.branded_name);
+
+    if ((APP_CONFIG.branded_subtitle || '').length > 0) {
+        var subdiv = $('<div id="main-appname-subtitle">');
+        subdiv.text(APP_CONFIG.branded_subtitle);
+        $('#main-appname').append(subdiv);
+        $('#main-appname').addClass('has-subtitle');
+    }
+
+    $('#main-list-container').empty();
+    $('#main-list-loader').show();
+
+    PRIVATE_DATA.refresh_server_settings = function(callback) {
+        $.ajax({
+            url: APP_CONFIG.server_url,
+            data: { action: 'system-info' }
+        })
+        .done(function(data) {
+            PRIVATE_DATA.server_config = data;
+            $('#main-list-loader').hide();
+            if (callback != null)
+                callback(PRIVATE_DATA.server_config);
+        })
+        .fail(function(data, status) {
+        });
+    };
+
+    PRIVATE_DATA.refresh_server_settings();
+
+    APP_DATA.getServerConfig = function(callback) {
+        if (PRIVATE_DATA.server_config == null) {
+            PRIVATE_DATA.refresh_server_settings(callback);
+        } else {
+            callback(PRIVATE_DATA.server_config);
+        }
+    };
+
+
+    $('#main-settings').click(function() {
+        var pos = $('#main-settings').position();
+        var barheight = $('#main-topbar').outerHeight();
+        var menuwidth = $('#main-control-menu').outerWidth();
+        var buttonwidth = $('#main-settings').outerWidth();
+
+        $('#main-control-menu').css({
+            position: 'absolute',
+            top: barheight + 'px',
+            right: ($(document).outerWidth() - (pos.left + buttonwidth)) + 'px'
+        });
+        $('#main-control-menu').toggle();
+    });
+
+    $('#main-donate').click(function() {
+
+    });
+
+    $('#main-control').click(function() {
+    });
+
+
+
+});

Duplicati/Server/webroot/scripts/config.js

@@ -0,0 +1,9 @@
+/*
+ * The basic client config
+ */
+
+APP_CONFIG = {
+    server_url: '/control.cgi',
+    branded_name: 'Duplicati',
+    branded_subtitle: ''
+};

Duplicati/Server/webroot/stylesheets/common.css

@@ -1 +1,77 @@
-/* Placeholder for customization */
+/*
+ * Common style config
+ */
+
+body {
+    border: 0px none;
+    margin: 0px;
+    padding: 0px;
+    font-family: Arial;
+    min-width: 320px;
+}
+
+.action-link, .action-links li {
+    text-decoration: underline;
+    color: #56acbb;
+    font-size: 0.9em;
+    cursor: pointer;
+}
+
+.hint-text {
+    color: #9b9b9b;
+    font-size: 0.9em;
+}
+
+.hint-text-caption {
+    font-weight: bold;
+    color: #9b9b9b;
+    font-size: 0.9em;
+}
+
+.caption-text {
+    color: #68845f;
+    font-weight: bold;
+    font-size: 1.1em;
+}
+
+.progressbar-background {
+    background-color: #b1bead;
+}
+
+.menu {
+    background-color: #ffffff;
+    position: absolute;
+    display: none;
+    list-style: none;
+    border: 1px solid #9b9b9b;
+    margin: 0px;
+    padding: 0px;
+    border-radius: 3px;
+    z-index: 10000;
+    opacity: 0.9;
+}
+
+.menu li {
+    padding: 5px 10px 5px 10px;
+    background-color: #ffffff;
+    cursor: pointer;
+}
+
+.menu li.menu-sep {
+    border-top: 1px solid;
+    padding: 0px 10px 0px 10px;
+}
+
+.large-loader-icon {
+    width: 66px;
+    height: 66px;
+    background-repeat: no-repeat;
+    background-image: url('../images/ajax-loader-big.gif');
+}
+
+.small-loader-icon {
+    width: 32px;
+    height: 32px;
+    background-repeat: no-repeat;
+    background-image: url('../images/ajax-loader-small.gif');
+}

Duplicati/Server/webroot/stylesheets/customized.css

@@ -1,15 +1,8 @@
-/* Placeholder for customization */
-
-
-.x-grid-tree-node-expanded .x-tree-icon-drive,
-.x-tree-icon-drive {
-	width:16px;
-	background-image:url('/icons/drive.gif')
-}
-
-
-.x-grid-tree-node-expanded .x-tree-icon-locked,
-.x-tree-icon-locked {
-	width:16px;
-	background-image:url('/icons/folder_locked_red.gif')
-}
+/* Placeholder for customization */
+
+/* Uncomment if using a subtitle on the app name */
+/*
+#main-appname {
+    padding-top: 5px;
+}
+*/

Duplicati/Server/webroot/stylesheets/main.css

@@ -0,0 +1,285 @@
+/*
+ * CSS config for the main window
+ */
+
+#main-topbar {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    height: 46px;
+    background-color: #3a5e30;
+    color: #9dab98;
+    vertical-align: middle;
+}
+
+#main-bottombar {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: #4c7641;
+    color: #d4dcd2;
+    vertical-align: middle;
+    height: 46px;
+}
+
+#main-bottombar a {
+    vertical-align: middle;
+    color: #d4dcd2;
+    display: inline-block;
+    padding: 10px 10px 10px 20px;
+}
+
+
+#main-list {
+    position: absolute;
+    top: 46px;
+    bottom: 46px;
+    left: 0px;
+    right: 0px;
+    padding-left: 20px;
+    overflow: auto;
+	margin: 0 auto;
+}
+
+#main-list-container {
+    max-width: 620px;
+    margin-left: auto;
+    margin-right: auto;
+    overflow: auto;
+}
+
+#main-list-loader {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    padding-left: 20px;
+    overflow: auto;
+    margin: 0 auto;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+#main-list-loader-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  width: 250px;
+  height: 100px;
+}
+
+#main-list-loader-icon {
+    margin: auto;
+}
+
+#main-list-loader-text {
+    padding-top: 5px;
+    text-align: center;
+}
+
+#main-appname {
+    padding: 10px 10px 10px 20px;
+    font-weight: bold;
+    font-size: 1.4em;
+    display: inline-block;
+    text-transform: uppercase;
+}
+
+#main-appname.has-subtitle {
+    padding-top: 5px;
+}
+
+#main-appname-subtitle {
+    font-size: 0.5em;
+    font-weight: normal;
+    font-style: italic;
+}
+
+#main-newbackup {
+    background-color: #3a5e30;
+    color: white;
+    padding: 6px 12px 6px 12px;
+    cursor: pointer;
+    border-radius: 3px;
+    display: inline-block;
+    clear: both;
+    float: left;
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+
+#main-control-menu {
+    margin-right: 10px;
+}
+
+.main-shortcuts {
+    float: right;
+    padding-top: 8px;
+    padding-right: 8px;
+    margin: 0px;
+    padding-left: 0px;
+}
+
+.main-shortcuts li {
+    padding-left: 8px;
+    padding-right: 4px;
+    cursor: pointer;
+    background-color: #3a5e30;    
+}
+
+.main-backup-entry {
+    padding: 40px 40px 10px 0px;
+    clear: both;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.main-backup-entry .action-links {
+    display: block;
+    margin-top: 10px;
+    padding-left: 0px;
+}
+
+.main-backup-entry .hint-text, .main-shortcuts {
+    display: table-row;
+}
+
+.main-backup-entry .action-links li, .main-backup-entry .hint-text li, .main-shortcuts li {
+    display: table-cell;
+}
+
+.main-backup-entry .action-links li {
+    display: table-cell;
+    border-right: 1px solid #56acbb;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.main-backup-entry .action-links .last {
+    border-right: 0px none;
+    padding-right: 0px;
+}
+
+.main-backup-entry .action-links .first {
+    padding-left: 0px;
+}
+
+.main-backup-entry .hint-text-caption {
+    padding-right: 5px;
+}
+
+.main-backup-entry .caption-text {
+    margin-bottom: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 300px;
+    white-space: nowrap;
+}
+
+.main-icon-plus {
+    width: 23px;
+    height: 23px;
+    display: block;
+    background-repeat: no-repeat;
+    background-image: url('../images/plus.png');
+}
+
+.main-icon-clock {
+    width: 23px;
+    height: 23px;
+    background-repeat: no-repeat;
+    background-image: url('../images/clock.png');
+}
+
+.main-icon-donate {
+    width: 28px;
+    height: 28px;
+    background-repeat: no-repeat;
+    background-image: url('../images/donate.png');
+}
+
+.main-icon-hourglass {
+    width: 18px;
+    height: 24px;
+    background-repeat: no-repeat;
+    background-image: url('../images/hourglass.png');
+}
+
+.main-icon-pause {
+    width: 28px;
+    height: 28px;
+    background-repeat: no-repeat;
+    background-image: url('../images/pause.png');
+}
+
+.main-icon-settings {
+    width: 28px;
+    height: 28px;
+    background-repeat: no-repeat;
+    background-image: url('../images/settings.png');
+}
+
+.main-icon-small-close {
+    width: 19px;
+    height: 19px;
+    background-repeat: no-repeat;
+    background-image: url('../images/small-close');
+}
+
+#main-newbackup .main-icon-plus {
+    display: inline-block;
+}
+
+.main-button-add-text {
+    display: inline-block;
+    vertical-align: top;
+    padding-left: 10px;
+    padding-top: 4px;
+}
+
+.progress-area {
+    background-color: #c8d1c5;
+    color: #8f968e;
+    border-radius: 3px;
+    display: block;
+    padding: 6px 12px 6px 12px;    
+    display: block;
+}
+
+.in-progress {
+    color: #ecf0eb;
+    min-height: 23px;
+}
+
+.main-progress-cell {
+    width: 100%;
+}
+
+.progress-area .main-icon-hourglass, .progress-area .main-icon-clock {
+    display: inline-block;
+    margin-right: 8px;
+}
+
+.main-progress-text {
+    display: inline-block;
+    vertical-align: top;
+    padding-top: 4px;
+    white-space: nowrap;
+}
+
+.backup-details {
+    float: left;
+    width: 300px;
+}
+
+.backup-progress {
+    float: left;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    min-width: 250px;
+    white-space: nowrap;
+}