Change to Font Awesome icon font (fixes #2138)

- remove Glyphicon assets and customize bootstrap CSS
- add Font Awesome v4.4.0 assets
- replace Glyphicons with Font Awesome icons in HTML
- add icons to modal headers
- add attribution for Font Awesome
- format HTML source code for buttons
This commit is contained in:
Ben Schulz
2015-08-10 11:22:37 +02:00
parent 99736e5066
commit 77157f16a1
41 changed files with 884 additions and 1280 deletions

View File

@@ -1,4 +1,4 @@
<modal id="about" large="yes" close="yes" status="info" title="{{'About' | translate}}">
<modal id="about" status="info" icon="heart-o" title="{{'About' | translate}}" large="yes" close="yes">
<h1 class="text-center"><img alt="Syncthing" title="Syncthing" src="assets/img/logo-horizontal.svg" style="vertical-align: -16px" height="100" width="366"/><br/><small>{{versionString()}}</small></h1>
<hr/>
@@ -86,5 +86,6 @@
<li><a href="https://github.com/vitrun/qart">vitrun/qart</a>, Copyright &copy; The Go Authors.</li>
<li><a href="https://angularjs.org/">AngularJS</a>, Copyright &copy; 2010-2015 Google, 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>
</ul>
</modal>

View File

@@ -1,4 +1,4 @@
<modal id="httpError" status="danger" icon="exclamation-sign" title="{{'Connection Error' | translate}}">
<modal id="httpError" status="danger" icon="exclamation-circle" title="{{'Connection Error' | translate}}">
<p translate>
Syncthing seems to be experiencing a problem processing your request. Please refresh the page or restart Syncthing if the problem persists.
</p>

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="true"><span class="glyphicon glyphicon-globe"></span>&nbsp;{{localesNames[currentLocale] || "English"}} <span class="caret"></span></a>'+
'<a ng-if="visible" href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="fa fa-globe"></span>&nbsp;{{localesNames[currentLocale] || "English"}} <span class="caret"></span></a>'+
'<ul ng-if="visible" class="dropdown-menu">'+
'<li ng-repeat="(i,name) in localesNames" ng-class="{active: i==currentLocale}">'+
'<a href="#" data-ng-click="changeLanguage(i)">{{name}}</a>'+

View File

@@ -3,8 +3,7 @@
<div class="modal-content">
<div class="modal-header alert alert-danger">
<h4 class="modal-title">
<span ng-if="icon" class="glyphicon glyphicon-chevron-up"></span>
<span translate>Major Upgrade</span>
<span class="fa fa-arrow-circle-up"></span><span translate>Major Upgrade</span>
</h4>
</div>
<div class="modal-body">
@@ -18,8 +17,12 @@
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="upgrade()"><span class="glyphicon glyphicon-ok"></span>&nbsp;<span translate>Upgrade</span></button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>&nbsp;<span translate>Close</span></button>
<button type="button" class="btn btn-primary btn-sm" ng-click="upgrade()">
<span class="fa 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>
</button>
</div>
</div>
</div>

View File

@@ -1,4 +1,4 @@
<modal id="networkError" status="danger" icon="exclamation-sign" title="{{'Connection Error' | translate}}">
<modal id="networkError" status="danger" icon="exclamation-circle" title="{{'Connection Error' | translate}}">
<p translate>
Syncthing seems to be down, or there is a problem with your Internet connection. Retrying&hellip;
</p>

View File

@@ -1,3 +1,3 @@
<modal id="restarting" icon="refresh" title="{{'Restarting' | translate}}" status="info">
<modal id="restarting" status="info" icon="refresh" title="{{'Restarting' | translate}}">
<p><span translate>Syncthing is restarting.</span> <span translate>Please wait</span>...</p>
</modal>

View File

@@ -1,3 +1,3 @@
<modal id="shutdown" icon="off" status="success" title="{{'Shutdown Complete' | translate}}">
<modal id="shutdown" status="success" icon="power-off" title="{{'Shutdown Complete' | translate}}">
<p translate>Syncthing has been shut down.</p>
</modal>

View File

@@ -69,9 +69,9 @@ angular.module('syncthing.core')
'touch': 'Update'
};
$scope.needIcons = {
'rm': 'remove',
'rmdir': 'remove',
'sync': 'download',
'rm': 'trash-o',
'rmdir': 'trash-o',
'sync': 'arrow-circle-o-down',
'touch': 'asterisk'
};

