diff options
| author | tomasz1986 <twilczynski@naver.com> | 2023-07-27 14:38:48 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-07-27 14:38:48 +0200 |
| commit | 341b79814ec9eb9740705e935f653c358832ea67 (patch) | |
| tree | 1e747090ce1613194c02079a866090d5925c0e28 | |
| parent | 319916124bda1fb9a7a68607dd03b550f8a7f590 (diff) | |
| download | syncthing-341b79814ec9eb9740705e935f653c358832ea67.tar.gz syncthing-341b79814ec9eb9740705e935f653c358832ea67.zip | |
gui: Fix tooltips on buttons inside button groups (ref #7984) (#9008)
As per Bootstrap recommendation, buttons with tooltips inside button
groups require to have container: 'body' set. This prevents tooltips
from causing the buttons to jump on hover and also allows the tooltips
to be wider instead of wrapping on every space.
Ref: https://getbootstrap.com/docs/3.3/components/#btn-groups
Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
| -rw-r--r-- | gui/default/assets/css/overrides.css | 7 | ||||
| -rw-r--r-- | gui/default/syncthing/device/editDeviceModalView.html | 8 |
2 files changed, 4 insertions, 11 deletions
diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css index 865aa4168..6bce15004 100644 --- a/gui/default/assets/css/overrides.css +++ b/gui/default/assets/css/overrides.css @@ -574,13 +574,6 @@ html[lang|="ko"] i { font-style: normal; } -/* Prevent buttons from jumping up and down - when a tooltip is shown for one of them. */ -.btn-group-vertical > .tooltip + .btn, -.btn-group-vertical > .tooltip + .btn-group { - margin-top: -1px; -} - .select-on-click { -webkit-user-select: all; user-select: all; diff --git a/gui/default/syncthing/device/editDeviceModalView.html b/gui/default/syncthing/device/editDeviceModalView.html index 972d37684..8b436b86f 100644 --- a/gui/default/syncthing/device/editDeviceModalView.html +++ b/gui/default/syncthing/device/editDeviceModalView.html @@ -14,16 +14,16 @@ <input ng-if="editingDeviceNew()" name="deviceID" id="deviceID" class="form-control text-monospace" type="text" ng-model="currentDevice.deviceID" required="" valid-deviceid list="discovery-list" aria-required="true" /> <div ng-if="!editingDeviceNew()" class="well well-sm form-control text-monospace" style="height: auto;" select-on-click>{{currentDevice.deviceID}}</div> <div id="shareDeviceIdButtons" class="input-group-btn"> - <button type="button" class="btn btn-default" ng-click="copyToClipboard($event, currentDevice.deviceID)" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Copy' | translate }}"> + <button data-container="body" type="button" class="btn btn-default" ng-click="copyToClipboard($event, currentDevice.deviceID)" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Copy' | translate }}"> <span class="fa fa-lg fa-clone"></span> </button> - <button type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('email')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by Email' | translate }}"> + <button data-container="body" type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('email')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by Email' | translate }}"> <span class="fa fa-lg fa-envelope-o"></span> </button> - <button type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('sms')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by SMS' | translate }}"> + <button data-container="body" type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('sms')" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Share by SMS' | translate }}"> <span class="fa fa-lg fa-comments-o"></span> </button> - <button type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Show QR' | translate }}"> + <button data-container="body" type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid" tooltip data-original-title="{{ 'Show QR' | translate }}"> <span class="fa fa-lg fa-qrcode"></span> </button> </div> |