perso/syncthing-arm
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Revamp UI (fixes #185, fixes #147, fixes #136, fixes #124)

Browse Source
This commit is contained in:
Jakob Borg
2014-05-20 19:36:37 +02:00
parent 36bdd9cb4d
commit dd3d8a6c98
14 changed files with 763 additions and 719 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/bootstrap-3.1.1/dist/css/bootstrap-theme.css
Vendored
+92 -92
View File
@@ -54,94 +54,94 @@
border-color: #dbdbdb; border-color: #dbdbdb;
} }
.btn-primary { .btn-primary {
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%); background-image: -webkit-linear-gradient(top, #3498db 0%, #2077b2 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%); background-image: linear-gradient(to bottom, #3498db 0%, #2077b2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff2077b2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #2b669a; border-color: #1e72aa;
} }
.btn-primary:hover, .btn-primary:hover,
.btn-primary:focus { .btn-primary:focus {
background-color: #2d6ca2; background-color: #2077b2;
background-position: 0 -15px; background-position: 0 -15px;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active { .btn-primary.active {
background-color: #2d6ca2; background-color: #2077b2;
border-color: #2b669a; border-color: #1e72aa;
} }
.btn-success { .btn-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%); background-image: -webkit-linear-gradient(top, #2ecc71 0%, #239a55 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%); background-image: linear-gradient(to bottom, #2ecc71 0%, #239a55 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff239a55', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #3e8f3e; border-color: #219251;
} }
.btn-success:hover, .btn-success:hover,
.btn-success:focus { .btn-success:focus {
background-color: #419641; background-color: #239a55;
background-position: 0 -15px; background-position: 0 -15px;
} }
.btn-success:active, .btn-success:active,
.btn-success.active { .btn-success.active {
background-color: #419641; background-color: #239a55;
border-color: #3e8f3e; border-color: #219251;
} }
.btn-info { .btn-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); background-image: -webkit-linear-gradient(top, #9b59b6 0%, #7a4092 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%); background-image: linear-gradient(to bottom, #9b59b6 0%, #7a4092 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff7a4092', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #28a4c9; border-color: #743d8b;
} }
.btn-info:hover, .btn-info:hover,
.btn-info:focus { .btn-info:focus {
background-color: #2aabd2; background-color: #7a4092;
background-position: 0 -15px; background-position: 0 -15px;
} }
.btn-info:active, .btn-info:active,
.btn-info.active { .btn-info.active {
background-color: #2aabd2; background-color: #7a4092;
border-color: #28a4c9; border-color: #743d8b;
} }
.btn-warning { .btn-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); background-image: -webkit-linear-gradient(top, #f1c40f 0%, #b8960b 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%); background-image: linear-gradient(to bottom, #f1c40f 0%, #b8960b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffb8960b', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #e38d13; border-color: #ae8e0a;
} }
.btn-warning:hover, .btn-warning:hover,
.btn-warning:focus { .btn-warning:focus {
background-color: #eb9316; background-color: #b8960b;
background-position: 0 -15px; background-position: 0 -15px;
} }
.btn-warning:active, .btn-warning:active,
.btn-warning.active { .btn-warning.active {
background-color: #eb9316; background-color: #b8960b;
border-color: #e38d13; border-color: #ae8e0a;
} }
.btn-danger { .btn-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%); background-image: -webkit-linear-gradient(top, #e74c3c 0%, #cd2a19 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%); background-image: linear-gradient(to bottom, #e74c3c 0%, #cd2a19 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffcd2a19', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #b92c28; border-color: #c42818;
} }
.btn-danger:hover, .btn-danger:hover,
.btn-danger:focus { .btn-danger:focus {
background-color: #c12e2a; background-color: #cd2a19;
background-position: 0 -15px; background-position: 0 -15px;
} }
.btn-danger:active, .btn-danger:active,
.btn-danger.active { .btn-danger.active {
background-color: #c12e2a; background-color: #cd2a19;
border-color: #b92c28; border-color: #c42818;
} }
.thumbnail, .thumbnail,
.img-thumbnail { .img-thumbnail {
@@ -159,10 +159,10 @@
.dropdown-menu > .active > a, .dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
background-color: #357ebd; background-color: #258cd1;
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -webkit-linear-gradient(top, #3498db 0%, #258cd1 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); background-image: linear-gradient(to bottom, #3498db 0%, #258cd1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff258cd1', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.navbar-default { .navbar-default {
@@ -171,7 +171,7 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x; background-repeat: repeat-x;
border-radius: 4px; border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
} }
@@ -217,32 +217,32 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
} }
.alert-success { .alert-success {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); background-image: -webkit-linear-gradient(top, #2ecc71 0%, #27ad60 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%); background-image: linear-gradient(to bottom, #2ecc71 0%, #27ad60 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff27ad60', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #b2dba1; border-color: #208e4e;
} }
.alert-info { .alert-info {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%); background-image: -webkit-linear-gradient(top, #9b59b6 0%, #8747a2 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%); background-image: linear-gradient(to bottom, #9b59b6 0%, #8747a2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff8747a2', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #9acfea; border-color: #713b87;
} }
.alert-warning { .alert-warning {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); background-image: -webkit-linear-gradient(top, #f1c40f 0%, #cea70c 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%); background-image: linear-gradient(to bottom, #f1c40f 0%, #cea70c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffcea70c', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #f5e79e; border-color: #aa8a0a;
} }
.alert-danger { .alert-danger {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); background-image: -webkit-linear-gradient(top, #e74c3c 0%, #e12e1c 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%); background-image: linear-gradient(to bottom, #e74c3c 0%, #e12e1c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffe12e1c', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #dca7a7; border-color: #bf2718;
} }
.progress { .progress {
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
@@ -251,49 +251,49 @@
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar { .progress-bar {
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%); background-image: -webkit-linear-gradient(top, #3498db 0%, #217dbb 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%); background-image: linear-gradient(to bottom, #3498db 0%, #217dbb 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff217dbb', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar-success { .progress-bar-success {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%); background-image: -webkit-linear-gradient(top, #2ecc71 0%, #25a25a 100%);
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); background-image: linear-gradient(to bottom, #2ecc71 0%, #25a25a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff25a25a', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar-info { .progress-bar-info {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); background-image: -webkit-linear-gradient(top, #9b59b6 0%, #804399 100%);
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%); background-image: linear-gradient(to bottom, #9b59b6 0%, #804399 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff804399', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar-warning { .progress-bar-warning {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); background-image: -webkit-linear-gradient(top, #f1c40f 0%, #c29d0b 100%);
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); background-image: linear-gradient(to bottom, #f1c40f 0%, #c29d0b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffc29d0b', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.progress-bar-danger { .progress-bar-danger {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%); background-image: -webkit-linear-gradient(top, #e74c3c 0%, #d62c1a 100%);
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); background-image: linear-gradient(to bottom, #e74c3c 0%, #d62c1a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffd62c1a', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.list-group { .list-group {
border-radius: 4px; border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
box-shadow: 0 1px 2px rgba(0, 0, 0, .075); box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
} }
.list-group-item.active, .list-group-item.active,
.list-group-item.active:hover, .list-group-item.active:hover,
.list-group-item.active:focus { .list-group-item.active:focus {
text-shadow: 0 -1px 0 #3071a9; text-shadow: 0 -1px 0 #217dbb;
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%); background-image: -webkit-linear-gradient(top, #3498db 0%, #2384c6 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%); background-image: linear-gradient(to bottom, #3498db 0%, #2384c6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff2384c6', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #3278b3; border-color: #2384c6;
} }
.panel { .panel {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
@@ -306,33 +306,33 @@
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-primary > .panel-heading { .panel-primary > .panel-heading {
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); background-image: -webkit-linear-gradient(top, #3498db 0%, #258cd1 100%);
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); background-image: linear-gradient(to bottom, #3498db 0%, #258cd1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3498db', endColorstr='#ff258cd1', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-success > .panel-heading { .panel-success > .panel-heading {
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); background-image: -webkit-linear-gradient(top, #2ecc71 0%, #29b765 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%); background-image: linear-gradient(to bottom, #2ecc71 0%, #29b765 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2ecc71', endColorstr='#ff29b765', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-info > .panel-heading { .panel-info > .panel-heading {
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); background-image: -webkit-linear-gradient(top, #9b59b6 0%, #8f4bab 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%); background-image: linear-gradient(to bottom, #9b59b6 0%, #8f4bab 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9b59b6', endColorstr='#ff8f4bab', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-warning > .panel-heading { .panel-warning > .panel-heading {
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); background-image: -webkit-linear-gradient(top, #f1c40f 0%, #dab10d 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%); background-image: linear-gradient(to bottom, #f1c40f 0%, #dab10d 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1c40f', endColorstr='#ffdab10d', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.panel-danger > .panel-heading { .panel-danger > .panel-heading {
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%); background-image: -webkit-linear-gradient(top, #e74c3c 0%, #e43725 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%); background-image: linear-gradient(to bottom, #e74c3c 0%, #e43725 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe74c3c', endColorstr='#ffe43725', GradientType=0);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.well { .well {
assets/bootstrap-3.1.1/dist/css/bootstrap-theme.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/bootstrap-3.1.1/dist/css/bootstrap.css
Vendored
+405 -405
View File
File diff suppressed because it is too large Load Diff
assets/bootstrap-3.1.1/dist/css/bootstrap.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/bootstrap-3.1.1/dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/bootstrap-3.1.1/docs/assets/js/customize.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/bootstrap-3.1.1/docs/dist/css/bootstrap-theme.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/bootstrap-3.1.1/docs/dist/css/bootstrap.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/bootstrap-3.1.1/docs/dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/bootstrap-3.1.1/less/variables.less
Vendored
+31 -31
View File
@@ -13,11 +13,11 @@
@gray-light: lighten(#000, 60%); // #999 @gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee @gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: #428bca; @brand-primary: #3498db;
@brand-success: #5cb85c; @brand-success: #2ecc71;
@brand-info: #5bc0de; @brand-info: #9b59b6;
@brand-warning: #f0ad4e; @brand-warning: #f1c40f;
@brand-danger: #d9534f; @brand-danger: #e74c3c;
//== Scaffolding //== Scaffolding
@@ -45,7 +45,7 @@
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif; @font-family-base: @font-family-sans-serif;
@font-size-base: 14px; @font-size-base: 16px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@@ -63,7 +63,7 @@
//** By default, this inherits from the `<body>`. //** By default, this inherits from the `<body>`.
@headings-font-family: inherit; @headings-font-family: inherit;
@headings-font-weight: 500; @headings-font-weight: 400;
@headings-line-height: 1.1; @headings-line-height: 1.1;
@headings-color: inherit; @headings-color: inherit;
@@ -95,9 +95,9 @@
@line-height-large: 1.33; @line-height-large: 1.33;
@line-height-small: 1.5; @line-height-small: 1.5;
@border-radius-base: 4px; @border-radius-base: 3px;
@border-radius-large: 6px; @border-radius-large: 3px;
@border-radius-small: 3px; @border-radius-small: 0px;
//** Global color for active items (e.g., navs or dropdowns). //** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff; @component-active-color: #fff;
@@ -117,7 +117,7 @@
//** Padding for `<th>`s and `<td>`s. //** Padding for `<th>`s and `<td>`s.
@table-cell-padding: 8px; @table-cell-padding: 8px;
//** Padding for cells in `.table-condensed`. //** Padding for cells in `.table-condensed`.
@table-condensed-cell-padding: 5px; @table-condensed-cell-padding: 3px;
//** Default background color used for all tables. //** Default background color used for all tables.
@table-bg: transparent; @table-bg: transparent;
@@ -296,7 +296,7 @@
@grid-gutter-width: 30px; @grid-gutter-width: 30px;
// Navbar collapse // Navbar collapse
//** Point at which the navbar becomes uncollapsed. //** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min; @grid-float-breakpoint: @screen-xs-min;
//** Point at which the navbar begins collapsing. //** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
@@ -333,12 +333,12 @@
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px; @navbar-collapse-max-height: 340px;
@navbar-default-color: #777; @navbar-default-color: #555;
@navbar-default-bg: #f8f8f8; @navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links // Navbar links
@navbar-default-link-color: #777; @navbar-default-link-color: #555;
@navbar-default-link-hover-color: #333; @navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent; @navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555; @navbar-default-link-active-color: #555;
@@ -466,20 +466,20 @@
// //
//## Define colors for form feedback states and, by default, alerts. //## Define colors for form feedback states and, by default, alerts.
@state-success-text: #3c763d; @state-success-text: darken(spin(@brand-success, -10), 5%);
@state-success-bg: #dff0d8; @state-success-bg: @brand-success;
@state-success-border: darken(spin(@state-success-bg, -10), 5%); @state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: #31708f; @state-info-text: darken(spin(@brand-info, -10), 5%);
@state-info-bg: #d9edf7; @state-info-bg: @brand-info;
@state-info-border: darken(spin(@state-info-bg, -10), 7%); @state-info-border: darken(spin(@state-info-bg, -10), 5%);
@state-warning-text: #8a6d3b; @state-warning-text: darken(spin(@brand-warning, -10), 5%);
@state-warning-bg: #fcf8e3; @state-warning-bg: @brand-warning;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); @state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: #a94442; @state-danger-text: darken(spin(@brand-danger, -10), 5%);
@state-danger-bg: #f2dede; @state-danger-bg: @brand-danger;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); @state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
@@ -595,19 +595,19 @@
@alert-link-font-weight: bold; @alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg; @alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text; @alert-success-text: #fff;
@alert-success-border: @state-success-border; @alert-success-border: @state-success-border;
@alert-info-bg: @state-info-bg; @alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text; @alert-info-text: #fff;
@alert-info-border: @state-info-border; @alert-info-border: @state-info-border;
@alert-warning-bg: @state-warning-bg; @alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text; @alert-warning-text: #fff;
@alert-warning-border: @state-warning-border; @alert-warning-border: @state-warning-border;
@alert-danger-bg: @state-danger-bg; @alert-danger-bg: @state-danger-bg;
@alert-danger-text: @state-danger-text; @alert-danger-text: #fff;
@alert-danger-border: @state-danger-border; @alert-danger-border: @state-danger-border;
@@ -677,19 +677,19 @@
@panel-primary-border: @brand-primary; @panel-primary-border: @brand-primary;
@panel-primary-heading-bg: @brand-primary; @panel-primary-heading-bg: @brand-primary;
@panel-success-text: @state-success-text; @panel-success-text: #fff;
@panel-success-border: @state-success-border; @panel-success-border: @state-success-border;
@panel-success-heading-bg: @state-success-bg; @panel-success-heading-bg: @state-success-bg;
@panel-info-text: @state-info-text; @panel-info-text: #fff;
@panel-info-border: @state-info-border; @panel-info-border: @state-info-border;
@panel-info-heading-bg: @state-info-bg; @panel-info-heading-bg: @state-info-bg;
@panel-warning-text: @state-warning-text; @panel-warning-text: #fff;
@panel-warning-border: @state-warning-border; @panel-warning-border: @state-warning-border;
@panel-warning-heading-bg: @state-warning-bg; @panel-warning-heading-bg: @state-warning-bg;
@panel-danger-text: @state-danger-text; @panel-danger-text: #fff;
@panel-danger-border: @state-danger-border; @panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg; @panel-danger-heading-bg: @state-danger-bg;
auto/gui.files.go
+3 -3
View File
File diff suppressed because one or more lines are too long
gui/app.js
+45 -13
View File
@@ -128,21 +128,21 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
$scope.repoClass = function (repo) { $scope.repoClass = function (repo) {
if (typeof $scope.model[repo] === 'undefined') { if (typeof $scope.model[repo] === 'undefined') {
return 'text-info'; return 'info';
} }
if ($scope.model[repo].invalid !== '') { if ($scope.model[repo].invalid !== '') {
return 'text-danger'; return 'danger';
} }
var state = '' + $scope.model[repo].state; var state = '' + $scope.model[repo].state;
if (state == 'idle') { if (state == 'idle') {
return 'text-success'; return 'success';
} }
if (state == 'syncing') { if (state == 'syncing') {
return 'text-primary'; return 'primary';
} }
return 'text-info'; return 'info';
} }
$scope.syncPercentage = function (repo) { $scope.syncPercentage = function (repo) {
@@ -154,7 +154,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
} }
var pct = 100 * $scope.model[repo].inSyncBytes / $scope.model[repo].globalBytes; var pct = 100 * $scope.model[repo].inSyncBytes / $scope.model[repo].globalBytes;
return Math.ceil(pct); return Math.floor(pct);
}; };
$scope.nodeStatus = function (nodeCfg) { $scope.nodeStatus = function (nodeCfg) {
@@ -223,6 +223,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
return '?'; return '?';
}; };
$scope.findNode = function (nodeID) {
var matches = $scope.nodes.filter(function (n) { return n.NodeID == nodeID; });
if (matches.length != 1) {
return undefined;
}
return matches[0];
};
$scope.nodeName = function (nodeCfg) { $scope.nodeName = function (nodeCfg) {
if (nodeCfg.Name) { if (nodeCfg.Name) {
return nodeCfg.Name; return nodeCfg.Name;
@@ -231,15 +239,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
}; };
$scope.thisNodeName = function () { $scope.thisNodeName = function () {
var nodes = $scope.thisNode(); var node = $scope.thisNode();
if (typeof nodes === 'undefined' || nodes.length != 1) { if (typeof node === 'undefined') {
return "(unknown node)"; return "(unknown node)";
} }
var nodeCfg = nodes[0]; if (node.Name) {
if (nodeCfg.Name) { return node.Name;
return nodeCfg.Name;
} }
return nodeCfg.NodeID.substr(0, 6); return node.NodeID.substr(0, 6);
}; };
$scope.editSettings = function () { $scope.editSettings = function () {
@@ -260,6 +267,13 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
$scope.configInSync = true; $scope.configInSync = true;
}; };
$scope.shutdown = function () {
$http.post(urlbase + '/shutdown').success(function () {
setTimeout($scope.refresh(), 250);
});
$scope.configInSync = true;
};
$scope.editNode = function (nodeCfg) { $scope.editNode = function (nodeCfg) {
$scope.currentNode = $.extend({}, nodeCfg); $scope.currentNode = $.extend({}, nodeCfg);
$scope.editingExisting = true; $scope.editingExisting = true;
@@ -338,11 +352,17 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
for (i = 0; i < $scope.nodes.length; i++) { for (i = 0; i < $scope.nodes.length; i++) {
n = $scope.nodes[i]; n = $scope.nodes[i];
if (n.NodeID === $scope.myID) { if (n.NodeID === $scope.myID) {
return [n]; return n;
} }
} }
}; };
$scope.allNodes = function () {
var nodes = $scope.otherNodes();
nodes.push($scope.thisNode());
return nodes;
};
$scope.errorList = function () { $scope.errorList = function () {
return $scope.errors.filter(function (e) { return $scope.errors.filter(function (e) {
return e.Time > $scope.seenError; return e.Time > $scope.seenError;
@@ -570,6 +590,18 @@ syncthing.filter('chunkID', function () {
} }
}); });
syncthing.filter('shortPath', function () {
return function (input) {
if (input === undefined)
return "";
var parts = input.split(/[\/\\]/);
if (!parts || parts.length <= 3) {
return input;
}
return ".../" + parts.slice(parts.length-2).join("/");
}
});
syncthing.directive('optionEditor', function () { syncthing.directive('optionEditor', function () {
return { return {
restrict: 'C', restrict: 'C',
gui/bootstrap/css/bootstrap.min.css
Vendored
+7 -1
View File
File diff suppressed because one or more lines are too long
gui/index.html
+173 -167
View File
@@ -16,31 +16,18 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
a.btn {
text-decoration: none;
}
ul+h5 { ul+h5 {
margin-top: 1.5em; margin-top: 1.5em;
} }
.text-monospace { .text-monospace {
font-family: monospace; font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
} }
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td { .table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
border-top: none; border-top: none;
} }
thead tr th {
text-align: center;
}
.logo { .logo {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -48,23 +35,6 @@
position: relative; position: relative;
} }
.progress {
height: 21px;
margin-bottom: inherit;
}
.progress .progress-bar {
line-height: 21px;
font-size: 12px;
}
.collapsed-visible {
display: none;
}
.collapsed .collapsed-visible {
display: inline;
}
.list-no-bullet { .list-no-bullet {
list-style-type: none list-style-type: none
} }
@@ -88,6 +58,14 @@
.ng-cloak { .ng-cloak {
display: none !important; display: none !important;
} }
.table th {
font-weight: 400;
}
.table td {
padding-left: 20px !important;
}
</style> </style>
</head> </head>
@@ -97,8 +75,21 @@
<nav class="navbar navbar-top navbar-default" role="navigation"> <nav class="navbar navbar-top navbar-default" role="navigation">
<div class="container"> <div class="container">
<span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small> | {{thisNodeName()}}</small></span> <span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small class="hidden-xs"> <span class="text-muted">|</span> {{thisNodeName()}}</small></span>
<button type="button" class="btn btn-primary btn-sm pull-right navbar-btn" ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</button> <ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a ng-click="addRepo()"><span class="glyphicon glyphicon-hdd"></span> Add Repository</a></li>
<li><a ng-click="addNode()"><span class="glyphicon glyphicon-globe"></span> Add Node</a></li>
<li class="divider"></li>
<li><a ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
<li class="divider"></li>
<li><a ng-click="shutdown()"><span class="glyphicon glyphicon-off"></span> Shutdown</a></li>
<li><a ng-click="restart()"><span class="glyphicon glyphicon-refresh"></span> Restart</a></li>
</ul>
</li>
</ul>
</div> </div>
</nav> </nav>
@@ -128,144 +119,160 @@
<!-- Repository list (top left) --> <!-- Repository list (top left) -->
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel-group" id="repositories">
<div class="panel-heading"><h3 class="panel-title">Repositories</h3></div> <div class="panel panel-{{repoClass(repo.ID)}}" ng-repeat="repo in repoList()">
<div class="panel-body"> <div class="panel-heading">
<ul class="list-unstyled" ng-repeat="repo in repoList()"> <h3 class="panel-title">
<li> <a data-toggle="collapse" data-parent="#repositories" href="#repo-{{repo.ID}}">
<span class="text-monospace">{{repo.Directory}}</span> <span class="glyphicon glyphicon-hdd"></span> {{repo.Directory | shortPath}}
<span ng-if="model[repo.ID].invalid" class="label label-danger">{{model[repo.ID].invalid}}</span> <span class="pull-right">{{repoStatus(repo.ID)}}</span>
<ul class="list-no-bullet"> </a>
<li> </h3>
<div class="li-column" title="Repository ID"> </div>
<span class="text-muted glyphicon glyphicon-tag"></span> <div id="repo-{{repo.ID}}" class="panel-collapse collapse">
<span class="data">{{repo.ID}}</span> <div class="panel-body">
</div> <div class="table-responsive">
<div class="li-column" title="Repository synchronization status"> <table class="table table-condensed table-striped">
<span class="text-muted glyphicon glyphicon-comment"></span> <tbody>
<span class="data" ng-class="repoClass(repo.ID)">{{repoStatus(repo.ID)}}</span> <tr>
</div> <th><span class="glyphicon glyphicon-tag"></span> Repository ID</th>
</li> <td class="text-right">{{repo.ID}}</td>
<li> </tr>
<div class="li-column" title="Global repository files"> <tr>
<span class="text-muted glyphicon glyphicon-globe"></span> <th><span class="glyphicon glyphicon-folder-open"></span> Folder</th>
<span class="data">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</span> <td class="text-right">{{repo.Directory}}</td>
</div> </tr>
<div class="li-column" title="Local repository files"> <tr>
<span class="text-muted glyphicon glyphicon-home"></span> <th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
<span class="data">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</span> <td class="text-right">{{repoStatus(repo.ID)}}</td>
</div> </tr>
</li> <tr>
<li> <th><span class="glyphicon glyphicon-globe"></span> Global Repository</th>
<div class="li-column" title="Unsynchronized files"> <td class="text-right">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</td>
<span class="text-muted glyphicon glyphicon-cloud-download"></span> </tr>
<span class="data">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</span> <tr>
</div> <th><span class="glyphicon glyphicon-home"></span> Local Repository</th>
<div class="li-column"> <td class="text-right">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</td>
<span class="text-muted glyphicon glyphicon-cog"></span> </tr>
<span class="data"><a href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span> <tr>
</div> <th><span class="glyphicon glyphicon-cloud-download"></span> Out of Sync</th>
</li> <td class="text-right">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</td>
</ul> </tr>
</li> <tr>
</ul> <th><span class="glyphicon glyphicon-lock"></span> Master Repository</th>
<td class="text-right">
<span ng-if="repo.ReadOnly">Yes</span>
<span ng-if="!repo.ReadOnly">No</span>
</td>
</tr>
<tr>
<th><span class="glyphicon glyphicon-globe"></span> Shared With</th>
<td class="text-right">
<span ng-repeat="n in repo.Nodes">
{{nodeName(findNode(n.NodeID))}}<span ng-if="!$last">, </span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
</div> </div>
<div class="panel-footer">
<button type="button" class="pull-right btn btn-sm btn-default" ng-click="addRepo()"><span class="glyphicon glyphicon-plus"></span> Add Repository</button>
<div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Node list (top right) --> <!-- Node list (top right) -->
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel-group" id="nodes">
<div class="panel-heading"><h3 class="panel-title">Nodes</h3></div> <div class="panel panel-default" ng-repeat="nodeCfg in [thisNode()]">
<div class="panel-body"> <div class="panel-heading">
<h3 class="panel-title">
<h5>Peer Nodes</h5> <a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}"><span class="glyphicon glyphicon-home"></span> {{nodeName(nodeCfg)}}</a>
<ul class="list-unstyled" ng-repeat="nodeCfg in otherNodes()"> </h3>
<li> </div>
<span class="text-monospace">{{nodeName(nodeCfg)}}</span> <div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse in">
<ul class="list-no-bullet"> <div class="panel-body">
<li> <div class="table-responsive">
<div class="li-column" title="Node address"> <table class="table table-condensed table-striped">
<span class="text-muted glyphicon glyphicon-link"></span> <tbody>
<span class="data">{{nodeAddr(nodeCfg)}}</span> <tr>
</div> <th><span class="glyphicon glyphicon-th"></span> RAM Utilization</th>
<div class="li-column" title="Node synchronization status"> <td class="text-right">{{system.sys | binary}}B</td>
<span class="text-muted glyphicon glyphicon-comment"></span> </tr>
<span class="data text-{{nodeClass(nodeCfg)}}">{{nodeStatus(nodeCfg)}}</span> <tr>
</div> <th><span class="glyphicon glyphicon-tasks"></span> CPU Utilization</th>
</li> <td class="text-right">{{system.cpuPercent | alwaysNumber | natural:1}}%</td>
<li> </tr>
<div class="li-column" title="Download rate"> <tr>
<span class="text-muted glyphicon glyphicon-cloud-download"></span> <th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
<span class="data">{{connections[nodeCfg.NodeID].inbps | metric}}bps</span> <td class="text-right">{{inbps | metric}}bps</td>
</div> </tr>
<div class="li-column" title="Upload rate"> <tr>
<span class="text-muted glyphicon glyphicon-cloud-upload"></span> <th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
<span class="data">{{connections[nodeCfg.NodeID].outbps | metric}}bps</span> <td class="text-right">{{outbps | metric}}bps </td>
</div> </tr>
</li> <tr ng-if="system.extAnnounceOK != undefined">
<li> <th><span class="glyphicon glyphicon-bullhorn"></span> Announce Server</th>
<div class="li-column" title="Node version"> <td class="text-right">
<span class="text-muted glyphicon glyphicon-tag"></span> <span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
<span class="data">{{nodeVer(nodeCfg)}}</span> <span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
</div> </td>
<div class="li-column"> </tr>
<span class="text-muted glyphicon glyphicon-cog"></span> <tr>
<span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span> <th><span class="glyphicon glyphicon-tag"></span> Version</th>
</div> <td class="text-right">{{version}}</td>
</li> </tr>
</ul> </tbody>
</li> </table>
</ul> </div>
<span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
<h5>This Node</h5> </div>
<ul class="list-unstyled" ng-repeat="nodeCfg in thisNode()"> </div>
<li> </div>
<span class="text-monospace">{{nodeName(nodeCfg)}}</span>&emsp;
<ul class="list-no-bullet"> <div class="panel panel-{{nodeClass(nodeCfg)}}" ng-repeat="nodeCfg in otherNodes()">
<li> <div class="panel-heading">
<div class="li-column" title="Current RAM utilization"> <h3 class="panel-title">
<span class="text-muted glyphicon glyphicon-th"></span> <a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}">
<span class="data">{{system.sys | binary}}B RAM</span> <span class="glyphicon glyphicon-globe"></span>
</div> {{nodeName(nodeCfg)}}
<div class="li-column" title="Current CPU utilization (10 s)"> <span class="pull-right">{{nodeStatus(nodeCfg)}}</span>
<span class="text-muted glyphicon glyphicon-tasks"></span> </a>
<span class="data">{{system.cpuPercent | alwaysNumber | natural:1}}% CPU</span> </h3>
</div> </div>
</li> <div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse">
<li> <div class="panel-body">
<div class="li-column" title="Download rate (total)"> <div class="table-responsive">
<span class="text-muted glyphicon glyphicon-cloud-download"></span> <table class="table table-condensed table-striped">
<span class="data">{{inbps | metric}}bps</span> <tbody>
</div> <tr>
<div class="li-column" title="Upload rate (total)"> <th><span class="glyphicon glyphicon-link"></span> Address</th>
<span class="text-muted glyphicon glyphicon-cloud-upload"></span> <td class="text-right">{{nodeAddr(nodeCfg)}}</td>
<span class="data">{{outbps | metric}}bps</span> </tr>
</div> <tr>
</li> <th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
<li> <td class="text-right">{{nodeStatus(nodeCfg)}}</td>
<div ng-if="system.extAnnounceOK != undefined" class="li-column" title="Global announce server"> </tr>
<span class="text-muted glyphicon glyphicon-bullhorn"></span> <tr>
<span class="data text-success" ng-if="system.extAnnounceOK">Online</span> <th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
<span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span> <td class="text-right">{{connections[nodeCfg.NodeID].inbps | metric}}bps</td>
</div> </tr>
<div class="li-column"> <tr>
<span class="text-muted glyphicon glyphicon-cog"></span> <th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
<span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span> <td class="text-right">{{connections[nodeCfg.NodeID].outbps | metric}}bps </td>
</div> </tr>
</li> <tr>
</ul> <th><span class="glyphicon glyphicon-tag"></span> Version</th>
</li> <td class="text-right">{{nodeVer(nodeCfg)}}</td>
</ul> </tr>
</tbody>
</table>
</div>
<span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
</div> </div>
<div class="panel-footer">
<button type="button" class="pull-right btn btn-sm btn-default" ng-click="addNode()"><span class="glyphicon glyphicon-plus"></span> Add Node</button>
<div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -295,13 +302,12 @@
<nav class="navbar navbar-default navbar-fixed-bottom hidden-xs"> <nav class="navbar navbar-default navbar-fixed-bottom hidden-xs">
<div class="container"> <div class="container">
<p class="navbar-text">{{version}}</p> <ul class="nav navbar-nav">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-link" href="http://discourse.syncthing.net/">Support / Forum</a></li> <li><a class="navbar-link" href="http://discourse.syncthing.net/">Support / Forum</a></li>
<li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li> <li><a class="navbar-link" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
<li><a class="navbar-link" href="http://discourse.syncthing.net/category/documentation">Documentation</a></li> <li><a class="navbar-link" href="http://discourse.syncthing.net/category/documentation">Documentation</a></li>
<li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/issues">Bugs</a></li> <li><a class="navbar-link" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
<li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing">Source Code</a></li> <li><a class="navbar-link" href="https://github.com/calmh/syncthing">Source Code</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>