View File

@@ -1,3 +1,3 @@
<modal id="upgrading" icon="refresh" title="{{'Upgrading' | translate}}" status="info">
<modal id="upgrading" status="info" icon="arrow-circle-up" title="{{'Upgrading' | translate}}">
<p><span translate>Syncthing is upgrading.</span> <span translate>Please wait</span>...</p>
</modal>

View File

@@ -2,8 +2,10 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 translate ng-show="!editingExisting" class="modal-title">Add Device</h4>
<h4 translate ng-show="editingExisting" class="modal-title">Edit Device</h4>
<h4 class="modal-title">
<span ng-show="!editingExisting"><span class="fa fa-desktop"></span><span translate>Add Device</span></span>
<span ng-show="editingExisting"><span class="fa fa-pencil"></span><span translate>Edit Device</span></span>
</h4>
</div>
<div class="modal-body">
<form role="form" name="deviceEditor">
@@ -70,9 +72,15 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveDevice()" ng-disabled="deviceEditor.$invalid"><span class="glyphicon glyphicon-ok"></span>&nbsp;<span translate>Save</span></button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>&nbsp;<span translate>Close</span></button>
<button ng-if="editingExisting" type="button" class="btn btn-warning pull-left btn-sm" ng-click="deleteDevice()"><span class="glyphicon glyphicon-minus"></span>&nbsp;<span translate>Remove</span></button>
<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>
</button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button>
<button type="button" class="btn btn-warning pull-left btn-sm" ng-click="deleteDevice()" ng-if="editingExisting">
<span class="fa fa-minus-circle"></span>&nbsp;<span translate>Remove</span>
</button>
</div>
</div>
</div>

View File

@@ -1,4 +1,4 @@
<modal id="idqr" large="yes" status="info" close="yes" icon="qrcode" title="{{'Device Identification' | translate}} &mdash; {{deviceName(thisDevice())}}">
<modal id="idqr" status="info" icon="qrcode" title="{{'Device Identification' | translate}} - {{deviceName(thisDevice())}}" large="yes" close="yes">
<div class="well well-sm text-monospace text-center">{{myID}}</div>
<img ng-if="myID" class="center-block img-thumbnail" ng-src="qr/?text={{myID}}"/>
</modal>

View File

@@ -2,8 +2,10 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 ng-show="!editingExisting" class="modal-title"><span translate>Add Folder</span></h4>
<h4 ng-show="editingExisting" class="modal-title"><span translate>Edit Folder</span></h4>
<h4 class="modal-title">
<span ng-show="!editingExisting"><span class="fa fa-folder"></span><span translate>Add Folder</span></span>
<span ng-show="editingExisting"><span class="fa fa-pencil"></span><span translate>Edit Folder</span></span>
</h4>
</div>
<div class="modal-body">
<form role="form" name="folderEditor">
@@ -54,7 +56,7 @@
<label>
<input type="checkbox" ng-model="currentFolder.readOnly"> <span translate>Folder Master</span>
</label>
&nbsp;<a href="http://docs.syncthing.net/users/foldermaster.html" target="_blank"><span class="glyphicon glyphicon-book"></span>&nbsp;<span translate>Help</span></a>
&nbsp;<a href="http://docs.syncthing.net/users/foldermaster.html" target="_blank"><span class="fa fa-book"></span>&nbsp;<span translate>Help</span></a>
</div>
<p translate class="help-block">Files are protected from changes made on other devices, but changes made on this device will be sent to the rest of the cluster.</p>
</div>
@@ -82,7 +84,7 @@
</select>
</div>
<div class="form-group">
<label translate>File Versioning</label>&emsp;<a href="http://docs.syncthing.net/users/versioning.html" target="_blank"><span class="glyphicon glyphicon-book"></span>&nbsp;<span translate>Help</span></a>
<label translate>File Versioning</label>&emsp;<a href="http://docs.syncthing.net/users/versioning.html" target="_blank"><span class="fa fa-book"></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>
@@ -163,10 +165,18 @@
<div translate ng-show="!editingExisting">When adding a new folder, keep in mind that the Folder ID is used to tie folders together between devices. They are case sensitive and must match exactly between all devices.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveFolder()" ng-disabled="folderEditor.$invalid"><span class="glyphicon glyphicon-ok"></span>&nbsp;<span translate>Save</span></button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>&nbsp;<span translate>Close</span></button>
<button ng-if="editingExisting" type="button" class="btn btn-warning pull-left btn-sm" ng-click="deleteFolder(currentFolder.id)"><span class="glyphicon glyphicon-minus"></span>&nbsp;<span translate>Remove</span></button>
<button id="editIgnoresButton" ng-if="editingExisting" type="button" class="btn btn-default pull-left btn-sm" ng-click="editIgnores()"><span class="glyphicon glyphicon-eye-close"></span>&nbsp;<span translate>Ignore Patterns</span></button>
<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>
</button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
<span class="fa fa-times"></span>&nbsp;<span translate>Close</span>
</button>
<button type="button" class="btn btn-warning pull-left btn-sm" ng-click="deleteFolder(currentFolder.id)" ng-if="editingExisting">
<span class="fa fa-minus-circle"></span>&nbsp;<span translate>Remove</span>
</button>
<button type="button" class="btn btn-default pull-left btn-sm" id="editIgnoresButton" ng-click="editIgnores()" ng-if="editingExisting">
<span class="fa fa-eye-slash"></span>&nbsp;<span translate>Ignore Patterns</span>
</button>
</div>
</div>
</div>

