Merge pull request #870 from itsmdasifraza/feat/836/create-user-feedb…

…ack-form fix: ui adjustments [#836]
sparrowapp-dev · May 24, 2024 · 474cd02 · 474cd02
2 parents 7e5f239 + 382ed0e
commit 474cd02
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 47 deletions.
diff --git a/src/packages/@app/pages/RestExplorer/RestExplorerPage.ViewModel.ts b/src/packages/@app/pages/RestExplorer/RestExplorerPage.ViewModel.ts
@@ -341,7 +341,7 @@ class RestExplorerViewModel
       ...progressiveTab.property.request.state,
       ..._state,
     };
-    progressiveTab.isSaved = true;
+    progressiveTab.isSaved = false;
     this.tab = progressiveTab;
     this.tabRepository.updateTab(progressiveTab.tabId, progressiveTab);
   };

diff --git a/src/packages/@environments/common/hoc/WithButtonV2.svelte b/src/packages/@environments/common/hoc/WithButtonV2.svelte
@@ -25,11 +25,12 @@
   {disable}
   {loader}
   buttonSize={"32px"}
-  iconSize={"20px"}
+  iconSize={"24px"}
   defaultBackgroundColor={"var(--bg-primary-300)"}
   hoveredBackgroundColor={"var(--bg-primary-250)"}
   clickedBackgroundColor={"var(--bg-primary-250)"}
   defaultIconColor={"var(--bg-secondary-100 )"}
   hoveredIconColor={"var(--bg-secondary-100 )"}
   clickedIconColor={"var(--bg-secondary-100 )"}
+  borderRadius={"2px"}
 />
diff --git a/src/packages/@library/forms/Input/Input.svelte b/src/packages/@library/forms/Input/Input.svelte
@@ -47,6 +47,8 @@
   export let hoveredBorderColor = "red";
   export let focusedBorderColor = "green";
 
+  export let isEditIconRequired = true;
+
   /**
    * input states
    */
@@ -95,7 +97,7 @@
     {placeholder}
     style=" {componentStyle} height: 100%; {type === 'search'
       ? 'padding-left:35px !important;'
-      : ''} {type === 'text' && isHovered
+      : ''} {type === 'text' && isEditIconRequired && isHovered
       ? 'padding-right:35px !important;'
       : ''} border-color:{extractBorderHighlight(isHovered, isFocused)};"
     {disabled}
@@ -108,8 +110,8 @@
       <SearchIcon height={14} width={14} color={"var(--defaultcolor)"} />
     </span>
   {/if}
