Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use Bootstrap tooltips instead of plain title attributes 

By using data-original-title the tooltips live update without reapplying the
js code, such as .tooltip('fixTitle') each time the content changes. This
method also works well with angular expressions:

    data-original-title="{{'Download Rate' | translate}}"

This example provides a bootstrap tooltip saying 'Download Rate' that changes
automatically when the language is updated.
This commit is contained in:
norgeous 2016-03-16 14:55:29 +00:00 committed by Jakob Borg
parent f66c1c3c9c
commit 78120bd989
4 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gui/dark/assets/css/overrides.css
View File

@ -71,6 +71,10 @@ identicon {
min-width: 250px;
}
.tooltip{
word-wrap:break-word;
}
.panel-heading .fa, .modal-header .fa {
margin-right: 10px;
}

4
gui/default/assets/css/overrides.css
View File

@ -71,6 +71,10 @@ identicon {
min-width: 250px;
}
.tooltip{
word-wrap:break-word;
}
.panel-heading .fa, .modal-header .fa {
margin-right: 10px;
}

13
gui/default/index.html
View File

@ -258,7 +258,9 @@
</tr>
<tr>
<th><span class="fa fa-fw fa-folder-open"></span>&nbsp;<span translate>Folder Path</span></th>
<td class="text-right" title="{{folder.path}}">{{folder.path}}</td>
<td class="text-right">
<span tooltip data-original-title="{{folder.path}}">{{folder.path}}</span>
</td>
</tr>
<tr ng-if="model[folder.id].invalid || model[folder.id].error">
<th><span class="fa fa-fw fa-exclamation-triangle"></span>&nbsp;<span translate>Error</span></th>
@ -281,7 +283,7 @@
<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>
<td class="text-right">
<span title="{{scanRate(folder.id) | binary}}B/s">~ {{scanRemaining(folder.id)}}</span>
<span tooltip data-original-title="{{scanRate(folder.id) | binary}}B/s">~ {{scanRemaining(folder.id)}}</span>
</td>
</tr>
<tr ng-if="!folder.readOnly && (folderStatus(folder) === 'outofsync' || hasFailedFiles(folder.id))">
@ -344,7 +346,7 @@
<tr ng-if="!folder.readOnly && folderStats[folder.id].lastFile && folderStats[folder.id].lastFile.filename">
<th><span class="fa fa-fw fa-exchange"></span>&nbsp;<span translate>Last File Received</span></th>
<td class="text-right">
<span title="{{folderStats[folder.id].lastFile.filename}} @ {{folderStats[folder.id].lastFile.at | date:'yyyy-MM-dd HH:mm:ss'}}">
<span tooltip data-original-title="{{folderStats[folder.id].lastFile.filename}} @ {{folderStats[folder.id].lastFile.at | date:'yyyy-MM-dd HH:mm:ss'}}">
<span translate ng-if="!folderStats[folder.id].lastFile.deleted">Updated</span>
<span translate ng-if="folderStats[folder.id].lastFile.deleted">Deleted</span>
{{folderStats[folder.id].lastFile.filename | basename}}
@ -451,7 +453,9 @@
</tr>
<tr>
<th><span class="fa fa-fw fa-tag"></span>&nbsp;<span translate>Version</span></th>
<td class="text-right" title="{{versionString()}}">{{versionString()}}</td>
<td class="text-right">
<span tooltip data-original-title="{{versionString()}}">{{versionString()}}</span>
</td>
</tr>
</tbody>
</table>
@ -620,6 +624,7 @@
<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/tooltipDirective.js"></script>
<script src="syncthing/core/uniqueFolderDirective.js"></script>
<script src="syncthing/core/upgradingDialogDirective.js"></script>
<script src="syncthing/core/validDeviceidDirective.js"></script>

11
gui/default/syncthing/core/tooltipDirective.js Normal file
View File

@ -0,0 +1,11 @@
angular.module('syncthing.core')
.directive('tooltip', function () {
return {
restrict: 'A',
link: function (scope, element, attributes) {
$(element).tooltip({
html: 'true'
});
}
};
});