View File

@@ -1,28 +1,32 @@
<div id="editIgnores" class="modal fade" tabindex="-1">
<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">
<p translate>Enter ignore patterns, one per line.</p>
<textarea class="form-control" rows="15"></textarea>
<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">
<p translate>Enter ignore patterns, one per line.</p>
<textarea class="form-control" rows="15"></textarea>
<hr/>
<hr/>
<p class="small"><span translate>Quick guide to supported patterns</span> (<a href="http://docs.syncthing.net/users/ignoring.html" target="_blank" translate>full documentation</a>):</p>
<dl class="dl-horizontal dl-narrow small">
<dt><code>!</code></dt> <dd><span translate>Inversion of the given condition (i.e. do not exclude)</span></dd>
<dt><code>*</code></dt> <dd><span translate>Single level wildcard (matches within a directory only)</span></dd>
<dt><code>**</code></dt> <dd><span translate>Multi level wildcard (matches multiple directory levels)</span></dd>
<dt><code>//</code></dt> <dd><span translate>Comment, when used at the start of a line</span></dd>
</dl>
</div>
<div class="modal-footer">
<div class="pull-left"><span translate>Editing</span> <code>{{currentFolder.path}}{{system.pathSeparator}}.stignore</code></div>
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" ng-click="saveIgnores()"><span class="glyphicon glyphicon-ok"></span>&nbsp;<span translate>Save</span></button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>&nbsp;<span translate>Close</span></button>
</div>
</div>
</div>
<p class="small"><span translate>Quick guide to supported patterns</span> (<a href="http://docs.syncthing.net/users/ignoring.html" target="_blank" translate>full documentation</a>):</p>
<dl class="dl-horizontal dl-narrow small">
<dt><code>!</code></dt> <dd><span translate>Inversion of the given condition (i.e. do not exclude)</span></dd>
<dt><code>*</code></dt> <dd><span translate>Single level wildcard (matches within a directory only)</span></dd>
<dt><code>**</code></dt> <dd><span translate>Multi level wildcard (matches multiple directory levels)</span></dd>
<dt><code>//</code></dt> <dd><span translate>Comment, when used at the start of a line</span></dd>
</dl>
</div>
<div class="modal-footer">
<div class="pull-left"><span translate>Editing</span> <code>{{currentFolder.path}}{{system.pathSeparator}}.stignore</code></div>
<button type="button" class="btn btn-primary btn-sm" ng-click="saveIgnores()" data-dismiss="modal">
<span class="fa 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>
</button>
</div>
</div>
</div>
</div>

View File

@@ -2,7 +2,7 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header alert alert-danger">
<h4 translate class="modal-title">Advanced Configuration</h4>
<h4 class="modal-title"><span class="fa fa-cogs"></span><span translate>Advanced Configuration</span></h4>
</div>
<div class="modal-body">
@@ -71,8 +71,12 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveAdvanced()"><span class="glyphicon glyphicon-ok"></span>&nbsp;<span translate>Save</span></button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>&nbsp;<span translate>Close</span></button>
<button type="button" class="btn btn-primary btn-sm" ng-click="saveAdvanced()">
<span class="fa 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>
</button>
</div>
</div>
</div>

View File

