gui: Update to Font Awesome v5 (#4889)

This commit is contained in:
Ben S 2018-05-24 20:59:32 +02:00 committed by Audrius Butkevicius
parent 07bf24a3b4
commit eb31be0432
59 changed files with 4885 additions and 3146 deletions

View File

@ -10,7 +10,7 @@
<title>Relay stats</title> <title>Relay stats</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/> <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.13/css/all.css"/>
<style> <style>
#map { #map {
@ -58,37 +58,37 @@
<th rowspan="2"> <th rowspan="2">
<a ng-click="sortType = 'stats.numActiveSessions'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.numActiveSessions'; sortReverse = !sortReverse">
Sessions Sessions
<span ng-show="sortType == 'stats.numActiveSessions' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.numActiveSessions' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.numActiveSessions' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.numActiveSessions' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th rowspan="2"> <th rowspan="2">
<a ng-click="sortType = 'stats.numConnections'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.numConnections'; sortReverse = !sortReverse">
Connections Connections
<span ng-show="sortType == 'stats.numConnections' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.numConnections' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.numConnections' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.numConnections' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th rowspan="2"> <th rowspan="2">
<a ng-click="sortType = 'stats.bytesProxied'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.bytesProxied'; sortReverse = !sortReverse">
Data relayed Data relayed
<span ng-show="sortType == 'stats.bytesProxied' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.bytesProxied' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.bytesProxied' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.bytesProxied' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th colspan="6" class="text-center">Transfer rate in the last period</th> <th colspan="6" class="text-center">Transfer rate in the last period</th>
<th rowspan="2"> <th rowspan="2">
<a ng-click="sortType = 'stats.uptimeSeconds'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.uptimeSeconds'; sortReverse = !sortReverse">
Uptime hours Uptime hours
<span ng-show="sortType == 'stats.uptimeSeconds' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.uptimeSeconds' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'status.uptimeSeconds' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'status.uptimeSeconds' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th rowspan="2"> <th rowspan="2">
<a ng-click="sortType = 'stats.options[\'provided-by\'] || \'\''; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.options[\'provided-by\'] || \'\''; sortReverse = !sortReverse">
Provided by Provided by
<span ng-show="sortType == 'stats.options[\'provided-by\'] || \'\'' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.options[\'provided-by\'] || \'\'' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.options[\'provided-by\'] || \'\'' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.options[\'provided-by\'] || \'\'' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
</tr> </tr>
@ -96,43 +96,43 @@
<th> <th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[0]'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[0]'; sortReverse = !sortReverse">
10s 10s
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[0]' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[0]' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[0]' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[0]' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[1]'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[1]'; sortReverse = !sortReverse">
1m 1m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[1]' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[1]' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[1]' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[1]' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[2]'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[2]'; sortReverse = !sortReverse">
5m 5m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[2]' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[2]' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[2]' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[2]' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[3]'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[3]'; sortReverse = !sortReverse">
15m 15m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[3]' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[3]' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[3]' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[3]' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[4]'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[4]'; sortReverse = !sortReverse">
30m 30m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[4]' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[4]' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[4]' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[4]' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[5]'; sortReverse = !sortReverse"> <a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[5]'; sortReverse = !sortReverse">
60m 60m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[5]' && !sortReverse" class="fa fa-caret-down"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[5]' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[5]' && sortReverse" class="fa fa-caret-up"></span> <span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[5]' && sortReverse" class="fas fa-caret-up"></span>
</a> </a>
</th> </th>
</tr> </tr>

View File

@ -19,9 +19,9 @@
<title ng-bind="thisDeviceName() + ' | Syncthing'"></title> <title ng-bind="thisDeviceName() + ' | Syncthing'"></title>
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet"/> <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="vendor/bootstrap/css/daterangepicker.css" rel="stylesheet"/> <link href="vendor/daterangepicker/daterangepicker.css" rel="stylesheet"/>
<link href="assets/font/raleway.css" rel="stylesheet"/> <link href="assets/font/raleway.css" rel="stylesheet"/>
<link href="vendor/font-awesome/css/font-awesome.css" rel="stylesheet"/> <link href="vendor/font-awesome/css/fontawesome-all.css" rel="stylesheet"/>
<link href="assets/css/overrides.css" rel="stylesheet"/> <link href="assets/css/overrides.css" rel="stylesheet"/>
<link href="assets/css/theme.css" rel="stylesheet"/> <link href="assets/css/theme.css" rel="stylesheet"/>
<link href="vendor/fancytree/css/ui.fancytree.css" rel="stylesheet"/> <link href="vendor/fancytree/css/ui.fancytree.css" rel="stylesheet"/>
@ -42,45 +42,45 @@
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li ng-if="upgradeInfo && upgradeInfo.newer" class="upgrade-newer"> <li ng-if="upgradeInfo && upgradeInfo.newer" class="upgrade-newer">
<button type="button" class="btn navbar-btn btn-primary btn-sm" ng-click="upgrade()"> <button type="button" class="btn navbar-btn btn-primary btn-sm" ng-click="upgrade()">
<span class="fa fa-arrow-circle-up"></span> <span class="fas fa-arrow-circle-up"></span>
<span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span> <span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
</button> </button>
</li> </li>
<li ng-if="upgradeInfo && upgradeInfo.majorNewer" class="upgrade-newer-major"> <li ng-if="upgradeInfo && upgradeInfo.majorNewer" class="upgrade-newer-major">
<button type="button" class="btn navbar-btn btn-danger btn-sm" data-toggle="modal" data-target="#majorUpgrade"> <button type="button" class="btn navbar-btn btn-danger btn-sm" data-toggle="modal" data-target="#majorUpgrade">
<span class="fa fa-arrow-circle-up"></span> <span class="fas fa-arrow-circle-up"></span>
<span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span> <span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
</button> </button>
</li> </li>
<li class="dropdown" language-select></li> <li class="dropdown" language-select></li>
<li> <li>
<a class="navbar-link" href="https://docs.syncthing.net/intro/gui.html" target="_blank"> <a class="navbar-link" href="https://docs.syncthing.net/intro/gui.html" target="_blank">
<span class="fa fa-question-circle"></span> <span class="fas fa-question-circle"></span>
<span class="hidden-xs" translate>Help</span> <span class="hidden-xs" translate>Help</span>
</a> </a>
</li> </li>
<li class="dropdown action-menu"> <li class="dropdown action-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-cog"></span> <span class="fas fa-cog"></span>
<span class="hidden-xs" translate>Actions</span> <span class="hidden-xs" translate>Actions</span>
<span class="caret"></span> <span class="caret"></span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li> <li><a href="" ng-click="editSettings()"><span class="fas fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li>
<li><a href="" data-toggle="modal" data-target="#idqr" ng-click="currentDevice=thisDevice()"><span class="fa fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li> <li><a href="" data-toggle="modal" data-target="#idqr" ng-click="currentDevice=thisDevice()"><span class="fas fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li>
<li class="divider" aria-hidden="true"></li> <li class="divider" aria-hidden="true"></li>
<li><a href="" ng-click="shutdown()"><span class="fa fa-fw fa-power-off"></span>&nbsp;<span translate>Shutdown</span></a></li> <li><a href="" ng-click="shutdown()"><span class="fas fa-fw fa-power-off"></span>&nbsp;<span translate>Shutdown</span></a></li>
<li><a href="" ng-click="restart()"><span class="fa fa-fw fa-refresh"></span>&nbsp;<span translate>Restart</span></a></li> <li><a href="" ng-click="restart()"><span class="fas fa-fw fa-sync"></span>&nbsp;<span translate>Restart</span></a></li>
<li class="divider" aria-hidden="true"></li> <li class="divider" aria-hidden="true"></li>
<li class="visible-xs"> <li class="visible-xs">
<a href="https://docs.syncthing.net/intro/gui.html" target="_blank"> <a href="https://docs.syncthing.net/intro/gui.html" target="_blank">
<span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span> <span class="fas fa-fw fa-question-circle"></span>&nbsp;<span translate>Help</span>
</a> </a>
</li> </li>
<li><a href="" data-toggle="modal" data-target="#about"><span class="fa fa-fw fa-heart-o"></span>&nbsp;<span translate>About</span></a></li> <li><a href="" data-toggle="modal" data-target="#about"><span class="far fa-fw fa-heart"></span>&nbsp;<span translate>About</span></a></li>
<li class="divider" aria-hidden="true"></li> <li class="divider" aria-hidden="true"></li>
<li><a href="" ng-click="advanced()"><span class="fa fa-fw fa-cogs"></span>&nbsp;<span translate>Advanced</span></a></li> <li><a href="" ng-click="advanced()"><span class="fas fa-fw fa-cogs"></span>&nbsp;<span translate>Advanced</span></a></li>
<li><a href="" ng-click="logging.show()"><span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Logs</span></a></li> <li><a href="" ng-click="logging.show()"><span class="far fa-fw fa-file-alt"></span>&nbsp;<span translate>Logs</span></a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -97,7 +97,7 @@
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
<div class="panel-icon"> <div class="panel-icon">
<span class="fa fa-exclamation-circle"></span> <span class="fas fa-exclamation-circle"></span>
</div> </div>
<span translate>Danger!</span> <span translate>Danger!</span>
</h3> </h3>
@ -111,7 +111,7 @@
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<button type="button" class="btn btn-sm btn-default pull-right" ng-click="editSettings()"> <button type="button" class="btn btn-sm btn-default pull-right" ng-click="editSettings()">
<span class="fa fa-cog"></span>&nbsp;<span translate>Settings</span> <span class="fas fa-cog"></span>&nbsp;<span translate>Settings</span>
</button> </button>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
@ -127,7 +127,7 @@
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
<div class="panel-icon"> <div class="panel-icon">
<span class="fa fa-exclamation-circle"></span> <span class="fas fa-exclamation-circle"></span>
</div> </div>
<span translate>Restart Needed</span> <span translate>Restart Needed</span>
</h3> </h3>
@ -137,7 +137,7 @@
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<button type="button" class="btn btn-sm btn-default pull-right" ng-click="restart()"> <button type="button" class="btn btn-sm btn-default pull-right" ng-click="restart()">
<span class="fa fa-refresh"></span>&nbsp;<span translate>Restart</span> <span class="fas fa-sync"></span>&nbsp;<span translate>Restart</span>
</button> </button>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
@ -167,13 +167,13 @@
<div class="panel-footer clearfix"> <div class="panel-footer clearfix">
<div class="pull-right"> <div class="pull-right">
<button type="button" class="btn btn-sm btn-success" ng-click="addDevice(device, event.data.name)"> <button type="button" class="btn btn-sm btn-success" ng-click="addDevice(device, event.data.name)">
<span class="fa fa-plus"></span>&nbsp;<span translate>Add Device</span> <span class="fas fa-plus"></span>&nbsp;<span translate>Add Device</span>
</button> </button>
<button type="button" class="btn btn-sm btn-danger" ng-click="ignoreRejectedDevice(device)"> <button type="button" class="btn btn-sm btn-danger" ng-click="ignoreRejectedDevice(device)">
<span class="fa fa-times"></span>&nbsp;<span translate>Ignore</span> <span class="fas fa-times"></span>&nbsp;<span translate>Ignore</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="dismissDeviceRejection(device)"> <button type="button" class="btn btn-sm btn-default" ng-click="dismissDeviceRejection(device)">
<span class="fa fa-clock-o"></span>&nbsp;<span translate>Later</span> <span class="far fa-clock"></span>&nbsp;<span translate>Later</span>
</button> </button>
</div> </div>
</div> </div>
@ -189,7 +189,7 @@
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
<div class="panel-icon"> <div class="panel-icon">
<span class="fa fa-folder"></span> <span class="fas fa-folder"></span>
</div> </div>
<span translate ng-if="!folders[event.data.folder]">New Folder</span> <span translate ng-if="!folders[event.data.folder]">New Folder</span>
<span translate ng-if="folders[event.data.folder]">Share Folder</span> <span translate ng-if="folders[event.data.folder]">Share Folder</span>
@ -211,16 +211,16 @@
<div class="panel-footer clearfix"> <div class="panel-footer clearfix">
<div class="pull-right"> <div class="pull-right">
<button type="button" class="btn btn-sm btn-success" ng-click="addFolderAndShare(event.data.folder, event.data.folderLabel, event.data.device)" ng-if="!folders[event.data.folder]"> <button type="button" class="btn btn-sm btn-success" ng-click="addFolderAndShare(event.data.folder, event.data.folderLabel, event.data.device)" ng-if="!folders[event.data.folder]">
<span class="fa fa-check"></span>&nbsp;<span translate>Add</span> <span class="fas fa-check"></span>&nbsp;<span translate>Add</span>
</button> </button>
<button type="button" class="btn btn-sm btn-success" ng-click="shareFolderWithDevice(event.data.folder, event.data.device)" ng-if="folders[event.data.folder]"> <button type="button" class="btn btn-sm btn-success" ng-click="shareFolderWithDevice(event.data.folder, event.data.device)" ng-if="folders[event.data.folder]">
<span class="fa fa-check"></span>&nbsp;<span translate>Share</span> <span class="fas fa-check"></span>&nbsp;<span translate>Share</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="dismissFolderRejection(event.data.folder, event.data.device)"> <button type="button" class="btn btn-sm btn-default" ng-click="dismissFolderRejection(event.data.folder, event.data.device)">
<span class="fa fa-clock-o"></span>&nbsp;<span translate>Later</span> <span class="far fa-clock"></span>&nbsp;<span translate>Later</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="ignoreRejectedFolder(event.data.folder, event.data.device)"> <button type="button" class="btn btn-sm btn-default" ng-click="ignoreRejectedFolder(event.data.folder, event.data.device)">
<span class="fa fa-times"></span>&nbsp;<span translate>Ignore</span> <span class="fas fa-times"></span>&nbsp;<span translate>Ignore</span>
</button> </button>
</div> </div>
</div> </div>
@ -236,7 +236,7 @@
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"> <h3 class="panel-title">
<div class="panel-icon"> <div class="panel-icon">
<span class="fa fa-exclamation-circle"></span> <span class="fas fa-exclamation-circle"></span>
</div> </div>
<span translate>Notice</span> <span translate>Notice</span>
</h3> </h3>
@ -249,7 +249,7 @@
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<button type="button" class="btn btn-sm btn-default pull-right" ng-click="clearErrors()"> <button type="button" class="btn btn-sm btn-default pull-right" ng-click="clearErrors()">
<span class="fa fa-check"></span>&nbsp;<span translate>OK</span> <span class="fas fa-check"></span>&nbsp;<span translate>OK</span>
</button> </button>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
@ -274,7 +274,7 @@
<div class="panel-progress" ng-show="folderStatus(folder) == 'scanning' && scanProgress[folder.id] != undefined" ng-attr-style="width: {{scanPercentage(folder.id)}}%"></div> <div class="panel-progress" ng-show="folderStatus(folder) == 'scanning' && scanProgress[folder.id] != undefined" ng-attr-style="width: {{scanPercentage(folder.id)}}%"></div>
<h4 class="panel-title"> <h4 class="panel-title">
<div class="panel-icon hidden-xs"> <div class="panel-icon hidden-xs">
<span class="fa fa-fw" ng-class="[folder.type == 'sendonly' ? 'fa-lock' : 'fa-folder']"></span> <span ng-class="[folder.type == 'sendonly' ? 'fas fa-fw fa-lock' : 'fas fa-fw fa-folder']"></span>
</div> </div>
<div class="panel-status pull-right text-{{folderClass(folder)}}" ng-switch="folderStatus(folder)"> <div class="panel-status pull-right text-{{folderClass(folder)}}" ng-switch="folderStatus(folder)">
<span ng-switch-when="paused"><span class="hidden-xs" translate>Paused</span><span class="visible-xs">&#9724;</span></span> <span ng-switch-when="paused"><span class="hidden-xs" translate>Paused</span><span class="visible-xs">&#9724;</span></span>
@ -305,106 +305,106 @@
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<tbody> <tbody>
<tr ng-show="folder.label != undefined && folder.label.length > 0"> <tr ng-show="folder.label != undefined && folder.label.length > 0">
<th><span class="fa fa-fw fa-folder-open"></span>&nbsp;<span translate>Folder ID</span></th> <th><span class="fas fa-fw fa-folder-open"></span>&nbsp;<span translate>Folder ID</span></th>
<td class="text-right no-overflow-ellipse">{{folder.id}}</td> <td class="text-right no-overflow-ellipse">{{folder.id}}</td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-folder-open"></span>&nbsp;<span translate>Folder Path</span></th> <th><span class="fas fa-fw fa-folder-open"></span>&nbsp;<span translate>Folder Path</span></th>
<td class="text-right"> <td class="text-right">
<span tooltip data-original-title="{{folder.path}}">{{folder.path}}</span> <span tooltip data-original-title="{{folder.path}}">{{folder.path}}</span>
</td> </td>
</tr> </tr>
<tr ng-if="!folder.paused && (model[folder.id].invalid || model[folder.id].error)"> <tr ng-if="!folder.paused && (model[folder.id].invalid || model[folder.id].error)">
<th><span class="fa fa-fw fa-exclamation-triangle"></span>&nbsp;<span translate>Error</span></th> <th><span class="fas fa-fw fa-exclamation-triangle"></span>&nbsp;<span translate>Error</span></th>
<td class="text-right">{{model[folder.id].invalid || model[folder.id].error}}</td> <td class="text-right">{{model[folder.id].invalid || model[folder.id].error}}</td>
</tr> </tr>
<tr ng-if="!folder.paused"> <tr ng-if="!folder.paused">
<th><span class="fa fa-fw fa-globe"></span>&nbsp;<span translate>Global State</span></th> <th><span class="fas fa-fw fa-globe"></span>&nbsp;<span translate>Global State</span></th>
<td class="text-right"> <td class="text-right">
<span tooltip data-original-title="{{model[folder.id].globalFiles | alwaysNumber | localeNumber}} {{'files' | translate}}, {{model[folder.id].globalDirectories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{model[folder.id].globalBytes | binary}}B"> <span tooltip data-original-title="{{model[folder.id].globalFiles | alwaysNumber | localeNumber}} {{'files' | translate}}, {{model[folder.id].globalDirectories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{model[folder.id].globalBytes | binary}}B">
<span class="fa fa-files-o"></span>&nbsp;{{model[folder.id].globalFiles | alwaysNumber | localeNumber}}&ensp; <span class="far fa-copy"></span>&nbsp;{{model[folder.id].globalFiles | alwaysNumber | localeNumber}}&ensp;
<span class="fa fa-folder-o"></span>&nbsp;{{model[folder.id].globalDirectories | alwaysNumber | localeNumber}}&ensp; <span class="far fa-folder"></span>&nbsp;{{model[folder.id].globalDirectories | alwaysNumber | localeNumber}}&ensp;
<span class="fa fa-hdd-o"></span>&nbsp;~{{model[folder.id].globalBytes | binary}}B <span class="far fa-hdd"></span>&nbsp;~{{model[folder.id].globalBytes | binary}}B
</span> </span>
</td> </td>
</tr> </tr>
<tr ng-if="!folder.paused"> <tr ng-if="!folder.paused">
<th><span class="fa fa-fw fa-home"></span>&nbsp;<span translate>Local State</span></th> <th><span class="fas fa-fw fa-home"></span>&nbsp;<span translate>Local State</span></th>
<td class="text-right"> <td class="text-right">
<span tooltip data-original-title="{{model[folder.id].localFiles | alwaysNumber | localeNumber}} {{'files' | translate}}, {{model[folder.id].localDirectories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{model[folder.id].localBytes | binary}}B"> <span tooltip data-original-title="{{model[folder.id].localFiles | alwaysNumber | localeNumber}} {{'files' | translate}}, {{model[folder.id].localDirectories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{model[folder.id].localBytes | binary}}B">
<span class="fa fa-files-o"></span>&nbsp;{{model[folder.id].localFiles | alwaysNumber | localeNumber}}&ensp; <span class="far fa-copy"></span>&nbsp;{{model[folder.id].localFiles | alwaysNumber | localeNumber}}&ensp;
<span class="fa fa-folder-o"></span>&nbsp;{{model[folder.id].localDirectories | alwaysNumber | localeNumber}}&ensp; <span class="far fa-folder"></span>&nbsp;{{model[folder.id].localDirectories | alwaysNumber | localeNumber}}&ensp;
<span class="fa fa-hdd-o"></span>&nbsp;~{{model[folder.id].localBytes | binary}}B <span class="far fa-hdd"></span>&nbsp;~{{model[folder.id].localBytes | binary}}B
<span ng-if="model[folder.id].ignorePatterns"><br/><i><small translate class="text-muted">Reduced by ignore patterns</small></i></span> <span ng-if="model[folder.id].ignorePatterns"><br/><i><small translate class="text-muted">Reduced by ignore patterns</small></i></span>
</span> </span>
</td> </td>
</tr> </tr>
<tr ng-if="neededItems(folder.id) > 0"> <tr ng-if="neededItems(folder.id) > 0">
<th><span class="fa fa-fw fa-cloud-download"></span>&nbsp;<span translate>Out of Sync Items</span></th> <th><span class="fas fa-fw fa-cloud-download-alt"></span>&nbsp;<span translate>Out of Sync Items</span></th>
<td class="text-right"> <td class="text-right">
<a href="" ng-click="showNeed(folder.id)">{{neededItems(folder.id) | alwaysNumber}} <span translate>items</span>, ~{{model[folder.id].needBytes | binary}}B</a> <a href="" ng-click="showNeed(folder.id)">{{neededItems(folder.id) | alwaysNumber}} <span translate>items</span>, ~{{model[folder.id].needBytes | binary}}B</a>
</td> </td>
</tr> </tr>
<tr ng-if="folderStatus(folder) === 'scanning' && scanRate(folder.id) > 0"> <tr ng-if="folderStatus(folder) === 'scanning' && scanRate(folder.id) > 0">
<th><span class="fa fa-fw fa-hourglass-2"></span>&nbsp;<span translate>Scan Time Remaining</span></th> <th><span class="fas fa-fw fa-hourglass-half"></span>&nbsp;<span translate>Scan Time Remaining</span></th>
<td class="text-right"> <td class="text-right">
<span tooltip data-original-title="{{scanRate(folder.id) | binary}}B/s">~ {{scanRemaining(folder.id)}}</span> <span tooltip data-original-title="{{scanRate(folder.id) | binary}}B/s">~ {{scanRemaining(folder.id)}}</span>
</td> </td>
</tr> </tr>
<tr ng-if="hasFailedFiles(folder.id)"> <tr ng-if="hasFailedFiles(folder.id)">
<th><span class="fa fa-fw fa-exclamation-circle"></span>&nbsp;<span translate>Failed Items</span></th> <th><span class="fas fa-fw fa-exclamation-circle"></span>&nbsp;<span translate>Failed Items</span></th>
<!-- Show the number of failed items as a link to bring up the list. --> <!-- Show the number of failed items as a link to bring up the list. -->
<td class="text-right"> <td class="text-right">
<a href="" ng-click="showFailed(folder.id)">{{model[folder.id].pullErrors | alwaysNumber | localeNumber}}&nbsp;<span translate>items</span></a> <a href="" ng-click="showFailed(folder.id)">{{model[folder.id].pullErrors | alwaysNumber | localeNumber}}&nbsp;<span translate>items</span></a>
</td> </td>
</tr> </tr>
<tr ng-if="folder.type != 'sendreceive'"> <tr ng-if="folder.type != 'sendreceive'">
<th><span class="fa fa-fw fa-lock"></span>&nbsp;<span translate>Folder Type</span></th> <th><span class="fas fa-fw fa-lock"></span>&nbsp;<span translate>Folder Type</span></th>
<td class="text-right"> <td class="text-right">
<span ng-if="folder.type == 'sendonly'" translate>Send Only</span> <span ng-if="folder.type == 'sendonly'" translate>Send Only</span>
</td> </td>
</tr> </tr>
<tr ng-if="folder.ignorePerms"> <tr ng-if="folder.ignorePerms">
<th><span class="fa fa-fw fa-minus-square-o"></span>&nbsp;<span translate>Ignore Permissions</span></th> <th><span class="far fa-fw fa-minus-square"></span>&nbsp;<span translate>Ignore Permissions</span></th>
<td class="text-right"> <td class="text-right">
<span translate>Yes</span> <span translate>Yes</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-refresh"></span>&nbsp;<span translate>Rescans</span></th> <th><span class="fas fa-fw fa-sync"></span>&nbsp;<span translate>Rescans</span></th>
<td class="text-right"> <td class="text-right">
<div ng-if="folder.rescanIntervalS > 0"> <div ng-if="folder.rescanIntervalS > 0">
<span ng-if="!folder.fsWatcherEnabled" tooltip data-original-title="{{'Periodic scanning at given interval and disabled watching for changes' | translate}}"> <span ng-if="!folder.fsWatcherEnabled" tooltip data-original-title="{{'Periodic scanning at given interval and disabled watching for changes' | translate}}">
<span class="fa fa-clock-o"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp; <span class="far fa-clock"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Disabled</span> <span class="fas fa-eye-slash"></span>&nbsp;<span translate>Disabled</span>
</span> </span>
<span ng-if="folder.fsWatcherEnabled && (!model[folder.id].watchError || folder.paused)" tooltip data-original-title="{{'Periodic scanning at given interval and enabled watching for changes' | translate}}"> <span ng-if="folder.fsWatcherEnabled && (!model[folder.id].watchError || folder.paused)" tooltip data-original-title="{{'Periodic scanning at given interval and enabled watching for changes' | translate}}">
<span class="fa fa-clock-o"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp; <span class="far fa-clock"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fa fa-eye"></span>&nbsp;<span translate>Enabled</span> <span class="fas fa-eye"></span>&nbsp;<span translate>Enabled</span>
</span> </span>
<span ng-if="folder.fsWatcherEnabled && !folder.paused && model[folder.id].watchError" tooltip data-original-title="{{'Periodic scanning at given interval and failed setting up watching for changes, retrying every 1m:' | translate}}<br/>{{model[folder.id].watchError}}"> <span ng-if="folder.fsWatcherEnabled && !folder.paused && model[folder.id].watchError" tooltip data-original-title="{{'Periodic scanning at given interval and failed setting up watching for changes, retrying every 1m:' | translate}}<br/>{{model[folder.id].watchError}}">
<span class="fa fa-clock-o"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp; <span class="far fa-clock"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Failed to setup, retrying</span> <span class="fas fa-eye-slash"></span>&nbsp;<span translate>Failed to setup, retrying</span>
</span> </span>
</div> </div>
<div ng-if="folder.rescanIntervalS <= 0"> <div ng-if="folder.rescanIntervalS <= 0">
<span ng-if="!folder.fsWatcherEnabled" tooltip data-original-title="{{'Disabled periodic scanning and disabled watching for changes' | translate}}"> <span ng-if="!folder.fsWatcherEnabled" tooltip data-original-title="{{'Disabled periodic scanning and disabled watching for changes' | translate}}">
<span class="fa fa-clock-o"></span>&nbsp;<span translate>Disabled</span>&ensp; <span class="far fa-clock"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Disabled</span> <span class="fas fa-eye-slash"></span>&nbsp;<span translate>Disabled</span>
</span> </span>
<span ng-if="folder.fsWatcherEnabled && (!model[folder.id].watchError || folder.paused)" tooltip data-original-title="{{'Disabled periodic scanning and enabled watching for changes' | translate}}"> <span ng-if="folder.fsWatcherEnabled && (!model[folder.id].watchError || folder.paused)" tooltip data-original-title="{{'Disabled periodic scanning and enabled watching for changes' | translate}}">
<span class="fa fa-clock-o"></span>&nbsp;<span translate>Disabled</span>&ensp; <span class="far fa-clock"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fa fa-eye"></span>&nbsp;<span translate>Enabled</span> <span class="fas fa-eye"></span>&nbsp;<span translate>Enabled</span>
</span> </span>
<span ng-if="folder.fsWatcherEnabled && !folder.paused && model[folder.id].watchError" tooltip data-original-title="{{'Disabled periodic scanning and failed setting up watching for changes, retrying every 1m:' | translate}}<br/>{{model[folder.id].watchError}}"> <span ng-if="folder.fsWatcherEnabled && !folder.paused && model[folder.id].watchError" tooltip data-original-title="{{'Disabled periodic scanning and failed setting up watching for changes, retrying every 1m:' | translate}}<br/>{{model[folder.id].watchError}}">
<span class="fa fa-clock-o"></span>&nbsp;<span translate>Disabled</span>&ensp; <span class="far fa-clock"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Failed to setup, retrying</span> <span class="fas fa-eye-slash"></span>&nbsp;<span translate>Failed to setup, retrying</span>
</span> </span>
</div> </div>
</td> </td>
</tr> </tr>
<tr ng-if="folder.order != 'random'"> <tr ng-if="folder.order != 'random'">
<th><span class="fa fa-fw fa-sort"></span>&nbsp;<span translate>File Pull Order</span></th> <th><span class="fas fa-fw fa-sort"></span>&nbsp;<span translate>File Pull Order</span></th>
<td class="text-right" ng-switch="folder.order"> <td class="text-right" ng-switch="folder.order">
<span ng-switch-when="random" translate>Random</span> <span ng-switch-when="random" translate>Random</span>
<span ng-switch-when="alphabetic" translate>Alphabetic</span> <span ng-switch-when="alphabetic" translate>Alphabetic</span>
@ -415,7 +415,7 @@
</td> </td>
</tr> </tr>
<tr ng-if="folder.versioning.type"> <tr ng-if="folder.versioning.type">
<th><span class="fa fa-fw fa-files-o"></span>&nbsp;<span translate>File Versioning</span></th> <th><span class="far fa-fw fa-copy"></span>&nbsp;<span translate>File Versioning</span></th>
<td class="text-right" ng-switch="folder.versioning.type"> <td class="text-right" ng-switch="folder.versioning.type">
<span ng-switch-when="trashcan" translate>Trash Can File Versioning</span> <span ng-switch-when="trashcan" translate>Trash Can File Versioning</span>
<span ng-switch-when="staggered" translate>Staggered File Versioning</span> <span ng-switch-when="staggered" translate>Staggered File Versioning</span>
@ -424,18 +424,18 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-share-alt"></span>&nbsp;<span translate>Shared With</span></th> <th><span class="fas fa-fw fa-share-alt"></span>&nbsp;<span translate>Shared With</span></th>
<td class="text-right" ng-attr-title="{{sharesFolder(folder)}}">{{sharesFolder(folder)}}</td> <td class="text-right" ng-attr-title="{{sharesFolder(folder)}}">{{sharesFolder(folder)}}</td>
</tr> </tr>
<tr ng-if="folderStats[folder.id].lastScan"> <tr ng-if="folderStats[folder.id].lastScan">
<th><span class="fa fa-fw fa-clock-o"></span>&nbsp;<span translate>Last Scan</span></th> <th><span class="far fa-fw fa-clock"></span>&nbsp;<span translate>Last Scan</span></th>
<td translate ng-if="folderStats[folder.id].lastScanDays >= 365" class="text-right">Never</td> <td translate ng-if="folderStats[folder.id].lastScanDays >= 365" class="text-right">Never</td>
<td ng-if="folderStats[folder.id].lastScanDays < 365" class="text-right"> <td ng-if="folderStats[folder.id].lastScanDays < 365" class="text-right">
<span>{{folderStats[folder.id].lastScan | date:'yyyy-MM-dd HH:mm:ss'}}</span> <span>{{folderStats[folder.id].lastScan | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</td> </td>
</tr> </tr>
<tr ng-if="folder.type != 'sendonly' && folderStats[folder.id].lastFile && folderStats[folder.id].lastFile.filename"> <tr ng-if="folder.type != 'sendonly' && folderStats[folder.id].lastFile && folderStats[folder.id].lastFile.filename">
<th><span class="fa fa-fw fa-exchange"></span>&nbsp;<span translate>Latest Change</span></th> <th><span class="fas fa-fw fa-exchange-alt"></span>&nbsp;<span translate>Latest Change</span></th>
<td class="text-right"> <td class="text-right">
<span tooltip data-original-title="{{folderStats[folder.id].lastFile.filename}} @ {{folderStats[folder.id].lastFile.at | date:'yyyy-MM-dd HH:mm:ss'}}"> <span tooltip data-original-title="{{folderStats[folder.id].lastFile.filename}} @ {{folderStats[folder.id].lastFile.at | date:'yyyy-MM-dd HH:mm:ss'}}">
<span translate ng-if="!folderStats[folder.id].lastFile.deleted">Updated</span> <span translate ng-if="!folderStats[folder.id].lastFile.deleted">Updated</span>
@ -449,23 +449,23 @@
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<button type="button" class="btn btn-sm btn-danger pull-left" ng-click="override(folder.id)" ng-if="folderStatus(folder) == 'outofsync' && folder.type == 'sendonly'"> <button type="button" class="btn btn-sm btn-danger pull-left" ng-click="override(folder.id)" ng-if="folderStatus(folder) == 'outofsync' && folder.type == 'sendonly'">
<span class="fa fa-arrow-circle-up"></span>&nbsp;<span translate>Override Changes</span> <span class="fas fa-arrow-circle-up"></span>&nbsp;<span translate>Override Changes</span>
</button> </button>
<span class="pull-right"> <span class="pull-right">
<button ng-if="!folder.paused" type="button" class="btn btn-sm btn-default" ng-click="setFolderPause(folder.id, true)"> <button ng-if="!folder.paused" type="button" class="btn btn-sm btn-default" ng-click="setFolderPause(folder.id, true)">
<span class="fa fa-pause"></span>&nbsp;<span translate>Pause</span> <span class="fas fa-pause"></span>&nbsp;<span translate>Pause</span>
</button> </button>
<button ng-if="folder.paused" type="button" class="btn btn-sm btn-default" ng-click="setFolderPause(folder.id, false)"> <button ng-if="folder.paused" type="button" class="btn btn-sm btn-default" ng-click="setFolderPause(folder.id, false)">
<span class="fa fa-play"></span>&nbsp;<span translate>Resume</span> <span class="fas fa-play"></span>&nbsp;<span translate>Resume</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" ng-click="restoreVersions.show(folder.id)" ng-if="folder.versioning.type"> <button type="button" class="btn btn-default btn-sm" ng-click="restoreVersions.show(folder.id)" ng-if="folder.versioning.type">
<span class="fa fa-undo"></span>&nbsp;<span translate>Versions</span> <span class="fas fa-undo"></span>&nbsp;<span translate>Versions</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="rescanFolder(folder.id)" ng-show="['idle', 'stopped', 'unshared', 'outofsync'].indexOf(folderStatus(folder)) > -1"> <button type="button" class="btn btn-sm btn-default" ng-click="rescanFolder(folder.id)" ng-show="['idle', 'stopped', 'unshared', 'outofsync'].indexOf(folderStatus(folder)) > -1">
<span class="fa fa-refresh"></span>&nbsp;<span translate>Rescan</span> <span class="fas fa-sync"></span>&nbsp;<span translate>Rescan</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="editFolder(folder)"> <button type="button" class="btn btn-sm btn-default" ng-click="editFolder(folder)">
<span class="fa fa-pencil"></span>&nbsp;<span translate>Edit</span> <span class="fas fa-pencil-alt"></span>&nbsp;<span translate>Edit</span>
</button> </button>
</span> </span>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -475,16 +475,16 @@
</div> </div>
<span class="pull-right"> <span class="pull-right">
<button type="button" class="btn btn-sm btn-default" ng-click="setAllFoldersPause(true)" ng-if="isAtleastOneFolderPausedStateSetTo(false)"> <button type="button" class="btn btn-sm btn-default" ng-click="setAllFoldersPause(true)" ng-if="isAtleastOneFolderPausedStateSetTo(false)">
<span class="fa fa-pause"></span>&nbsp;<span translate>Pause All</span> <span class="fas fa-pause"></span>&nbsp;<span translate>Pause All</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="setAllFoldersPause(false)" ng-if="isAtleastOneFolderPausedStateSetTo(true)"> <button type="button" class="btn btn-sm btn-default" ng-click="setAllFoldersPause(false)" ng-if="isAtleastOneFolderPausedStateSetTo(true)">
<span class="fa fa-play"></span>&nbsp;<span translate>Resume All</span> <span class="fas fa-play"></span>&nbsp;<span translate>Resume All</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="rescanAllFolders()"> <button type="button" class="btn btn-sm btn-default" ng-click="rescanAllFolders()">
<span class="fa fa-refresh"></span>&nbsp;<span translate>Rescan All</span> <span class="fas fa-sync"></span>&nbsp;<span translate>Rescan All</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="addFolder()"> <button type="button" class="btn btn-sm btn-default" ng-click="addFolder()">
<span class="fa fa-plus"></span>&nbsp;<span translate>Add Folder</span> <span class="fas fa-plus"></span>&nbsp;<span translate>Add Folder</span>
</button> </button>
</span> </span>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -509,7 +509,7 @@
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<tbody> <tbody>
<tr> <tr>
<th><span class="fa fa-fw fa-cloud-download"></span>&nbsp;<span translate>Download Rate</span></th> <th><span class="fas fa-fw fa-cloud-download-alt"></span>&nbsp;<span translate>Download Rate</span></th>
<td class="text-right"> <td class="text-right">
<a href="#" class="toggler" ng-click="toggleUnits()"> <a href="#" class="toggler" ng-click="toggleUnits()">
<span ng-if="!metricRates">{{connectionsTotal.inbps | binary}}B/s</span> <span ng-if="!metricRates">{{connectionsTotal.inbps | binary}}B/s</span>
@ -519,7 +519,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-cloud-upload"></span>&nbsp;<span translate>Upload Rate</span></th> <th><span class="fas fa-fw fa-cloud-upload-alt"></span>&nbsp;<span translate>Upload Rate</span></th>
<td class="text-right"> <td class="text-right">
<a href="#" class="toggler" ng-click="toggleUnits()"> <a href="#" class="toggler" ng-click="toggleUnits()">
<span ng-if="!metricRates">{{connectionsTotal.outbps | binary}}B/s</span> <span ng-if="!metricRates">{{connectionsTotal.outbps | binary}}B/s</span>
@ -529,24 +529,24 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-home"></span>&nbsp;<span translate>Local State (Total)</span></th> <th><span class="fas fa-fw fa-home"></span>&nbsp;<span translate>Local State (Total)</span></th>
<td class="text-right"> <td class="text-right">
<span tooltip data-original-title="{{localStateTotal.files | alwaysNumber | localeNumber}} {{'files' | translate}}, {{ localStateTotal.directories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{ localStateTotal.bytes | binary}}B"> <span tooltip data-original-title="{{localStateTotal.files | alwaysNumber | localeNumber}} {{'files' | translate}}, {{ localStateTotal.directories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{ localStateTotal.bytes | binary}}B">
<span class="fa fa-files-o"></span>&nbsp;{{localStateTotal.files | alwaysNumber | localeNumber}}&ensp; <span class="far fa-copy"></span>&nbsp;{{localStateTotal.files | alwaysNumber | localeNumber}}&ensp;
<span class="fa fa-folder-o"></span>&nbsp;{{localStateTotal.directories| alwaysNumber | localeNumber}}&ensp; <span class="far fa-folder"></span>&nbsp;{{localStateTotal.directories| alwaysNumber | localeNumber}}&ensp;
<span class="fa fa-hdd-o"></span>&nbsp;~{{localStateTotal.bytes | binary}}B <span class="far fa-hdd"></span>&nbsp;~{{localStateTotal.bytes | binary}}B
</td> </td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-th"></span>&nbsp;<span translate>RAM Utilization</span></th> <th><span class="fas fa-fw fa-microchip"></span>&nbsp;<span translate>RAM Utilization</span></th>
<td class="text-right">{{system.sys | binary}}B</td> <td class="text-right">{{system.sys | binary}}B</td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-tachometer"></span>&nbsp;<span translate>CPU Utilization</span></th> <th><span class="fas fa-fw fa-tachometer-alt"></span>&nbsp;<span translate>CPU Utilization</span></th>
<td class="text-right">{{system.cpuPercent | alwaysNumber | localeNumber:2}}%</td> <td class="text-right">{{system.cpuPercent | alwaysNumber | localeNumber:2}}%</td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-sitemap"></span>&nbsp;<span translate>Listeners</span></th> <th><span class="fas fa-fw fa-sitemap"></span>&nbsp;<span translate>Listeners</span></th>
<td class="text-right"> <td class="text-right">
<span ng-if="listenersFailed.length == 0" class="data text-success"> <span ng-if="listenersFailed.length == 0" class="data text-success">
<span>{{listenersTotal}}/{{listenersTotal}}</span> <span>{{listenersTotal}}/{{listenersTotal}}</span>
@ -559,7 +559,7 @@
</td> </td>
</tr> </tr>
<tr ng-if="system.discoveryEnabled"> <tr ng-if="system.discoveryEnabled">
<th><span class="fa fa-fw fa-map-signs"></span>&nbsp;<span translate>Discovery</span></th> <th><span class="fas fa-fw fa-map-signs"></span>&nbsp;<span translate>Discovery</span></th>
<td class="text-right"> <td class="text-right">
<span ng-if="discoveryFailed.length == 0" class="data text-success"> <span ng-if="discoveryFailed.length == 0" class="data text-success">
<span>{{discoveryTotal}}/{{discoveryTotal}}</span> <span>{{discoveryTotal}}/{{discoveryTotal}}</span>
@ -572,11 +572,11 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-clock-o"></span>&nbsp;<span translate>Uptime</span></th> <th><span class="far fa-fw fa-clock"></span>&nbsp;<span translate>Uptime</span></th>
<td class="text-right">{{system.uptime | duration:"m"}}</td> <td class="text-right">{{system.uptime | duration:"m"}}</td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-tag"></span>&nbsp;<span translate>Version</span></th> <th><span class="fas fa-fw fa-tag"></span>&nbsp;<span translate>Version</span></th>
<td class="text-right"> <td class="text-right">
<span tooltip data-original-title="{{versionString()}}">{{versionString()}}</span> <span tooltip data-original-title="{{versionString()}}">{{versionString()}}</span>
</td> </td>
@ -612,7 +612,7 @@
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<tbody> <tbody>
<tr ng-if="connections[deviceCfg.deviceID].connected"> <tr ng-if="connections[deviceCfg.deviceID].connected">
<th><span class="fa fa-fw fa-cloud-download"></span>&nbsp;<span translate>Download Rate</span></th> <th><span class="fas fa-fw fa-cloud-download-alt"></span>&nbsp;<span translate>Download Rate</span></th>
<td class="text-right"> <td class="text-right">
<a href="#" class="toggler" ng-click="toggleUnits()"> <a href="#" class="toggler" ng-click="toggleUnits()">
<span ng-if="!metricRates">{{connections[deviceCfg.deviceID].inbps | binary}}B/s</span> <span ng-if="!metricRates">{{connections[deviceCfg.deviceID].inbps | binary}}B/s</span>
@ -622,7 +622,7 @@
</td> </td>
</tr> </tr>
<tr ng-if="connections[deviceCfg.deviceID].connected"> <tr ng-if="connections[deviceCfg.deviceID].connected">
<th><span class="fa fa-fw fa-cloud-upload"></span>&nbsp;<span translate>Upload Rate</span></th> <th><span class="fas fa-fw fa-cloud-upload-alt"></span>&nbsp;<span translate>Upload Rate</span></th>
<td class="text-right"> <td class="text-right">
<a href="#" class="toggler" ng-click="toggleUnits()"> <a href="#" class="toggler" ng-click="toggleUnits()">
<span ng-if="!metricRates">{{connections[deviceCfg.deviceID].outbps | binary}}B/s</span> <span ng-if="!metricRates">{{connections[deviceCfg.deviceID].outbps | binary}}B/s</span>
@ -632,13 +632,13 @@
</td> </td>
</tr> </tr>
<tr ng-if="deviceStatus(deviceCfg) == 'syncing'"> <tr ng-if="deviceStatus(deviceCfg) == 'syncing'">
<th><span class="fa fa-fw fa-exchange"></span>&nbsp;<span translate>Out of Sync Items</span></th> <th><span class="fas fa-fw fa-exchange-alt"></span>&nbsp;<span translate>Out of Sync Items</span></th>
<td class="text-right"> <td class="text-right">
<a href="" ng-click="showRemoteNeed(deviceCfg)">{{completion[deviceCfg.deviceID]._needItems | alwaysNumber | localeNumber}} <span translate>items</span>, ~{{completion[deviceCfg.deviceID]._needBytes | binary}}B</a> <a href="" ng-click="showRemoteNeed(deviceCfg)">{{completion[deviceCfg.deviceID]._needItems | alwaysNumber | localeNumber}} <span translate>items</span>, ~{{completion[deviceCfg.deviceID]._needBytes | binary}}B</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<th><span class="fa fa-fw fa-link"></span>&nbsp<span translate>Address</span></th> <th><span class="fas fa-fw fa-link"></span>&nbsp<span translate>Address</span></th>
<td ng-if="connections[deviceCfg.deviceID].connected" class="text-right"> <td ng-if="connections[deviceCfg.deviceID].connected" class="text-right">
<span tooltip data-original-title="{{ connections[deviceCfg.deviceID].type.indexOf('Relay') > -1 ? '' : connections[deviceCfg.deviceID].type }}"> <span tooltip data-original-title="{{ connections[deviceCfg.deviceID].type.indexOf('Relay') > -1 ? '' : connections[deviceCfg.deviceID].type }}">
{{deviceAddr(deviceCfg)}} {{deviceAddr(deviceCfg)}}
@ -650,41 +650,41 @@
</td> </td>
</tr> </tr>
<tr ng-if="connections[deviceCfg.deviceID].connected && connections[deviceCfg.deviceID].type.indexOf('Relay') > -1" tooltip data-original-title="Connections via relays might be rate limited by the relay"> <tr ng-if="connections[deviceCfg.deviceID].connected && connections[deviceCfg.deviceID].type.indexOf('Relay') > -1" tooltip data-original-title="Connections via relays might be rate limited by the relay">
<th><span class="fa fa-fw fa-warning text-danger"></span>&nbsp;<span translate>Connection Type</span></th> <th><span class="fas fa-fw fa-exclamation-triangle text-danger"></span>&nbsp;<span translate>Connection Type</span></th>
<td class="text-right">{{connections[deviceCfg.deviceID].type}}</td> <td class="text-right">{{connections[deviceCfg.deviceID].type}}</td>
</tr> </tr>
<tr ng-if="deviceCfg.allowedNetworks"> <tr ng-if="deviceCfg.allowedNetworks">
<th><span class="fa fa-fw fa-filter"></span>&nbsp;<span translate>Allowed Networks</span></th> <th><span class="fas fa-fw fa-filter"></span>&nbsp;<span translate>Allowed Networks</span></th>
<td class="text-right"> <td class="text-right">
<span>{{deviceCfg.allowedNetworks.join(", ")}}</span> <span>{{deviceCfg.allowedNetworks.join(", ")}}</span>
</td> </td>
</tr> </tr>
<tr ng-if="deviceCfg.compression != 'metadata'"> <tr ng-if="deviceCfg.compression != 'metadata'">
<th><span class="fa fa-fw fa-compress"></span>&nbsp;<span translate>Compression</span></th> <th><span class="fas fa-fw fa-compress"></span>&nbsp;<span translate>Compression</span></th>
<td class="text-right"> <td class="text-right">
<span ng-if="deviceCfg.compression == 'always'" translate>All Data</span> <span ng-if="deviceCfg.compression == 'always'" translate>All Data</span>
<span ng-if="deviceCfg.compression == 'never'" translate>Off</span> <span ng-if="deviceCfg.compression == 'never'" translate>Off</span>
</td> </td>
</tr> </tr>
<tr ng-if="deviceCfg.introducer"> <tr ng-if="deviceCfg.introducer">
<th><span class="fa fa-fw fa-thumbs-o-up"></span>&nbsp;<span translate>Introducer</span></th> <th><span class="far fa-fw fa-thumbs-up"></span>&nbsp;<span translate>Introducer</span></th>
<td translate class="text-right">Yes</td> <td translate class="text-right">Yes</td>
</tr> </tr>
<tr ng-if="deviceCfg.introducedBy"> <tr ng-if="deviceCfg.introducedBy">
<th><span class="fa fa-fw fa-meh-o"></span>&nbsp;<span translate>Introduced By</span></th> <th><span class="far fa-fw fa-meh"></span>&nbsp;<span translate>Introduced By</span></th>
<td class="text-right">{{ deviceName(findDevice(deviceCfg.introducedBy)) || deviceCfg.introducedBy.substring(0, 5) }}</td> <td class="text-right">{{ deviceName(findDevice(deviceCfg.introducedBy)) || deviceCfg.introducedBy.substring(0, 5) }}</td>
</tr> </tr>
<tr ng-if="connections[deviceCfg.deviceID].clientVersion"> <tr ng-if="connections[deviceCfg.deviceID].clientVersion">
<th><span class="fa fa-fw fa-tag"></span>&nbsp;<span translate>Version</span></th> <th><span class="fas fa-fw fa-tag"></span>&nbsp;<span translate>Version</span></th>
<td class="text-right">{{connections[deviceCfg.deviceID].clientVersion}}</td> <td class="text-right">{{connections[deviceCfg.deviceID].clientVersion}}</td>
</tr> </tr>
<tr ng-if="!connections[deviceCfg.deviceID].connected"> <tr ng-if="!connections[deviceCfg.deviceID].connected">
<th><span class="fa fa-fw fa-eye"></span>&nbsp;<span translate>Last seen</span></th> <th><span class="fas fa-fw fa-eye"></span>&nbsp;<span translate>Last seen</span></th>
<td translate ng-if="!deviceStats[deviceCfg.deviceID].lastSeenDays || deviceStats[deviceCfg.deviceID].lastSeenDays >= 365" class="text-right">Never</td> <td translate ng-if="!deviceStats[deviceCfg.deviceID].lastSeenDays || deviceStats[deviceCfg.deviceID].lastSeenDays >= 365" class="text-right">Never</td>
<td ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays < 365" class="text-right">{{deviceStats[deviceCfg.deviceID].lastSeen | date:"yyyy-MM-dd HH:mm:ss"}}</td> <td ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays < 365" class="text-right">{{deviceStats[deviceCfg.deviceID].lastSeen | date:"yyyy-MM-dd HH:mm:ss"}}</td>
</tr> </tr>
<tr ng-if="deviceFolders(deviceCfg).length > 0"> <tr ng-if="deviceFolders(deviceCfg).length > 0">
<th><span class="fa fa-fw fa-folder"></span>&nbsp;<span translate>Folders</span></th> <th><span class="fas fa-fw fa-folder"></span>&nbsp;<span translate>Folders</span></th>
<td class="text-right" ng-attr-title="{{deviceFolders(deviceCfg).map(folderLabel).join(', ')}}">{{deviceFolders(deviceCfg).map(folderLabel).join(", ")}}</td> <td class="text-right" ng-attr-title="{{deviceFolders(deviceCfg).map(folderLabel).join(', ')}}">{{deviceFolders(deviceCfg).map(folderLabel).join(", ")}}</td>
</tr> </tr>
</tbody> </tbody>
@ -693,13 +693,13 @@
<div class="panel-footer"> <div class="panel-footer">
<span class="pull-right"> <span class="pull-right">
<button ng-if="!deviceCfg.paused" type="button" class="btn btn-sm btn-default" ng-click="setDevicePause(deviceCfg.deviceID, true)"> <button ng-if="!deviceCfg.paused" type="button" class="btn btn-sm btn-default" ng-click="setDevicePause(deviceCfg.deviceID, true)">
<span class="fa fa-pause"></span>&nbsp;<span translate>Pause</span> <span class="fas fa-pause"></span>&nbsp;<span translate>Pause</span>
</button> </button>
<button ng-if="deviceCfg.paused" type="button" class="btn btn-sm btn-default" ng-click="setDevicePause(deviceCfg.deviceID, false)"> <button ng-if="deviceCfg.paused" type="button" class="btn btn-sm btn-default" ng-click="setDevicePause(deviceCfg.deviceID, false)">
<span class="fa fa-play"></span>&nbsp;<span translate>Resume</span> <span class="fas fa-play"></span>&nbsp;<span translate>Resume</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="editDevice(deviceCfg)"> <button type="button" class="btn btn-sm btn-default" ng-click="editDevice(deviceCfg)">
<span class="fa fa-pencil"></span>&nbsp;<span translate>Edit</span> <span class="fas fa-pencil-alt"></span>&nbsp;<span translate>Edit</span>
</button> </button>
</span> </span>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -710,10 +710,10 @@
<div class="form-group"> <div class="form-group">
<span class="pull-right"> <span class="pull-right">
<button type="button" class="btn btn-sm btn-default" ng-click="globalChanges()"> <button type="button" class="btn btn-sm btn-default" ng-click="globalChanges()">
<span class="fa fa-fw fa-info-circle"></span>&nbsp;<span translate>Recent Changes</span> <span class="fas fa-fw fa-info-circle"></span>&nbsp;<span translate>Recent Changes</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="addDevice()"> <button type="button" class="btn btn-sm btn-default" ng-click="addDevice()">
<span class="fa fa-plus"></span>&nbsp;<span translate>Add Remote Device</span> <span class="fas fa-plus"></span>&nbsp;<span translate>Add Remote Device</span>
</button> </button>
</span> </span>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -728,14 +728,14 @@
<nav class="navbar navbar-default navbar-fixed-bottom"> <nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container"> <div class="container">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li><a class="navbar-link" href="https://syncthing.net/" target="_blank"><span class="fa fa-home"></span>&nbsp;<span translate>Home page</span></a></li> <li><a class="navbar-link" href="https://syncthing.net/" target="_blank"><span class="fas fa-home"></span>&nbsp;<span translate>Home page</span></a></li>
<li><a class="navbar-link" href="https://docs.syncthing.net/" target="_blank"><span class="fa fa-book"></span>&nbsp;<span translate>Documentation</span></a></li> <li><a class="navbar-link" href="https://docs.syncthing.net/" target="_blank"><span class="fas fa-book"></span>&nbsp;<span translate>Documentation</span></a></li>
<li><a class="navbar-link" href="https://forum.syncthing.net" target="_blank"><span class="fa fa-question-circle"></span>&nbsp;<span translate>Support</span></a></li> <li><a class="navbar-link" href="https://forum.syncthing.net" target="_blank"><span class="fas fa-question-circle"></span>&nbsp;<span translate>Support</span></a></li>
<li><a class="navbar-link" href="https://data.syncthing.net/" target="_blank"><span class="fa fa-bar-chart"></span>&nbsp;<span translate>Statistics</span></a></li> <li><a class="navbar-link" href="https://data.syncthing.net/" target="_blank"><span class="fas fa-chart-bar"></span>&nbsp;<span translate>Statistics</span></a></li>
<li><a class="navbar-link" href="https://github.com/syncthing/syncthing/releases" target="_blank"><span class="fa fa-file-text-o"></span>&nbsp;<span translate>Changelog</span></a></li> <li><a class="navbar-link" href="https://github.com/syncthing/syncthing/releases" target="_blank"><span class="far fa-file-alt"></span>&nbsp;<span translate>Changelog</span></a></li>
<li><a class="navbar-link" href="https://github.com/syncthing/syncthing/issues" target="_blank"><span class="fa fa-bug"></span>&nbsp;<span translate>Bugs</span></a></li> <li><a class="navbar-link" href="https://github.com/syncthing/syncthing/issues" target="_blank"><span class="fas fa-bug"></span>&nbsp;<span translate>Bugs</span></a></li>
<li><a class="navbar-link" href="https://github.com/syncthing/syncthing" target="_blank"><span class="fa fa-wrench"></span>&nbsp;<span translate>Source Code</span></a></li> <li><a class="navbar-link" href="https://github.com/syncthing/syncthing" target="_blank"><span class="fas fa-wrench"></span>&nbsp;<span translate>Source Code</span></a></li>
<li><a class="navbar-link" href="https://twitter.com/syncthing" target="_blank"><span class="fa fa-twitter"></span>&nbsp;Twitter</a></li> <li><a class="navbar-link" href="https://twitter.com/syncthing" target="_blank"><span class="fab fa-twitter"></span>&nbsp;Twitter</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
@ -774,7 +774,7 @@
<script type="text/javascript" src="vendor/angular/angular-dirPagination.js"></script> <script type="text/javascript" src="vendor/angular/angular-dirPagination.js"></script>
<script type="text/javascript" src="vendor/moment/moment.js"></script> <script type="text/javascript" src="vendor/moment/moment.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script> <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/daterangepicker.js"></script> <script type="text/javascript" src="vendor/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="vendor/fancytree/jquery.fancytree-all-deps.js"></script> <script type="text/javascript" src="vendor/fancytree/jquery.fancytree-all-deps.js"></script>
<!-- / vendor scripts --> <!-- / vendor scripts -->

View File

@ -11,7 +11,7 @@
<div class="modal-header {{status == 'default' ? '' : 'alert alert-'+status }}"> <div class="modal-header {{status == 'default' ? '' : 'alert alert-'+status }}">
<h4 class="modal-title"> <h4 class="modal-title">
<div ng-if="icon" class="panel-icon"> <div ng-if="icon" class="panel-icon">
<span class="fa fa-{{icon}}"></span> <span class="{{icon}}"></span>
</div> </div>
{{heading}} {{heading}}
</h4> </h4>

View File

@ -1,4 +1,4 @@
<modal id="about" status="info" icon="heart-o" heading="{{'About' | translate}}" large="yes" closeable="yes"> <modal id="about" status="info" icon="far fa-heart" heading="{{'About' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<h1 class="text-center"> <h1 class="text-center">
<img alt="Syncthing" src="assets/img/logo-horizontal.svg" style="vertical-align: -16px" height="100" width="366"/> <img alt="Syncthing" src="assets/img/logo-horizontal.svg" style="vertical-align: -16px" height="100" width="366"/>
@ -40,7 +40,7 @@ Jakob Borg, Audrius Butkevicius, Simon Frei, Alexander Graf, Anderson Mesquita,
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="discovery-failures" status="danger" icon="exclamation-circle" heading="{{'Discovery Failures' | translate}}" large="yes" closeable="yes"> <modal id="discovery-failures" status="danger" icon="fas fa-exclamation-circle" heading="{{'Discovery Failures' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<ul> <ul>
<li ng-repeat="failure in discoveryFailed">{{failure}}</li> <li ng-repeat="failure in discoveryFailed">{{failure}}</li>
@ -15,7 +15,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="httpError" status="danger" icon="exclamation-circle" heading="{{'Connection Error' | translate}}" large="no" closeable="no"> <modal id="httpError" status="danger" icon="fas fa-exclamation-circle" heading="{{'Connection Error' | translate}}" large="no" closeable="no">
<div class="modal-body"> <div class="modal-body">
<p translate> <p translate>
Syncthing seems to be experiencing a problem processing your request. Please refresh the page or restart Syncthing if the problem persists. Syncthing seems to be experiencing a problem processing your request. Please refresh the page or restart Syncthing if the problem persists.

View File

@ -4,7 +4,7 @@ angular.module('syncthing.core')
return { return {
restrict: 'EA', restrict: 'EA',
template: template:
'<a ng-if="visible" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="fa fa-globe"></span><span class="hidden-xs">&nbsp;{{localesNames[currentLocale] || "English"}}</span> <span class="caret"></span></a>'+ '<a ng-if="visible" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="fas fa-globe"></span><span class="hidden-xs">&nbsp;{{localesNames[currentLocale] || "English"}}</span> <span class="caret"></span></a>'+
'<ul ng-if="visible" class="dropdown-menu">'+ '<ul ng-if="visible" class="dropdown-menu">'+
'<li ng-repeat="name in localesNamesInvKeys" ng-class="{active: localesNamesInv[name]==currentLocale}">'+ '<li ng-repeat="name in localesNamesInvKeys" ng-class="{active: localesNamesInv[name]==currentLocale}">'+
'<a href="#" data-ng-click="changeLanguage(localesNamesInv[name])">{{name}}</a>'+ '<a href="#" data-ng-click="changeLanguage(localesNamesInv[name])">{{name}}</a>'+

View File

@ -1,4 +1,4 @@
<modal id="logViewer" icon="book" status="default" heading="{{'Logs' | translate}}" large="yes" closeable="yes"> <modal id="logViewer" status="default" icon="far fa-file-alt" heading="{{'Logs' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#log-viewer-log" translate>Log</a></li> <li class="active"><a data-toggle="tab" href="#log-viewer-log" translate>Log</a></li>
@ -30,7 +30,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="majorUpgrade" status="danger" icon="arrow-circle-up" heading="{{'Major Upgrade' | translate}}" large="no" closeable="yes"> <modal id="majorUpgrade" status="danger" icon="fas fa-arrow-circle-up" heading="{{'Major Upgrade' | translate}}" large="no" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<p> <p>
<span translate>This is a major version upgrade.</span> <span translate>This is a major version upgrade.</span>
@ -11,10 +11,10 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="upgrade()"> <button type="button" class="btn btn-primary btn-sm" ng-click="upgrade()">
<span class="fa fa-check"></span>&nbsp;<span translate>Upgrade</span> <span class="fas fa-check"></span>&nbsp;<span translate>Upgrade</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="networkError" status="danger" icon="exclamation-circle" heading="{{'Connection Error' | translate}}" large="no" closeable="no"> <modal id="networkError" status="danger" icon="fas fa-exclamation-circle" heading="{{'Connection Error' | translate}}" large="no" closeable="no">
<div class="modal-body"> <div class="modal-body">
<p translate> <p translate>
Syncthing seems to be down, or there is a problem with your Internet connection. Retrying&hellip; Syncthing seems to be down, or there is a problem with your Internet connection. Retrying&hellip;

View File

@ -1,13 +1,13 @@
<!-- <!--
<notification id='exampleNotification'> <notification id='exampleNotification'>
<div class="panel panel-warning"> <div class="panel panel-warning">
<div class="panel-heading"><h3 class="panel-title"><span class="fa fa-exclamation-circle"></span><span translate>Notice</span></h3></div> <div class="panel-heading"><h3 class="panel-title"><span class="fas fa-exclamation-circle"></span><span translate>Notice</span></h3></div>
<div class="panel-body"> <div class="panel-body">
<p translate>This is an example notification. ID of the notification should be appended to Options.UnackedNotificationIDs of the config.</p> <p translate>This is an example notification. ID of the notification should be appended to Options.UnackedNotificationIDs of the config.</p>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<button type="button" class="btn btn-sm btn-default pull-right" ng-click="dismissNotification('exampleNotification')"> <button type="button" class="btn btn-sm btn-default pull-right" ng-click="dismissNotification('exampleNotification')">
<span class="fa fa-check"></span>&nbsp;<span translate>OK</span> <span class="fas fa-check"></span>&nbsp;<span translate>OK</span>
</button> </button>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
@ -18,7 +18,7 @@
<notification id="channelNotification"> <notification id="channelNotification">
<div class="panel panel-success"> <div class="panel panel-success">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"><span class="fa fa-flash"></span>&nbsp;<span translate>Automatic upgrades</span></h3> <h3 class="panel-title"><span class="fas fa-bolt"></span>&nbsp;<span translate>Automatic upgrades</span></h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<p translate>Automatic upgrade now offers the choice between stable releases and release candidates.</p> <p translate>Automatic upgrade now offers the choice between stable releases and release candidates.</p>
@ -28,14 +28,14 @@
<span translate>You can read more about the two release channels at the link below.</span> <span translate>You can read more about the two release channels at the link below.</span>
</p> </p>
<p translate>You can change your choice at any time in the Settings dialog.</p> <p translate>You can change your choice at any time in the Settings dialog.</p>
<p><a href="https://docs.syncthing.net/users/releases.html"><span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Learn more</span></a></p> <p><a href="https://docs.syncthing.net/users/releases.html"><span class="fas fa-info-circle"></span>&nbsp;<span translate>Learn more</span></a></p>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<button type="button" class="btn btn-sm btn-default pull-right" ng-click="editSettings(); dismissNotification('channelNotification')"> <button type="button" class="btn btn-sm btn-default pull-right" ng-click="editSettings(); dismissNotification('channelNotification')">
<span class="fa fa-cog"></span>&nbsp;<span translate>Settings</span> <span class="fas fa-cog"></span>&nbsp;<span translate>Settings</span>
</button> </button>
<button type="button" class="btn btn-sm btn-default" ng-click="dismissNotification('channelNotification')"> <button type="button" class="btn btn-sm btn-default" ng-click="dismissNotification('channelNotification')">
<span class="fa fa-check"></span>&nbsp;<span translate>OK</span> <span class="fas fa-check"></span>&nbsp;<span translate>OK</span>
</button> </button>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
@ -45,11 +45,11 @@
<notification id="fsWatcherNotification"> <notification id="fsWatcherNotification">
<div class="panel panel-success"> <div class="panel panel-success">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title"><span class="fa fa-flash"></span>&ensp;<span translate>Watching for Changes</span></h3> <h3 class="panel-title"><span class="fas fa-bolt"></span>&ensp;<span translate>Watching for Changes</span></h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<p translate>Continuously watching for changes is now available within Syncthing. This will detect changes on disk and issue a scan on only the modified paths. The benefits are that changes are propagated quicker and that less full scans are required.</p> <p translate>Continuously watching for changes is now available within Syncthing. This will detect changes on disk and issue a scan on only the modified paths. The benefits are that changes are propagated quicker and that less full scans are required.</p>
<p><a href="https://docs.syncthing.net/users/syncing.html#scanning"><span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Learn more</span></a></p> <p><a href="https://docs.syncthing.net/users/syncing.html#scanning"><span class="fas fa-info-circle"></span>&nbsp;<span translate>Learn more</span></a></p>
<p> <p>
<span translate>Do you want to enable watching for changes for all your folders?</span><br/> <span translate>Do you want to enable watching for changes for all your folders?</span><br/>
<span translate>Additionally the full rescan interval will be increased (times 60, i.e. new default of 1h). You can also configure it manually for every folder later after choosing No.</span> <span translate>Additionally the full rescan interval will be increased (times 60, i.e. new default of 1h). You can also configure it manually for every folder later after choosing No.</span>
@ -59,10 +59,10 @@
<div class="panel-footer clearfix"> <div class="panel-footer clearfix">
<div class="pull-right"> <div class="pull-right">
<button type="button" class="btn btn-primary btn-sm" ng-click="activateAllFsWatchers(); dismissNotification('fsWatcherNotification')"> <button type="button" class="btn btn-primary btn-sm" ng-click="activateAllFsWatchers(); dismissNotification('fsWatcherNotification')">
<span class="fa fa-check"></span>&nbsp;<span translate>Yes</span> <span class="fas fa-check"></span>&nbsp;<span translate>Yes</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" ng-click="dismissNotification('fsWatcherNotification')"> <button type="button" class="btn btn-default btn-sm" ng-click="dismissNotification('fsWatcherNotification')">
<span class="fa fa-times"></span>&nbsp;<span translate>No</span> <span class="fas fa-times"></span>&nbsp;<span translate>No</span>
</button> </button>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>

View File

@ -1,4 +1,4 @@
<modal id="restarting" status="info" icon="refresh" heading="{{'Restarting' | translate}}" large="no" closeable="no"> <modal id="restarting" status="info" icon="fas fa-hourglass-half" heading="{{'Restarting' | translate}}" large="no" closeable="no">
<div class="modal-body"> <div class="modal-body">
<p> <p>
<span translate>Syncthing is restarting.</span> <span translate>Syncthing is restarting.</span>

View File

@ -1,4 +1,4 @@
<modal id="shutdown" status="success" icon="power-off" heading="{{'Shutdown Complete' | translate}}" large="no" closeable="no"> <modal id="shutdown" status="success" icon="fas fa-power-off" heading="{{'Shutdown Complete' | translate}}" large="no" closeable="no">
<div class="modal-body"> <div class="modal-body">
<p translate> <p translate>
Syncthing has been shut down. Syncthing has been shut down.

View File

@ -102,10 +102,10 @@ angular.module('syncthing.core')
'touch': 'Update' 'touch': 'Update'
}; };
$scope.needIcons = { $scope.needIcons = {
'rm': 'trash-o', 'rm': 'far fa-fw fa-trash-alt',
'rmdir': 'trash-o', 'rmdir': 'far fa-fw fa-trash-alt',
'sync': 'arrow-circle-o-down', 'sync': 'far fa-fw arrow-alt-circle-down',
'touch': 'asterisk' 'touch': 'fas fa-fw fa-asterisk'
}; };
$scope.$on(Events.ONLINE, function () { $scope.$on(Events.ONLINE, function () {

View File

@ -1,4 +1,4 @@
<modal id="upgrading" status="info" icon="arrow-circle-up" heading="{{'Upgrading' | translate}}" large="no" closeable="no"> <modal id="upgrading" status="info" icon="fas fa-arrow-circle-up" heading="{{'Upgrading' | translate}}" large="no" closeable="no">
<div class="modal-body"> <div class="modal-body">
<p> <p>
<span translate>Syncthing is upgrading.</span> <span translate>Syncthing is upgrading.</span>

View File

@ -5,8 +5,8 @@
<div id="log" class="col-xs-8"> <div id="log" class="col-xs-8">
<span> <span>
JS: JS:
<span class="dev-error fa fa-exclamation-triangle"> errors <span id="log_error">0</span></span> <span class="dev-error fas fa-exclamation-triangle"> errors <span id="log_error">0</span></span>
<span class="dev-warn fa fa-frown-o"> warn <span id="log_warn">0</span></span> <span class="dev-warn far fa-frown"> warn <span id="log_warn">0</span></span>
</span> </span>
</div> </div>
</div> </div>

View File

@ -1,4 +1,4 @@
<modal id="editDevice" status="default" icon="{{editingExisting ? 'pencil' : 'desktop'}}" heading="{{editingExisting ? 'Edit Device' : 'Add Device' | translate}}" large="yes" closeable="yes"> <modal id="editDevice" status="default" icon="{{editingExisting ? 'fas fa-pencil-alt' : 'fas fa-desktop'}}" heading="{{editingExisting ? 'Edit Device' : 'Add Device' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<form role="form" name="deviceEditor"> <form role="form" name="deviceEditor">
<div class="form-group" ng-class="{'has-error': deviceEditor.deviceID.$invalid && deviceEditor.deviceID.$dirty}" ng-init="loadFormIntoScope(deviceEditor)"> <div class="form-group" ng-class="{'has-error': deviceEditor.deviceID.$invalid && deviceEditor.deviceID.$dirty}" ng-init="loadFormIntoScope(deviceEditor)">
@ -103,20 +103,20 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveDevice()" ng-disabled="deviceEditor.$invalid"> <button type="button" class="btn btn-primary btn-sm" ng-click="saveDevice()" ng-disabled="deviceEditor.$invalid">
<span class="fa fa-check"></span>&nbsp;<span translate>Save</span> <span class="fas fa-check"></span>&nbsp;<span translate>Save</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#idqr" ng-if="editingExisting || deviceEditor.deviceID.$valid"> <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#idqr" ng-if="editingExisting || deviceEditor.deviceID.$valid">
<span class="fa fa-qrcode"></span>&nbsp;<span translate>Show QR</span> <span class="fas fa-qrcode"></span>&nbsp;<span translate>Show QR</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
<div ng-if="editingExisting" class="pull-left"> <div ng-if="editingExisting" class="pull-left">
<button type="button" class="btn btn-warning btn-sm disabled" ng-if="willBeReintroducedBy" tooltip data-original-title="This device will be reintroduced by {{ willBeReintroducedBy }}"> <button type="button" class="btn btn-warning btn-sm disabled" ng-if="willBeReintroducedBy" tooltip data-original-title="This device will be reintroduced by {{ willBeReintroducedBy }}">
<span class="fa fa-minus-circle"></span>&nbsp;<span translate>Remove</span> <span class="fas fa-minus-circle"></span>&nbsp;<span translate>Remove</span>
</button> </button>
<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#remove-device-confirmation" ng-if="!willBeReintroducedBy"> <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#remove-device-confirmation" ng-if="!willBeReintroducedBy">
<span class="fa fa-minus-circle"></span>&nbsp;<span translate>Remove</span> <span class="fas fa-minus-circle"></span>&nbsp;<span translate>Remove</span>
</button> </button>
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
<style> th, td { padding: 6px; } </style> <style> th, td { padding: 6px; } </style>
<modal id="globalChanges" status="default" icon="{{'info-circle'}}" heading="{{'Recent Changes' | translate}}" large="yes" closeable="yes"> <modal id="globalChanges" status="default" icon="fas fa-info-circle" heading="{{'Recent Changes' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table-condensed table-striped table" style="table-layout: auto;"> <table class="table-condensed table-striped table" style="table-layout: auto;">
@ -29,7 +29,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,11 +1,11 @@
<modal id="idqr" status="info" icon="qrcode" heading="{{'Device Identification' | translate}} - {{deviceName(currentDevice)}}" large="yes" closeable="yes"> <modal id="idqr" status="info" icon="fas fa-qrcode" heading="{{'Device Identification' | translate}} - {{deviceName(currentDevice)}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<div class="well well-sm text-monospace text-center" select-on-click>{{currentDevice.deviceID}}</div> <div class="well well-sm text-monospace text-center" select-on-click>{{currentDevice.deviceID}}</div>
<img ng-if="currentDevice.deviceID" class="center-block img-thumbnail" ng-src="qr/?text={{currentDevice.deviceID}}" alt="qr code"/> <img ng-if="currentDevice.deviceID" class="center-block img-thumbnail" ng-src="qr/?text={{currentDevice.deviceID}}" alt="qr code"/>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="remove-device-confirmation" status="warning" icon="exclamation-circle" heading="{{'Remove Device' | translate}}" large="no" closeable="yes"> <modal id="remove-device-confirmation" status="warning" icon="fas fa-question-circle" heading="{{'Remove Device' | translate}}" large="no" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<p ng-model="currentDevice.name" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> <p ng-model="currentDevice.name" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span translate translate-value-name="{{currentDevice.name}}">Are you sure you want to remove device {%name%}?</span> <span translate translate-value-name="{{currentDevice.name}}">Are you sure you want to remove device {%name%}?</span>
@ -6,10 +6,10 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-warning pull-left btn-sm" data-dismiss="modal" ng-click="deleteDevice()"> <button type="button" class="btn btn-warning pull-left btn-sm" data-dismiss="modal" ng-click="deleteDevice()">
<span class="fa fa-minus-circle"></span>&nbsp;<span translate>Yes</span> <span class="fas fa-check"></span>&nbsp;<span translate>Yes</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>No</span> <span class="fas fa-times"></span>&nbsp;<span translate>No</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,11 +1,11 @@
<modal id="editFolder" status="default" icon="{{editingExisting ? 'pencil' : 'folder'}}" heading="{{editingExisting ? 'Edit Folder' : 'Add Folder' | translate}}" large="yes" closeable="yes"> <modal id="editFolder" status="default" icon="{{editingExisting ? 'fas fa-pencil-alt' : 'fas fa-folder'}}" heading="{{editingExisting ? 'Edit Folder' : 'Add Folder' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<form role="form" name="folderEditor"> <form role="form" name="folderEditor">
<ul class="nav nav-tabs" ng-init="loadFormIntoScope(folderEditor)"> <ul class="nav nav-tabs" ng-init="loadFormIntoScope(folderEditor)">
<li class="active"><a data-toggle="tab" href="#folder-general" translate>General</a></li> <li class="active"><a data-toggle="tab" href="#folder-general"><span class="fas fa-cog"></span> <span translate>General</span></a></li>
<li><a data-toggle="tab" href="#folder-versioning" translate>File Versioning</a></li> <li><a data-toggle="tab" href="#folder-versioning"><span class="fas fa-copy"></span> <span translate>File Versioning</span></a></li>
<li><a data-toggle="tab" href="#folder-ignores" translate>Ignore Patterns</a></li> <li><a data-toggle="tab" href="#folder-ignores"><span class="fas fa-filter"></span> <span translate>Ignore Patterns</span></a></li>
<li><a data-toggle="tab" href="#folder-advanced" translate>Advanced</a></li> <li><a data-toggle="tab" href="#folder-advanced"><span class="fas fa-cogs"></span> <span translate>Advanced</span></a></li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div id="folder-general" class="tab-pane in active"> <div id="folder-general" class="tab-pane in active">
@ -57,7 +57,7 @@
</div> </div>
<div id="folder-versioning" class="tab-pane"> <div id="folder-versioning" class="tab-pane">
<div class="form-group"> <div class="form-group">
<label translate>File Versioning</label>&emsp;<a href="https://docs.syncthing.net/users/versioning.html" target="_blank"><span class="fa fa-book"></span>&nbsp;<span translate>Help</span></a> <label translate>File Versioning</label>&emsp;<a href="https://docs.syncthing.net/users/versioning.html" target="_blank"><span class="fas fa-question-circle"></span>&nbsp;<span translate>Help</span></a>
<select class="form-control" ng-model="currentFolder.fileVersioningSelector"> <select class="form-control" ng-model="currentFolder.fileVersioningSelector">
<option value="none" translate>No File Versioning</option> <option value="none" translate>No File Versioning</option>
<option value="trashcan" translate>Trash Can File Versioning</option> <option value="trashcan" translate>Trash Can File Versioning</option>
@ -136,7 +136,7 @@
<div class="row form-group" ng-class="{'has-error': folderEditor.rescanIntervalS.$invalid && folderEditor.rescanIntervalS.$dirty}"> <div class="row form-group" ng-class="{'has-error': folderEditor.rescanIntervalS.$invalid && folderEditor.rescanIntervalS.$dirty}">
<div class="col-md-12"> <div class="col-md-12">
<label translate>Scanning</label> <label translate>Scanning</label>
&nbsp;<a href="https://docs.syncthing.net/users/syncing.html#scanning" target="_blank"><span class="fa fa-book"></span>&nbsp;<span translate>Help</span></a></br> &nbsp;<a href="https://docs.syncthing.net/users/syncing.html#scanning" target="_blank"><span class="fas fa-question-circle"></span>&nbsp;<span translate>Help</span></a></br>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<input type="checkbox" ng-model="currentFolder.fsWatcherEnabled" ng-change="fsWatcherToggled()" tooltip data-original-title="{{'Use notifications from the filesystem to detect changed items.' | translate }}">&nbsp;<span translate>Watch for Changes</span> <input type="checkbox" ng-model="currentFolder.fsWatcherEnabled" ng-change="fsWatcherToggled()" tooltip data-original-title="{{'Use notifications from the filesystem to detect changed items.' | translate }}">&nbsp;<span translate>Watch for Changes</span>
@ -158,7 +158,7 @@
<div class="row"> <div class="row">
<div class="col-md-6 form-group"> <div class="col-md-6 form-group">
<label translate>Folder Type</label> <label translate>Folder Type</label>
&nbsp;<a href="https://docs.syncthing.net/users/foldertypes.html" target="_blank"><span class="fa fa-book"></span>&nbsp;<span translate>Help</span></a> &nbsp;<a href="https://docs.syncthing.net/users/foldertypes.html" target="_blank"><span class="fas fa-question-circle"></span>&nbsp;<span translate>Help</span></a>
<select class="form-control" ng-model="currentFolder.type"> <select class="form-control" ng-model="currentFolder.type">
<option value="sendreceive" translate>Send &amp; Receive</option> <option value="sendreceive" translate>Send &amp; Receive</option>
<option value="sendonly" translate>Send Only</option> <option value="sendonly" translate>Send Only</option>
@ -202,11 +202,9 @@
<label translate>Permissions</label><br/> <label translate>Permissions</label><br/>
<input type="checkbox" ng-model="currentFolder.ignorePerms"/> <span translate>Ignore</span> <input type="checkbox" ng-model="currentFolder.ignorePerms"/> <span translate>Ignore</span>
<p translate class="help-block">File permission bits are ignored when looking for changes. Use on FAT file systems.</p> <p translate class="help-block">File permission bits are ignored when looking for changes. Use on FAT file systems.</p>
</select></div> <p class="col-xs-12 help-block" ng-show="folderEditor.minDiskFree.$invalid">
<p class="col-xs-12 help-block" ng-show="folderEditor.minDiskFree.$invalid"> <span translate>Enter a non-negative number (e.g., "2.35") and select a unit. Percentages are as part of the total disk size.</span>
<span translate>Enter a non-negative number (e.g., "2.35") and select a unit. Percentages are as part of the total disk size.</span> </p>
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -215,13 +213,13 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveFolder()" ng-disabled="folderEditor.$invalid"> <button type="button" class="btn btn-primary btn-sm" ng-click="saveFolder()" ng-disabled="folderEditor.$invalid">
<span class="fa fa-check"></span>&nbsp;<span translate>Save</span> <span class="fas fa-check"></span>&nbsp;<span translate>Save</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
<button type="button" class="btn btn-warning pull-left btn-sm" data-toggle="modal" data-target="#remove-folder-confirmation" ng-if="editingExisting"> <button type="button" class="btn btn-warning pull-left btn-sm" data-toggle="modal" data-target="#remove-folder-confirmation" ng-if="editingExisting">
<span class="fa fa-minus-circle"></span>&nbsp;<span translate>Remove</span> <span class="fas fa-minus-circle"></span>&nbsp;<span translate>Remove</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="remove-folder-confirmation" status="warning" icon="exclamation-circle" heading="{{'Remove Folder' | translate}}" large="no" closeable="yes"> <modal id="remove-folder-confirmation" status="warning" icon="fas fa-question-circle" heading="{{'Remove Folder' | translate}}" large="no" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> <p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span translate translate-value-label="{{currentFolder.label}}">Are you sure you want to remove folder {%label%}?</span> <span translate translate-value-label="{{currentFolder.label}}">Are you sure you want to remove folder {%label%}?</span>
@ -9,10 +9,10 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-warning pull-left btn-sm" data-dismiss="modal" ng-click="deleteFolder(currentFolder.id)"> <button type="button" class="btn btn-warning pull-left btn-sm" data-dismiss="modal" ng-click="deleteFolder(currentFolder.id)">
<span class="fa fa-minus-circle"></span>&nbsp;<span translate>Yes</span> <span class="fas fa-check"></span>&nbsp;<span translate>Yes</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>No</span> <span class="fas fa-times"></span>&nbsp;<span translate>No</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="restore-versions-confirmation" status="warning" icon="exclamation-circle" heading="{{'Restore Versions' | translate}}" large="no" closeable="yes"> <modal id="restore-versions-confirmation" status="warning" icon="fas fa-question-circle" heading="{{'Restore Versions' | translate}}" large="no" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> <p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<span translate-value-count="{{restoreVersions.selectionCount()}}" translate>Are you sure you want to restore {%count%} files?</span> <span translate-value-count="{{restoreVersions.selectionCount()}}" translate>Are you sure you want to restore {%count%} files?</span>
@ -6,10 +6,10 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-warning pull-left btn-sm" data-dismiss="modal" ng-click="restoreVersions.restore()"> <button type="button" class="btn btn-warning pull-left btn-sm" data-dismiss="modal" ng-click="restoreVersions.restore()">
<span class="fa fa-check"></span>&nbsp;<span translate>Yes</span> <span class="fas fa-check"></span>&nbsp;<span translate>Yes</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>No</span> <span class="fas fa-times"></span>&nbsp;<span translate>No</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="restoreVersions" status="default" heading="{{'Restore Versions' | translate}}" large="yes" closeable="yes"> <modal id="restoreVersions" status="default" icon="fas fa-undo" heading="{{'Restore Versions' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<span translate ng-if="!restoreVersions.versions && !restoreVersions.errors">Loading data...</span> <span translate ng-if="!restoreVersions.versions && !restoreVersions.errors">Loading data...</span>
<div ng-if="restoreVersions.versions"> <div ng-if="restoreVersions.versions">
@ -42,10 +42,10 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#restore-versions-confirmation" ng-if="restoreVersions.versions" ng-disabled="restoreVersions.selectionCount() < 1"> <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#restore-versions-confirmation" ng-if="restoreVersions.versions" ng-disabled="restoreVersions.selectionCount() < 1">
<span class="fa fa-check"></span>&nbsp;<span translate>Restore</span> <span class="fas fa-check"></span>&nbsp;<span translate>Restore</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="advanced" status="danger" icon="cog" heading="{{'Advanced Configuration' | translate}}" large="yes" closeable="yes"> <modal id="advanced" status="danger" icon="fas fa-cogs" heading="{{'Advanced Configuration' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<p class="text-danger"> <p class="text-danger">
@ -94,10 +94,10 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveAdvanced()"> <button type="button" class="btn btn-primary btn-sm" ng-click="saveAdvanced()">
<span class="fa fa-check"></span>&nbsp;<span translate>Save</span> <span class="fas fa-check"></span>&nbsp;<span translate>Save</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>

View File

@ -1,4 +1,4 @@
<modal id="settings" status="default" icon="cog" heading="{{'Settings' | translate}}" large="yes" closeable="yes"> <modal id="settings" status="default" icon="fas fa-cog" heading="{{'Settings' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<form role="form" name="settingsEditor"> <form role="form" name="settingsEditor">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
@ -40,7 +40,7 @@
<input type="text" readonly class="text-monospace form-control" value="{{tmpGUI.apiKey || '-'}}"/> <input type="text" readonly class="text-monospace form-control" value="{{tmpGUI.apiKey || '-'}}"/>
<span class="input-group-btn"> <span class="input-group-btn">
<button type="button" class="btn btn-default btn-secondary" ng-click="setAPIKey(tmpGUI)"> <button type="button" class="btn btn-default btn-secondary" ng-click="setAPIKey(tmpGUI)">
<span class="fa fa-repeat"></span>&nbsp;<span translate>Generate</span> <span class="fas fa-redo"></span>&nbsp;<span translate>Generate</span>
</button> </button>
</span> </span>
</div> </div>
@ -67,7 +67,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label translate>Automatic upgrades</label>&emsp;<a href="https://docs.syncthing.net/users/releases.html" target="_blank"><span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span></a> <label translate>Automatic upgrades</label>&emsp;<a href="https://docs.syncthing.net/users/releases.html" target="_blank"><span class="fas fa-question-circle"></span>&nbsp;<span translate>Help</span></a>
<select class="form-control" ng-model="tmpOptions.upgrades" ng-if="upgradeInfo"> <select class="form-control" ng-model="tmpOptions.upgrades" ng-if="upgradeInfo">
<option value="none" translate>No upgrades</option> <option value="none" translate>No upgrades</option>
<option value="stable" translate>Stable releases only</option> <option value="stable" translate>Stable releases only</option>
@ -92,7 +92,7 @@
<div id="settings-gui" class="tab-pane"> <div id="settings-gui" class="tab-pane">
<div class="form-group" ng-class="{'has-error': settingsEditor.Address.$invalid && settingsEditor.Address.$dirty}"> <div class="form-group" ng-class="{'has-error': settingsEditor.Address.$invalid && settingsEditor.Address.$dirty}">
<label translate for="Address">GUI Listen Address</label>&emsp;<a href="https://docs.syncthing.net/users/guilisten.html" target="_blank"><span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span></a> <label translate for="Address">GUI Listen Address</label>&emsp;<a href="https://docs.syncthing.net/users/guilisten.html" target="_blank"><span class="fas fa-question-circle"></span>&nbsp;<span translate>Help</span></a>
<input id="Address" name="Address" class="form-control" type="text" ng-model="tmpGUI.address" ng-pattern="/.*:0*((102[4-9])|(10[3-9][0-9])|(1[1-9][0-9][0-9])|([2-9][0-9][0-9][0-9])|([1-6]\d{4}))$/"/> <input id="Address" name="Address" class="form-control" type="text" ng-model="tmpGUI.address" ng-pattern="/.*:0*((102[4-9])|(10[3-9][0-9])|(1[1-9][0-9][0-9])|([2-9][0-9][0-9][0-9])|([1-6]\d{4}))$/"/>
<p class="help-block" ng-show="settingsEditor.Address.$invalid" translate> <p class="help-block" ng-show="settingsEditor.Address.$invalid" translate>
Enter a non-privileged port number (1024 - 65535). Enter a non-privileged port number (1024 - 65535).
@ -153,7 +153,7 @@
<div id="settings-connections" class="tab-pane"> <div id="settings-connections" class="tab-pane">
<div class="form-group"> <div class="form-group">
<label translate for="ListenAddressesStr">Sync Protocol Listen Addresses</label>&emsp;<a href="https://docs.syncthing.net/users/config.html#listen-addresses" target="_blank"><span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span></a> <label translate for="ListenAddressesStr">Sync Protocol Listen Addresses</label>&emsp;<a href="https://docs.syncthing.net/users/config.html#listen-addresses" target="_blank"><span class="fas fa-question-circle"></span>&nbsp;<span translate>Help</span></a>
<input id="ListenAddressesStr" class="form-control" type="text" ng-model="tmpOptions._listenAddressesStr"/> <input id="ListenAddressesStr" class="form-control" type="text" ng-model="tmpOptions._listenAddressesStr"/>
</div> </div>
<div class="row"> <div class="row">
@ -234,10 +234,10 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveSettings()"> <button type="button" class="btn btn-primary btn-sm" ng-click="saveSettings()">
<span class="fa fa-check"></span>&nbsp;<span translate>Save</span> <span class="fas fa-check"></span>&nbsp;<span translate>Save</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>

View File

@ -1,4 +1,4 @@
<modal id="failed" status="warning" icon="exclamation-circle" heading="{{'Failed Items' | translate}}" large="yes" closeable="yes"> <modal id="failed" status="warning" icon="fas fa-exclamation-circle" heading="{{'Failed Items' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<p> <p>
<span translate>The following items could not be synchronized.</span> <span translate>The following items could not be synchronized.</span>
@ -20,7 +20,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="needed" status="info" icon="cloud-download" heading="{{'Out of Sync Items' | translate}}" large="yes" closeable="yes"> <modal id="needed" status="info" icon="fas fa-cloud-download-alt" heading="{{'Out of Sync Items' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
@ -18,7 +18,7 @@
<!-- Icon --> <!-- Icon -->
<td class="small-data col-xs-2"> <td class="small-data col-xs-2">
<span class="fa fa-fw fa-{{needIcons[f.action]}}"></span> {{needActions[f.action]}} <span class="{{needIcons[f.action]}}"></span> {{needActions[f.action]}}
</td> </td>
<!-- Name --> <!-- Name -->
@ -28,7 +28,7 @@
</span> </span>
<span 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}}"> <a href="" ng-click="bumpFile(neededFolder, f.name)" tooltip data-original-title="{{'Move to top of queue' | translate}}">
<span class="fa fa-eject"></span> <span class="fas fa-eject"></span>
</a> </a>
<span tooltip data-original-title="{{f.name}}">&nbsp;{{f.name | basename}}</span> <span tooltip data-original-title="{{f.name}}">&nbsp;{{f.name | basename}}</span>
</span> </span>
@ -67,7 +67,7 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>

View File

@ -1,4 +1,4 @@
<modal id="remoteNeed" status="info" icon="exchange" heading="{{'Out of Sync Items' | translate}} - {{deviceName(remoteNeedDevice)}}" large="yes" closeable="yes"> <modal id="remoteNeed" status="info" icon="fas fa-exchange-alt" heading="{{'Out of Sync Items' | translate}} - {{deviceName(remoteNeedDevice)}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<div ng-if="sizeOf(remoteNeed) == 0"> <div ng-if="sizeOf(remoteNeed) == 0">
<span translate>Loading data...</span> <span translate>Loading data...</span>

View File

@ -1,4 +1,4 @@
<modal id="ur" status="info" icon="bar-chart" heading="{{'Allow Anonymous Usage Reporting?' | translate}}" large="yes" closeable="no"> <modal id="ur" status="info" icon="fas fa-question-circle" heading="{{'Allow Anonymous Usage Reporting?' | translate}}" large="yes" closeable="no">
<div class="modal-body"> <div class="modal-body">
<div ng-if="config.options.urAccepted > 0 && config.options.urAccepted < system.urVersionMax"> <div ng-if="config.options.urAccepted > 0 && config.options.urAccepted < system.urVersionMax">
<p translate>Anonymous usage report format has changed. Would you like to move to the new format?</p> <p translate>Anonymous usage report format has changed. Would you like to move to the new format?</p>
@ -9,16 +9,16 @@
<p><a href="https://data.syncthing.net/" target="_blank">https://data.syncthing.net/</a></p> <p><a href="https://data.syncthing.net/" target="_blank">https://data.syncthing.net/</a></p>
</div> </div>
<button type="button" class="btn btn-default btn-sm" ng-click="showReportPreview()" ng-show="!reportPreview"> <button type="button" class="btn btn-default btn-sm" ng-click="showReportPreview()" ng-show="!reportPreview">
<span class="fa fa-file-text-o"></span>&nbsp;<span translate>Preview Usage Report</span> <span class="far fa-file-alt"></span>&nbsp;<span translate>Preview Usage Report</span>
</button> </button>
<pre ng-if="reportPreview"><small>{{reportData | json}}</small></pre> <pre ng-if="reportPreview"><small>{{reportData | json}}</small></pre>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-success btn-sm" ng-click="acceptUR()"> <button type="button" class="btn btn-success btn-sm" ng-click="acceptUR()">
<span class="fa fa-check"></span>&nbsp;<span translate>Yes</span> <span class="fas fa-check"></span>&nbsp;<span translate>Yes</span>
</button> </button>
<button type="button" class="btn btn-danger btn-sm" ng-click="declineUR()"> <button type="button" class="btn btn-danger btn-sm" ng-click="declineUR()">
<span class="fa fa-times"></span>&nbsp;<span translate>No</span> <span class="fas fa-times"></span>&nbsp;<span translate>No</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,4 +1,4 @@
<modal id="urPreview" status="success" icon="bar-chart" heading="{{'Anonymous Usage Reporting' | translate}}" large="yes" closeable="yes"> <modal id="urPreview" status="success" icon="fas fa-chart-bar" heading="{{'Anonymous Usage Reporting' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<p translate> <p translate>
The encrypted usage report is sent daily. It is used to track common platforms, folder sizes and app versions. If the reported data set is changed you will be prompted with this dialog again. The encrypted usage report is sent daily. It is used to track common platforms, folder sizes and app versions. If the reported data set is changed you will be prompted with this dialog again.
@ -23,7 +23,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</modal> </modal>

View File

@ -1,269 +0,0 @@
.daterangepicker {
position: absolute;
color: inherit;
background-color: #fff;
border-radius: 4px;
width: 278px;
padding: 4px;
margin-top: 1px;
top: 100px;
left: 20px;
/* Calendars */ }
.daterangepicker:before, .daterangepicker:after {
position: absolute;
display: inline-block;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: ''; }
.daterangepicker:before {
top: -7px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid #ccc; }
.daterangepicker:after {
top: -6px;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent; }
.daterangepicker.opensleft:before {
right: 9px; }
.daterangepicker.opensleft:after {
right: 10px; }
.daterangepicker.openscenter:before {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto; }
.daterangepicker.openscenter:after {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto; }
.daterangepicker.opensright:before {
left: 9px; }
.daterangepicker.opensright:after {
left: 10px; }
.daterangepicker.dropup {
margin-top: -5px; }
.daterangepicker.dropup:before {
top: initial;
bottom: -7px;
border-bottom: initial;
border-top: 7px solid #ccc; }
.daterangepicker.dropup:after {
top: initial;
bottom: -6px;
border-bottom: initial;
border-top: 6px solid #fff; }
.daterangepicker.dropdown-menu {
max-width: none;
z-index: 3001; }
.daterangepicker.single .ranges, .daterangepicker.single .calendar {
float: none; }
.daterangepicker.show-calendar .calendar {
display: block; }
.daterangepicker .calendar {
display: none;
max-width: 270px;
margin: 4px; }
.daterangepicker .calendar.single .calendar-table {
border: none; }
.daterangepicker .calendar th, .daterangepicker .calendar td {
white-space: nowrap;
text-align: center;
min-width: 32px; }
.daterangepicker .calendar-table {
border: 1px solid #fff;
padding: 4px;
border-radius: 4px;
background-color: #fff; }
.daterangepicker table {
width: 100%;
margin: 0; }
.daterangepicker td, .daterangepicker th {
text-align: center;
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
background-color: #eee;
border-color: transparent;
color: inherit; }
.daterangepicker td.week, .daterangepicker th.week {
font-size: 80%;
color: #ccc; }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
background-color: #fff;
border-color: transparent;
color: #999; }
.daterangepicker td.in-range {
background-color: #ebf4f8;
border-color: transparent;
color: #000;
border-radius: 0; }
.daterangepicker td.start-date {
border-radius: 4px 0 0 4px; }
.daterangepicker td.end-date {
border-radius: 0 4px 4px 0; }
.daterangepicker td.start-date.end-date {
border-radius: 4px; }
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #357ebd;
border-color: transparent;
color: #fff; }
.daterangepicker th.month {
width: auto; }
.daterangepicker td.disabled, .daterangepicker option.disabled {
color: #999;
cursor: not-allowed;
text-decoration: line-through; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
font-size: 12px;
padding: 1px;
height: auto;
margin: 0;
cursor: default; }
.daterangepicker select.monthselect {
margin-right: 2%;
width: 56%; }
.daterangepicker select.yearselect {
width: 40%; }
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 50px;
margin-bottom: 0; }
.daterangepicker .input-mini {
border: 1px solid #ccc;
border-radius: 4px;
color: #555;
height: 30px;
line-height: 30px;
display: block;
vertical-align: middle;
margin: 0 0 5px 0;
padding: 0 6px 0 28px;
width: 100%; }
.daterangepicker .input-mini.active {
border: 1px solid #08c;
border-radius: 4px; }
.daterangepicker .daterangepicker_input {
position: relative; }
.daterangepicker .daterangepicker_input i {
position: absolute;
left: 8px;
top: 8px; }
.daterangepicker.rtl .input-mini {
padding-right: 28px;
padding-left: 6px; }
.daterangepicker.rtl .daterangepicker_input i {
left: auto;
right: 8px; }
.daterangepicker .calendar-time {
text-align: center;
margin: 5px auto;
line-height: 30px;
position: relative;
padding-left: 28px; }
.daterangepicker .calendar-time select.disabled {
color: #ccc;
cursor: not-allowed; }
.ranges {
font-size: 11px;
float: none;
margin: 4px;
text-align: left; }
.ranges ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%; }
.ranges li {
font-size: 13px;
background-color: #f5f5f5;
border: 1px solid #f5f5f5;
border-radius: 4px;
color: #08c;
padding: 3px 12px;
margin-bottom: 8px;
cursor: pointer; }
.ranges li:hover {
background-color: #08c;
border: 1px solid #08c;
color: #fff; }
.ranges li.active {
background-color: #08c;
border: 1px solid #08c;
color: #fff; }
/* Larger Screen Styling */
@media (min-width: 564px) {
.daterangepicker {
width: auto; }
.daterangepicker .ranges ul {
width: 160px; }
.daterangepicker.single .ranges ul {
width: 100%; }
.daterangepicker.single .calendar.left {
clear: none; }
.daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
float: left; }
.daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
float: right; }
.daterangepicker.ltr {
direction: ltr;
text-align: left; }
.daterangepicker.ltr .calendar.left {
clear: left;
margin-right: 0; }
.daterangepicker.ltr .calendar.left .calendar-table {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.daterangepicker.ltr .calendar.right {
margin-left: 0; }
.daterangepicker.ltr .calendar.right .calendar-table {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.daterangepicker.ltr .left .daterangepicker_input {
padding-right: 12px; }
.daterangepicker.ltr .calendar.left .calendar-table {
padding-right: 12px; }
.daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
float: left; }
.daterangepicker.rtl {
direction: rtl;
text-align: right; }
.daterangepicker.rtl .calendar.left {
clear: right;
margin-left: 0; }
.daterangepicker.rtl .calendar.left .calendar-table {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.daterangepicker.rtl .calendar.right {
margin-right: 0; }
.daterangepicker.rtl .calendar.right .calendar-table {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.daterangepicker.rtl .left .daterangepicker_input {
padding-left: 12px; }
.daterangepicker.rtl .calendar.left .calendar-table {
padding-left: 12px; }
.daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
text-align: right;
float: right; } }
@media (min-width: 730px) {
.daterangepicker .ranges {
width: auto; }
.daterangepicker.ltr .ranges {
float: left; }
.daterangepicker.rtl .ranges {
float: right; }
.daterangepicker .calendar.left {
clear: none !important; } }

View File

@ -0,0 +1,392 @@
.daterangepicker {
position: absolute;
color: inherit;
background-color: #fff;
border-radius: 4px;
border: 1px solid #ddd;
width: 278px;
max-width: none;
padding: 0;
margin-top: 7px;
top: 100px;
left: 20px;
z-index: 3001;
display: none;
font-family: arial;
font-size: 15px;
line-height: 1em;
}
.daterangepicker:before, .daterangepicker:after {
position: absolute;
display: inline-block;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.daterangepicker:before {
top: -7px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid #ccc;
}
.daterangepicker:after {
top: -6px;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
}
.daterangepicker.opensleft:before {
right: 9px;
}
.daterangepicker.opensleft:after {
right: 10px;
}
.daterangepicker.openscenter:before {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
}
.daterangepicker.openscenter:after {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
}
.daterangepicker.opensright:before {
left: 9px;
}
.daterangepicker.opensright:after {
left: 10px;
}
.daterangepicker.drop-up {
margin-top: -7px;
}
.daterangepicker.drop-up:before {
top: initial;
bottom: -7px;
border-bottom: initial;
border-top: 7px solid #ccc;
}
.daterangepicker.drop-up:after {
top: initial;
bottom: -6px;
border-bottom: initial;
border-top: 6px solid #fff;
}
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .calendar {
float: none;
}
.daterangepicker.single .drp-selected {
display: none;
}
.daterangepicker.show-calendar .calendar {
display: block;
}
.daterangepicker.show-calendar .drp-buttons {
display: block;
}
.daterangepicker.auto-apply .drp-buttons {
display: none;
}
.daterangepicker .calendar {
display: none;
max-width: 270px;
}
.daterangepicker .calendar.left {
padding: 12px 0 12px 8px;
}
.daterangepicker .calendar.right {
padding: 12px 8px;
}
.daterangepicker .calendar.single .calendar-table {
border: none;
}
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
color: #fff;
border: solid black;
border-width: 0 2px 2px 0;
border-radius: 0;
display: inline-block;
padding: 3px;
}
.daterangepicker .calendar-table .next span {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.daterangepicker .calendar-table .prev span {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
white-space: nowrap;
text-align: center;
vertical-align: middle;
min-width: 32px;
width: 32px;
height: 24px;
line-height: 24px;
font-size: 12px;
border-radius: 4px;
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
}
.daterangepicker .calendar-table {
border: 1px solid #fff;
border-radius: 4px;
background-color: #fff;
}
.daterangepicker .calendar-table table {
width: 100%;
margin: 0;
border-spacing: 0;
border-collapse: collapse;
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
background-color: #eee;
border-color: transparent;
color: inherit;
}
.daterangepicker td.week, .daterangepicker th.week {
font-size: 80%;
color: #ccc;
}
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
background-color: #fff;
border-color: transparent;
color: #999;
}
.daterangepicker td.in-range {
background-color: #ebf4f8;
border-color: transparent;
color: #000;
border-radius: 0;
}
.daterangepicker td.start-date {
border-radius: 4px 0 0 4px;
}
.daterangepicker td.end-date {
border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date.end-date {
border-radius: 4px;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #357ebd;
border-color: transparent;
color: #fff;
}
.daterangepicker th.month {
width: auto;
}
.daterangepicker td.disabled, .daterangepicker option.disabled {
color: #999;
cursor: not-allowed;
text-decoration: line-through;
}
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
font-size: 12px;
padding: 1px;
height: auto;
margin: 0;
cursor: default;
}
.daterangepicker select.monthselect {
margin-right: 2%;
width: 56%;
}
.daterangepicker select.yearselect {
width: 40%;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 50px;
margin: 0 auto;
background: #eee;
border: 1px solid #eee;
padding: 2px;
outline: 0;
font-size: 12px;
}
.daterangepicker .calendar-time {
text-align: center;
margin: 4px auto 0 auto;
line-height: 30px;
position: relative;
}
.daterangepicker .calendar-time select.disabled {
color: #ccc;
cursor: not-allowed;
}
.daterangepicker .drp-buttons {
clear: both;
text-align: right;
padding: 8px 12px;
border-top: 1px solid #ddd;
display: none;
line-height: 12px;
vertical-align: middle;
}
.daterangepicker .drp-selected {
display: inline-block;
font-size: 12px;
padding-right: 8px;
}
.daterangepicker .drp-buttons .btn {
margin-left: 8px;
font-size: 12px;
font-weight: bold;
padding: 4px 8px;
}
.daterangepicker.show-ranges .calendar.left {
border-left: 1px solid #ddd;
}
.daterangepicker .ranges {
float: none;
text-align: left;
margin: 0;
}
.daterangepicker.show-calendar .ranges {
margin-top: 12px;
}
.daterangepicker .ranges ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
}
.daterangepicker .ranges li {
font-size: 12px;
padding: 8px 12px;
cursor: pointer;
}
.daterangepicker .ranges li:hover {
background-color: #eee;
}
.daterangepicker .ranges li.active {
background-color: #08c;
color: #fff;
}
/* Larger Screen Styling */
@media (min-width: 564px) {
.daterangepicker {
width: auto; }
.daterangepicker .ranges ul {
width: 160px; }
.daterangepicker.single .ranges ul {
width: 100%; }
.daterangepicker.single .calendar.left {
clear: none; }
.daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
float: left; }
.daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
float: right; }
.daterangepicker.ltr {
direction: ltr;
text-align: left; }
.daterangepicker.ltr .calendar.left {
clear: left;
margin-right: 0; }
.daterangepicker.ltr .calendar.left .calendar-table {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.daterangepicker.ltr .calendar.right {
margin-left: 0; }
.daterangepicker.ltr .calendar.right .calendar-table {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.daterangepicker.ltr .left .daterangepicker_input {
padding-right: 12px; }
.daterangepicker.ltr .calendar.left .calendar-table {
padding-right: 12px; }
.daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
float: left; }
.daterangepicker.rtl {
direction: rtl;
text-align: right; }
.daterangepicker.rtl .calendar.left {
clear: right;
margin-left: 0; }
.daterangepicker.rtl .calendar.left .calendar-table {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.daterangepicker.rtl .calendar.right {
margin-right: 0; }
.daterangepicker.rtl .calendar.right .calendar-table {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.daterangepicker.rtl .left .daterangepicker_input {
padding-left: 12px; }
.daterangepicker.rtl .calendar.left .calendar-table {
padding-left: 12px; }
.daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
text-align: right;
float: right; } }
@media (min-width: 730px) {
.daterangepicker .ranges {
width: auto; }
.daterangepicker.ltr .ranges {
float: left; }
.daterangepicker.rtl .ranges {
float: right; }
.daterangepicker .calendar.left {
clear: none !important; } }

View File

@ -1,16 +1,17 @@
/** /**
* @version: 2.1.25 * @version: 3.0.0
* @author: Dan Grossman http://www.dangrossman.info/ * @author: Dan Grossman http://www.dangrossman.info/
* @copyright: Copyright (c) 2012-2017 Dan Grossman. All rights reserved. * @copyright: Copyright (c) 2012-2018 Dan Grossman. All rights reserved.
* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php * @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
* @website: https://www.daterangepicker.com/ * @website: http://www.daterangepicker.com/
*/ */
// Follow the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js // Following the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
(function (root, factory) { (function (root, factory) {
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
// AMD. Make globaly available as well // AMD. Make globaly available as well
define(['moment', 'jquery'], function (moment, jquery) { define(['moment', 'jquery'], function (moment, jquery) {
return (root.daterangepicker = factory(moment, jquery)); if (!jquery.fn) jquery.fn = {}; // webpack server rendering
return factory(moment, jquery);
}); });
} else if (typeof module === 'object' && module.exports) { } else if (typeof module === 'object' && module.exports) {
// Node / Browserify // Node / Browserify
@ -20,7 +21,8 @@
jQuery = require('jquery'); jQuery = require('jquery');
if (!jQuery.fn) jQuery.fn = {}; if (!jQuery.fn) jQuery.fn = {};
} }
module.exports = factory(require('moment'), jQuery); var moment = (typeof window != 'undefined' && typeof window.moment != 'undefined') ? window.moment : require('moment');
module.exports = factory(moment, jQuery);
} else { } else {
// Browser globals // Browser globals
root.daterangepicker = factory(root.moment, root.jQuery); root.daterangepicker = factory(root.moment, root.jQuery);
@ -35,10 +37,12 @@
this.endDate = moment().endOf('day'); this.endDate = moment().endOf('day');
this.minDate = false; this.minDate = false;
this.maxDate = false; this.maxDate = false;
this.dateLimit = false; this.maxSpan = false;
this.autoApply = false; this.autoApply = false;
this.singleDatePicker = false; this.singleDatePicker = false;
this.showDropdowns = false; this.showDropdowns = false;
this.minYear = moment().subtract(100, 'year').format('YYYY');
this.maxYear = moment().add(100, 'year').format('YYYY');
this.showWeekNumbers = false; this.showWeekNumbers = false;
this.showISOWeekNumbers = false; this.showISOWeekNumbers = false;
this.showCustomRangeLabel = true; this.showCustomRangeLabel = true;
@ -60,8 +64,8 @@
this.drops = 'up'; this.drops = 'up';
this.buttonClasses = 'btn btn-sm'; this.buttonClasses = 'btn btn-sm';
this.applyClass = 'btn-success'; this.applyButtonClasses = 'btn-primary';
this.cancelClass = 'btn-default'; this.cancelButtonClasses = 'btn-default';
this.locale = { this.locale = {
direction: 'ltr', direction: 'ltr',
@ -93,34 +97,21 @@
//html template for the picker UI //html template for the picker UI
if (typeof options.template !== 'string' && !(options.template instanceof $)) if (typeof options.template !== 'string' && !(options.template instanceof $))
options.template = '<div class="daterangepicker dropdown-menu">' + options.template =
'<div class="daterangepicker">' +
'<div class="ranges"></div>' +
'<div class="calendar left">' + '<div class="calendar left">' +
'<div class="daterangepicker_input">' +
'<input class="input-mini form-control" type="text" name="daterangepicker_start" value="" />' +
'<i class="fa fa-calendar glyphicon glyphicon-calendar"></i>' +
'<div class="calendar-time">' +
'<div></div>' +
'<i class="fa fa-clock-o glyphicon glyphicon-time"></i>' +
'</div>' +
'</div>' +
'<div class="calendar-table"></div>' + '<div class="calendar-table"></div>' +
'<div class="calendar-time"></div>' +
'</div>' + '</div>' +
'<div class="calendar right">' + '<div class="calendar right">' +
'<div class="daterangepicker_input">' +
'<input class="input-mini form-control" type="text" name="daterangepicker_end" value="" />' +
'<i class="fa fa-calendar glyphicon glyphicon-calendar"></i>' +
'<div class="calendar-time">' +
'<div></div>' +
'<i class="fa fa-clock-o glyphicon glyphicon-time"></i>' +
'</div>' +
'</div>' +
'<div class="calendar-table"></div>' + '<div class="calendar-table"></div>' +
'<div class="calendar-time"></div>' +
'</div>' + '</div>' +
'<div class="ranges">' + '<div class="drp-buttons">' +
'<div class="range_inputs">' + '<span class="drp-selected"></span>' +
'<button class="applyBtn" disabled="disabled" type="button"></button> ' + '<button class="cancelBtn" type="button"></button>' +
'<button class="cancelBtn" type="button"></button>' + '<button class="applyBtn" disabled="disabled" type="button"></button> ' +
'</div>' +
'</div>' + '</div>' +
'</div>'; '</div>';
@ -202,14 +193,23 @@
if (this.maxDate && this.endDate.isAfter(this.maxDate)) if (this.maxDate && this.endDate.isAfter(this.maxDate))
this.endDate = this.maxDate.clone(); this.endDate = this.maxDate.clone();
if (typeof options.applyClass === 'string') if (typeof options.applyButtonClasses === 'string')
this.applyClass = options.applyClass; this.applyButtonClasses = options.applyButtonClasses;
if (typeof options.cancelClass === 'string') if (typeof options.applyClass === 'string') //backwards compat
this.cancelClass = options.cancelClass; this.applyButtonClasses = options.applyClass;
if (typeof options.dateLimit === 'object') if (typeof options.cancelButtonClasses === 'string')
this.dateLimit = options.dateLimit; this.cancelButtonClasses = options.cancelButtonClasses;
if (typeof options.cancelClass === 'string') //backwards compat
this.cancelButtonClasses = options.cancelClass;
if (typeof options.maxSpan === 'object')
this.maxSpan = options.maxSpan;
if (typeof options.dateLimit === 'object') //backwards compat
this.maxSpan = options.dateLimit;
if (typeof options.opens === 'string') if (typeof options.opens === 'string')
this.opens = options.opens; this.opens = options.opens;
@ -232,6 +232,12 @@
if (typeof options.showDropdowns === 'boolean') if (typeof options.showDropdowns === 'boolean')
this.showDropdowns = options.showDropdowns; this.showDropdowns = options.showDropdowns;
if (typeof options.minYear === 'number')
this.minYear = options.minYear;
if (typeof options.maxYear === 'number')
this.maxYear = options.maxYear;
if (typeof options.showCustomRangeLabel === 'boolean') if (typeof options.showCustomRangeLabel === 'boolean')
this.showCustomRangeLabel = options.showCustomRangeLabel; this.showCustomRangeLabel = options.showCustomRangeLabel;
@ -317,14 +323,14 @@
else else
end = moment(options.ranges[range][1]); end = moment(options.ranges[range][1]);
// If the start or end date exceed those allowed by the minDate or dateLimit // If the start or end date exceed those allowed by the minDate or maxSpan
// options, shorten the range to the allowable period. // options, shorten the range to the allowable period.
if (this.minDate && start.isBefore(this.minDate)) if (this.minDate && start.isBefore(this.minDate))
start = this.minDate.clone(); start = this.minDate.clone();
var maxDate = this.maxDate; var maxDate = this.maxDate;
if (this.dateLimit && maxDate && start.clone().add(this.dateLimit).isAfter(maxDate)) if (this.maxSpan && maxDate && start.clone().add(this.maxSpan).isAfter(maxDate))
maxDate = start.clone().add(this.dateLimit); maxDate = start.clone().add(this.maxSpan);
if (maxDate && end.isAfter(maxDate)) if (maxDate && end.isAfter(maxDate))
end = maxDate.clone(); end = maxDate.clone();
@ -367,22 +373,20 @@
if (this.timePicker && this.autoApply) if (this.timePicker && this.autoApply)
this.autoApply = false; this.autoApply = false;
if (this.autoApply && typeof options.ranges !== 'object') { if (this.autoApply) {
this.container.find('.ranges').hide(); this.container.addClass('auto-apply');
} else if (this.autoApply) {
this.container.find('.applyBtn, .cancelBtn').addClass('hide');
} }
if (typeof options.ranges === 'object')
this.container.addClass('show-ranges');
if (this.singleDatePicker) { if (this.singleDatePicker) {
this.container.addClass('single'); this.container.addClass('single');
this.container.find('.calendar.left').addClass('single'); this.container.find('.calendar.left').addClass('single');
this.container.find('.calendar.left').show(); this.container.find('.calendar.left').show();
this.container.find('.calendar.right').hide(); this.container.find('.calendar.right').hide();
this.container.find('.daterangepicker_input input, .daterangepicker_input > i').hide(); if (!this.timePicker) {
if (this.timePicker) { this.container.addClass('auto-apply');
this.container.find('.ranges ul').hide();
} else {
this.container.find('.ranges').hide();
} }
} }
@ -392,17 +396,12 @@
this.container.addClass('opens' + this.opens); this.container.addClass('opens' + this.opens);
//swap the position of the predefined ranges if opens right
if (typeof options.ranges !== 'undefined' && this.opens == 'right') {
this.container.find('.ranges').prependTo( this.container.find('.calendar.left').parent() );
}
//apply CSS classes and labels to buttons //apply CSS classes and labels to buttons
this.container.find('.applyBtn, .cancelBtn').addClass(this.buttonClasses); this.container.find('.applyBtn, .cancelBtn').addClass(this.buttonClasses);
if (this.applyClass.length) if (this.applyButtonClasses.length)
this.container.find('.applyBtn').addClass(this.applyClass); this.container.find('.applyBtn').addClass(this.applyButtonClasses);
if (this.cancelClass.length) if (this.cancelButtonClasses.length)
this.container.find('.cancelBtn').addClass(this.cancelClass); this.container.find('.cancelBtn').addClass(this.cancelButtonClasses);
this.container.find('.applyBtn').html(this.locale.applyLabel); this.container.find('.applyBtn').html(this.locale.applyLabel);
this.container.find('.cancelBtn').html(this.locale.cancelLabel); this.container.find('.cancelBtn').html(this.locale.cancelLabel);
@ -414,32 +413,27 @@
.on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this)) .on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this))
.on('click.daterangepicker', '.next', $.proxy(this.clickNext, this)) .on('click.daterangepicker', '.next', $.proxy(this.clickNext, this))
.on('mousedown.daterangepicker', 'td.available', $.proxy(this.clickDate, this)) .on('mousedown.daterangepicker', 'td.available', $.proxy(this.clickDate, this))
.on('mouseenter.daterangepicker', 'td.available', $.proxy(this.hoverDate, this))
.on('mouseleave.daterangepicker', 'td.available', $.proxy(this.updateFormInputs, this))
.on('change.daterangepicker', 'select.yearselect', $.proxy(this.monthOrYearChanged, this)) .on('change.daterangepicker', 'select.yearselect', $.proxy(this.monthOrYearChanged, this))
.on('change.daterangepicker', 'select.monthselect', $.proxy(this.monthOrYearChanged, this)) .on('change.daterangepicker', 'select.monthselect', $.proxy(this.monthOrYearChanged, this))
.on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.timeChanged, this)) .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.timeChanged, this))
.on('click.daterangepicker', '.daterangepicker_input input', $.proxy(this.showCalendars, this))
.on('focus.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsFocused, this))
.on('blur.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsBlurred, this))
.on('change.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsChanged, this));
this.container.find('.ranges') this.container.find('.ranges')
.on('click.daterangepicker', 'li', $.proxy(this.clickRange, this))
this.container.find('.drp-buttons')
.on('click.daterangepicker', 'button.applyBtn', $.proxy(this.clickApply, this)) .on('click.daterangepicker', 'button.applyBtn', $.proxy(this.clickApply, this))
.on('click.daterangepicker', 'button.cancelBtn', $.proxy(this.clickCancel, this)) .on('click.daterangepicker', 'button.cancelBtn', $.proxy(this.clickCancel, this))
.on('click.daterangepicker', 'li', $.proxy(this.clickRange, this))
.on('mouseenter.daterangepicker', 'li', $.proxy(this.hoverRange, this))
.on('mouseleave.daterangepicker', 'li', $.proxy(this.updateFormInputs, this));
if (this.element.is('input') || this.element.is('button')) { if (this.element.is('input') || this.element.is('button')) {
this.element.on({ this.element.on({
'click.daterangepicker': $.proxy(this.show, this), 'click.daterangepicker': $.proxy(this.show, this),
'focus.daterangepicker': $.proxy(this.show, this), 'focus.daterangepicker': $.proxy(this.show, this),
'keyup.daterangepicker': $.proxy(this.elementChanged, this), 'keyup.daterangepicker': $.proxy(this.elementChanged, this),
'keydown.daterangepicker': $.proxy(this.keydown, this) 'keydown.daterangepicker': $.proxy(this.keydown, this) //IE 11 compatibility
}); });
} else { } else {
this.element.on('click.daterangepicker', $.proxy(this.toggle, this)); this.element.on('click.daterangepicker', $.proxy(this.toggle, this));
this.element.on('keydown.daterangepicker', $.proxy(this.toggle, this));
} }
// //
@ -499,7 +493,7 @@
this.endDate = moment(endDate); this.endDate = moment(endDate);
if (!this.timePicker) if (!this.timePicker)
this.endDate = this.endDate.endOf('day'); this.endDate = this.endDate.add(1,'d').startOf('day').subtract(1,'second');
if (this.timePicker && this.timePickerIncrement) if (this.timePicker && this.timePickerIncrement)
this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
@ -510,11 +504,13 @@
if (this.maxDate && this.endDate.isAfter(this.maxDate)) if (this.maxDate && this.endDate.isAfter(this.maxDate))
this.endDate = this.maxDate.clone(); this.endDate = this.maxDate.clone();
if (this.dateLimit && this.startDate.clone().add(this.dateLimit).isBefore(this.endDate)) if (this.maxSpan && this.startDate.clone().add(this.maxSpan).isBefore(this.endDate))
this.endDate = this.startDate.clone().add(this.dateLimit); this.endDate = this.startDate.clone().add(this.maxSpan);
this.previousRightTime = this.endDate.clone(); this.previousRightTime = this.endDate.clone();
this.container.find('.drp-selected').html(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
if (!this.isShowing) if (!this.isShowing)
this.updateElement(); this.updateElement();
@ -539,13 +535,8 @@
this.container.find('.right .calendar-time select').removeAttr('disabled').removeClass('disabled'); this.container.find('.right .calendar-time select').removeAttr('disabled').removeClass('disabled');
} }
} }
if (this.endDate) { if (this.endDate)
this.container.find('input[name="daterangepicker_end"]').removeClass('active'); this.container.find('.drp-selected').html(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
this.container.find('input[name="daterangepicker_start"]').addClass('active');
} else {
this.container.find('input[name="daterangepicker_end"]').addClass('active');
this.container.find('input[name="daterangepicker_start"]').removeClass('active');
}
this.updateMonthsInView(); this.updateMonthsInView();
this.updateCalendars(); this.updateCalendars();
this.updateFormInputs(); this.updateFormInputs();
@ -706,7 +697,7 @@
html += '<th></th>'; html += '<th></th>';
if ((!minDate || minDate.isBefore(calendar.firstDay)) && (!this.linkedCalendars || side == 'left')) { if ((!minDate || minDate.isBefore(calendar.firstDay)) && (!this.linkedCalendars || side == 'left')) {
html += '<th class="prev available"><i class="fa fa-' + arrow.left + ' glyphicon glyphicon-' + arrow.left + '"></i></th>'; html += '<th class="prev available"><span></span></th>';
} else { } else {
html += '<th></th>'; html += '<th></th>';
} }
@ -716,8 +707,8 @@
if (this.showDropdowns) { if (this.showDropdowns) {
var currentMonth = calendar[1][1].month(); var currentMonth = calendar[1][1].month();
var currentYear = calendar[1][1].year(); var currentYear = calendar[1][1].year();
var maxYear = (maxDate && maxDate.year()) || (currentYear + 5); var maxYear = (maxDate && maxDate.year()) || (this.maxYear);
var minYear = (minDate && minDate.year()) || (currentYear - 50); var minYear = (minDate && minDate.year()) || (this.minYear);
var inMinYear = currentYear == minYear; var inMinYear = currentYear == minYear;
var inMaxYear = currentYear == maxYear; var inMaxYear = currentYear == maxYear;
@ -748,7 +739,7 @@
html += '<th colspan="5" class="month">' + dateHtml + '</th>'; html += '<th colspan="5" class="month">' + dateHtml + '</th>';
if ((!maxDate || maxDate.isAfter(calendar.lastDay)) && (!this.linkedCalendars || side == 'right' || this.singleDatePicker)) { if ((!maxDate || maxDate.isAfter(calendar.lastDay)) && (!this.linkedCalendars || side == 'right' || this.singleDatePicker)) {
html += '<th class="next available"><i class="fa fa-' + arrow.right + ' glyphicon glyphicon-' + arrow.right + '"></i></th>'; html += '<th class="next available"><span></span></th>';
} else { } else {
html += '<th></th>'; html += '<th></th>';
} }
@ -768,10 +759,10 @@
html += '</thead>'; html += '</thead>';
html += '<tbody>'; html += '<tbody>';
//adjust maxDate to reflect the dateLimit setting in order to //adjust maxDate to reflect the maxSpan setting in order to
//grey out end dates beyond the dateLimit //grey out end dates beyond the maxSpan
if (this.endDate == null && this.dateLimit) { if (this.endDate == null && this.maxSpan) {
var maxLimit = this.startDate.clone().add(this.dateLimit).endOf('day'); var maxLimit = this.startDate.clone().add(this.maxSpan).endOf('day');
if (!maxDate || maxLimit.isBefore(maxDate)) { if (!maxDate || maxLimit.isBefore(maxDate)) {
maxDate = maxLimit; maxDate = maxLimit;
} }
@ -865,8 +856,8 @@
var html, selected, minDate, maxDate = this.maxDate; var html, selected, minDate, maxDate = this.maxDate;
if (this.dateLimit && (!this.maxDate || this.startDate.clone().add(this.dateLimit).isAfter(this.maxDate))) if (this.maxSpan && (!this.maxDate || this.startDate.clone().add(this.maxSpan).isAfter(this.maxDate)))
maxDate = this.startDate.clone().add(this.dateLimit); maxDate = this.startDate.clone().add(this.maxSpan);
if (side == 'left') { if (side == 'left') {
selected = this.startDate.clone(); selected = this.startDate.clone();
@ -876,12 +867,12 @@
minDate = this.startDate; minDate = this.startDate;
//Preserve the time already selected //Preserve the time already selected
var timeSelector = this.container.find('.calendar.right .calendar-time div'); var timeSelector = this.container.find('.calendar.right .calendar-time');
if (timeSelector.html() != '') { if (timeSelector.html() != '') {
selected.hour(timeSelector.find('.hourselect option:selected').val() || selected.hour()); selected.hour(selected.hour() || timeSelector.find('.hourselect option:selected').val());
selected.minute(timeSelector.find('.minuteselect option:selected').val() || selected.minute()); selected.minute(selected.minute() || timeSelector.find('.minuteselect option:selected').val());
selected.second(timeSelector.find('.secondselect option:selected').val() || selected.second()); selected.second(selected.second() || timeSelector.find('.secondselect option:selected').val());
if (!this.timePicker24Hour) { if (!this.timePicker24Hour) {
var ampm = timeSelector.find('.ampmselect option:selected').val(); var ampm = timeSelector.find('.ampmselect option:selected').val();
@ -1014,20 +1005,12 @@
html += '</select>'; html += '</select>';
} }
this.container.find('.calendar.' + side + ' .calendar-time div').html(html); this.container.find('.calendar.' + side + ' .calendar-time').html(html);
}, },
updateFormInputs: function() { updateFormInputs: function() {
//ignore mouse movements while an above-calendar text input has focus
if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus"))
return;
this.container.find('input[name=daterangepicker_start]').val(this.startDate.format(this.locale.format));
if (this.endDate)
this.container.find('input[name=daterangepicker_end]').val(this.endDate.format(this.locale.format));
if (this.singleDatePicker || (this.endDate && (this.startDate.isBefore(this.endDate) || this.startDate.isSame(this.endDate)))) { if (this.singleDatePicker || (this.endDate && (this.startDate.isBefore(this.endDate) || this.startDate.isSame(this.endDate)))) {
this.container.find('button.applyBtn').removeAttr('disabled'); this.container.find('button.applyBtn').removeAttr('disabled');
} else { } else {
@ -1052,7 +1035,7 @@
containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top; containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top;
else else
containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top; containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top;
this.container[this.drops == 'up' ? 'addClass' : 'removeClass']('dropup'); this.container[this.drops == 'up' ? 'addClass' : 'removeClass']('drop-up');
if (this.opens == 'left') { if (this.opens == 'left') {
this.container.css({ this.container.css({
@ -1135,7 +1118,7 @@
//if a new date range was selected, invoke the user callback function //if a new date range was selected, invoke the user callback function
if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))
this.callback(this.startDate, this.endDate, this.chosenLabel); this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel);
//if picker is attached to a text input, update it //if picker is attached to a text input, update it
this.updateElement(); this.updateElement();
@ -1181,24 +1164,6 @@
this.element.trigger('hideCalendar.daterangepicker', this); this.element.trigger('hideCalendar.daterangepicker', this);
}, },
hoverRange: function(e) {
//ignore mouse movements while an above-calendar text input has focus
if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus"))
return;
var label = e.target.getAttribute('data-range-key');
if (label == this.locale.customRangeLabel) {
this.updateView();
} else {
var dates = this.ranges[label];
this.container.find('input[name=daterangepicker_start]').val(dates[0].format(this.locale.format));
this.container.find('input[name=daterangepicker_end]').val(dates[1].format(this.locale.format));
}
},
clickRange: function(e) { clickRange: function(e) {
var label = e.target.getAttribute('data-range-key'); var label = e.target.getAttribute('data-range-key');
this.chosenLabel = label; this.chosenLabel = label;
@ -1260,12 +1225,6 @@
var cal = $(e.target).parents('.calendar'); var cal = $(e.target).parents('.calendar');
var date = cal.hasClass('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col]; var date = cal.hasClass('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];
if (this.endDate && !this.container.find('input[name=daterangepicker_start]').is(":focus")) {
this.container.find('input[name=daterangepicker_start]').val(date.format(this.locale.format));
} else if (!this.endDate && !this.container.find('input[name=daterangepicker_end]').is(":focus")) {
this.container.find('input[name=daterangepicker_end]').val(date.format(this.locale.format));
}
//highlight the dates between the start date and the date being hovered as a potential end date //highlight the dates between the start date and the date being hovered as a potential end date
var leftCalendar = this.leftCalendar; var leftCalendar = this.leftCalendar;
var rightCalendar = this.rightCalendar; var rightCalendar = this.rightCalendar;
@ -1370,17 +1329,19 @@
var customRange = true; var customRange = true;
var i = 0; var i = 0;
for (var range in this.ranges) { for (var range in this.ranges) {
if (this.timePicker) { if (this.timePicker) {
if (this.startDate.isSame(this.ranges[range][0]) && this.endDate.isSame(this.ranges[range][1])) { var format = this.timePickerSeconds ? "YYYY-MM-DD hh:mm:ss" : "YYYY-MM-DD hh:mm";
//ignore times when comparing dates if time picker seconds is not enabled
if (this.startDate.format(format) == this.ranges[range][0].format(format) && this.endDate.format(format) == this.ranges[range][1].format(format)) {
customRange = false; customRange = false;
this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').html(); this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').attr('data-range-key');
break; break;
} }
} else { } else {
//ignore times when comparing dates if time picker is not enabled //ignore times when comparing dates if time picker is not enabled
if (this.startDate.format('YYYY-MM-DD') == this.ranges[range][0].format('YYYY-MM-DD') && this.endDate.format('YYYY-MM-DD') == this.ranges[range][1].format('YYYY-MM-DD')) { if (this.startDate.format('YYYY-MM-DD') == this.ranges[range][0].format('YYYY-MM-DD') && this.endDate.format('YYYY-MM-DD') == this.ranges[range][1].format('YYYY-MM-DD')) {
customRange = false; customRange = false;
this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').html(); this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').attr('data-range-key');
break; break;
} }
} }
@ -1388,7 +1349,7 @@
} }
if (customRange) { if (customRange) {
if (this.showCustomRangeLabel) { if (this.showCustomRangeLabel) {
this.chosenLabel = this.container.find('.ranges li:last').addClass('active').html(); this.chosenLabel = this.container.find('.ranges li:last').addClass('active').attr('data-range-key');
} else { } else {
this.chosenLabel = null; this.chosenLabel = null;
} }
@ -1498,72 +1459,9 @@
}, },
formInputsChanged: function(e) {
var isRight = $(e.target).closest('.calendar').hasClass('right');
var start = moment(this.container.find('input[name="daterangepicker_start"]').val(), this.locale.format);
var end = moment(this.container.find('input[name="daterangepicker_end"]').val(), this.locale.format);
if (start.isValid() && end.isValid()) {
if (isRight && end.isBefore(start))
start = end.clone();
this.setStartDate(start);
this.setEndDate(end);
if (isRight) {
this.container.find('input[name="daterangepicker_start"]').val(this.startDate.format(this.locale.format));
} else {
this.container.find('input[name="daterangepicker_end"]').val(this.endDate.format(this.locale.format));
}
}
this.updateView();
},
formInputsFocused: function(e) {
// Highlight the focused input
this.container.find('input[name="daterangepicker_start"], input[name="daterangepicker_end"]').removeClass('active');
$(e.target).addClass('active');
// Set the state such that if the user goes back to using a mouse,
// the calendars are aware we're selecting the end of the range, not
// the start. This allows someone to edit the end of a date range without
// re-selecting the beginning, by clicking on the end date input then
// using the calendar.
var isRight = $(e.target).closest('.calendar').hasClass('right');
if (isRight) {
this.endDate = null;
this.setStartDate(this.startDate.clone());
this.updateView();
}
},
formInputsBlurred: function(e) {
// this function has one purpose right now: if you tab from the first
// text input to the second in the UI, the endDate is nulled so that
// you can click another, but if you tab out without clicking anything
// or changing the input value, the old endDate should be retained
if (!this.endDate) {
var val = this.container.find('input[name="daterangepicker_end"]').val();
var end = moment(val, this.locale.format);
if (end.isValid()) {
this.setEndDate(end);
this.updateView();
}
}
},
elementChanged: function() { elementChanged: function() {
if (!this.element.is('input')) return; if (!this.element.is('input')) return;
if (!this.element.val().length) return; if (!this.element.val().length) return;
if (this.element.val().length < this.locale.format.length) return;
var dateString = this.element.val().split(this.locale.separator), var dateString = this.element.val().split(this.locale.separator),
start = null, start = null,
@ -1591,6 +1489,14 @@
if ((e.keyCode === 9) || (e.keyCode === 13)) { if ((e.keyCode === 9) || (e.keyCode === 13)) {
this.hide(); this.hide();
} }
//hide on esc and prevent propagation
if (e.keyCode === 27) {
e.preventDefault();
e.stopPropagation();
this.hide();
}
}, },
updateElement: function() { updateElement: function() {
@ -1612,11 +1518,12 @@
}; };
$.fn.daterangepicker = function(options, callback) { $.fn.daterangepicker = function(options, callback) {
var implementOptions = $.extend(true, {}, $.fn.daterangepicker.defaultOptions, options);
this.each(function() { this.each(function() {
var el = $(this); var el = $(this);
if (el.data('daterangepicker')) if (el.data('daterangepicker'))
el.data('daterangepicker').remove(); el.data('daterangepicker').remove();
el.data('daterangepicker', new DateRangePicker(el, options, callback)); el.data('daterangepicker', new DateRangePicker(el, implementOptions, callback));
}); });
return this; return this;
}; };

View File

@ -18,9 +18,40 @@
/*------------------------------------------------------------------------------ /*------------------------------------------------------------------------------
* Helpers * Helpers
*----------------------------------------------------------------------------*/ *----------------------------------------------------------------------------*/
.ui-helper-hidden { .fancytree-helper-hidden {
display: none; display: none;
} }
.fancytree-helper-indeterminate-cb {
color: #777;
}
.fancytree-helper-disabled {
color: #c0c0c0;
}
/* Helper to allow spinning loader icon with glyph-, ligature-, and SVG-icons. */
.fancytree-helper-spin {
-webkit-animation: spin 1000ms infinite linear;
animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
/*------------------------------------------------------------------------------ /*------------------------------------------------------------------------------
* Container and UL / LI * Container and UL / LI
*----------------------------------------------------------------------------*/ *----------------------------------------------------------------------------*/
@ -344,6 +375,16 @@ span.fancytree-node.fancytree-error span.fancytree-title {
/*------------------------------------------------------------------------------ /*------------------------------------------------------------------------------
* Drag'n'drop support * Drag'n'drop support
*----------------------------------------------------------------------------*/ *----------------------------------------------------------------------------*/
/* ext-dnd5: */
span.fancytree-childcounter {
color: #fff;
background: #337ab7;
border: 1px solid gray;
border-radius: 10px;
padding: 2px;
text-align: center;
}
/* ext-dnd: */
div.fancytree-drag-helper span.fancytree-childcounter, div.fancytree-drag-helper span.fancytree-childcounter,
div.fancytree-drag-helper span.fancytree-dnd-modifier { div.fancytree-drag-helper span.fancytree-dnd-modifier {
display: inline-block; display: inline-block;
@ -408,8 +449,7 @@ span.fancytree-drag-source.fancytree-drag-remove {
.fancytree-container.fancytree-rtl span.fancytree-connector, .fancytree-container.fancytree-rtl span.fancytree-connector,
.fancytree-container.fancytree-rtl span.fancytree-expander, .fancytree-container.fancytree-rtl span.fancytree-expander,
.fancytree-container.fancytree-rtl span.fancytree-icon, .fancytree-container.fancytree-rtl span.fancytree-icon,
.fancytree-container.fancytree-rtl span.fancytree-drag-helper-img, .fancytree-container.fancytree-rtl span.fancytree-drag-helper-img {
.fancytree-container.fancytree-rtl #fancytree-drop-marker {
background-image: url("../skin-lion/icons-rtl.gif"); background-image: url("../skin-lion/icons-rtl.gif");
} }
.fancytree-container.fancytree-rtl .fancytree-exp-n span.fancytree-expander, .fancytree-container.fancytree-rtl .fancytree-exp-n span.fancytree-expander,
@ -431,6 +471,9 @@ ul.fancytree-container.fancytree-rtl li.fancytree-lastsib,
ul.fancytree-container.fancytree-rtl.fancytree-no-connector > li { ul.fancytree-container.fancytree-rtl.fancytree-no-connector > li {
background-image: none; background-image: none;
} }
#fancytree-drop-marker.fancytree-rtl {
background-image: url("../skin-lion/icons-rtl.gif");
}
/*------------------------------------------------------------------------------ /*------------------------------------------------------------------------------
* 'table' extension * 'table' extension
*----------------------------------------------------------------------------*/ *----------------------------------------------------------------------------*/
@ -488,7 +531,7 @@ table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:h
* 'filter' extension * 'filter' extension
*----------------------------------------------------------------------------*/ *----------------------------------------------------------------------------*/
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title { .fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
color: silver; color: #c0c0c0;
font-weight: lighter; font-weight: lighter;
} }
.fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title, .fancytree-ext-filter-dimm tr.fancytree-submatch span.fancytree-title,
@ -507,7 +550,7 @@ table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:h
} }
.fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title, .fancytree-ext-filter-hide tr.fancytree-submatch span.fancytree-title,
.fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title { .fancytree-ext-filter-hide span.fancytree-node.fancytree-submatch span.fancytree-title {
color: silver; color: #c0c0c0;
font-weight: lighter; font-weight: lighter;
} }
.fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title, .fancytree-ext-filter-hide tr.fancytree-match span.fancytree-title,

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 357 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 586 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 477 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.