gui: Modal tweaks

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3292
LGTM: AudriusButkevicius, calmh
This commit is contained in:
Daniel Harte 2016-06-12 14:06:48 +00:00 committed by Jakob Borg
parent 6f5ca53f99
commit de298da532
44 changed files with 750 additions and 962 deletions

View File

@ -45,7 +45,7 @@
</button> </button>
</li> </li>
<li ng-if="upgradeInfo && upgradeInfo.majorNewer" class="upgrade-newer-major"> <li ng-if="upgradeInfo && upgradeInfo.majorNewer" class="upgrade-newer-major">
<button type="button" class="btn navbar-btn btn-danger btn-sm" ng-click="upgradeMajor()"> <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="fa fa-arrow-circle-up"></span>
<span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span> <span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
</button> </button>
@ -65,7 +65,7 @@
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li> <li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li>
<li><a href="" ng-click="idDevice(thisDevice())"><span class="fa fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li> <li><a href="" data-toggle="modal" data-target="#idqr" ng-click="currentDevice=thisDevice()"><span class="fa fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="" ng-click="shutdown()"><span class="fa fa-fw fa-power-off"></span>&nbsp;<span translate>Shutdown</span></a></li> <li><a href="" ng-click="shutdown()"><span class="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="restart()"><span class="fa fa-fw fa-refresh"></span>&nbsp;<span translate>Restart</span></a></li>
@ -75,7 +75,7 @@
<span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span> <span class="fa fa-fw fa-book"></span>&nbsp;<span translate>Help</span>
</a> </a>
</li> </li>
<li><a href="" ng-click="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="fa fa-fw fa-heart-o"></span>&nbsp;<span translate>About</span></a></li>
<li class="divider"></li> <li class="divider"></li>
<li><a href="" ng-click="advanced()"><span class="fa fa-fw fa-cogs"></span>&nbsp;<span translate>Advanced</span></a></li> <li><a href="" ng-click="advanced()"><span class="fa fa-fw fa-cogs"></span>&nbsp;<span translate>Advanced</span></a></li>
</ul> </ul>
@ -628,23 +628,23 @@
</div> </div>
</nav> </nav>
<div network-error-dialog></div> <ng-include src="'syncthing/core/networkErrorDialogView.html'"></ng-include>
<div http-error-dialog></div> <ng-include src="'syncthing/core/httpErrorDialogView.html'"></ng-include>
<div restarting-dialog></div> <ng-include src="'syncthing/core/restartingDialogView.html'"></ng-include>
<div upgrading-dialog></div> <ng-include src="'syncthing/core/upgradingDialogView.html'"></ng-include>
<div shutdown-dialog></div> <ng-include src="'syncthing/core/shutdownDialogView.html'"></ng-include>
<div idqr-modal></div> <ng-include src="'syncthing/device/idqrModalView.html'"></ng-include>
<div major-upgrade-modal></div> <ng-include src="'syncthing/device/editDeviceModalView.html'"></ng-include>
<div edit-device-modal></div> <ng-include src="'syncthing/folder/editFolderModalView.html'"></ng-include>
<div edit-folder-modal></div> <ng-include src="'syncthing/folder/editIgnoresModalView.html'"></ng-include>
<div edit-ignores-modal></div> <ng-include src="'syncthing/settings/settingsModalView.html'"></ng-include>
<div settings-modal></div> <ng-include src="'syncthing/settings/advancedSettingsModalView.html'"></ng-include>
<div advanced-settings-modal></div> <ng-include src="'syncthing/usagereport/usageReportModalView.html'"></ng-include>
<div usage-report-modal></div> <ng-include src="'syncthing/usagereport/usageReportPreviewModalView.html'"></ng-include>
<div usage-report-preview-modal></div> <ng-include src="'syncthing/transfer/neededFilesModalView.html'"></ng-include>
<div needed-files-modal></div> <ng-include src="'syncthing/transfer/failedFilesModalView.html'"></ng-include>
<div failed-files-modal></div> <ng-include src="'syncthing/core/majorUpgradeModalView.html'"></ng-include>
<div about-modal></div> <ng-include src="'syncthing/core/aboutModalView.html'"></ng-include>
<!-- vendor scripts --> <!-- vendor scripts -->
<script src="vendor/jquery/jquery-2.2.2.js"></script> <script src="vendor/jquery/jquery-2.2.2.js"></script>
@ -657,52 +657,24 @@
<!-- gui application code --> <!-- gui application code -->
<script src="syncthing/core/module.js"></script> <script src="syncthing/core/module.js"></script>
<script src="syncthing/core/aboutModalDirective.js"></script>
<script src="syncthing/core/alwaysNumberFilter.js"></script> <script src="syncthing/core/alwaysNumberFilter.js"></script>
<script src="syncthing/core/basenameFilter.js"></script> <script src="syncthing/core/basenameFilter.js"></script>
<script src="syncthing/core/binaryFilter.js"></script> <script src="syncthing/core/binaryFilter.js"></script>
<script src="syncthing/core/durationFilter.js"></script> <script src="syncthing/core/durationFilter.js"></script>
<script src="syncthing/core/eventService.js"></script> <script src="syncthing/core/eventService.js"></script>
<script src="syncthing/core/httpErrorDialogDirective.js"></script>
<script src="syncthing/core/identiconDirective.js"></script> <script src="syncthing/core/identiconDirective.js"></script>
<script src="syncthing/core/languageSelectDirective.js"></script> <script src="syncthing/core/languageSelectDirective.js"></script>
<script src="syncthing/core/lastErrorComponentFilter.js"></script> <script src="syncthing/core/lastErrorComponentFilter.js"></script>
<script src="syncthing/core/localeService.js"></script> <script src="syncthing/core/localeService.js"></script>
<script src="syncthing/core/majorUpgradeModalDirective.js"></script>
<script src="syncthing/core/modalDirective.js"></script> <script src="syncthing/core/modalDirective.js"></script>
<script src="syncthing/core/naturalFilter.js"></script> <script src="syncthing/core/naturalFilter.js"></script>
<script src="syncthing/core/networkErrorDialogDirective.js"></script>
<script src="syncthing/core/pathIsSubDirDirective.js"></script> <script src="syncthing/core/pathIsSubDirDirective.js"></script>
<script src="syncthing/core/popoverDirective.js"></script> <script src="syncthing/core/popoverDirective.js"></script>
<script src="syncthing/core/restartingDialogDirective.js"></script>
<script src="syncthing/core/selectOnClickDirective.js"></script> <script src="syncthing/core/selectOnClickDirective.js"></script>
<script src="syncthing/core/shutdownDialogDirective.js"></script>
<script src="syncthing/core/syncthingController.js"></script> <script src="syncthing/core/syncthingController.js"></script>
<script src="syncthing/core/tooltipDirective.js"></script> <script src="syncthing/core/tooltipDirective.js"></script>
<script src="syncthing/core/uniqueFolderDirective.js"></script> <script src="syncthing/core/uniqueFolderDirective.js"></script>
<script src="syncthing/core/upgradingDialogDirective.js"></script>
<script src="syncthing/core/validDeviceidDirective.js"></script> <script src="syncthing/core/validDeviceidDirective.js"></script>
<script src="syncthing/device/module.js"></script>
<script src="syncthing/device/editDeviceModalDirective.js"></script>
<script src="syncthing/device/idqrModalDirective.js"></script>
<script src="syncthing/folder/module.js"></script>
<script src="syncthing/folder/editFolderModalDirective.js"></script>
<script src="syncthing/folder/editIgnoresModalDirective.js"></script>
<script src="syncthing/settings/module.js"></script>
<script src="syncthing/settings/settingsModalDirective.js"></script>
<script src="syncthing/settings/advancedSettingsModalDirective.js"></script>
<script src="syncthing/transfer/module.js"></script>
<script src="syncthing/transfer/failedFilesModalDirective.js"></script>
<script src="syncthing/transfer/neededFilesModalDirective.js"></script>
<script src="syncthing/usagereport/module.js"></script>
<script src="syncthing/usagereport/usageReportModalDirective.js"></script>
<script src="syncthing/usagereport/usageReportPreviewModalDirective.js"></script>
<script src="assets/lang/valid-langs.js"></script> <script src="assets/lang/valid-langs.js"></script>
<script src="assets/lang/prettyprint.js"></script> <script src="assets/lang/prettyprint.js"></script>
<script src="meta.js"></script> <script src="meta.js"></script>

