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>
<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>
#map {
@ -58,37 +58,37 @@
<th rowspan="2">
<a ng-click="sortType = 'stats.numActiveSessions'; sortReverse = !sortReverse">
Sessions
<span ng-show="sortType == 'stats.numActiveSessions' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.numActiveSessions' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th rowspan="2">
<a ng-click="sortType = 'stats.numConnections'; sortReverse = !sortReverse">
Connections
<span ng-show="sortType == 'stats.numConnections' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.numConnections' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th rowspan="2">
<a ng-click="sortType = 'stats.bytesProxied'; sortReverse = !sortReverse">
Data relayed
<span ng-show="sortType == 'stats.bytesProxied' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.bytesProxied' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th colspan="6" class="text-center">Transfer rate in the last period</th>
<th rowspan="2">
<a ng-click="sortType = 'stats.uptimeSeconds'; sortReverse = !sortReverse">
Uptime hours
<span ng-show="sortType == 'stats.uptimeSeconds' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'status.uptimeSeconds' && sortReverse" class="fa fa-caret-up"></span>
<span ng-show="sortType == 'stats.uptimeSeconds' && !sortReverse" class="fas fa-caret-down"></span>
<span ng-show="sortType == 'status.uptimeSeconds' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th rowspan="2">
<a ng-click="sortType = 'stats.options[\'provided-by\'] || \'\''; sortReverse = !sortReverse">
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="fa fa-caret-up"></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="fas fa-caret-up"></span>
</a>
</th>
</tr>
@ -96,43 +96,43 @@
<th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[0]'; sortReverse = !sortReverse">
10s
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[0]' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[0]' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[1]'; sortReverse = !sortReverse">
1m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[1]' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[1]' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[2]'; sortReverse = !sortReverse">
5m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[2]' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[2]' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[3]'; sortReverse = !sortReverse">
15m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[3]' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[3]' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[4]'; sortReverse = !sortReverse">
30m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[4]' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[4]' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
<th>
<a ng-click="sortType = 'stats.kbps10s1m5m15m30m60m[5]'; sortReverse = !sortReverse">
60m
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[5]' && !sortReverse" class="fa 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-down"></span>
<span ng-show="sortType == 'stats.kbps10s1m5m15m30m60m[5]' && sortReverse" class="fas fa-caret-up"></span>
</a>
</th>
</tr>

View File

