feat(frontend): mapper frontend continuation (#1823)

* fix(page): prettier code indentation fix * fix(bottomSheet): improve user experience * fix(bottom-sheet): bottom sheet component add * fix(+page): integrate bottom sheet * feat(pageCss): css for page route * feat(icons): icon add * fix(bottom-sheet): width fix * feat(more): stacked card UI * feat(images): lock icons add * feat(+page): symbolLayer add to display lockIcons, more layer color add * feat(icons): layer, legend icon add * feat(clickOutside): handle outside click function add * fix(+page): integrate legend and layer-switcher * feat(legend): legend UI slice * feat(layer-switcher): component for layer switcher * feat(close): icon add * fix(+page): task actions modal add * fix(+page): only show modal if status ready or locked for mapping * feat(icons): icon add * feat(tiptap): tiptap rich text editor package add * feat(editor): tiptap rich text editor add * fix(bottom-sheet): fix css * feat(more): implement text editor on comment section * fix(+page): more section add * feat(button): button css define * fix(button): btn classes add for styling * feat(icons): icons add * fix(+page): icon add to task action btns * fix(+page): change selected task boundary color on task select * feat(asset): location image add * feat(image): replace locationDot image * feat(geolocate): icon add * feat(getDeviceRotation): device orientation track function * feat(+page): geolocation with device orientation functionality add
hotosm · Oct 18, 2024 · 6ad23e9 · 6ad23e9
1 parent 98827ba
commit 6ad23e9
Show file tree

Hide file tree

Showing 42 changed files with 1,608 additions and 167 deletions.
diff --git a/src/frontend/src/components/common/BottomSheet.tsx b/src/frontend/src/components/common/BottomSheet.tsx
@@ -46,6 +46,7 @@ const BottomSheet = ({ body, onClose }: bottomSheetType) => {
   };
 
   const dragStart = (e) => {
+    e.preventDefault();
     const pagesY = e.pageY || e.changedTouches[0].screenY;
     setStartY(pagesY);
     setStartHeight(parseInt(sheetContentRef.current.style.height));
@@ -54,6 +55,7 @@ const BottomSheet = ({ body, onClose }: bottomSheetType) => {
   };
 
   const dragging = (e) => {
+    if (!isDragging) return;
     const delta = startY - (e.pageY || e.changedTouches[0].screenY);
     const newHeight = startHeight + (delta / window.innerHeight) * 100;
     bottomSheetRef.current.style.height = `100vh`;
@@ -88,22 +90,21 @@ const BottomSheet = ({ body, onClose }: bottomSheetType) => {
         </div>
         <div
           ref={sheetContentRef}
-          className={`bottom-sheet-content fmtm-shadow-[30px_-10px_10px_5px_rgba(0,0,0,0.1)] fmtm-w-full fmtm-relative fmtm-bg-white fmtm-max-h-[100vh] fmtm-h-[50vh] fmtm-max-w-[1150px] fmtm-py-6 fmtm-px-4 fmtm-duration-300 fmtm-ease-in-out fmtm-overflow-hidden ${
+          className={`bottom-sheet-content fmtm-shadow-[30px_-10px_10px_5px_rgba(0,0,0,0.1)] fmtm-w-full fmtm-relative fmtm-bg-white fmtm-max-h-[100vh] fmtm-h-[50vh] fmtm-max-w-[1150px] fmtm-pb-6 fmtm-px-4 fmtm-duration-300 fmtm-ease-in-out fmtm-overflow-hidden ${
             !show ? 'fmtm-translate-y-[100%]' : 'fmtm-translate-y-[0%]'
           } ${isDragging ? 'fmtm-transition-none' : ''} ${isFullScreen ? 'fmtm-rounded-none' : 'fmtm-rounded-t-2xl'}`}
         >
-          <div className="header fmtm-flex fmtm-justify-center">
-            <div
-              className="drag-icon fmtm-cursor-grab fmtm-select-none fmtm-p-4 -fmtm-mt-4 fmtm-z-[9999]"
-              onMouseDown={dragStart}
-              onTouchStart={dragStart}
-              onMouseMove={dragging}
-              onTouchMove={dragging}
-              onMouseUp={dragStop}
-              onTouchEnd={dragStop}
-            >
-              <span className="fmtm-h-1 fmtm-w-[2.5rem] fmtm-block fmtm-bg-[#c7d0e1] fmtm-rounded-full hover:fmtm-bg-primaryRed"></span>
-            </div>
+          <div
+            className="header fmtm-group fmtm-flex fmtm-justify-center fmtm-py-4 drag-icon fmtm-cursor-grab fmtm-select-none fmtm-z-[9999]"
+            onMouseDown={dragStart}
+            onTouchStart={dragStart}
+            onMouseMove={dragging}
+            onTouchMove={dragging}
+            onMouseUp={dragStop}
+            onTouchEnd={dragStop}
+            onMouseOut={dragStop}
+          >
+            <span className="fmtm-h-1 fmtm-w-[2.5rem] fmtm-block fmtm-bg-[#c7d0e1] fmtm-rounded-full  group-hover:fmtm-bg-primaryRed fmtm-pointer-events-none"></span>
           </div>
           <div className="body fmtm-overflow-y-scroll scrollbar fmtm-h-full fmtm-p-[1px]">{body}</div>
         </div>

diff --git a/src/mapper/package.json b/src/mapper/package.json
@@ -46,6 +46,9 @@
 		"@electric-sql/pglite": "^0.2.4",
 		"@hotosm/ui": "0.2.0-b5",
 		"@prisma/client": "4.8.1",
+		"@tiptap/core": "^2.8.0",
+		"@tiptap/pm": "^2.8.0",
+		"@tiptap/starter-kit": "^2.8.0",
 		"@turf/bbox": "^7.0.0",
 		"@turf/buffer": "^7.0.0",
 		"@turf/helpers": "^7.0.0",