From 7c42147f4b45ebc43d9b5044b8a98f7504300d60 Mon Sep 17 00:00:00 2001 From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com> Date: Thu, 24 Oct 2024 14:21:32 +0545 Subject: [PATCH] feat(frontend): mapper UI frontend refactor (#1830) * fix(merge): merge of branch development * fix(bottom-sheet): set default bottom sheet height 85vh * fix(editor): height fix * fix(editor): configure editor for both editable and non editable * fix(more): configure editable & non-editable editor to for comment & instructions resp * fix(+page): pass instructions as props to more component * fix(more): fix editor prop * fix(page): override unnecessary vertical padding add * fix(more): UI slicing for comment section * feat(icons): icons add * feat(more): instructions section UI slicing * feat(more): component broken down to smaller comment, activities components * feat(more): seperate comment & activities skeleton to another component * fix(+page): comment more component --- .../lib/components/common/Editor/editor.css | 3 +- .../components/common/Editor/editor.svelte | 28 +++++---- .../lib/components/common/bottom-sheet.svelte | 4 +- .../components/page/more/activities.svelte | 42 ++++++++++++++ .../lib/components/page/more/comment.svelte | 58 +++++++++++++++++++ .../src/lib/components/page/more/index.svelte | 30 ++++------ .../lib/components/skeleton/activities.svelte | 20 +++++++ .../lib/components/skeleton/comment.svelte | 17 ++++++ .../src/routes/[projectId]/+page.svelte | 6 +- src/mapper/src/styles/page.css | 4 ++ .../static/assets/icons/clock-history.svg | 5 ++ .../static/assets/icons/person-fill.svg | 3 + 12 files changed, 179 insertions(+), 41 deletions(-) create mode 100644 src/mapper/src/lib/components/page/more/activities.svelte create mode 100644 src/mapper/src/lib/components/page/more/comment.svelte create mode 100644 src/mapper/src/lib/components/skeleton/activities.svelte create mode 100644 src/mapper/src/lib/components/skeleton/comment.svelte create mode 100644 src/mapper/static/assets/icons/clock-history.svg create mode 100644 src/mapper/static/assets/icons/person-fill.svg diff --git a/src/mapper/src/lib/components/common/Editor/editor.css b/src/mapper/src/lib/components/common/Editor/editor.css index f482a7d7ac..8321a19509 100644 --- a/src/mapper/src/lib/components/common/Editor/editor.css +++ b/src/mapper/src/lib/components/common/Editor/editor.css @@ -2,13 +2,12 @@ outline: none !important; padding-left: 1rem; padding-right: 1rem; - height: 100px; + height: 100%; overflow-y: scroll; } @media screen and (max-width: 500px) { .tiptap { - height: 80px; overflow-y: scroll; } } diff --git a/src/mapper/src/lib/components/common/Editor/editor.svelte b/src/mapper/src/lib/components/common/Editor/editor.svelte index 5f24cb9dd6..ed17b91967 100644 --- a/src/mapper/src/lib/components/common/Editor/editor.svelte +++ b/src/mapper/src/lib/components/common/Editor/editor.svelte @@ -8,15 +8,22 @@ let element; let editor; + export let editable; + export let content; + export let setEditorHtmlContent; onMount(() => { editor = new Editor({ element: element, extensions: [StarterKit], - content: '', + content: content, onTransaction: () => { editor = editor; }, + editable: editable, + onUpdate: ({ editor }) => { + setEditorHtmlContent && setEditorHtmlContent(editor.getHTML()); + }, }); }); @@ -28,23 +35,14 @@
-
- {#if editor} +
+ {#if editor && editable} {/if} -
-
-
- CLEAR - COMMENT +
+
+
diff --git a/src/mapper/src/lib/components/common/bottom-sheet.svelte b/src/mapper/src/lib/components/common/bottom-sheet.svelte index 4d0c7804bf..c66edda881 100644 --- a/src/mapper/src/lib/components/common/bottom-sheet.svelte +++ b/src/mapper/src/lib/components/common/bottom-sheet.svelte @@ -21,8 +21,8 @@ onMount(() => { show = true; document.body.style.overflowY = 'hidden'; - bottomSheetRef.style.height = `50vh`; - updateSheetHeight(50); + bottomSheetRef.style.height = `85vh`; + updateSheetHeight(85); }); const hideBottomSheet = () => { diff --git a/src/mapper/src/lib/components/page/more/activities.svelte b/src/mapper/src/lib/components/page/more/activities.svelte new file mode 100644 index 0000000000..a4cdbc5f59 --- /dev/null +++ b/src/mapper/src/lib/components/page/more/activities.svelte @@ -0,0 +1,42 @@ + + +
+ {#if false} + {#each Array.from({ length: 5 }) as _, index} + + {/each} + {:else} + {#each Array.from({ length: 5 }) as _, index} +
+
+ +
+

Localadmin

+
+

#2

+
+ +

2024-10-21 11:42

+
+
+
+
+
+

+ svcfmtm updated status to MAPPED +

+ +
+
+ {/each} + {/if} +
+ + diff --git a/src/mapper/src/lib/components/page/more/comment.svelte b/src/mapper/src/lib/components/page/more/comment.svelte new file mode 100644 index 0000000000..c6b390d60b --- /dev/null +++ b/src/mapper/src/lib/components/page/more/comment.svelte @@ -0,0 +1,58 @@ + + +
+
+ {#if false} + {#each Array.from({ length: 5 }) as _, index} + + {/each} + {:else} + {#each Array.from({ length: 5 }) as _, index} +
+
+ +
+

Localadmin

+
+

#2

+
+ +

2024-10-21 11:42

+
+
+
+
+ This is a comment

'} /> +
+ {/each} + {/if} +
+ +
+ { + // to-do: store state to post comment + }} + /> +
+ CLEAR + COMMENT +
+
+
+ + diff --git a/src/mapper/src/lib/components/page/more/index.svelte b/src/mapper/src/lib/components/page/more/index.svelte index c42a184a6f..e629e93428 100644 --- a/src/mapper/src/lib/components/page/more/index.svelte +++ b/src/mapper/src/lib/components/page/more/index.svelte @@ -1,5 +1,7 @@
{#if activeStack === ''} {#each stackGroup as stack}
(activeStack = stack.title)} >
@@ -38,35 +41,24 @@ {#if activeStack !== ''} -
+
(activeStack = '')} > -

{activeStack}

+

{activeStack}

{/if} {#if activeStack === 'Comment'} -
-
- -
- -
-
+ {/if} + {#if activeStack === 'Instructions'} -
-

Instructions

-
+ {/if} {#if activeStack === 'Activities'} -
-

Activities

-
+ {/if}
- - diff --git a/src/mapper/src/lib/components/skeleton/activities.svelte b/src/mapper/src/lib/components/skeleton/activities.svelte new file mode 100644 index 0000000000..1a04c786b9 --- /dev/null +++ b/src/mapper/src/lib/components/skeleton/activities.svelte @@ -0,0 +1,20 @@ +
+
+ +
+ +
+ + +
+
+
+
+ + +
+
diff --git a/src/mapper/src/lib/components/skeleton/comment.svelte b/src/mapper/src/lib/components/skeleton/comment.svelte new file mode 100644 index 0000000000..5ecc3f415d --- /dev/null +++ b/src/mapper/src/lib/components/skeleton/comment.svelte @@ -0,0 +1,17 @@ +
+
+ +
+ +
+ + +
+
+
+ + +
diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte index d5eadd6cdc..36c4afaca0 100644 --- a/src/mapper/src/routes/[projectId]/+page.svelte +++ b/src/mapper/src/routes/[projectId]/+page.svelte @@ -527,15 +527,15 @@ }} > {#if selectedTab === 'events'} - + {/if} - + {/if} {#if selectedTab === 'offline'}
TODO stuff here
diff --git a/src/mapper/src/styles/page.css b/src/mapper/src/styles/page.css index e87d22ddb3..ef12c3c43b 100644 --- a/src/mapper/src/styles/page.css +++ b/src/mapper/src/styles/page.css @@ -36,3 +36,7 @@ ::-webkit-scrollbar-thumb:hover { background: #c9c8c8; } + +p { + margin: 0px; +} diff --git a/src/mapper/static/assets/icons/clock-history.svg b/src/mapper/static/assets/icons/clock-history.svg new file mode 100644 index 0000000000..f685e10a1d --- /dev/null +++ b/src/mapper/static/assets/icons/clock-history.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/mapper/static/assets/icons/person-fill.svg b/src/mapper/static/assets/icons/person-fill.svg new file mode 100644 index 0000000000..46d1a75f83 --- /dev/null +++ b/src/mapper/static/assets/icons/person-fill.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file