View File

@ -1,4 +1,4 @@
<div class="modal fade" tabindex="-1" ng-attr-data-backdrop="{{ close ? true : 'static' }}" ng-attr-data-keyboard="{{ Boolean(close) }}"> <div class="modal fade" tabindex="-1" ng-attr-data-backdrop="{{ closeable == 'yes' ? true : 'static' }}" ng-attr-data-keyboard="{{ closeable == 'yes' ? true : false }}">
<!-- <!--
// Copyright (C) 2014 The Syncthing Authors. // Copyright (C) 2014 The Syncthing Authors.
// //
@ -6,23 +6,17 @@
// License, v. 2.0. If a copy of the MPL was not distributed with this file, // License, v. 2.0. If a copy of the MPL was not distributed with this file,
// You can obtain one at http://mozilla.org/MPL/2.0/. // You can obtain one at http://mozilla.org/MPL/2.0/.
--> -->
<div class="modal-dialog" ng-class="{'modal-lg': large}"> <div class="modal-dialog {{ large == 'yes' ? 'modal-lg' : '' }}">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header alert alert-{{status}}"> <div class="modal-header {{status == 'default' ? '' : 'alert alert-'+status }}">
<h4 class="modal-title"> <h4 class="modal-title">
<div class="panel-icon"> <div ng-if="icon" class="panel-icon">
<span ng-if="icon" class="fa fa-{{icon}}"></span> <span class="fa fa-{{icon}}"></span>
</div> </div>
{{heading}} {{heading}}
</h4> </h4>
</div> </div>
<div class="modal-body" ng-transclude> <div ng-transclude></div>
</div>
<div ng-if="close" 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>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -12,12 +12,7 @@ var syncthing = angular.module('syncthing', [
'angularUtils.directives.dirPagination', 'angularUtils.directives.dirPagination',
'pascalprecht.translate', 'pascalprecht.translate',
'syncthing.core', 'syncthing.core'
'syncthing.device',
'syncthing.folder',
'syncthing.settings',
'syncthing.transfer',
'syncthing.usagereport'
]); ]);
var urlbase = 'rest'; var urlbase = 'rest';