@@ -2,7 +2,7 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 translate class="modal-title">Settings</h4>
<h4 class="modal-title"><span class="fa fa-cog"></span><span translate>Settings</span></h4>
</div>
<div class="modal-body">
<form role="form">
@@ -101,9 +101,11 @@
<hr />
<div class="form-group">
<label><span translate>API Key</span></label>
<label translate>API Key</label>
<div class="well well-sm text-monospace">{{tmpGUI.apiKey || "-"}}</div>
<button translate type="button" class="btn btn-sm btn-default" ng-click="setAPIKey(tmpGUI)">Generate</button>
<button type="button" class="btn btn-sm btn-default" ng-click="setAPIKey(tmpGUI)">
<span class="fa fa-repeat"></span>&nbsp;<span translate>Generate</span>
</button>
</div>
</div>
@@ -111,8 +113,12 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" ng-click="saveSettings()"><span class="glyphicon glyphicon-ok"></span>&nbsp;<span translate>Save</span></button>
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>&nbsp;<span translate>Close</span></button>
<button type="button" class="btn btn-primary btn-sm" ng-click="saveSettings()">
<span class="fa 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>
</button>
</div>
</div>
</div>

View File

@@ -1,4 +1,4 @@
<modal id="failed" large="yes" status="warning" icon="exclamation-sign" close="yes" title="{{'Failed Items' | translate}}">
<modal id="failed" status="warning" icon="exclamation-circle" title="{{'Failed Items' | translate}}" large="yes" close="yes">
<p>
<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>

View File

@@ -1,4 +1,4 @@
<div id="needed" class="modal fade" large="yes" status="info" icon="cloud-download" close="yes" title="{{'Out of Sync Items' | translate}}" tabindex="-1">
<modal id="needed" status="info" icon="cloud-download" title="{{'Out of Sync Items' | translate}}" large="yes" close="yes" tabindex="-1">
<div class="progress">
<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>
@@ -13,13 +13,13 @@
<tr dir-paginate="f in needed | itemsPerPage: neededPageSize" current-page="neededCurrentPage" total-items="neededTotal" pagination-id="needed">
<!-- Icon -->
<td class="small-data"><span class="glyphicon glyphicon-{{needIcons[f.action]}}"></span> {{needActions[f.action]}}</td>
<td class="small-data"><span class="fa fa-fw fa-{{needIcons[f.action]}}"></span> {{needActions[f.action]}}</td>
<!-- Name -->
<td ng-if="f.type != 'queued'" title="{{f.name}}">{{f.name | basename}}</td>
<td ng-if="f.type == 'queued'">
<a href="" ng-click="bumpFile(neededFolder, f.name)" title="{{'Move to top of queue' | translate}}">
<span class="glyphicon glyphicon-eject"></span>
<span class="fa fa-eject"></span>
</a>
<span title="{{f.name}}">&nbsp;{{f.name | basename}}</span>
</td>
@@ -51,4 +51,4 @@
<li>
</ul>
<div class="clearfix"></div>
</div>
</modal>

View File

@@ -1,18 +1,24 @@
<div id="ur" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header alert alert-success">
<h4 translate class="modal-title">Allow Anonymous Usage Reporting?</h4>
<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">
<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>
<button translate type="button" class="btn btn-default btn-sm" ng-show="!reportPreview" ng-click="showReportPreview()">Preview Usage Report</button>
<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>
</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="glyphicon glyphicon-ok"></span>&nbsp;<span translate>Yes</span></button>
<button type="button" class="btn btn-danger btn-sm" ng-click="declineUR()"><span class="glyphicon glyphicon-remove"></span>&nbsp;<span translate>No</span></button>
<button type="button" class="btn btn-success btn-sm" ng-click="acceptUR()">
<span class="fa 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>
</button>
</div>
</div>
</div>

View File

@@ -1,17 +1,5 @@
<div id="urPreview" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header alert alert-success">
<h4 translate class="modal-title">Anonymous Usage Reporting</h4>
</div>
<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 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>
<pre><small>{{reportData | json}}</small></pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-sm" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span>&nbsp;<span translate>OK</span></button>
</div>
</div>
</div>
</div>
<modal id="urPreview" status="success" icon="bar-chart" title="{{'Anonymous Usage Reporting' | translate}}" large="yes" close="yes" tabindex="-1">
<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>
<pre><small>{{reportData | json}}</small></pre>
</modal>