gui: Add copy to clipboard, share by email, and share by SMS buttons to device IDs (fixes #2771, ref #3868) (#7984)
gui: Add copy to clipboard, share by email, and share by SMS buttons to device IDs (fixes #2771, ref #3868) Add buttons to allow for simpler sharing device IDs with others. The first one copies the ID to clipboard (trying to use three different methods, depending on the browser). The second one triggers a mailto link with prefilled subject and body. The third one triggers an sms link with prefilled body. The short description of Syncthing included in the latter part of the body is a direct copy from the description at the official website https://syncthing.net. Issue #3868 is referred here, because the copy to clipboard button offers an alternative method for IE11 users to actually be able to copy device IDs without having to select it manually (which doesn't work). Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
This commit is contained in:
tomasz1986
@@ -13,9 +13,18 @@
|
||||
<div class="input-group">
|
||||
<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 class="input-group-btn">
|
||||
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="editingDeviceNew() && !deviceEditor.deviceID.$valid">
|
||||
<span class="fas fa-qrcode"></span> <span translate>Show QR</span>
|
||||
<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 }}">
|
||||
<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 }}">
|
||||
<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 }}">
|
||||
<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 }}">
|
||||
<span class="fa fa-lg fa-qrcode"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,20 @@
|
||||
<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}}" height="328" width="328" alt="{{'QR code' | translate}}" />
|
||||
<div class="modal-body text-center">
|
||||
<div class="well well-sm text-monospace" select-on-click>{{currentDevice.deviceID}}</div>
|
||||
<div ng-if="currentDevice.deviceID">
|
||||
<img class="img-thumbnail" ng-src="qr/?text={{currentDevice.deviceID}}" height="328" width="328" alt="{{'QR code' | translate}}" />
|
||||
<div class="btn-group-vertical" style="vertical-align: top;">
|
||||
<button type="button" class="btn btn-default" ng-click="copyToClipboard($event, currentDevice.deviceID)">
|
||||
<span class="fa fa-lg fa-clone text-left"></span> <span translate>Copy</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('email')">
|
||||
<span class="fa fa-lg fa-envelope-o"></span> <span translate>Share by Email</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" ng-click="shareDeviceIdDialog('sms')">
|
||||
<span class="fa fa-lg fa-comments-o"></span> <span translate>Share by SMS</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<modal id="share-device-id-dialog" status="warning" icon="{{shareDeviceIdParams.icon}}" heading="{{shareDeviceIdParams.heading}}" large="{{ shareDeviceIdParams.method == 'email' ? 'yes' : 'no' }}" closeable="yes">
|
||||
<div class="modal-body" ng-switch="shareDeviceIdParams.method">
|
||||
<p>
|
||||
<span translate>The following text will automatically be inserted into a new message.</span>
|
||||
<span>
|
||||
<span ng-switch-when="email">
|
||||
<span translate>Your email app should open to let you choose the recipient and send it from your own address.</span>
|
||||
</span>
|
||||
<span ng-switch-when="sms">
|
||||
<span translate>Your SMS app should open to let you choose the recipient and send it from your own number.</span>
|
||||
</span>
|
||||
</span>
|
||||
<span translate>You can also copy and paste the text into a new message manually.</span>
|
||||
</p>
|
||||
<div ng-switch-when="email">
|
||||
<hr>
|
||||
<h5 translate>Subject:</h5>
|
||||
<pre style="word-break: normal; white-space: pre-wrap;">{{shareDeviceIdParams.subject}}<button type="button" class="btn btn-default pull-right" ng-click="copyToClipboard($event, shareDeviceIdParams.subject)" tooltip data-original-title="{{ 'Copy' | translate }}">
|
||||
<span class="fa fa-clone"></span>
|
||||
</button></pre>
|
||||
<h5 translate>Body:</h5>
|
||||
</div>
|
||||
<pre style="word-break: normal; white-space: pre-wrap;">{{shareDeviceIdParams.body}}<button type="button" class="btn btn-default pull-right" ng-click="copyToClipboard($event, shareDeviceIdParams.body)" tooltip data-original-title="{{ 'Copy' | translate }}">
|
||||
<span class="fa fa-clone"></span>
|
||||
</button></pre>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary btn-sm" ng-click="shareDeviceId()">
|
||||
<span class="{{shareDeviceIdParams.icon}}"></span> <span translate>Share</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
|
||||
<span class="fas fa-times"></span> <span translate>Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
</modal>
|
||||
Reference in New Issue
Block a user