View File

@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('aboutModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/aboutModalView.html'
};
});

View File

@ -1,4 +1,5 @@
<modal id="about" status="info" icon="heart-o" heading="{{'About' | translate}}" large="yes" close="yes"> <modal id="about" status="info" icon="heart-o" heading="{{'About' | translate}}" large="yes" closeable="yes">
<div class="modal-body">
<h1 class="text-center"> <h1 class="text-center">
<img alt="Syncthing" src="assets/img/logo-horizontal.svg" style="vertical-align: -16px" height="100" width="366"/> <img alt="Syncthing" src="assets/img/logo-horizontal.svg" style="vertical-align: -16px" height="100" width="366"/>
<br/> <br/>
@ -30,4 +31,10 @@ Jakob Borg, Audrius Butkevicius, Alexander Graf, Anderson Mesquita, Antony Male,
<li><a href="http://getbootstrap.com/">Bootstrap</a>, Copyright &copy; 2011-2015 Twitter, Inc.</li> <li><a href="http://getbootstrap.com/">Bootstrap</a>, Copyright &copy; 2011-2015 Twitter, Inc.</li>
<li><a href="http://fontawesome.io/">Font Awesome</a>, Copyright &copy; 2015 Dave Gandy</li> <li><a href="http://fontawesome.io/">Font Awesome</a>, Copyright &copy; 2015 Dave Gandy</li>
</ul> </ul>
</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>
</button>
</div>
</modal> </modal>

View File