-  {#if type === "text" && isHovered && !disabled}
-    <span class="position-fixed" style="top:76px; right: 525px">
+  {#if type === "text" && isHovered && isEditIconRequired && !disabled}
+    <span class="position-absolute" style="top:2px; right: 10px">
       <PencilIcon height={"14px"} width={"14px"} color={"white"} />
     </span>
   {/if}

diff --git a/src/packages/@support/features/add-feedback/components/Drop/Drop.svelte b/src/packages/@support/features/add-feedback/components/Drop/Drop.svelte
@@ -14,7 +14,6 @@
     maxFileSize: number,
     supportedFileTypes: string[],
   ) => void;
-  export let height = "auto";
   let isDragOver = false;
 
   const generateAcceptString = (): string => {
@@ -29,22 +28,8 @@
   ) => {
     onChange(event, maxFileSize, supportedFileTypes);
   };
-  let isInfoTooltipOpen = false;
 
-  function handleSelectClick(event: MouseEvent) {
-    const selectElement = document.getElementById(`tooltip-select`);
-    if (selectElement && !selectElement.contains(event.target as Node)) {
-      isInfoTooltipOpen = false;
-    }
-  }
-
-  onDestroy(() => {
-    window.removeEventListener("click", handleSelectClick);
-  });
-
-  onMount(() => {
-    window.addEventListener("click", handleSelectClick);
-  });
+  let isInfoTooltipHovered = false;
 </script>
 
 <div class="sparrow-text-input-container mb-2">
@@ -88,9 +73,11 @@
         </label>
         <span
           style="width: 50px; padding-left: 15px; padding-top: 13px;"
-          id={`tooltip-select`}
-          on:click={() => {
-            isInfoTooltipOpen = true;
+          on:mouseenter={() => {
+            isInfoTooltipHovered = true;
+          }}
+          on:mouseleave={() => {
+            isInfoTooltipHovered = false;
           }}
         >
           <InfoIcon
@@ -111,7 +98,7 @@
           }}
           accept={generateAcceptString()}
         />
-        {#if isInfoTooltipOpen}
+        {#if isInfoTooltipHovered}
           <div
             class="p-2 position-absolute text-fs-12 bg-tertiary-650 border-radius-2"
             style="top:10px; right: 0; width: 243px; transform: translateY(-100%);"

diff --git a/src/packages/@support/features/add-feedback/layout/AddFeedback.svelte b/src/packages/@support/features/add-feedback/layout/AddFeedback.svelte
@@ -299,6 +299,7 @@
         <Input
           width={"100%"}
           type="text"
+          isEditIconRequired={false}
           bind:value={feedbackSubject}
           defaultBorderColor="transparent"
           hoveredBorderColor="transparent"

diff --git a/src/packages/@workspaces/features/collection-list/components/collection/Collection.svelte b/src/packages/@workspaces/features/collection-list/components/collection/Collection.svelte
@@ -352,22 +352,22 @@
   activeTabId
     ? 'active-collection-tab'
     : ''}"
-  on:click={() => {
-    isCollectionCreatedFirstTime.set(false);
-    visibility = !visibility;
-    if (!collection.id.includes(UntrackedItems.UNTRACKED)) {
-      if (visibility) {
-        onItemOpened("collection", {
-          workspaceId: collection.workspaceId,
-          collection,
-        });
-      }
-    }
-  }}
 >
   <button
     class="d-flex main-collection align-items-center bg-transparent border-0"
     on:contextmenu|preventDefault={(e) => rightClickContextMenu(e)}
+    on:click={() => {
+      isCollectionCreatedFirstTime.set(false);
+      visibility = !visibility;
+      if (!collection.id.includes(UntrackedItems.UNTRACKED)) {
+        if (visibility) {
+          onItemOpened("collection", {
+            workspaceId: collection.workspaceId,
+            collection,
+          });
+        }
+      }
+    }}
   >
     <img
       src={angleRight}
@@ -443,7 +443,7 @@
       class="add-icon-container border-0 rounded d-flex justify-content-center align-items-center {showAddItemMenu
         ? 'add-item-active'
         : ''}"
-      on:click|stopPropagation={(e) => {
+      on:click={(e) => {
         rightClickContextMenu2(e);
       }}
     >
@@ -453,7 +453,7 @@
       class="threedot-icon-container border-0 rounded d-flex justify-content-center align-items-center {showMenu
         ? 'threedot-active'
         : ''}"
-      on:click|stopPropagation={(e) => {
+      on:click={(e) => {
         rightClickContextMenu(e);
       }}
     >

diff --git a/src/packages/@workspaces/features/collection-list/components/folder/Folder.svelte b/src/packages/@workspaces/features/collection-list/components/folder/Folder.svelte
@@ -252,10 +252,10 @@
 
   {#if explorer}
     {#if explorer.type === "FOLDER"}
-      <button
+      <div
         bind:this={folderTabWrapper}
-        style="height:32px; margin-left: 28px;"
-        class="border-0 bg-transparent d-flex align-items-center px-2 mb-1 justify-content-between my-button btn-primary {explorer.id ===
+        style="height:32px; padding-left: 36px;"
+        class="d-flex align-items-center mb-1 justify-content-between my-button btn-primary {explorer.id ===
         activeTabId
           ? 'active-folder-tab'
           : ''}"
@@ -381,7 +381,7 @@
             <img src={threedotIcon} alt="threedotIcon" />
           </button>
         {/if}
-      </button>
+      </div>
       <div style="padding-left: 0; display: {expand ? 'block' : 'none'};">
         <div class="sub-files">
           {#each explorer.items as exp}
@@ -434,7 +434,7 @@
         </div>
       </div>
     {:else if explorer.type === "REQUEST"}
-      <div style="margin-left: 56px;">
+      <div style="cursor:pointer;">
         <Request
           api={explorer}
           {onItemRenamed}

diff --git a/src/packages/@workspaces/features/collection-list/components/request/Request.svelte b/src/packages/@workspaces/features/collection-list/components/request/Request.svelte
@@ -218,7 +218,9 @@
   activeTabId
     ? 'active-request-tab'
     : ''} "
-  style="height:32px;"
+  style="height:32px; {folder?.id
+    ? 'padding-left: 46px;'
+    : 'padding-left: 30px;'}"
 >
   <button
     on:contextmenu|preventDefault={(e) => {

diff --git a/src/packages/@workspaces/features/collection-list/layout/CollectionList.svelte b/src/packages/@workspaces/features/collection-list/layout/CollectionList.svelte
@@ -192,7 +192,7 @@
     } d-flex flex-column bg-secondary-900 scroll`}
   >
     <div
-      class="d-flex justify-content-between align-items-center align-self-stretch ps-3 pe-3 pt-3 d-none"
+      class="d-flex justify-content-between align-items-center align-self-stretch px-0 pt-3 d-none"
     >
       <p class="mb-0 text-whiteColor ellipsis text-fs-16">
         {$currentWorkspace?.name || ""}
@@ -210,7 +210,7 @@
       </button>
     </div>
     <div
-      class="d-flex align-items-center justify-content-between ps-3 pe-3 pt-3 gap-1"
+      class="d-flex align-items-center justify-content-between px-2 pt-3 gap-1"
     >
       <Input
         width={"100%"}