From 7e0c24ec893a4c3e29a313a05863b049645dd1ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Colomb?= <src@andre.colomb.de>
Date: Wed, 16 Jun 2021 21:10:16 +0200
Subject: [PATCH] gui: Move the QR code button next to device ID in editDevice
 modal (#7653)

---
 gui/default/assets/css/overrides.css          |  6 +++++
 .../syncthing/device/editDeviceModalView.html | 23 ++++++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index c79f9ab22..252bae92c 100644
--- a/gui/default/assets/css/overrides.css
+++ b/gui/default/assets/css/overrides.css
@@ -443,3 +443,9 @@ ul.three-columns li, ul.two-columns li {
     background-color: #eeeeee;
     opacity: 1;
 }
+
+/* Make a "well" look more like a readonly text input when grouped with a button */
+.input-group .well-sm {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
diff --git a/gui/default/syncthing/device/editDeviceModalView.html b/gui/default/syncthing/device/editDeviceModalView.html
index 7a776b710..38fb995c4 100644
--- a/gui/default/syncthing/device/editDeviceModalView.html
+++ b/gui/default/syncthing/device/editDeviceModalView.html
@@ -11,7 +11,14 @@
           <div ng-if="!editingDefaults" class="form-group" ng-class="{'has-error': deviceEditor.deviceID.$invalid && deviceEditor.deviceID.$dirty}" ng-init="loadFormIntoScope(deviceEditor)">
             <label translate for="deviceID">Device ID</label>
             <div ng-if="!editingExisting">
-              <input 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 class="input-group">
+                <input 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 class="input-group-btn">
+                  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#idqr" ng-disabled="!deviceEditor.deviceID.$valid">
+                    <span class="fas fa-qrcode"></span>&nbsp;<span translate>Show QR</span>
+                  </button>
+                </div>
+              </div>
               <datalist id="discovery-list">
                 <option ng-repeat="id in discovery" value="{{id}}" />
               </datalist>
@@ -22,14 +29,21 @@
                 </ul>
               </p>
               <p class="help-block">
-                <span translate ng-if="deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine">The device ID to enter here can be found in the "Actions > Show ID" dialog on the other device. Spaces and dashes are optional (ignored).</span>
+                <span translate ng-if="deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine">The device ID to enter here can be found in the "Actions &gt; Show ID" dialog on the other device. Spaces and dashes are optional (ignored).</span>
                 <span translate ng-show="deviceEditor.deviceID.$valid || deviceEditor.deviceID.$pristine">When adding a new device, keep in mind that this device must be added on the other side too.</span>
                 <span translate ng-if="deviceEditor.deviceID.$error.required && deviceEditor.deviceID.$dirty">The device ID cannot be blank.</span>
                 <span translate ng-if="deviceEditor.deviceID.$error.validDeviceid && deviceEditor.deviceID.$dirty">The entered device ID does not look valid. It should be a 52 or 56 character string consisting of letters and numbers, with spaces and dashes being optional.</span>
                 <span translate ng-if="deviceEditor.deviceID.$error.unique && deviceEditor.deviceID.$dirty">A device with that ID is already added.</span>
               </p>
             </div>
-            <div ng-if="editingExisting" class="well well-sm text-monospace" select-on-click>{{currentDevice.deviceID}}</div>
+            <div ng-if="editingExisting" class="input-group">
+              <div class="well well-sm text-monospace form-control" 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">
+                  <span class="fas fa-qrcode"></span>&nbsp;<span translate>Show QR</span>
+                </button>
+              </div>
+            </div>
           </div>
           <div class="form-group">
             <label translate for="name">Device Name</label>
@@ -151,9 +165,6 @@
     <button type="button" class="btn btn-primary btn-sm" ng-click="saveDevice()" ng-disabled="deviceEditor.$invalid">
       <span class="fas fa-check"></span>&nbsp;<span translate>Save</span>
     </button>
-    <button ng-if="!editingDefaults" type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#idqr" ng-if="editingExisting || deviceEditor.deviceID.$valid">
-      <span class="fas fa-qrcode"></span>&nbsp;<span translate>Show QR</span>
-    </button>
     <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
       <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
     </button>