@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('httpErrorDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/httpErrorDialogView.html'
};
});

View File

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

View File

@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('majorUpgradeModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/majorUpgradeModalView.html'
};
});

View File

@ -1,14 +1,4 @@
<div id="majorUpgrade" class="modal fade" tabindex="-1" data-backdrop="true" data-keyboard="true"> <modal id="majorUpgrade" status="danger" icon="arrow-circle-up" heading="{{'Major Upgrade' | translate}}" large="no" closeable="yes">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header alert alert-danger">
<h4 class="modal-title">
<div class="panel-icon">
<span class="fa fa-arrow-circle-up"></span>
</div>
<span translate>Major Upgrade</span>
</h4>
</div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
<span translate>This is a major version upgrade.</span> <span translate>This is a major version upgrade.</span>
@ -27,6 +17,4 @@
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</div> </modal>
</div>
</div>

View File

@ -9,10 +9,10 @@ angular.module('syncthing.core')
heading: '@', heading: '@',
status: '@', status: '@',
icon: '@', icon: '@',
close: '@', closeable: '@',
large: '@' large: '@'
}, },
link: function (scope, element, attrs, tabsCtrl) { link: function (scope, element, attrs) {
// before modal show animation // before modal show animation
$(element).on('show.bs.modal', function () { $(element).on('show.bs.modal', function () {
@ -44,7 +44,6 @@ angular.module('syncthing.core')
// find and unhide the next backdrop down in z order // find and unhide the next backdrop down in z order
var sel = false, largestZ = 0; var sel = false, largestZ = 0;
$('.modal-backdrop').each(function (i) { $('.modal-backdrop').each(function (i) {
console.log('sel each');
var thisZ = parseInt($(this).css('zIndex')); var thisZ = parseInt($(this).css('zIndex'));
if (thisZ > largestZ && $(this).attr('for-modal-id') !== $(element).attr('id')) { if (thisZ > largestZ && $(this).attr('for-modal-id') !== $(element).attr('id')) {
largestZ = thisZ; largestZ = thisZ;

View File

@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('networkErrorDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/networkErrorDialogView.html'
};
});

View File

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

View File

@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('restartingDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/restartingDialogView.html'
};
});

View File

@ -1,3 +1,8 @@
<modal id="restarting" status="info" icon="refresh" heading="{{'Restarting' | translate}}"> <modal id="restarting" status="info" icon="refresh" heading="{{'Restarting' | translate}}" large="no" closeable="no">
<p><span translate>Syncthing is restarting.</span> <span translate>Please wait</span>...</p> <div class="modal-body">
<p>
<span translate>Syncthing is restarting.</span>
<span translate>Please wait</span>...
</p>
</div>
</modal> </modal>

View File

@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('shutdownDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/shutdownDialogView.html'
};
});

View File

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

View File

@ -1028,10 +1028,6 @@ angular.module('syncthing.core')
}); });
}; };
$scope.upgradeMajor = function () {
$('#majorUpgrade').modal();
};
$scope.shutdown = function () { $scope.shutdown = function () {
restarting = true; restarting = true;
$http.post(urlbase + '/system/shutdown').success(function () { $http.post(urlbase + '/system/shutdown').success(function () {
@ -1052,12 +1048,6 @@ angular.module('syncthing.core')
$('#editDevice').modal(); $('#editDevice').modal();
}; };
$scope.idDevice = function (deviceCfg) {
$scope.currentDevice = deviceCfg;
$('#editDevice').modal('hide');
$('#idqr').modal('show');
};
$scope.addDevice = function (deviceID, name) { $scope.addDevice = function (deviceID, name) {
return $http.get(urlbase + '/system/discovery') return $http.get(urlbase + '/system/discovery')
.success(function (registry) { .success(function (registry) {
@ -1229,6 +1219,18 @@ angular.module('syncthing.core')
}).error($scope.emitHTTPError); }).error($scope.emitHTTPError);
}); });
$scope.loadFormIntoScope = function (form) {
console.log('loadFormIntoScope',form.$name);
switch (form.$name) {
case 'deviceEditor':
$scope.deviceEditor = form;
break;
case 'folderEditor':
$scope.folderEditor = form;
break;
}
}
$scope.editFolder = function (folderCfg) { $scope.editFolder = function (folderCfg) {
$scope.currentFolder = angular.copy(folderCfg); $scope.currentFolder = angular.copy(folderCfg);
if ($scope.currentFolder.path.slice(-1) === $scope.system.pathSeparator) { if ($scope.currentFolder.path.slice(-1) === $scope.system.pathSeparator) {
@ -1464,21 +1466,12 @@ angular.module('syncthing.core')
$http.get(urlbase + '/db/ignores?folder=' + encodeURIComponent($scope.currentFolder.id)) $http.get(urlbase + '/db/ignores?folder=' + encodeURIComponent($scope.currentFolder.id))
.success(function (data) { .success(function (data) {
data.ignore = data.ignore || []; data.ignore = data.ignore || [];
$('#editFolder').modal('hide')
.one('hidden.bs.modal', function() {
var textArea = $('#editIgnores textarea'); var textArea = $('#editIgnores textarea');
textArea.val(data.ignore.join('\n')); textArea.val(data.ignore.join('\n'));
$('#editIgnores').modal() $('#editIgnores').modal()
.one('hidden.bs.modal', function () {
$('#editFolder').modal();
})
.one('shown.bs.modal', function () { .one('shown.bs.modal', function () {
textArea.focus(); textArea.focus();
}); });
});
}) })
.then(function () { .then(function () {
$('#editIgnoresButton').removeAttr('disabled'); $('#editIgnoresButton').removeAttr('disabled');
@ -1501,16 +1494,6 @@ angular.module('syncthing.core')
}); });
}; };
$scope.showURPreview = function () {
$('#settings').modal('hide')
.one('hidden.bs.modal', function() {
$('#urPreview').modal()
.one('hidden.bs.modal', function () {
$('#settings').modal();
});
});
};
$scope.acceptUR = function () { $scope.acceptUR = function () {
$scope.config.options.urAccepted = 1000; // Larger than the largest existing report version $scope.config.options.urAccepted = 1000; // Larger than the largest existing report version
$scope.saveConfig(); $scope.saveConfig();
@ -1555,10 +1538,6 @@ angular.module('syncthing.core')
$http.post(urlbase + "/db/override?folder=" + encodeURIComponent(folder)); $http.post(urlbase + "/db/override?folder=" + encodeURIComponent(folder));
}; };
$scope.about = function () {
$('#about').modal('show');
};
$scope.advanced = function () { $scope.advanced = function () {
$scope.advancedConfig = angular.copy($scope.config); $scope.advancedConfig = angular.copy($scope.config);
$('#advanced').modal('show'); $('#advanced').modal('show');

View File

@ -1,7 +0,0 @@
angular.module('syncthing.core')
.directive('upgradingDialog', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/core/upgradingDialogView.html'
};
});

View File

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

View File

@ -1,7 +0,0 @@
angular.module('syncthing.device')
.directive('editDeviceModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/device/editDeviceModalView.html'
};
});

View File

@ -1,25 +1,7 @@
<div id="editDevice" class="modal fade" tabindex="-1"> <modal id="editDevice" status="default" icon="{{editingExisting ? 'pencil' : 'desktop'}}" heading="{{editingExisting ? 'Edit Device' : 'Add Device' | translate}}" large="yes" closeable="yes">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span ng-show="!editingExisting">
<div class="panel-icon">
<span class="fa fa-desktop"></span>
</div>
<span translate>Add Device</span>
</span>
<span ng-show="editingExisting">
<div class="panel-icon">
<span class="fa fa-pencil"></span>
</div>
<span translate>Edit Device</span>
</span>
</h4>
</div>
<div class="modal-body"> <div class="modal-body">
<form role="form" name="deviceEditor"> <form role="form" name="deviceEditor">
<div class="form-group" ng-class="{'has-error': deviceEditor.deviceID.$invalid && deviceEditor.deviceID.$dirty}"> <div class="form-group" ng-class="{'has-error': deviceEditor.deviceID.$invalid && deviceEditor.deviceID.$dirty}" ng-init="loadFormIntoScope(deviceEditor)">
<label translate for="deviceID">Device ID</label> <label translate for="deviceID">Device ID</label>
<input ng-if="!editingExisting" name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required valid-deviceid list="discovery-list" /> <input ng-if="!editingExisting" name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required valid-deviceid list="discovery-list" />
<datalist id="discovery-list" ng-if="!editingExisting"> <datalist id="discovery-list" ng-if="!editingExisting">
@ -61,7 +43,6 @@
<p translate class="help-block">Any devices configured on an introducer device will be added to this device as well.</p> <p translate class="help-block">Any devices configured on an introducer device will be added to this device as well.</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="form-group"> <div class="form-group">
@ -82,14 +63,13 @@
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveDevice()" ng-disabled="deviceEditor.$invalid"> <button type="button" class="btn btn-primary btn-sm" ng-click="saveDevice()" ng-disabled="deviceEditor.$invalid">
<span class="fa fa-check"></span>&nbsp;<span translate>Save</span> <span class="fa fa-check"></span>&nbsp;<span translate>Save</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" ng-click="idDevice(currentDevice)" ng-if="editingExisting || deviceEditor.deviceID.$valid"> <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#idqr" ng-if="editingExisting || deviceEditor.deviceID.$valid">
<span class="fa fa-qrcode"></span>&nbsp;<span translate>Show QR</span> <span class="fa fa-qrcode"></span>&nbsp;<span translate>Show QR</span>
</button> </button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
@ -99,6 +79,4 @@
<span class="fa fa-minus-circle"></span>&nbsp;<span translate>Remove</span> <span class="fa fa-minus-circle"></span>&nbsp;<span translate>Remove</span>
</button> </button>
</div> </div>
</div> </modal>
</div>
</div>

View File

@ -1,7 +0,0 @@
angular.module('syncthing.device')
.directive('idqrModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/device/idqrModalView.html'
};
});