@ -19,9 +19,9 @@
<title ng-bind="thisDeviceName() + ' | Syncthing'"></title>
<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="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/theme.css" rel="stylesheet"/>
<link href="vendor/fancytree/css/ui.fancytree.css" rel="stylesheet"/>
@ -42,45 +42,45 @@
<ul class="nav navbar-nav navbar-right">
<li ng-if="upgradeInfo && upgradeInfo.newer" class="upgrade-newer">
<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>
</button>
</li>
<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">
<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>
</button>
</li>
<li class="dropdown" language-select></li>
<li>
<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>
</a>
</li>
<li class="dropdown action-menu">
<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="caret"></span>
</a>
<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="" 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="" 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="fas fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></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="restart()"><span class="fa fa-fw fa-refresh"></span>&nbsp;<span translate>Restart</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="fas fa-fw fa-sync"></span>&nbsp;<span translate>Restart</span></a></li>
<li class="divider" aria-hidden="true"></li>
<li class="visible-xs">
<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>
</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><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="logging.show()"><span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Logs</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="far fa-fw fa-file-alt"></span>&nbsp;<span translate>Logs</span></a></li>
</ul>
</li>
</ul>
@ -97,7 +97,7 @@
<div class="panel-heading">
<h3 class="panel-title">
<div class="panel-icon">
<span class="fa fa-exclamation-circle"></span>
<span class="fas fa-exclamation-circle"></span>
</div>
<span translate>Danger!</span>
</h3>
@ -111,7 +111,7 @@
</div>
<div class="panel-footer">
<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>
<div class="clearfix"></div>
</div>
@ -127,7 +127,7 @@
<div class="panel-heading">
<h3 class="panel-title">
<div class="panel-icon">
<span class="fa fa-exclamation-circle"></span>
<span class="fas fa-exclamation-circle"></span>
</div>
<span translate>Restart Needed</span>
</h3>
@ -137,7 +137,7 @@
</div>
<div class="panel-footer">
<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>
<div class="clearfix"></div>
</div>
@ -167,13 +167,13 @@
<div class="panel-footer clearfix">
<div class="pull-right">
<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 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 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>
</div>
</div>
@ -189,7 +189,7 @@
<div class="panel-heading">
<h3 class="panel-title">
<div class="panel-icon">
<span class="fa fa-folder"></span>
<span class="fas fa-folder"></span>
</div>
<span translate ng-if="!folders[event.data.folder]">New Folder</span>
<span translate ng-if="folders[event.data.folder]">Share Folder</span>
@ -211,16 +211,16 @@
<div class="panel-footer clearfix">
<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]">
<span class="fa fa-check"></span>&nbsp;<span translate>Add</span>
<span class="fas fa-check"></span>&nbsp;<span translate>Add</span>
</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]">
<span class="fa fa-check"></span>&nbsp;<span translate>Share</span>
<span class="fas fa-check"></span>&nbsp;<span translate>Share</span>
</button>
<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 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>
</div>
</div>
@ -236,7 +236,7 @@
<div class="panel-heading">
<h3 class="panel-title">
<div class="panel-icon">
<span class="fa fa-exclamation-circle"></span>
<span class="fas fa-exclamation-circle"></span>
</div>
<span translate>Notice</span>
</h3>
@ -249,7 +249,7 @@
</div>
<div class="panel-footer">
<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>
<div class="clearfix"></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>
<h4 class="panel-title">
<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 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>
@ -305,106 +305,106 @@
<table class="table table-condensed table-striped">
<tbody>
<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>
</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">
<span tooltip data-original-title="{{folder.path}}">{{folder.path}}</span>
</td>
</tr>
<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>
</tr>
<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">
<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="fa fa-folder-o"></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-copy"></span>&nbsp;{{model[folder.id].globalFiles | alwaysNumber | localeNumber}}&ensp;
<span class="far fa-folder"></span>&nbsp;{{model[folder.id].globalDirectories | alwaysNumber | localeNumber}}&ensp;
<span class="far fa-hdd"></span>&nbsp;~{{model[folder.id].globalBytes | binary}}B
</span>
</td>
</tr>
<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">
<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="fa fa-folder-o"></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-copy"></span>&nbsp;{{model[folder.id].localFiles | alwaysNumber | localeNumber}}&ensp;
<span class="far fa-folder"></span>&nbsp;{{model[folder.id].localDirectories | alwaysNumber | localeNumber}}&ensp;
<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>
</td>
</tr>
<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">
<a href="" ng-click="showNeed(folder.id)">{{neededItems(folder.id) | alwaysNumber}} <span translate>items</span>, ~{{model[folder.id].needBytes | binary}}B</a>
</td>
</tr>
<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">
<span tooltip data-original-title="{{scanRate(folder.id) | binary}}B/s">~ {{scanRemaining(folder.id)}}</span>
</td>
</tr>
<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. -->
<td class="text-right">
<a href="" ng-click="showFailed(folder.id)">{{model[folder.id].pullErrors | alwaysNumber | localeNumber}}&nbsp;<span translate>items</span></a>
</td>
</tr>
<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">
<span ng-if="folder.type == 'sendonly'" translate>Send Only</span>
</td>
</tr>
<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">
<span translate>Yes</span>
</td>
</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">
<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 class="fa fa-clock-o"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Disabled</span>
<span class="far fa-clock"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fas fa-eye-slash"></span>&nbsp;<span translate>Disabled</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 class="fa fa-clock-o"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fa fa-eye"></span>&nbsp;<span translate>Enabled</span>
<span class="far fa-clock"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fas fa-eye"></span>&nbsp;<span translate>Enabled</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 class="fa fa-clock-o"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Failed to setup, retrying</span>
<span class="far fa-clock"></span>&nbsp;{{folder.rescanIntervalS | duration}}&ensp;
<span class="fas fa-eye-slash"></span>&nbsp;<span translate>Failed to setup, retrying</span>
</span>
</div>
<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 class="fa fa-clock-o"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Disabled</span>
<span class="far fa-clock"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fas fa-eye-slash"></span>&nbsp;<span translate>Disabled</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 class="fa fa-clock-o"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fa fa-eye"></span>&nbsp;<span translate>Enabled</span>
<span class="far fa-clock"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fas fa-eye"></span>&nbsp;<span translate>Enabled</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 class="fa fa-clock-o"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Failed to setup, retrying</span>
<span class="far fa-clock"></span>&nbsp;<span translate>Disabled</span>&ensp;
<span class="fas fa-eye-slash"></span>&nbsp;<span translate>Failed to setup, retrying</span>
</span>
</div>
</td>
</tr>
<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">
<span ng-switch-when="random" translate>Random</span>
<span ng-switch-when="alphabetic" translate>Alphabetic</span>
@ -415,7 +415,7 @@
</td>
</tr>
<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">
<span ng-switch-when="trashcan" translate>Trash Can File Versioning</span>
<span ng-switch-when="staggered" translate>Staggered File Versioning</span>
@ -424,18 +424,18 @@
</td>
</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>
</tr>
<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 ng-if="folderStats[folder.id].lastScanDays < 365" class="text-right">
<span>{{folderStats[folder.id].lastScan | date:'yyyy-MM-dd HH:mm:ss'}}</span>
</td>
</tr>
<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">
<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>
@ -449,23 +449,23 @@
</div>
<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'">
<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>
<span class="pull-right">
<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 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 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 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 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>
</span>
<div class="clearfix"></div>
@ -475,16 +475,16 @@
</div>
<span class="pull-right">
<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 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 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 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>
</span>
<div class="clearfix"></div>
@ -509,7 +509,7 @@
<table class="table table-condensed table-striped">
<tbody>
<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">
<a href="#" class="toggler" ng-click="toggleUnits()">
<span ng-if="!metricRates">{{connectionsTotal.inbps | binary}}B/s</span>
@ -519,7 +519,7 @@
</td>
</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">
<a href="#" class="toggler" ng-click="toggleUnits()">
<span ng-if="!metricRates">{{connectionsTotal.outbps | binary}}B/s</span>
@ -529,24 +529,24 @@
</td>
</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">
<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="fa fa-folder-o"></span>&nbsp;{{localStateTotal.directories| alwaysNumber | localeNumber}}&ensp;
<span class="fa fa-hdd-o"></span>&nbsp;~{{localStateTotal.bytes | binary}}B
<span class="far fa-copy"></span>&nbsp;{{localStateTotal.files | alwaysNumber | localeNumber}}&ensp;
<span class="far fa-folder"></span>&nbsp;{{localStateTotal.directories| alwaysNumber | localeNumber}}&ensp;
<span class="far fa-hdd"></span>&nbsp;~{{localStateTotal.bytes | binary}}B
</td>
</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>
</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>
</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">
<span ng-if="listenersFailed.length == 0" class="data text-success">
<span>{{listenersTotal}}/{{listenersTotal}}</span>
@ -559,7 +559,7 @@
</td>
</tr>
<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">
<span ng-if="discoveryFailed.length == 0" class="data text-success">
<span>{{discoveryTotal}}/{{discoveryTotal}}</span>
@ -572,11 +572,11 @@
</td>
</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>
</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">
<span tooltip data-original-title="{{versionString()}}">{{versionString()}}</span>
</td>
@ -612,7 +612,7 @@
<table class="table table-condensed table-striped">
<tbody>
<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">
<a href="#" class="toggler" ng-click="toggleUnits()">
<span ng-if="!metricRates">{{connections[deviceCfg.deviceID].inbps | binary}}B/s</span>
@ -622,7 +622,7 @@
</td>
</tr>
<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">
<a href="#" class="toggler" ng-click="toggleUnits()">
<span ng-if="!metricRates">{{connections[deviceCfg.deviceID].outbps | binary}}B/s</span>
@ -632,13 +632,13 @@
</td>
</tr>
<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">
<a href="" ng-click="showRemoteNeed(deviceCfg)">{{completion[deviceCfg.deviceID]._needItems | alwaysNumber | localeNumber}} <span translate>items</span>, ~{{completion[deviceCfg.deviceID]._needBytes | binary}}B</a>
</td>
</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">
<span tooltip data-original-title="{{ connections[deviceCfg.deviceID].type.indexOf('Relay') > -1 ? '' : connections[deviceCfg.deviceID].type }}">
{{deviceAddr(deviceCfg)}}
@ -650,41 +650,41 @@
</td>
</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">
<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>
</tr>
<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">
<span>{{deviceCfg.allowedNetworks.join(", ")}}</span>
</td>
</tr>
<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">
<span ng-if="deviceCfg.compression == 'always'" translate>All Data</span>
<span ng-if="deviceCfg.compression == 'never'" translate>Off</span>
</td>
</tr>
<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>
</tr>
<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>
</tr>
<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>
</tr>
<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 ng-if="deviceStats[deviceCfg.deviceID].lastSeenDays < 365" class="text-right">{{deviceStats[deviceCfg.deviceID].lastSeen | date:"yyyy-MM-dd HH:mm:ss"}}</td>
</tr>
<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>
</tr>
</tbody>
@ -693,13 +693,13 @@
<div class="panel-footer">
<span class="pull-right">
<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 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 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>
</span>
<div class="clearfix"></div>
@ -710,10 +710,10 @@
<div class="form-group">
<span class="pull-right">
<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 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>
</span>
<div class="clearfix"></div>
@ -728,14 +728,14 @@
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<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://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://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://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://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/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" target="_blank"><span class="fa 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://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="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="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="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="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="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="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="fab fa-twitter"></span>&nbsp;Twitter</a></li>
</ul>
</div>
</nav>
@ -774,7 +774,7 @@
<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/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>
<!-- / vendor scripts -->

