ui: Newoffer page update / clean-up / JS fixes

basicswap/static/css/style.css

@@ -24,7 +24,6 @@
 
 .error_msg
 {
-  color:red;
 }
 
 #hide {
@@ -216,4 +215,61 @@
   left: 50%;
   transform: translate(-50%, -50%);
   height:25px;
-}
+}
+
+
+select.select-disabled {
+opacity: 0.40 !important;
+}
+
+
+.disabled-input-enabled {
+    opacity: 0.40 !important;
+}
+select.disabled-select-enabled {
+    opacity: 0.40 !important;
+}
+
+
+  .custom-select .select {
+   appearance: none;
+   background-position: 10px center;
+   background-repeat: no-repeat;
+   position: relative;
+  }
+
+  .custom-select select::-webkit-scrollbar {
+   width: 0;
+  }
+
+  .custom-select .select option {
+   padding-left: 0;
+   text-indent: 0;
+   background-repeat: no-repeat;
+   background-position: 0 50%;
+  }
+
+  .custom-select .select option.no-space {
+   padding-left: 0;
+  }
+
+  .custom-select .select option[data-image] {
+   background-image: url('');
+  }
+
+  .custom-select .select-icon {
+   position: absolute;
+   top: 50%;
+   left: 10px;
+   transform: translateY(-50%);
+  }
+
+  .custom-select .select-image {
+   display: none;
+   margin-top: 10px;
+  }
+
+  .custom-select .select:focus+.select-dropdown .select-image {
+   display: block;
+  }
+

basicswap/static/js/coin_icons.js

@@ -1,70 +1,68 @@
-// Define a cache object to store selected option data
-const selectCache = {};
+document.addEventListener('DOMContentLoaded', () => {
 
-// Function to update the cache with the selected option data for a given select element
-function updateSelectCache(select) {
-  const selectedOption = select.options[select.selectedIndex];
-  const image = selectedOption.getAttribute('data-image');
-  const name = selectedOption.textContent.trim();
-  selectCache[select.id] = { image, name };
-}
+    const selectCache = {};
 
-// Function to set the selected option and associated image and name for a given select element
+    function updateSelectCache(select) {
+        const selectedOption = select.options[select.selectedIndex];
+        const image = selectedOption.getAttribute('data-image');
+        const name = selectedOption.textContent.trim();
+        selectCache[select.id] = { image, name };
+    }
 
+    function setSelectData(select) {
+        const selectedOption = select.options[select.selectedIndex];
+        const image = selectedOption.getAttribute('data-image') || '';
+        const name = selectedOption.textContent.trim();
+        select.style.backgroundImage = image ? `url(${image}?${new Date().getTime()})` : '';
+        
+        const selectImage = select.nextElementSibling.querySelector('.select-image');
+        if (selectImage) {
+            selectImage.src = image;
+        }
 
-function setSelectData(select) {
-  const selectedOption = select.options[select.selectedIndex];
-  const image = selectedOption.getAttribute('data-image') || '/static/images/other/coin.png'; // set a default image URL
-  const name = selectedOption.textContent.trim();
-  if (image) {
-    select.style.backgroundImage = `url(${image})`;
-    select.nextElementSibling.querySelector('.select-image').src = image;
-  } else {
-    select.style.backgroundImage = '';
-    select.nextElementSibling.querySelector('.select-image').src = '';
-  }
-  select.nextElementSibling.querySelector('.select-name').textContent = name;
-  updateSelectCache(select);
-}
+        const selectNameElement = select.nextElementSibling.querySelector('.select-name');
+        if (selectNameElement) {
+            selectNameElement.textContent = name;
+        }
 
+        updateSelectCache(select);
+    }
 
-// Function to get the selected option data from cache for a given select element
-function getSelectData(select) {
-  return selectCache[select.id] || {};
-}
+    const selectIcons = document.querySelectorAll('.custom-select .select-icon');
+    const selectImages = document.querySelectorAll('.custom-select .select-image');
+    const selectNames = document.querySelectorAll('.custom-select .select-name');
 
-// Update all custom select elements on the page
-const selects = document.querySelectorAll('.custom-select .select');
-selects.forEach((select) => {
-  // Set the initial select data based on the cached data (if available) or the selected option (if any)
-  const cachedData = getSelectData(select);
-  if (cachedData.image) {
-    select.style.backgroundImage = `url(${cachedData.image})`;
-    select.nextElementSibling.querySelector('.select-image').src = cachedData.image;
-  }
-  if (cachedData.name) {
-    select.nextElementSibling.querySelector('.select-name').textContent = cachedData.name;
-  }
-  if (select.selectedIndex >= 0) {
-    setSelectData(select);
-  }
+    selectIcons.forEach(icon => icon.style.display = 'none');
+    selectImages.forEach(image => image.style.display = 'none');
+    selectNames.forEach(name => name.style.display = 'none');
 
-  // Add event listener to update select data when an option is selected
-  select.addEventListener('change', () => {
-    setSelectData(select);
-  });
-});
+    function setupCustomSelect(select) {
+        const options = select.querySelectorAll('option');
+        const selectIcon = select.parentElement.querySelector('.select-icon');
+        const selectImage = select.parentElement.querySelector('.select-image');
 
-// Hide the select image and name on page load
-const selectIcons = document.querySelectorAll('.custom-select .select-icon');
-const selectImages = document.querySelectorAll('.custom-select .select-image');
-const selectNames = document.querySelectorAll('.custom-select .select-name');
-selectIcons.forEach((icon) => {
-  icon.style.display = 'none';
-});
-selectImages.forEach((image) => {
-  image.style.display = 'none';
-});
-selectNames.forEach((name) => {
-  name.style.display = 'none';
-});
+        options.forEach(option => {
+            const image = option.getAttribute('data-image');
+            if (image) {
+                option.style.backgroundImage = `url(${image})`;
+            }
+        });
+
+        const storedValue = localStorage.getItem(select.name);
+        if (storedValue && select.value == '-1') {
+            select.value = storedValue;
+        }
+
+        select.addEventListener('change', () => {
+            setSelectData(select);
+            localStorage.setItem(select.name, select.value);
+        });
+
+        setSelectData(select);
+        selectIcon.style.display = 'none';
+        selectImage.style.display = 'none';
+    }
+
+    const customSelects = document.querySelectorAll('.custom-select select');
+    customSelects.forEach(setupCustomSelect);
+});