View File

@ -1,4 +1,11 @@
<modal id="idqr" status="info" icon="qrcode" heading="{{'Device Identification' | translate}} - {{deviceName(currentDevice)}}" large="yes" close="yes"> <modal id="idqr" status="info" icon="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> <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}}"/> <img ng-if="currentDevice.deviceID" class="center-block img-thumbnail" ng-src="qr/?text={{currentDevice.deviceID}}"/>
</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>
</button>
</div>
</modal> </modal>

View File

@ -1 +0,0 @@
angular.module('syncthing.device', []);

View File

@ -1,7 +0,0 @@
angular.module('syncthing.folder')
.directive('editFolderModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/folder/editFolderModalView.html'
};
});

View File

@ -1,25 +1,7 @@
<div id="editFolder" class="modal fade" tabindex="-1"> <modal id="editFolder" status="default" icon="{{editingExisting ? 'pencil' : 'folder'}}" heading="{{editingExisting ? 'Edit Folder' : 'Add Folder' | translate}}" large="yes" closeable="yes">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span ng-show="!editingExisting">
<div class="panel-icon">
<span class="fa fa-folder"></span>
</div>
<span translate>Add Folder</span>
</span>
<span ng-show="editingExisting">
<div class="panel-icon">
<span class="fa fa-pencil"></span>
</div>
<span translate>Edit Folder</span>
</span>
</h4>
</div>
<div class="modal-body"> <div class="modal-body">
<form role="form" name="folderEditor"> <form role="form" name="folderEditor">
<div class="row"> <div class="row" ng-init="loadFormIntoScope(folderEditor)">
<div class="col-md-12"> <div class="col-md-12">
<div class="form-group" ng-class="{'has-error': folderEditor.folderLabel.$invalid && folderEditor.folderLabel.$dirty}"> <div class="form-group" ng-class="{'has-error': folderEditor.folderLabel.$invalid && folderEditor.folderLabel.$dirty}">
<label for="folderLabel"><span translate>Folder Label</span></label> <label for="folderLabel"><span translate>Folder Label</span></label>
@ -209,6 +191,4 @@
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Ignore Patterns</span> <span class="fa fa-eye-slash"></span>&nbsp;<span translate>Ignore Patterns</span>
</button> </button>
</div> </div>
</div> </modal>
</div>
</div>

