From 345ef602b5a635a2d8c6d1540e8455e996e004e6 Mon Sep 17 00:00:00 2001 From: counterweight Date: Mon, 3 Mar 2025 16:03:47 +0100 Subject: [PATCH] visibility --- src/public/css/offers.css | 33 ++++++- src/public/img/many-users-gray.svg | 40 ++++++++ src/public/img/many-users-lasecagold.svg | 40 ++++++++ src/public/img/many-users.svg | 6 ++ src/public/img/user-gray.svg | 40 ++++++++ src/public/img/user-group-gray.svg | 40 ++++++++ src/public/img/user-group-lasecagold.svg | 40 ++++++++ src/public/img/user-group.svg | 6 ++ src/public/img/user-lasecagold.svg | 40 ++++++++ src/public/img/user.svg | 6 ++ src/public/javascript/offers.js | 116 ++++++++++++++++++++++- 11 files changed, 399 insertions(+), 8 deletions(-) create mode 100644 src/public/img/many-users-gray.svg create mode 100644 src/public/img/many-users-lasecagold.svg create mode 100644 src/public/img/many-users.svg create mode 100644 src/public/img/user-gray.svg create mode 100644 src/public/img/user-group-gray.svg create mode 100644 src/public/img/user-group-lasecagold.svg create mode 100644 src/public/img/user-group.svg create mode 100644 src/public/img/user-lasecagold.svg create mode 100644 src/public/img/user.svg diff --git a/src/public/css/offers.css b/src/public/css/offers.css index 63b2640..d25c9d1 100644 --- a/src/public/css/offers.css +++ b/src/public/css/offers.css @@ -127,18 +127,34 @@ text-align: left; } -.icon-checkboxed-field { +.left-icon-checkboxed-field { display: flex; align-items: center; + margin-bottom: 2px; + font-size: 0.9em; } -.icon-checkboxed-field > * { - display: inline-block; +.left-icon-checkboxed-field > * { margin-right: 2px; margin-left: 2px; - align-items: center; } -.icon-checkboxed-field img { +.left-icon-checkboxed-field img { + height: 1.2em; +} + +.right-icon-checkboxed-field { + display: flex; + align-items: center; + justify-content: end; + margin-bottom: 2px; + font-size: 0.9em; +} + +.right-icon-checkboxed-field > * { + margin-right: 2px; + margin-left: 2px; +} +.right-icon-checkboxed-field img { height: 1.2em; } @@ -181,11 +197,18 @@ text-align: left; } +.visibility-desc { + grid-column: 3; + grid-row: 5; + text-align: right; +} + .offer-long-text { font-size: 0.9em; } + #create-offer-controls { text-align: center; } diff --git a/src/public/img/many-users-gray.svg b/src/public/img/many-users-gray.svg new file mode 100644 index 0000000..d60a47e --- /dev/null +++ b/src/public/img/many-users-gray.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/many-users-lasecagold.svg b/src/public/img/many-users-lasecagold.svg new file mode 100644 index 0000000..eed7477 --- /dev/null +++ b/src/public/img/many-users-lasecagold.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/many-users.svg b/src/public/img/many-users.svg new file mode 100644 index 0000000..4add8ad --- /dev/null +++ b/src/public/img/many-users.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/src/public/img/user-gray.svg b/src/public/img/user-gray.svg new file mode 100644 index 0000000..d9813d5 --- /dev/null +++ b/src/public/img/user-gray.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/user-group-gray.svg b/src/public/img/user-group-gray.svg new file mode 100644 index 0000000..e798ca5 --- /dev/null +++ b/src/public/img/user-group-gray.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/user-group-lasecagold.svg b/src/public/img/user-group-lasecagold.svg new file mode 100644 index 0000000..bad367b --- /dev/null +++ b/src/public/img/user-group-lasecagold.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/user-group.svg b/src/public/img/user-group.svg new file mode 100644 index 0000000..a0c3ce4 --- /dev/null +++ b/src/public/img/user-group.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/src/public/img/user-lasecagold.svg b/src/public/img/user-lasecagold.svg new file mode 100644 index 0000000..db06cb4 --- /dev/null +++ b/src/public/img/user-lasecagold.svg @@ -0,0 +1,40 @@ + + + + + + + + diff --git a/src/public/img/user.svg b/src/public/img/user.svg new file mode 100644 index 0000000..7c2600b --- /dev/null +++ b/src/public/img/user.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js index 72da79b..795cc37 100644 --- a/src/public/javascript/offers.js +++ b/src/public/javascript/offers.js @@ -305,7 +305,7 @@ class Offer { bitcoinMethodsDiv.append(bitcoinMethodsTitle); const onchainAcceptedContainer = document.createElement('div'); - onchainAcceptedContainer.classList.add('icon-checkboxed-field'); + onchainAcceptedContainer.classList.add('left-icon-checkboxed-field'); if (this.is_onchain_accepted) { const onchainIcon = document.createElement('img'); onchainIcon.src = '/img/chains-lasecagold.svg'; @@ -327,7 +327,7 @@ class Offer { } const lightningAcceptedContainer = document.createElement('div'); - lightningAcceptedContainer.classList.add('icon-checkboxed-field'); + lightningAcceptedContainer.classList.add('left-icon-checkboxed-field'); if (this.is_lightning_accepted) { const lightningIcon = document.createElement('img'); lightningIcon.src = '/img/bolt-lightning-lasecagold.svg'; @@ -361,12 +361,122 @@ class Offer { lightningAcceptedContainer ); + const visibilityDiv = document.createElement('div'); + visibilityDiv.classList.add('visibility-desc'); + visibilityDiv.classList.add('subtle-box'); + + const visibilityTitle = document.createElement('p'); + visibilityTitle.classList.add('offer-card-content-title'); + visibilityTitle.innerText = 'Visibilidad'; + visibilityDiv.append(visibilityTitle); + + const showOfferToTrustedContainer = document.createElement('div'); + showOfferToTrustedContainer.classList.add('right-icon-checkboxed-field'); + + if (this.show_offer_to_trusted) { + const showOfferToTrustedIcon = document.createElement('img'); + showOfferToTrustedIcon.src = '/img/user-lasecagold.svg'; + const showOfferToTrustedText = document.createElement('p'); + showOfferToTrustedText.innerText = 'Confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToTrustedContainer.append( + showOfferToTrustedIcon, + showOfferToTrustedText, + checkIcon + ); + } else { + const showOfferToTrustedIcon = document.createElement('img'); + showOfferToTrustedIcon.src = '/img/user-gray.svg'; + const showOfferToTrustedText = document.createElement('p'); + showOfferToTrustedText.innerText = 'Confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToTrustedContainer.append( + showOfferToTrustedIcon, + showOfferToTrustedText, + checkIcon + ); + } + + const showOfferToTrustedTrustedContainer = document.createElement('div'); + showOfferToTrustedTrustedContainer.classList.add( + 'right-icon-checkboxed-field' + ); + + if (this.show_offer_to_trusted_trusted) { + const showOfferToTrustedTrustedIcon = document.createElement('img'); + showOfferToTrustedTrustedIcon.src = '/img/user-group-lasecagold.svg'; + const showOfferToTrustedTrustedText = document.createElement('p'); + showOfferToTrustedTrustedText.innerText = 'Sus confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToTrustedTrustedContainer.append( + showOfferToTrustedTrustedIcon, + showOfferToTrustedTrustedText, + checkIcon + ); + } else { + const showOfferToTrustedTrustedIcon = document.createElement('img'); + showOfferToTrustedTrustedIcon.src = '/img/user-group-gray.svg'; + const showOfferToTrustedTrustedText = document.createElement('p'); + showOfferToTrustedTrustedText.innerText = 'Sus confiados'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToTrustedTrustedContainer.append( + showOfferToTrustedTrustedIcon, + showOfferToTrustedTrustedText, + checkIcon + ); + } + + const showOfferToAllMembersContainer = document.createElement('div'); + showOfferToAllMembersContainer.classList.add('right-icon-checkboxed-field'); + + if (this.show_offer_to_all_members) { + const showOfferToAllMembersIcon = document.createElement('img'); + showOfferToAllMembersIcon.src = '/img/many-users-lasecagold.svg'; + const showOfferToAllMembersText = document.createElement('p'); + showOfferToAllMembersText.innerText = 'Todos'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-check-green.svg'; + + showOfferToAllMembersContainer.append( + showOfferToAllMembersIcon, + showOfferToAllMembersText, + checkIcon + ); + } else { + const showOfferToAllMembersIcon = document.createElement('img'); + showOfferToAllMembersIcon.src = '/img/many-users-gray.svg'; + const showOfferToAllMembersText = document.createElement('p'); + showOfferToAllMembersText.innerText = 'Todos'; + const checkIcon = document.createElement('img'); + checkIcon.src = '/img/circle-xmark-gray.svg'; + + showOfferToAllMembersContainer.append( + showOfferToAllMembersIcon, + showOfferToAllMembersText, + checkIcon + ); + } + visibilityDiv.append( + showOfferToTrustedContainer, + showOfferToTrustedTrustedContainer, + showOfferToAllMembersContainer + ); + offerCard.append( tradeDescDiv, premiumDescDiv, whereDescDiv, whenDescDiv, - bitcoinMethodsDiv + bitcoinMethodsDiv, + visibilityDiv ); return offerCard;