basicswap/static/js/coin_icons_2.js

@@ -1,60 +0,0 @@
-// Define the function for setting up the custom select element
-function setupCustomSelect(select) {
-  const options = select.querySelectorAll('option');
-  const selectIcon = select.parentElement.querySelector('.select-icon');
-  const selectImage = select.parentElement.querySelector('.select-image');
-
-  // Set the background image for each option that has a data-image attribute
-  options.forEach(option => {
-    const image = option.getAttribute('data-image');
-    if (image) {
-      option.style.backgroundImage = `url(${image})`;
-    }
-  });
-
-  if (select.value == '-1') {
-    // Set the selected option based on the stored value
-    const storedValue = localStorage.getItem(select.name);
-    if (storedValue) {
-      select.value = storedValue;
-    }
-  }
-
-  // Set the selected option image based on the selected value
-  const selectedOption = select.querySelector(`option[value="${select.value}"]`);
-  if (selectedOption) {
-    const image = selectedOption.getAttribute('data-image');
-    if (image) {
-      select.style.backgroundImage = `url(${image})`;
-      selectImage.src = image;
-    }
-  }
-
-  // Update the select element and image when the user makes a selection
-  select.addEventListener('change', () => {
-    const selectedOption = select.options[select.selectedIndex];
-    const image = selectedOption.getAttribute('data-image');
-    if (image) {
-      select.style.backgroundImage = `url(${image})`;
-      selectImage.src = image;
-    } else {
-      select.style.backgroundImage = '';
-      selectImage.src = '';
-    }
-
-    // Save the selected value to localStorage
-    localStorage.setItem(select.name, select.value);
-  });
-
-  // Hide the select icon and image on page load
-  selectIcon.style.display = 'none';
-  selectImage.style.display = 'none';
-}
-
-// Call the setupCustomSelect function for each custom select element
-const customSelects = document.querySelectorAll('.custom-select select');
-customSelects.forEach(select => {
-  setupCustomSelect(select);
-});
-
-

basicswap/static/js/new_offer.js

@@ -37,4 +37,23 @@ window.addEventListener('DOMContentLoaded', (event) => {
       event.target.classList.remove('error');
     });
   });
-});
+});
+
+const selects = document.querySelectorAll('select.disabled-select');
+for (const select of selects) {
+    if (select.disabled) {
+        select.classList.add('disabled-select-enabled');
+    } else {
+        select.classList.remove('disabled-select-enabled');
+    }
+}
+
+
+const inputs = document.querySelectorAll('input.disabled-input, input[type="checkbox"].disabled-input');
+for (const input of inputs) {
+    if (input.readOnly) {
+        input.classList.add('disabled-input-enabled');
+    } else {
+        input.classList.remove('disabled-input-enabled');
+    }
+}