View File

@ -11,7 +11,7 @@
<div class="modal-header {{status == 'default' ? '' : 'alert alert-'+status }}">
<h4 class="modal-title">
<div ng-if="icon" class="panel-icon">
<span class="fa fa-{{icon}}"></span>
<span class="{{icon}}"></span>
</div>
{{heading}}
</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">
<h1 class="text-center">
<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 class="modal-footer">
<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>
</div>
</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">
<ul>
<li ng-repeat="failure in discoveryFailed">{{failure}}</li>
@ -15,7 +15,7 @@
</div>
<div class="modal-footer">
<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>
</div>
</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">
<p translate>
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 {
restrict: 'EA',
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">'+
'<li ng-repeat="name in localesNamesInvKeys" ng-class="{active: localesNamesInv[name]==currentLocale}">'+
'<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">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#log-viewer-log" translate>Log</a></li>
@ -30,7 +30,7 @@
</div>
<div class="modal-footer">
<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>
</div>
</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">
<p>
<span translate>This is a major version upgrade.</span>
@ -11,10 +11,10 @@
</div>
<div class="modal-footer">
<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 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>
</div>
</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">
<p translate>
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'>
<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">
<p translate>This is an example notification. ID of the notification should be appended to Options.UnackedNotificationIDs of the config.</p>
</div>
<div class="panel-footer">
<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>
<div class="clearfix"></div>
</div>
@ -18,7 +18,7 @@
<notification id="channelNotification">
<div class="panel panel-success">
<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 class="panel-body">
<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>
</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 class="panel-footer">
<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 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>
<div class="clearfix"></div>
</div>
@ -45,11 +45,11 @@
<notification id="fsWatcherNotification">
<div class="panel panel-success">
<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 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><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>
<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>
@ -59,10 +59,10 @@
<div class="panel-footer clearfix">
<div class="pull-right">
<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 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>
</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">
<p>
<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">
<p translate>
Syncthing has been shut down.

View File

@ -102,10 +102,10 @@ angular.module('syncthing.core')
'touch': 'Update'
};
$scope.needIcons = {
'rm': 'trash-o',
'rmdir': 'trash-o',
'sync': 'arrow-circle-o-down',
'touch': 'asterisk'
'rm': 'far fa-fw fa-trash-alt',
'rmdir': 'far fa-fw fa-trash-alt',
'sync': 'far fa-fw arrow-alt-circle-down',
'touch': 'fas fa-fw fa-asterisk'
};
$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">
<p>
<span translate>Syncthing is upgrading.</span>

