Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

gui: Improve layout of "out of sync" modal (fixes #3306) 

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3296
This commit is contained in:
Daniel Harte 2016-06-17 06:54:33 +00:00 committed by Jakob Borg
parent 55fc3cb2c5
commit fb778218f5
3 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
gui/dark/assets/css/theme.css
View File

@ -156,10 +156,26 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
/* modal dialogs */
.modal-header {
border-color: #222 !important;
border-bottom-color: #222 !important;
}
.modal-header:not(.alert) {
background-color: #222;
}
.alert-info {
color: #222 !important;
}
.alert-warning {
color: #222 !important;
}
.alert-danger {
color: #222 !important;
background-color: #d62c1a !important;
}
.modal-content {
border-color: #666 !important;
border-width: 2px !important;
@ -171,14 +187,6 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
background-color: #111 !important;
}
.alert-warning {
background-color: #c29d0b !important;
}
.alert-danger {
background-color: #d62c1a !important;
}
.help-block {
color: #aaa !important;
}
@ -230,4 +238,8 @@ code.ng-binding{
.progress-bar-danger {
background-color: #d62c1a !important;
}
}
.progress .frontal {
color: #222;
}

2
gui/default/assets/css/overrides.css
View File

@ -93,7 +93,7 @@ ul+h5 {
}
.table td {
padding-left: 20px !important;
/*padding-left: 20px !important;*/
}
.table td.small-data {

49
gui/default/syncthing/transfer/neededFilesModalView.html
View File

@ -15,33 +15,42 @@
<table class="table table-striped table-condensed">
<tr dir-paginate="f in needed | itemsPerPage: neededPageSize" current-page="neededCurrentPage" total-items="neededTotal" pagination-id="needed">
<!-- Icon -->
<td class="small-data"><span class="fa fa-fw fa-{{needIcons[f.action]}}"></span> {{needActions[f.action]}}</td>
<td class="small-data col-xs-2">
<span class="fa fa-fw fa-{{needIcons[f.action]}}"></span> {{needActions[f.action]}}
</td>
<!-- Name -->
<td ng-if="f.type != 'queued'" tooltip data-original-title="{{f.name}}">{{f.name | basename}}</td>
<td ng-if="f.type == 'queued'">
<a href="" ng-click="bumpFile(neededFolder, f.name)" tooltip data-original-title="{{'Move to top of queue' | translate}}">
<span class="fa fa-eject"></span>
</a>
<span tooltip data-original-title="{{f.name}}">&nbsp;{{f.name | basename}}</span>
<td class="small-data col-xs-6">
<span ng-if="f.type != 'queued'">
<span tooltip data-original-title="{{f.name}}">{{f.name | basename}}</span>
</span>
<span ng-if="f.type == 'queued'">
<a href="" ng-click="bumpFile(neededFolder, f.name)" tooltip data-original-title="{{'Move to top of queue' | translate}}">
<span class="fa fa-eject"></span>
</a>
<span tooltip data-original-title="{{f.name}}">&nbsp;{{f.name | basename}}</span>
</span>
</td>
<!-- Size/Progress -->
<td ng-if="f.type == 'progress' && f.action == 'sync' && progress[neededFolder] && progress[neededFolder][f.name]">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: {{progress[neededFolder][f.name].reused}}%"></div>
<div class="progress-bar" style="width: {{progress[neededFolder][f.name].copiedFromOrigin}}%"></div>
<div class="progress-bar progress-bar-info" style="width: {{progress[neededFolder][f.name].copiedFromElsewhere}}%"></div>
<div class="progress-bar progress-bar-warning" style="width: {{progress[neededFolder][f.name].pulled}}%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: {{progress[neededFolder][f.name].pulling}}%"></div>
<span class="show frontal">
{{progress[neededFolder][f.name].bytesDone | binary}}B / {{progress[neededFolder][f.name].bytesTotal | binary}}B
</span>
<td class="col-xs-4">
<div ng-if="f.type == 'progress' && f.action == 'sync' && progress[neededFolder] && progress[neededFolder][f.name]">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: {{progress[neededFolder][f.name].reused}}%"></div>
<div class="progress-bar" style="width: {{progress[neededFolder][f.name].copiedFromOrigin}}%"></div>
<div class="progress-bar progress-bar-info" style="width: {{progress[neededFolder][f.name].copiedFromElsewhere}}%"></div>
<div class="progress-bar progress-bar-warning" style="width: {{progress[neededFolder][f.name].pulled}}%"></div>
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: {{progress[neededFolder][f.name].pulling}}%"></div>
<span class="show frontal">
{{progress[neededFolder][f.name].bytesDone | binary}}B / {{progress[neededFolder][f.name].bytesTotal | binary}}B
</span>
</div>
</div>
<div ng-if="f.type != 'progress' || f.action != 'sync' || !progress[neededFolder] || !progress[neededFolder][f.name]" class="text-right small-data">
<span ng-if="f.size > 0">{{f.size | binary}}B</span>
</div>
</td>
<td class="text-right small-data" ng-if="f.type != 'progress' || f.action != 'sync' || !progress[neededFolder] || !progress[neededFolder][f.name]">
<span ng-if="f.size > 0">{{f.size | binary}}B</span>
</td>
</tr>