feat:(label) Improved address label user experience

pyinstaller/electron/styles.css

@@ -665,9 +665,6 @@ tbody tr:hover{
 .xpub{
     max-width: 300px;
 }
-.tx{
-    max-width: 200px;
-}
 .scroll{
     padding: 0 10px;
 }
@@ -1118,4 +1115,4 @@ input:checked + .slider:before {
     -webkit-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
     text-align: center;
-}
+}

src/cryptoadvance/specter/static/helpers.js

@@ -62,6 +62,44 @@ document.addEventListener("updateAddressLabel", function (e) {
 	}
 });
 
+// Clicking somewhere else than on the edit label section cancels the label editing
+document.addEventListener("click", (e) => {
+	addressesTableComponent = document.querySelector('addresses-table')
+	txTableComponent = document.querySelector('tx-table')
+	addressDataComponent = document.querySelector('address-data')
+	const path = e.composedPath()
+	const clickedElement = path[0]
+	const parentElement = path[1]
+	if (addressesTableComponent) {
+		addressesTableComponent.shadowRoot.querySelectorAll('address-row').forEach(addressRow => {
+			const addressLabel = addressRow.shadowRoot.querySelector('address-label')
+			if (addressLabel.isEditing) {
+				console.log("Clicking somewhere else on the screen. Canceling editing.")
+				addressLabel.cancelEditing()
+			}
+		})
+	}
+	else if (txTableComponent) {
+		txTableComponent.shadowRoot.querySelectorAll('tx-row').forEach(txRow => {
+			const addressLabel = txRow.shadowRoot.querySelector('address-label')
+			// In the tx labeling there also "labels" ("X Recipients") which aren't label components
+			if (addressLabel !== null && addressLabel.isEditing) {
+				console.log("Clicking somewhere else on the screen. Canceling editing.")
+				addressLabel.cancelEditing()
+			}
+		})
+	}
+	// Can't use else if here: Address data is a pop-up so addresses or tx table are still in the DOM
+	if (addressDataComponent) {
+		addressDataComponent.shadowRoot.querySelectorAll('address-label').forEach(addressLabel => {
+			if (addressLabel.isEditing) {
+				console.log("Clicking somewhere else on the screen. Canceling editing.")
+				addressLabel.cancelEditing()
+			}
+		})
+	}
+})
+
 document.documentElement.style.setProperty('--mobileDistanceElementBottomHeight', `${Math.max(0, window.outerHeight - window.innerHeight)}px`);
 
 function showError(msg, timeout=0) {

src/cryptoadvance/specter/static/styles.css

@@ -739,7 +739,6 @@ table{
 }
 td, th{
     padding: 20px 10px;
-    border-bottom: 1px solid var(--cmap-bg-lightest);
 }
 tr, thead{
     background: var(--cmap-bg-lighter);
@@ -752,9 +751,6 @@ th{
 .xpub{
     max-width: 300px;
 }
-.tx{
-    max-width: 200px;
-}
 
 /* Scroll functionality along x axis
    (mainly used for xpub keys)
@@ -1346,4 +1342,4 @@ input:checked + .slider:before {
 }
 .last-digits-in-sats-amount{
     color: #797979;
-}
+}

src/cryptoadvance/specter/templates/includes/address-data.html

@@ -40,6 +40,9 @@
             border: 1px solid var(--main-color);
             background: var(--cmap-border);
         }
+        tr {
+            vertical-align: center;
+        }
     </style>
     <div class="address-data">
         <h1>{{ _("Address details") }}</h1><br>