Skip to content

Commit 3c3d89f

Browse files
bclswl0827bclswl0827
committed
style: event handling and modal layout optimizations
1 parent ac792cd commit 3c3d89f

5 files changed

Lines changed: 71 additions & 10 deletions

File tree

‎web/src/src/components/chart/DequeSpectrogram.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -252,8 +252,22 @@ export const DequeSpectrogram = memo(
252252
onChange={({ target }) =>
253253
handlePreviewMinDB(Number(target.value))
254254
}
255-
onMouseUp={() => handleApplyMinDB(minDBState)}
256-
onTouchEnd={() => handleApplyMinDB(minDBState)}
255+
onMouseUp={(e) => {
256+
handleApplyMinDB(minDBState);
257+
e.stopPropagation();
258+
}}
259+
onMouseDown={(e) => {
260+
handleApplyMinDB(minDBState);
261+
e.stopPropagation();
262+
}}
263+
onTouchStart={(e) => {
264+
handleApplyMinDB(minDBState);
265+
e.stopPropagation();
266+
}}
267+
onTouchEnd={(e) => {
268+
handleApplyMinDB(minDBState);
269+
e.stopPropagation();
270+
}}
257271
/>
258272
</>
259273

@@ -274,8 +288,22 @@ export const DequeSpectrogram = memo(
274288
onChange={({ target }) =>
275289
handlePreviewMaxDB(Number(target.value))
276290
}
277-
onMouseUp={() => handleApplyMaxDB(maxDBState)}
278-
onTouchEnd={() => handleApplyMaxDB(maxDBState)}
291+
onMouseUp={(e) => {
292+
handleApplyMaxDB(maxDBState);
293+
e.stopPropagation();
294+
}}
295+
onMouseDown={(e) => {
296+
handleApplyMaxDB(maxDBState);
297+
e.stopPropagation();
298+
}}
299+
onTouchStart={(e) => {
300+
handleApplyMaxDB(maxDBState);
301+
e.stopPropagation();
302+
}}
303+
onTouchEnd={(e) => {
304+
handleApplyMaxDB(maxDBState);
305+
e.stopPropagation();
306+
}}
279307
/>
280308
</>
281309
</div>

‎web/src/src/components/chart/Spectrogram.tsx‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,8 @@ export const Spectrogram = memo(
231231
step={0.01}
232232
value={timePercent}
233233
onChange={({ target }) => setTimePercent(Number(target.value))}
234+
onMouseDown={(e) => e.stopPropagation()}
235+
onTouchStart={(e) => e.stopPropagation()}
234236
className="range range-xs rounded py-3 pl-2 text-gray-300 [--range-bg:#fff] [--range-fill:0]"
235237
/>
236238
<span className="px-2 font-mono text-xs text-white select-none">
@@ -271,8 +273,22 @@ export const Spectrogram = memo(
271273
onChange={({ target }) =>
272274
handlePreviewMinDB(Number(target.value))
273275
}
274-
onMouseUp={() => handleApplyMinDB(minDBState)}
275-
onTouchEnd={() => handleApplyMinDB(minDBState)}
276+
onMouseUp={(e) => {
277+
handleApplyMinDB(minDBState);
278+
e.stopPropagation();
279+
}}
280+
onMouseDown={(e) => {
281+
handleApplyMinDB(minDBState);
282+
e.stopPropagation();
283+
}}
284+
onTouchStart={(e) => {
285+
handleApplyMinDB(minDBState);
286+
e.stopPropagation();
287+
}}
288+
onTouchEnd={(e) => {
289+
handleApplyMinDB(minDBState);
290+
e.stopPropagation();
291+
}}
276292
/>
277293
</>
278294

@@ -291,8 +307,22 @@ export const Spectrogram = memo(
291307
onChange={({ target }) =>
292308
handlePreviewMaxDB(Number(target.value))
293309
}
294-
onMouseUp={() => handleApplyMaxDB(maxDBState)}
295-
onTouchEnd={() => handleApplyMaxDB(maxDBState)}
310+
onMouseUp={(e) => {
311+
handleApplyMaxDB(maxDBState);
312+
e.stopPropagation();
313+
}}
314+
onMouseDown={(e) => {
315+
handleApplyMaxDB(maxDBState);
316+
e.stopPropagation();
317+
}}
318+
onTouchStart={(e) => {
319+
handleApplyMaxDB(maxDBState);
320+
e.stopPropagation();
321+
}}
322+
onTouchEnd={(e) => {
323+
handleApplyMaxDB(maxDBState);
324+
e.stopPropagation();
325+
}}
296326
/>
297327
</>
298328
</div>

‎web/src/src/components/ui/DialogModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const DialogModal = ({
5555
return (
5656
<dialog ref={dialogRef} className="modal">
5757
<div
58-
className={`modal-box ${fullScreen ? 'h-screen w-full max-w-none' : enlarge ? 'w-[90%] max-w-none sm:w-[80%] md:w-[60%]' : ''}`}
58+
className={`modal-box ${fullScreen ? 'h-screen w-full max-w-none' : enlarge ? 'max-h-[90vh] w-[90%] max-w-2xl sm:w-[80%] md:w-[60%]' : ''}`}
5959
>
6060
<form method="dialog">
6161
<button className="btn btn-sm btn-circle btn-ghost absolute top-2 right-2">

‎web/src/src/components/ui/DraggableBox.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export const DraggableBox = ({
7070
cancel=".react-resizable-handle"
7171
defaultClassNameDragging="border-2 border-dashed border-gray-300"
7272
bounds="parent"
73+
grid={[1, 1]}
7374
position={position}
7475
onStart={() => {
7576
onDragStart?.();
@@ -86,6 +87,7 @@ export const DraggableBox = ({
8687
<ResizableBox
8788
axis="both"
8889
resizeHandles={locked ? [] : ['se', 'ne', 'sw']}
90+
draggableOpts={{ grid: [1, 1] }}
8991
onResizeStop={(_, { size }) => {
9092
onResizeStop?.(size.width, size.height);
9193
}}

‎web/src/src/views/History/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -859,11 +859,12 @@ const History = ({ currentLocale }: IRouterComponent) => {
859859
</div>
860860
</div>
861861
}
862+
enlarge={true}
862863
open={isSelectModalOpen}
863864
onClose={() => setIsSelectModalOpen(false)}
864865
>
865866
<List
866-
className="max-h-[80vh] overflow-y-scroll"
867+
className="overflow-y-scroll"
867868
onClick={(id) => handleChooseEvent(id)}
868869
data={seismicEventsData}
869870
/>

0 commit comments

Comments
 (0)