View File

@ -5,8 +5,8 @@
<div id="log" class="col-xs-8">
<span>
JS:
<span class="dev-error fa 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-error fas fa-exclamation-triangle"> errors <span id="log_error">0</span></span>
<span class="dev-warn far fa-frown"> warn <span id="log_warn">0</span></span>
</span>
</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">
<form role="form" name="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 class="modal-footer">
<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 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 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>
<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 }}">
<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 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>
</div>
</div>

View File

@ -1,5 +1,5 @@
<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="table-responsive">
<table class="table-condensed table-striped table" style="table-layout: auto;">
@ -29,7 +29,7 @@
</div>
<div class="modal-footer">
<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>
</div>
</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="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"/>
</div>
<div class="modal-footer">
<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>
</div>
</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">
<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>
@ -6,10 +6,10 @@
</div>
<div class="modal-footer">
<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 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>
</div>
</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">
<form role="form" name="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><a data-toggle="tab" href="#folder-versioning" translate>File Versioning</a></li>
<li><a data-toggle="tab" href="#folder-ignores" translate>Ignore Patterns</a></li>
<li><a data-toggle="tab" href="#folder-advanced" translate>Advanced</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"><span class="fas fa-copy"></span> <span translate>File Versioning</span></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"><span class="fas fa-cogs"></span> <span translate>Advanced</span></a></li>
</ul>
<div class="tab-content">
<div id="folder-general" class="tab-pane in active">
@ -57,7 +57,7 @@
</div>
<div id="folder-versioning" class="tab-pane">
<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">
<option value="none" translate>No 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="col-md-12">
<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="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>
@ -158,7 +158,7 @@
<div class="row">
<div class="col-md-6 form-group">
<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">
<option value="sendreceive" translate>Send &amp; Receive</option>
<option value="sendonly" translate>Send Only</option>
@ -202,11 +202,9 @@
<label translate>Permissions</label><br/>
<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>
</select></div>
<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>
</p>
</div>
<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>
</p>
</div>
</div>
</div>
@ -215,13 +213,13 @@
</div>
<div class="modal-footer">
<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 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 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>
</div>
</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">
<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>
@ -9,10 +9,10 @@
</div>
<div class="modal-footer">
<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 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>
</div>
</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">
<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>
@ -6,10 +6,10 @@
</div>
<div class="modal-footer">
<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 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>
</div>
</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">
<span translate ng-if="!restoreVersions.versions && !restoreVersions.errors">Loading data...</span>
<div ng-if="restoreVersions.versions">
@ -42,10 +42,10 @@
</div>
<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">
<span class="fa fa-check"></span>&nbsp;<span translate>Restore</span>
<span class="fas fa-check"></span>&nbsp;<span translate>Restore</span>
</button>
<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>
</div>
</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">
<p class="text-danger">
@ -94,10 +94,10 @@
<div class="modal-footer">
<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 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>
</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">
<form role="form" name="settingsEditor">
<ul class="nav nav-tabs">
@ -40,7 +40,7 @@
<input type="text" readonly class="text-monospace form-control" value="{{tmpGUI.apiKey || '-'}}"/>
<span class="input-group-btn">
<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>
</span>
</div>
@ -67,7 +67,7 @@
</div>
<div class="col-md-6">
<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">
<option value="none" translate>No upgrades</option>
<option value="stable" translate>Stable releases only</option>
@ -92,7 +92,7 @@
<div id="settings-gui" class="tab-pane">
<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}))$/"/>
<p class="help-block" ng-show="settingsEditor.Address.$invalid" translate>
Enter a non-privileged port number (1024 - 65535).
@ -153,7 +153,7 @@
<div id="settings-connections" class="tab-pane">
<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"/>
</div>
<div class="row">
@ -234,10 +234,10 @@
<div class="modal-footer">
<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 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>
</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">
<p>
<span translate>The following items could not be synchronized.</span>
@ -20,7 +20,7 @@
</div>
<div class="modal-footer">
<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>
</div>
</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">
@ -18,7 +18,7 @@
<!-- Icon -->
<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>
<!-- Name -->
@ -28,7 +28,7 @@
</span>
<span ng-if="f.type == 'queued'">
<a href="" ng-click="bumpFile(neededFolder, f.name)" tooltip data-original-title="{{'Move to top of queue' | translate}}">
<span class="fa fa-eject"></span>
<span class="fas fa-eject"></span>
</a>
<span tooltip data-original-title="{{f.name}}">&nbsp;{{f.name | basename}}</span>
</span>
@ -67,7 +67,7 @@
<div class="modal-footer">
<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>
</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 ng-if="sizeOf(remoteNeed) == 0">
<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 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>
@ -9,16 +9,16 @@
<p><a href="https://data.syncthing.net/" target="_blank">https://data.syncthing.net/</a></p>
</div>
<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>
<pre ng-if="reportPreview"><small>{{reportData | json}}</small></pre>
</div>
<div class="modal-footer">
<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 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>
</div>
</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">
<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.
@ -23,7 +23,7 @@
</div>
<div class="modal-footer">
<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>
</div>
</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/
* @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
* @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) {
if (typeof define === 'function' && define.amd) {
// AMD. Make globaly available as well
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) {
// Node / Browserify
@ -20,7 +21,8 @@
jQuery = require('jquery');
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 {
// Browser globals
root.daterangepicker = factory(root.moment, root.jQuery);
@ -35,10 +37,12 @@
this.endDate = moment().endOf('day');
this.minDate = false;
this.maxDate = false;
this.dateLimit = false;
this.maxSpan = false;
this.autoApply = false;
this.singleDatePicker = false;
this.showDropdowns = false;
this.minYear = moment().subtract(100, 'year').format('YYYY');
this.maxYear = moment().add(100, 'year').format('YYYY');
this.showWeekNumbers = false;
this.showISOWeekNumbers = false;
this.showCustomRangeLabel = true;
@ -60,8 +64,8 @@
this.drops = 'up';
this.buttonClasses = 'btn btn-sm';
this.applyClass = 'btn-success';
this.cancelClass = 'btn-default';
this.applyButtonClasses = 'btn-primary';
this.cancelButtonClasses = 'btn-default';
this.locale = {
direction: 'ltr',
@ -93,34 +97,21 @@
//html template for the picker UI
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="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-time"></div>' +
'</div>' +
'<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-time"></div>' +
'</div>' +
'<div class="ranges">' +
'<div class="range_inputs">' +
'<button class="applyBtn" disabled="disabled" type="button"></button> ' +
'<button class="cancelBtn" type="button"></button>' +
'</div>' +
'<div class="drp-buttons">' +
'<span class="drp-selected"></span>' +
'<button class="cancelBtn" type="button"></button>' +
'<button class="applyBtn" disabled="disabled" type="button"></button> ' +
'</div>' +
'</div>';
@ -202,14 +193,23 @@
if (this.maxDate && this.endDate.isAfter(this.maxDate))
this.endDate = this.maxDate.clone();
if (typeof options.applyClass === 'string')
this.applyClass = options.applyClass;
if (typeof options.applyButtonClasses === 'string')
this.applyButtonClasses = options.applyButtonClasses;
if (typeof options.cancelClass === 'string')
this.cancelClass = options.cancelClass;
if (typeof options.applyClass === 'string') //backwards compat
this.applyButtonClasses = options.applyClass;
if (typeof options.dateLimit === 'object')
this.dateLimit = options.dateLimit;
if (typeof options.cancelButtonClasses === 'string')
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')
this.opens = options.opens;
@ -232,6 +232,12 @@
if (typeof options.showDropdowns === 'boolean')
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')
this.showCustomRangeLabel = options.showCustomRangeLabel;
@ -317,14 +323,14 @@
else
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.
if (this.minDate && start.isBefore(this.minDate))
start = this.minDate.clone();
var maxDate = this.maxDate;
if (this.dateLimit && maxDate && start.clone().add(this.dateLimit).isAfter(maxDate))
maxDate = start.clone().add(this.dateLimit);
if (this.maxSpan && maxDate && start.clone().add(this.maxSpan).isAfter(maxDate))
maxDate = start.clone().add(this.maxSpan);
if (maxDate && end.isAfter(maxDate))
end = maxDate.clone();
@ -367,22 +373,20 @@
if (this.timePicker && this.autoApply)
this.autoApply = false;
if (this.autoApply && typeof options.ranges !== 'object') {
this.container.find('.ranges').hide();
} else if (this.autoApply) {
this.container.find('.applyBtn, .cancelBtn').addClass('hide');
if (this.autoApply) {
this.container.addClass('auto-apply');
}
if (typeof options.ranges === 'object')
this.container.addClass('show-ranges');
if (this.singleDatePicker) {
this.container.addClass('single');
this.container.find('.calendar.left').addClass('single');
this.container.find('.calendar.left').show();
this.container.find('.calendar.right').hide();
this.container.find('.daterangepicker_input input, .daterangepicker_input > i').hide();
if (this.timePicker) {
this.container.find('.ranges ul').hide();
} else {
this.container.find('.ranges').hide();
if (!this.timePicker) {
this.container.addClass('auto-apply');
}
}
@ -392,17 +396,12 @@
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
this.container.find('.applyBtn, .cancelBtn').addClass(this.buttonClasses);
if (this.applyClass.length)
this.container.find('.applyBtn').addClass(this.applyClass);
if (this.cancelClass.length)
this.container.find('.cancelBtn').addClass(this.cancelClass);
if (this.applyButtonClasses.length)
this.container.find('.applyBtn').addClass(this.applyButtonClasses);
if (this.cancelButtonClasses.length)
this.container.find('.cancelBtn').addClass(this.cancelButtonClasses);
this.container.find('.applyBtn').html(this.locale.applyLabel);
this.container.find('.cancelBtn').html(this.locale.cancelLabel);
@ -414,32 +413,27 @@
.on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this))
.on('click.daterangepicker', '.next', $.proxy(this.clickNext, 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.monthselect', $.proxy(this.monthOrYearChanged, 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')
.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.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')) {
this.element.on({
'click.daterangepicker': $.proxy(this.show, this),
'focus.daterangepicker': $.proxy(this.show, this),
'keyup.daterangepicker': $.proxy(this.elementChanged, this),
'keydown.daterangepicker': $.proxy(this.keydown, this)
'keydown.daterangepicker': $.proxy(this.keydown, this) //IE 11 compatibility
});
} else {
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);
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)
this.endDate.minute(Math.round(this.endDate.minute() / this.timePickerIncrement) * this.timePickerIncrement);
@ -510,11 +504,13 @@
if (this.maxDate && this.endDate.isAfter(this.maxDate))
this.endDate = this.maxDate.clone();
if (this.dateLimit && this.startDate.clone().add(this.dateLimit).isBefore(this.endDate))
this.endDate = this.startDate.clone().add(this.dateLimit);
if (this.maxSpan && this.startDate.clone().add(this.maxSpan).isBefore(this.endDate))
this.endDate = this.startDate.clone().add(this.maxSpan);
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)
this.updateElement();
@ -539,13 +535,8 @@
this.container.find('.right .calendar-time select').removeAttr('disabled').removeClass('disabled');
}
}
if (this.endDate) {
this.container.find('input[name="daterangepicker_end"]').removeClass('active');
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');
}
if (this.endDate)
this.container.find('.drp-selected').html(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
this.updateMonthsInView();
this.updateCalendars();
this.updateFormInputs();
@ -706,7 +697,7 @@
html += '<th></th>';
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 {
html += '<th></th>';
}
@ -716,8 +707,8 @@
if (this.showDropdowns) {
var currentMonth = calendar[1][1].month();
var currentYear = calendar[1][1].year();
var maxYear = (maxDate && maxDate.year()) || (currentYear + 5);
var minYear = (minDate && minDate.year()) || (currentYear - 50);
var maxYear = (maxDate && maxDate.year()) || (this.maxYear);
var minYear = (minDate && minDate.year()) || (this.minYear);
var inMinYear = currentYear == minYear;
var inMaxYear = currentYear == maxYear;
@ -748,7 +739,7 @@
html += '<th colspan="5" class="month">' + dateHtml + '</th>';
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 {
html += '<th></th>';
}
@ -768,10 +759,10 @@
html += '</thead>';
html += '<tbody>';
//adjust maxDate to reflect the dateLimit setting in order to
//grey out end dates beyond the dateLimit
if (this.endDate == null && this.dateLimit) {
var maxLimit = this.startDate.clone().add(this.dateLimit).endOf('day');
//adjust maxDate to reflect the maxSpan setting in order to
//grey out end dates beyond the maxSpan
if (this.endDate == null && this.maxSpan) {
var maxLimit = this.startDate.clone().add(this.maxSpan).endOf('day');
if (!maxDate || maxLimit.isBefore(maxDate)) {
maxDate = maxLimit;
}
@ -865,8 +856,8 @@
var html, selected, minDate, maxDate = this.maxDate;
if (this.dateLimit && (!this.maxDate || this.startDate.clone().add(this.dateLimit).isAfter(this.maxDate)))
maxDate = this.startDate.clone().add(this.dateLimit);
if (this.maxSpan && (!this.maxDate || this.startDate.clone().add(this.maxSpan).isAfter(this.maxDate)))
maxDate = this.startDate.clone().add(this.maxSpan);
if (side == 'left') {
selected = this.startDate.clone();
@ -876,12 +867,12 @@
minDate = this.startDate;
//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() != '') {
selected.hour(timeSelector.find('.hourselect option:selected').val() || selected.hour());
selected.minute(timeSelector.find('.minuteselect option:selected').val() || selected.minute());
selected.second(timeSelector.find('.secondselect option:selected').val() || selected.second());
selected.hour(selected.hour() || timeSelector.find('.hourselect option:selected').val());
selected.minute(selected.minute() || timeSelector.find('.minuteselect option:selected').val());
selected.second(selected.second() || timeSelector.find('.secondselect option:selected').val());
if (!this.timePicker24Hour) {
var ampm = timeSelector.find('.ampmselect option:selected').val();
@ -1014,20 +1005,12 @@
html += '</select>';
}
this.container.find('.calendar.' + side + ' .calendar-time div').html(html);
this.container.find('.calendar.' + side + ' .calendar-time').html(html);
},
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)))) {
this.container.find('button.applyBtn').removeAttr('disabled');
} else {
@ -1052,7 +1035,7 @@
containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top;
else
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') {
this.container.css({
@ -1135,7 +1118,7 @@
//if a new date range was selected, invoke the user callback function
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
this.updateElement();
@ -1181,24 +1164,6 @@
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) {
var label = e.target.getAttribute('data-range-key');
this.chosenLabel = label;
@ -1260,12 +1225,6 @@
var cal = $(e.target).parents('.calendar');
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
var leftCalendar = this.leftCalendar;
var rightCalendar = this.rightCalendar;
@ -1370,17 +1329,19 @@
var customRange = true;
var i = 0;
for (var range in this.ranges) {
if (this.timePicker) {
if (this.startDate.isSame(this.ranges[range][0]) && this.endDate.isSame(this.ranges[range][1])) {
if (this.timePicker) {
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;
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;
}
} else {
//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')) {
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;
}
}
@ -1388,7 +1349,7 @@
}
if (customRange) {
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 {
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() {
if (!this.element.is('input')) 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),
start = null,
@ -1591,6 +1489,14 @@
if ((e.keyCode === 9) || (e.keyCode === 13)) {
this.hide();
}
//hide on esc and prevent propagation
if (e.keyCode === 27) {
e.preventDefault();
e.stopPropagation();
this.hide();
}
},
updateElement: function() {
@ -1612,11 +1518,12 @@
};
$.fn.daterangepicker = function(options, callback) {
var implementOptions = $.extend(true, {}, $.fn.daterangepicker.defaultOptions, options);
this.each(function() {
var el = $(this);
if (el.data('daterangepicker'))
el.data('daterangepicker').remove();
el.data('daterangepicker', new DateRangePicker(el, options, callback));
el.data('daterangepicker', new DateRangePicker(el, implementOptions, callback));
});
return this;
};

View File

@ -18,9 +18,40 @@
/*------------------------------------------------------------------------------
* Helpers
*----------------------------------------------------------------------------*/
.ui-helper-hidden {
.fancytree-helper-hidden {
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
*----------------------------------------------------------------------------*/
@ -344,6 +375,16 @@ span.fancytree-node.fancytree-error span.fancytree-title {
/*------------------------------------------------------------------------------
* 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-dnd-modifier {
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-expander,
.fancytree-container.fancytree-rtl span.fancytree-icon,
.fancytree-container.fancytree-rtl span.fancytree-drag-helper-img,
.fancytree-container.fancytree-rtl #fancytree-drop-marker {
.fancytree-container.fancytree-rtl span.fancytree-drag-helper-img {
background-image: url("../skin-lion/icons-rtl.gif");
}
.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 {
background-image: none;
}
#fancytree-drop-marker.fancytree-rtl {
background-image: url("../skin-lion/icons-rtl.gif");
}
/*------------------------------------------------------------------------------
* 'table' extension
*----------------------------------------------------------------------------*/
@ -488,7 +531,7 @@ table.fancytree-ext-columnview .fancytree-has-children span.fancytree-cv-right:h
* 'filter' extension
*----------------------------------------------------------------------------*/
.fancytree-ext-filter-dimm span.fancytree-node span.fancytree-title {
color: silver;
color: #c0c0c0;
font-weight: lighter;
}
.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 span.fancytree-node.fancytree-submatch span.fancytree-title {
color: silver;
color: #c0c0c0;
font-weight: lighter;
}
.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.