mirror of
https://github.com/octoleo/syncthing.git
synced 2024-12-22 19:08:58 +00:00
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:
parent
55fc3cb2c5
commit
fb778218f5
@ -156,10 +156,26 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
|
|||||||
|
|
||||||
/* modal dialogs */
|
/* modal dialogs */
|
||||||
.modal-header {
|
.modal-header {
|
||||||
border-color: #222 !important;
|
border-bottom-color: #222 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header:not(.alert) {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alert-info {
|
||||||
|
color: #222 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-warning {
|
||||||
|
color: #222 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-danger {
|
||||||
|
color: #222 !important;
|
||||||
|
background-color: #d62c1a !important;
|
||||||
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
border-color: #666 !important;
|
border-color: #666 !important;
|
||||||
border-width: 2px !important;
|
border-width: 2px !important;
|
||||||
@ -171,14 +187,6 @@ li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
|
|||||||
background-color: #111 !important;
|
background-color: #111 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-warning {
|
|
||||||
background-color: #c29d0b !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert-danger {
|
|
||||||
background-color: #d62c1a !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-block {
|
.help-block {
|
||||||
color: #aaa !important;
|
color: #aaa !important;
|
||||||
}
|
}
|
||||||
@ -230,4 +238,8 @@ code.ng-binding{
|
|||||||
|
|
||||||
.progress-bar-danger {
|
.progress-bar-danger {
|
||||||
background-color: #d62c1a !important;
|
background-color: #d62c1a !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.progress .frontal {
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
@ -93,7 +93,7 @@ ul+h5 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.table td {
|
.table td {
|
||||||
padding-left: 20px !important;
|
/*padding-left: 20px !important;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.table td.small-data {
|
.table td.small-data {
|
||||||
|
@ -15,33 +15,42 @@
|
|||||||
<table class="table table-striped table-condensed">
|
<table class="table table-striped table-condensed">
|
||||||
|
|
||||||
<tr dir-paginate="f in needed | itemsPerPage: neededPageSize" current-page="neededCurrentPage" total-items="neededTotal" pagination-id="needed">
|
<tr dir-paginate="f in needed | itemsPerPage: neededPageSize" current-page="neededCurrentPage" total-items="neededTotal" pagination-id="needed">
|
||||||
|
|
||||||
<!-- Icon -->
|
<!-- 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 -->
|
<!-- Name -->
|
||||||
<td ng-if="f.type != 'queued'" tooltip data-original-title="{{f.name}}">{{f.name | basename}}</td>
|
<td class="small-data col-xs-6">
|
||||||
<td ng-if="f.type == 'queued'">
|
<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 tooltip data-original-title="{{f.name}}">{{f.name | basename}}</span>
|
||||||
<span class="fa fa-eject"></span>
|
</span>
|
||||||
</a>
|
<span ng-if="f.type == 'queued'">
|
||||||
<span tooltip data-original-title="{{f.name}}"> {{f.name | basename}}</span>
|
<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}}"> {{f.name | basename}}</span>
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<!-- Size/Progress -->
|
<!-- Size/Progress -->
|
||||||
<td ng-if="f.type == 'progress' && f.action == 'sync' && progress[neededFolder] && progress[neededFolder][f.name]">
|
<td class="col-xs-4">
|
||||||
<div class="progress">
|
<div ng-if="f.type == 'progress' && f.action == 'sync' && progress[neededFolder] && progress[neededFolder][f.name]">
|
||||||
<div class="progress-bar progress-bar-success" style="width: {{progress[neededFolder][f.name].reused}}%"></div>
|
<div class="progress">
|
||||||
<div class="progress-bar" style="width: {{progress[neededFolder][f.name].copiedFromOrigin}}%"></div>
|
<div class="progress-bar progress-bar-success" style="width: {{progress[neededFolder][f.name].reused}}%"></div>
|
||||||
<div class="progress-bar progress-bar-info" style="width: {{progress[neededFolder][f.name].copiedFromElsewhere}}%"></div>
|
<div class="progress-bar" style="width: {{progress[neededFolder][f.name].copiedFromOrigin}}%"></div>
|
||||||
<div class="progress-bar progress-bar-warning" style="width: {{progress[neededFolder][f.name].pulled}}%"></div>
|
<div class="progress-bar progress-bar-info" style="width: {{progress[neededFolder][f.name].copiedFromElsewhere}}%"></div>
|
||||||
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: {{progress[neededFolder][f.name].pulling}}%"></div>
|
<div class="progress-bar progress-bar-warning" style="width: {{progress[neededFolder][f.name].pulled}}%"></div>
|
||||||
<span class="show frontal">
|
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: {{progress[neededFolder][f.name].pulling}}%"></div>
|
||||||
{{progress[neededFolder][f.name].bytesDone | binary}}B / {{progress[neededFolder][f.name].bytesTotal | binary}}B
|
<span class="show frontal">
|
||||||
</span>
|
{{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>
|
</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>
|
</td>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
|
Loading…
Reference in New Issue
Block a user