fix: open results button showing wrongly #441 (#451)

Co-authored-by: Dunsin <[email protected]>

Author: franxxu

src/pages/box-shadow.ts

@@ -15,9 +15,10 @@ import {
   getTailwindButton,
   getCssOrTailwindButton,
   getCssOrTailwindDropdown,
+  getOpenSideBarButton,
+  getAllInputElements,
 } from '../lib/getElements';
 import {
-  triggerEmptyAnimation,
   copyCSSCodeToClipboard,
   copyTailwindCodeToClipboard,
   showPopup,
@@ -37,6 +38,8 @@ const attribute = 'box-shadow';
 let isSliderOpen = false;
 const getCssOrTailwindDropdownElement = getCssOrTailwindDropdown(attribute);
 const showCopyClass = 'show-css-tailwind';
+const boxshadowInputs = getAllInputElements(attribute);
+
 function copyHandler() {
   const outputElement = getOutput(attribute);
   copyCSSCodeToClipboard(attribute, outputElement);
@@ -67,23 +70,17 @@ export function boxShadowGenerator(
   const color = getShadowColor(attribute);
   const getOutputElement = getOutput(attribute);
   const resultPage = getResultPage();
-
-  if (
-    horizontalOffset.value === '' ||
-    verticalOffset.value === '' ||
-    blur.value === '' ||
-    spread.value === '' ||
-    color.value === ''
-  ) {
-    triggerEmptyAnimation(color);
-    const resultBtn = getResultButton(attribute);
-    if(resultBtn){
-      resultBtn.style.backgroundColor = 'grey';
-    }
-    return;
+  
+  const element = boxshadowInputs[0];
+  const value = element.value;
+
+  if (value.length < 3) {
+    getOpenSideBarButton().style.display = 'none';
+  }else{
+    getOpenSideBarButton().style.display = 'flex';
+    resultPage.style.display = 'flex';
   }
 
-  resultPage.style.display = 'flex';
   if (type === 'oldResults') return;
 
   const values: Values = {

src/pages/gradient-background.ts

@@ -12,6 +12,7 @@ import {
   getCssOrTailwindDropdown,
   getTailwindButton,
   getCssOrTailwindButton,
+  getOpenSideBarButton,
 } from '../lib/getElements';
 import {
   triggerEmptyAnimation,
@@ -55,6 +56,7 @@ export function gradientBackgroundGenerator(
       if (getResultBtn) {
         getResultBtn.style.backgroundColor = 'grey';
       }
+      getOpenSideBarButton().style.display = 'none';
       triggerEmptyAnimation(ele);
     });
     return;

src/pages/gradient-border.ts

@@ -14,6 +14,7 @@ import {
   getTailwindButton,
   getCssOrTailwindButton,
   getCssOrTailwindDropdown,
+  getOpenSideBarButton,
 } from '../lib/getElements';
 import {
   copyCSSCodeToClipboard,
@@ -105,7 +106,15 @@ export function gradientBorderGenerator(
   type: 'newResults' | 'oldResults' | null
 ): void {
   if (type === null) return;
-  resultPage.style.display = 'flex';
+  const element = gradientBorderInputs[0];
+  const value = element.value;
+  if (value.length < 3) {
+    getOpenSideBarButton().style.display = 'none';
+  }else{
+    getOpenSideBarButton().style.display = 'flex';
+    resultPage.style.display = 'flex';
+  }
+  
 
   if (type === 'oldResults') return;
 

src/pages/gradient-text.ts

@@ -17,6 +17,7 @@ import {
   getCssOrTailwindDropdown,
   getPngOrSvgButton,
   getPngOrSvgDropdown,
+  getOpenSideBarButton,
 } from '../lib/getElements';
 import {
   copyCSSCodeToClipboard,
@@ -96,6 +97,7 @@ export function gradientTextGenerator(
   const getInputElement = getInputText(attribute);
 
   if (getInputElement.value.length === 0) {
+    getOpenSideBarButton().style.display = 'none';
     triggerEmptyAnimation(getInputElement);
     return;
   }

src/pages/text-shadow.ts

@@ -18,6 +18,7 @@ import {
   getCssOrTailwindDropdown,
   getPngOrSvgButton,
   getPngOrSvgDropdown,
+  getOpenSideBarButton,
 } from '../lib/getElements';
 import {
   copyCSSCodeToClipboard,
@@ -96,6 +97,7 @@ export function textShadowGenerator(
   const resultPage = getResultPage();
 
   if (getInputElement.value.length === 0) {
+    getOpenSideBarButton().style.display = 'none';
     triggerEmptyAnimation(getInputElement);
     return;
   }