View File

@ -1,7 +0,0 @@
angular.module('syncthing.folder')
.directive('editIgnoresModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/folder/editIgnoresModalView.html'
};
});

View File

@ -1,9 +1,4 @@
<div id="editIgnores" class="modal fade" tabindex="-1"> <modal id="editIgnores" status="default" heading="{{'Ignore Patterns' | translate}}" large="yes" closeable="yes">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" translate>Ignore Patterns</h4>
</div>
<div class="modal-body"> <div class="modal-body">
<p translate>Enter ignore patterns, one per line.</p> <p translate>Enter ignore patterns, one per line.</p>
<textarea class="form-control" rows="15"></textarea> <textarea class="form-control" rows="15"></textarea>
@ -27,6 +22,4 @@
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</div> </modal>
</div>
</div>

View File

@ -1 +0,0 @@
angular.module('syncthing.folder', []);

View File

@ -1,7 +0,0 @@
angular.module('syncthing.settings')
.directive('advancedSettingsModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/settings/advancedSettingsModalView.html'
};
});

View File

@ -1,14 +1,4 @@
<div id="advanced" class="modal fade" tabindex="-1"> <modal id="advanced" status="danger" icon="cog" heading="{{'Advanced Configuration' | translate}}" large="yes" closeable="yes">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header alert alert-danger">
<h4 class="modal-title">
<div class="panel-icon">
<span class="fa fa-cog"></span>
</div>
<span translate>Advanced Configuration</span>
</h4>
</div>
<div class="modal-body"> <div class="modal-body">
<p class="text-danger"> <p class="text-danger">
@ -86,7 +76,7 @@
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</div> </div>
</div>
</div> </modal>
</div>

