feat: upload file Area bs component #2523

aakashreddy-p · 2025-01-29T11:17:50Z

Description

Please do not leave this blank
I have updated the upload File Area with new Bs Component Properties[#2502].

What type of PR is this? (check all applicable)

🍕 Feature

Have you tested locally?

👍 yes

Astitva877

Please do the required changes.

Astitva877 · 2025-02-03T05:37:54Z

packages/@sparrow-common/src/features/create-team/components/icon-uploader/IconUploader.svelte

  import { base64ToURL, imageDataToURL } from "@sparrow/common/utils";
+  import FileTypeIcon from "../../../../../../@sparrow-library/src/icons/FileTypeIcon.svelte";


Don't import it like this, import it like @sparrow/library/src/icons.

Astitva877 · 2025-02-03T05:41:57Z

packages/@sparrow-common/src/features/create-team/components/icon-uploader/IconUploader.svelte

-    outline: none;
+    height: 164px;
+    min-width: 240px;
+    max-width: 540px;
    border-radius: 4px;
    font-size: var(--base-text);


take color as per new norms for example like this --text-ds-

sure I will update it.

Astitva877 · 2025-02-03T05:42:11Z

packages/@sparrow-common/src/features/create-team/components/icon-uploader/IconUploader.svelte

+  }
+  .file-type-container-two {
+    border-right: 1px solid var(--border-ds-surface-100);
+  }
  .sparrow-choose-file-input::file-selector-button {
    background-color: transparent;
    color: var(--primary-btn-color);


same take color as per new norm

I will update it.

Astitva877 · 2025-02-03T05:42:21Z

packages/@sparrow-common/src/features/create-team/components/icon-uploader/IconUploader.svelte

@@ -180,12 +252,4 @@
      background-color: var(--bg-tertiary-300);


same here color

I will update it.

Astitva877 · 2025-02-03T05:42:31Z

packages/@sparrow-common/src/features/create-team/components/team-icon/TeamIcon.svelte

@@ -16,11 +16,13 @@
  import type { TeamForm } from "../../types";
  import { platform } from "@tauri-apps/plugin-os";
  import { onMount } from "svelte";
+  import MessageTextIcon from "../../../../../../@sparrow-library/src/icons/MessageTextIcon.svelte";


import correctly

I will update it.

Astitva877 · 2025-02-03T05:44:18Z

packages/@sparrow-library/src/icons/MessageTextIcon.svelte

+  export let height = 16;
+  export let width = 16;
+  export let color = "#82858A";
+  export let customSvg = "";


what does this customsvg means here? Why we are using this?

@Astitva877 we can pass an SVG through props if we don't want the basic Icon.

No @aakashreddy-p we cannot do like this. We will first convert the .svg into .svelte and then we will pass that inside the component, for reference you can connect with @0mahendra, he is also implementing the same type of functionality.

okay I will update it.

Astitva877 · 2025-02-03T05:45:17Z

packages/@sparrow-common/src/features/create-team/components/team-icon/TeamIcon.svelte

+        </div>
+      {:else if teamForm.file.showFileTypeError}
+        <div class="d-flex col gap-1">
+          <MessageTextIcon visible={false} />


Instead of using this MessageTextIcon we need pass the whole icon from prop and use that here.

@Astitva877 This messageTextIcon component can take an SVG as a prop and should display it in place of the default icon.

We will take the icon as component as use here.

okay I will update it.

itsmdasifraza · 2025-02-04T06:35:27Z

packages/@sparrow-library/src/assets/newDelete.svelte

+<script lang="ts">
+  export let width: number = 12,
+    height: number = 12,
+    color: string = "#D8D8D9",
+    classProp: string = "";
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 12 12"
+  class={classProp}
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M0.588591 0.715694L0.646447 0.646447C0.820013 0.47288 1.08944 0.453595 1.28431 0.588591L1.35355 0.646447L6 5.293L10.6464 0.646447C10.8417 0.451185 11.1583 0.451185 11.3536 0.646447C11.5488 0.841709 11.5488 1.15829 11.3536 1.35355L6.707 6L11.3536 10.6464C11.5271 10.82 11.5464 11.0894 11.4114 11.2843L11.3536 11.3536C11.18 11.5271 10.9106 11.5464 10.7157 11.4114L10.6464 11.3536L6 6.707L1.35355 11.3536C1.15829 11.5488 0.841709 11.5488 0.646447 11.3536C0.451185 11.1583 0.451185 10.8417 0.646447 10.6464L5.293 6L0.646447 1.35355C0.47288 1.17999 0.453595 0.910563 0.588591 0.715694L0.646447 0.646447L0.588591 0.715694Z"


Don't use assets, add directly in icons folder

sure I will update it.

itsmdasifraza

Shift icon uploader at library level.

itsmdasifraza · 2025-02-12T07:53:02Z

packages/@sparrow-common/src/features/create-team/components/team-icon/TeamIcon.svelte

+    fileSizeError={teamForm.file.showFileSizeError}
+    fileSizeErrorMessage={ICON_CONFIG.WRONG_FILE_ERROR_MESSAGE}
+    fileTypeError={teamForm.file.showFileTypeError}
+    fileTypeErrorMessage={ICON_CONFIG.WRONG_FILE_ERROR_MESSAGE}
+    fileTypes={ICON_CONFIG.FILE_TYPES}


used same value on fileSizeErrorMessage fileTypeErrorMessage

I have updated it.

Astitva877 · 2025-02-12T09:33:03Z

packages/@sparrow-library/src/icons/NewUploadIcon.svelte

@@ -0,0 +1,18 @@
+<script>


change this file name

I have changed it.

Astitva877 · 2025-02-12T09:33:17Z

packages/@sparrow-library/src/icons/newDelete.svelte

+    d="M0.588591 0.715694L0.646447 0.646447C0.820013 0.47288 1.08944 0.453595 1.28431 0.588591L1.35355 0.646447L6 5.293L10.6464 0.646447C10.8417 0.451185 11.1583 0.451185 11.3536 0.646447C11.5488 0.841709 11.5488 1.15829 11.3536 1.35355L6.707 6L11.3536 10.6464C11.5271 10.82 11.5464 11.0894 11.4114 11.2843L11.3536 11.3536C11.18 11.5271 10.9106 11.5464 10.7157 11.4114L10.6464 11.3536L6 6.707L1.35355 11.3536C1.15829 11.5488 0.841709 11.5488 0.646447 11.3536C0.451185 11.1583 0.451185 10.8417 0.646447 10.6464L5.293 6L0.646447 1.35355C0.47288 1.17999 0.453595 0.910563 0.588591 0.715694L0.646447 0.646447L0.588591 0.715694Z"
+    fill={color}
+  />
+</svg>


same change this file name

I have changed it.

Astitva877 · 2025-02-12T09:33:40Z

packages/@sparrow-library/src/icons/newEdit.svelte

+    d="M13.236 0.763861C12.2123 -0.259828 10.5525 -0.259829 9.52885 0.76386L1.65722 8.63549C1.28304 9.00967 1.01623 9.47748 0.88467 9.99003L0.0157097 13.3755C-0.0282329 13.5467 0.0214766 13.7284 0.146457 13.8534C0.271438 13.9783 0.453118 14.028 0.624318 13.9841L4.00978 13.1151C4.52234 12.9836 4.99015 12.7168 5.36433 12.3426L13.236 4.47097C14.2596 3.44728 14.2596 1.78755 13.236 0.763861ZM10.236 1.47097C10.8691 0.837803 11.8957 0.837803 12.5288 1.47097C13.162 2.10413 13.162 3.1307 12.5288 3.76386L11.75 4.54269L9.45713 2.24979L10.236 1.47097ZM8.75002 2.9569L11.0429 5.24979L4.65722 11.6355C4.40969 11.883 4.10023 12.0595 3.76117 12.1465L1.19447 12.8053L1.85327 10.2386C1.9403 9.89958 2.1168 9.59012 2.36433 9.34259L8.75002 2.9569Z"
+    fill={color}
+  />
+</svg>


change this file name

I have changed it.

aakashreddy-p added 4 commits January 28, 2025 18:21

feat:updated upload file component[sparrowapp-dev#2502]

a98a94a

feat: updated Upload File component

234c878

Merge branch 'development' into aakash/feat/upload-area-bs-component

3407648

feat: updated upload file with visible option

d862921

aakashreddy-p requested review from itsmdasifraza and Astitva877 January 29, 2025 11:17

aakashreddy-p self-assigned this Jan 29, 2025

aakashreddy-p requested a review from gc-codes as a code owner January 29, 2025 11:17

Astitva877 requested changes Feb 3, 2025

View reviewed changes

feat: upload Ds component

b402a42

aakashreddy-p requested a review from Astitva877 February 3, 2025 10:37

feat: updated upload image component

0b26fe9

itsmdasifraza reviewed Feb 4, 2025

View reviewed changes

itsmdasifraza requested changes Feb 4, 2025

View reviewed changes

feat: updated the upload area component

99d9ca3

aakashreddy-p requested a review from itsmdasifraza February 4, 2025 11:15

aakashreddy-p added 2 commits February 5, 2025 11:50

Merge branch 'development' into aakash/feat/upload-area-bs-component

9e1235e

feat: updated upload area as wrapper

c11cf28

aakashreddy-p changed the base branch from design-system to development February 5, 2025 08:02

aakashreddy-p changed the base branch from development to design-system February 5, 2025 08:02

Merge branch 'development' into aakash/feat/upload-area-bs-component

2c97fd4

aakashreddy-p changed the base branch from design-system to development February 5, 2025 13:08

aakashreddy-p changed the base branch from development to design-system February 5, 2025 13:08

aakashreddy-p added 2 commits February 7, 2025 18:14

feat: UI of upload component

61109d6

Merge branch 'development' into aakash/feat/upload-area-bs-component

587b70f

aakashreddy-p changed the base branch from design-system to development February 10, 2025 08:11

aakashreddy-p changed the base branch from development to design-system February 10, 2025 08:12

feat: updated the upload area component

f0b11d6

itsmdasifraza requested changes Feb 12, 2025

View reviewed changes

feat: updated dupliate props

5f536fa

updated the message

4ad4b17

aakashreddy-p requested a review from itsmdasifraza February 12, 2025 08:07

Astitva877 reviewed Feb 12, 2025

View reviewed changes

feat: updated file names

dc0822c

aakashreddy-p requested a review from Astitva877 February 12, 2025 09:54

resolved git conflicts

17ec4ae

itsmdasifraza deleted the branch sparrowapp-dev:design-system February 14, 2025 09:13

itsmdasifraza closed this Feb 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: upload file Area bs component #2523

feat: upload file Area bs component #2523

aakashreddy-p commented Jan 29, 2025 •

edited

Loading

Astitva877 left a comment

Astitva877 Feb 3, 2025

Astitva877 Feb 3, 2025

aakashreddy-p Feb 3, 2025

Astitva877 Feb 3, 2025

aakashreddy-p Feb 3, 2025

Astitva877 Feb 3, 2025

aakashreddy-p Feb 3, 2025

Astitva877 Feb 3, 2025

aakashreddy-p Feb 3, 2025

Astitva877 Feb 3, 2025

aakashreddy-p Feb 3, 2025

Astitva877 Feb 3, 2025

aakashreddy-p Feb 3, 2025

Astitva877 Feb 3, 2025

aakashreddy-p Feb 3, 2025

Astitva877 Feb 3, 2025

aakashreddy-p Feb 3, 2025

itsmdasifraza Feb 4, 2025

aakashreddy-p Feb 4, 2025

itsmdasifraza left a comment

itsmdasifraza Feb 12, 2025

aakashreddy-p Feb 12, 2025

Astitva877 Feb 12, 2025

aakashreddy-p Feb 12, 2025

Astitva877 Feb 12, 2025

aakashreddy-p Feb 12, 2025

Astitva877 Feb 12, 2025

aakashreddy-p Feb 12, 2025

		import { base64ToURL, imageDataToURL } from "@sparrow/common/utils";
		import FileTypeIcon from "../../../../../../@sparrow-library/src/icons/FileTypeIcon.svelte";

		@@ -180,12 +252,4 @@
		background-color: var(--bg-tertiary-300);

feat: upload file Area bs component #2523

feat: upload file Area bs component #2523

Conversation

aakashreddy-p commented Jan 29, 2025 • edited Loading

Description

What type of PR is this? (check all applicable)

Have you tested locally?

Astitva877 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

itsmdasifraza left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aakashreddy-p commented Jan 29, 2025 •

edited

Loading