Skip to content

Commit

Permalink
feat(frontend): mapper UI frontend refactor (#1830)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@NSUWAL123
NSUWAL123 authored Oct 24, 2024
1 parent 6289dfd commit 7c42147
Show file tree
Hide file tree
Showing 12 changed files with 179 additions and 41 deletions.
3 changes: 1 addition & 2 deletions src/mapper/src/lib/components/common/Editor/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
28 changes: 13 additions & 15 deletions src/mapper/src/lib/components/common/Editor/editor.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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());
},
});
});
Expand All @@ -28,23 +35,14 @@
</script>

<div>
<div style="border: 1px solid #c2c2c2;" class="rounded-md">
{#if editor}
<div style={`border: ${editable ? '1px' : '0px'} solid #c2c2c2;`} class="rounded-md">
{#if editor && editable}
<Toolbar {editor} />
{/if}

<div bind:this={element} />
</div>
<div class="w-full flex justify-end my-2 gap-2">
<sl-button
on:click={editor?.commands.clearContent(true)}
variant="default"
size="small"
class="secondary col-span-2 sm:col-span-1"><span class="font-barlow-medium text-sm">CLEAR</span></sl-button
>
<sl-button variant="default" size="small" class="primary col-span-2 sm:col-span-1"
><span class="font-barlow-medium text-sm">COMMENT</span></sl-button
>
<div class={`${editable ? 'h-[80px]' : 'h-full'}`}>
<div bind:this={element} />
</div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions src/mapper/src/lib/components/common/bottom-sheet.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
42 changes: 42 additions & 0 deletions src/mapper/src/lib/components/page/more/activities.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<script>
import ActivitiesSkeleton from '$lib/components/skeleton/activities.svelte';
</script>

<div class="overflow-y-scroll overflow-x-hidden flex flex-col gap-2 pb-2">
{#if false}
{#each Array.from({ length: 5 }) as _, index}
<ActivitiesSkeleton />
{/each}
{:else}
{#each Array.from({ length: 5 }) as _, index}
<div class="flex flex-col gap-2 py-3 bg-[#F6F5F5] rounded-md mr-1">
<div class="flex gap-4 px-3">
<hot-icon
name="person-fill"
style="border: 1px solid"
class="!text-[1.7rem] text-red-600 cursor-pointer duration-200 rounded-full p-[2px] bg-white"
></hot-icon>
<div class="flex flex-col gap-1 flex-1">
<p class="font-semibold">Localadmin</p>
<div class="flex items-center justify-between">
<p class="text-[#484848] text-sm">#2</p>
<div class="flex items-center gap-2">
<hot-icon name="clock-history" class="!text-[1rem] text-red-600 cursor-pointer duration-200"></hot-icon>
<p class="text-[#484848] text-sm">2024-10-21 11:42</p>
</div>
</div>
</div>
</div>
<div class="px-3 flex items-center fmtm-justify-between gap-2">
<p class="font-normal text-[#484848] flex-1">
<span class="">svcfmtm</span> updated status to <span>MAPPED</span>
</p>
<hot-icon name="map" class="!text-[1rem] text-[#484848] hover:text-red-600 cursor-pointer duration-200"
></hot-icon>
</div>
</div>
{/each}
{/if}
</div>

<style></style>
58 changes: 58 additions & 0 deletions src/mapper/src/lib/components/page/more/comment.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<script>
import Editor from '$lib/components/common/Editor/editor.svelte';
import CommentSkeleton from '$lib/components/skeleton/comment.svelte';
</script>

<div class="h-[calc(100%-2.25rem)] sm:h-[calc(100%-2.6rem)]">
<div class="h-[calc(100%-11.875rem)] overflow-y-scroll overflow-x-hidden flex flex-col gap-2">
{#if false}
{#each Array.from({ length: 5 }) as _, index}
<CommentSkeleton />
{/each}
{:else}
{#each Array.from({ length: 5 }) as _, index}
<div class="flex flex-col gap-2 py-3 bg-[#F6F5F5] rounded-md">
<div class="flex gap-4 px-3">
<hot-icon
name="person-fill"
style="border: 1px solid"
class="!text-[1.7rem] text-red-600 cursor-pointer duration-200 rounded-full p-[2px] bg-white"
></hot-icon>
<div class="flex flex-col gap-1 flex-1">
<p class="font-semibold">Localadmin</p>
<div class="flex items-center justify-between">
<p class="text-[#484848] text-sm">#2</p>
<div class="flex items-center gap-2">
<hot-icon name="clock-history" class="!text-[1rem] text-red-600 cursor-pointer duration-200"
></hot-icon>
<p class="text-[#484848] text-sm">2024-10-21 11:42</p>
</div>
</div>
</div>
</div>
<Editor editable={false} content={'<p>This is a comment</p>'} />
</div>
{/each}
{/if}
</div>

<div class="mt-2">
<Editor
editable={true}
content=""
setEditorHtmlContent={(editorText) => {
// to-do: store state to post comment
}}
/>
<div class="w-full flex justify-end my-2 gap-2">
<sl-button variant="default" size="small" class="secondary col-span-2 sm:col-span-1"
><span class="font-barlow-medium text-sm">CLEAR</span></sl-button
>
<sl-button variant="default" size="small" class="primary col-span-2 sm:col-span-1"
><span class="font-barlow-medium text-sm">COMMENT</span></sl-button
>
</div>
</div>
</div>

<style></style>
30 changes: 11 additions & 19 deletions src/mapper/src/lib/components/page/more/index.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script lang="ts">
import Editor from '$lib/components/common/Editor/editor.svelte';
import Comment from '$lib/components/page/more/comment.svelte';
import Activities from '$lib/components/page/more/activities.svelte';
type stackType = '' | 'Comment' | 'Instructions' | 'Activities';
const stackGroup: { icon: string; title: stackType }[] = [
Expand All @@ -17,14 +19,15 @@
},
];
let activeStack: stackType = 'Comment';
let activeStack: stackType = 'Activities';
export let instructions;
</script>

<div class="font-barlow-medium h-full">
{#if activeStack === ''}
{#each stackGroup as stack}
<div
class="group flex items-center justify-between hover:bg-red-50 rounded-md px-2 duration-200 cursor-pointer"
class="group flex items-center justify-between hover:bg-red-50 rounded-md p-2 duration-200 cursor-pointer"
on:click={() => (activeStack = stack.title)}
>
<div class="flex items-center gap-3">
Expand All @@ -38,35 +41,24 @@

<!-- header -->
{#if activeStack !== ''}
<div class="flex items-center gap-x-2 sticky top-0 bg-white">
<div class="flex items-center gap-x-2 sticky top-0 bg-white pb-2 z-50">
<hot-icon
name="chevron-left"
class="text-[1rem] hover:-translate-x-[2px] duration-200 cursor-pointer text-[1.125rem] text-black hover:text-red-600 duration-200"
on:click={() => (activeStack = '')}
></hot-icon>
<p class="text-[1.125rem] font-barlow-semibold leading-0">{activeStack}</p>
<p class="text-[1.125rem] font-barlow-semibold">{activeStack}</p>
</div>
{/if}
<!-- body -->
{#if activeStack === 'Comment'}
<div class="h-[calc(100%-2.25rem)] sm:h-[calc(100%-2.6rem)]">
<div class="h-[calc(100%-11.875rem)] overflow-y-scroll"></div>

<div class="">
<Editor />
</div>
</div>
<Comment />
{/if}

{#if activeStack === 'Instructions'}
<div class="">
<p>Instructions</p>
</div>
<Editor editable={false} content={instructions} />
{/if}
{#if activeStack === 'Activities'}
<div>
<p>Activities</p>
</div>
<Activities />
{/if}
</div>

<style></style>
20 changes: 20 additions & 0 deletions src/mapper/src/lib/components/skeleton/activities.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div class="bg-[#F6F5F5] rounded-md p-3">
<div class="flex gap-4">
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[2.063rem] h-[2.063rem]"
></hot-skeleton>
<div class="flex-1">
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[8rem] mb-2"
></hot-skeleton>
<div class="flex justify-between flex-1">
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[1rem]"></hot-skeleton>
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[7.75rem]"
></hot-skeleton>
</div>
</div>
</div>
<div class="flex justify-between items-center mt-3">
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[16rem]"></hot-skeleton>
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[1.5rem] h-[1.5rem]"
></hot-skeleton>
</div>
</div>
17 changes: 17 additions & 0 deletions src/mapper/src/lib/components/skeleton/comment.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<div class="bg-[#F6F5F5] rounded-md p-3">
<div class="flex gap-4">
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[2.063rem] h-[2.063rem]"
></hot-skeleton>
<div class="flex-1">
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[8rem] mb-2"
></hot-skeleton>
<div class="flex justify-between flex-1">
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[1rem]"></hot-skeleton>
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[7.75rem]"
></hot-skeleton>
</div>
</div>
</div>
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-full mt-3"></hot-skeleton>
<hot-skeleton style="--color: #e3e1e1; --sheen-color: #fafafa;" effect="sheen" class="w-[8rem] mt-3"></hot-skeleton>
</div>
6 changes: 3 additions & 3 deletions src/mapper/src/routes/[projectId]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,15 +527,15 @@
}}
>
{#if selectedTab === 'events'}
<!-- {#if $taskEventArray.length > 0}
{#if $taskEventArray.length > 0}
{#each $taskEventArray as record}
<EventCard {record} highlight={record.task_id === $selectedTaskId} on:zoomToTask={(e) => zoomToTask(e)}
></EventCard>
{/each}
{/if} -->
{/if}

<!-- uncomment More to view stacked component containing comment, instructions, activities -->
<More />
<!-- <More instructions={data?.project?.project_info?.per_task_instructions} /> -->
{/if}
{#if selectedTab === 'offline'}
<div>TODO stuff here</div>
Expand Down
4 changes: 4 additions & 0 deletions src/mapper/src/styles/page.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,7 @@
::-webkit-scrollbar-thumb:hover {
background: #c9c8c8;
}

p {
margin: 0px;
}
5 changes: 5 additions & 0 deletions src/mapper/static/assets/icons/clock-history.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/mapper/static/assets/icons/person-fill.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7c42147

Please sign in to comment.