View File

@ -1 +0,0 @@
angular.module('syncthing.settings', []);

View File

@ -1,7 +0,0 @@
angular.module('syncthing.settings')
.directive('settingsModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/settings/settingsModalView.html'
};
});

View File

@ -1,14 +1,4 @@
<div id="settings" class="modal fade" tabindex="-1"> <modal id="settings" status="default" icon="cog" heading="{{'Settings' | translate}}" large="yes" closeable="yes">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<div class="panel-icon">
<span class="fa fa-cog"></span>
</div>
<span translate>Settings</span>
</h4>
</div>
<div class="modal-body"> <div class="modal-body">
<form role="form" name="settingsEditor"> <form role="form" name="settingsEditor">
<div class="row"> <div class="row">
@ -119,7 +109,7 @@
<div class="form-group"> <div class="form-group">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input id="UREnabled" type="checkbox" ng-model="tmpOptions.urEnabled"> <span translate>Anonymous Usage Reporting</span> (<a translate ng-click="showURPreview()" href="#">Preview</a>) <input id="UREnabled" type="checkbox" ng-model="tmpOptions.urEnabled"> <span translate>Anonymous Usage Reporting</span> (<a href="" translate data-toggle="modal" data-target="#urPreview">Preview</a>)
</label> </label>
</div> </div>
</div> </div>
@ -154,6 +144,7 @@
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveSettings()"> <button type="button" class="btn btn-primary btn-sm" ng-click="saveSettings()">
<span class="fa fa-check"></span>&nbsp;<span translate>Save</span> <span class="fa fa-check"></span>&nbsp;<span translate>Save</span>
@ -162,6 +153,5 @@
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span> <span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button> </button>
</div> </div>
</div>
</div> </modal>
</div>

View File

@ -1,7 +0,0 @@
angular.module('syncthing.transfer')
.directive('failedFilesModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/transfer/failedFilesModalView.html'
};
});

View File

@ -1,4 +1,5 @@
<modal id="failed" status="warning" icon="exclamation-circle" heading="{{'Failed Items' | translate}}" large="yes" close="yes"> <modal id="failed" status="warning" icon="exclamation-circle" heading="{{'Failed Items' | translate}}" large="yes" closeable="yes">
<div class="modal-body">
<p> <p>
<span translate>The following items could not be synchronized.</span> <span translate>The following items could not be synchronized.</span>
<span translate>They are retried automatically and will be synced when the error is resolved.</span> <span translate>They are retried automatically and will be synced when the error is resolved.</span>
@ -16,4 +17,10 @@
<li> <li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</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>
</button>
</div>
</modal> </modal>

View File

@ -1 +0,0 @@
angular.module('syncthing.transfer', []);

View File

@ -1,7 +0,0 @@
angular.module('syncthing.transfer')
.directive('neededFilesModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/transfer/neededFilesModalView.html'
};
});

View File

@ -1,4 +1,7 @@
<modal id="needed" status="info" icon="cloud-download" heading="{{'Out of Sync Items' | translate}}" large="yes" close="yes" tabindex="-1"> <modal id="needed" status="info" icon="cloud-download" heading="{{'Out of Sync Items' | translate}}" large="yes" closeable="yes">
<div class="modal-body">
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" style="width: 20%"><span translate class="show">Reused</span></div> <div class="progress-bar progress-bar-success" style="width: 20%"><span translate class="show">Reused</span></div>
<div class="progress-bar" style="width: 20%"><span translate class="show">Copied from original</span></div> <div class="progress-bar" style="width: 20%"><span translate class="show">Copied from original</span></div>
@ -51,4 +54,12 @@
<li> <li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</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>
</button>
</div>
</modal> </modal>

View File

@ -1 +0,0 @@
angular.module('syncthing.usagereport', []);

View File

@ -1,7 +0,0 @@
angular.module('syncthing.usagereport')
.directive('usageReportModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/usagereport/usageReportModalView.html'
};
});

View File

@ -1,9 +1,4 @@
<div id="ur" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1"> <modal id="ur" status="info" icon="bar-chart" heading="{{'Allow Anonymous Usage Reporting?' | translate}}" large="yes" closeable="no">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header alert alert-info">
<h4 class="modal-title"><span class="fa fa-bar-chart"></span><span translate>Allow Anonymous Usage Reporting?</span></h4>
</div>
<div class="modal-body"> <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.</p> <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.</p>
<p translate>The aggregated statistics are publicly available at the URL below.</p> <p translate>The aggregated statistics are publicly available at the URL below.</p>
@ -21,6 +16,4 @@
<span class="fa fa-times"></span>&nbsp;<span translate>No</span> <span class="fa fa-times"></span>&nbsp;<span translate>No</span>
</button> </button>
</div> </div>
</div> </modal>
</div>
</div>

View File

@ -1,7 +0,0 @@
angular.module('syncthing.usagereport')
.directive('usageReportPreviewModal', function () {
return {
restrict: 'A',
templateUrl: 'syncthing/usagereport/usageReportPreviewModalView.html'
};
});

View File

@ -1,7 +1,18 @@
<modal id="urPreview" status="success" icon="bar-chart" heading="{{'Anonymous Usage Reporting' | translate}}" large="yes" close="yes" tabindex="-1"> <modal id="urPreview" status="success" icon="bar-chart" heading="{{'Anonymous Usage Reporting' | translate}}" large="yes" closeable="yes">
<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.</p> <div class="modal-body">
<p translate translate-value-url="<a href=&quot;https://data.syncthing.net&quot; target=&quot;_blank&quot;>https://data.syncthing.net</a>">The aggregated statistics are publicly available at {%url%}.</p> <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.
</p>
<p translate translate-value-url="<a href=&quot;https://data.syncthing.net&quot; target=&quot;_blank&quot;>https://data.syncthing.net</a>">
The aggregated statistics are publicly available at {%url%}.
</p>
<form> <form>
<textarea class="form-control" rows="20">{{reportData | json}}</textarea> <textarea class="form-control" rows="20">{{reportData | json}}</textarea>
</form> </form>
</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>
</button>
</div>
</modal> </modal>