mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-21 22:46:32 +00:00
Maurice
edea67ff7e
Dragging a place from the right pane to the left one did nothing on an iPad or a Samsung tablet — the row was selected as text instead. Phones never reach this layout, they get the mobile shell below md, so the coarse pointer check in dragDisabled was only ever switching tablets off. It was also doing that for a reason that had gone away. What swallowed the scroll gesture in #1432 was the drag-drop-touch polyfill, and that has been confined to hybrid laptops since. Width is the gate that still means something: below lg the plan and the places are separate tabs, so there is nothing to drag between. So touch is no longer a reason to disable the drag, and the planner arms the long-press bridge instead where the pointer is coarse. Rows get -webkit-touch-callout and user-select off there too, otherwise the press that starts the drag brings up the selection first. The isTouch prop had no other use and is gone, along with a comment claiming arrow reorder buttons take over on touch — there are none.
93 lines
4.0 KiB
TypeScript
93 lines
4.0 KiB
TypeScript
import React from 'react'
|
|
import { ContextMenu } from '../shared/ContextMenu'
|
|
import FileImportModal from './FileImportModal'
|
|
import ConfirmDialog from '../shared/ConfirmDialog'
|
|
import { usePlacesSidebar, type PlacesSidebarProps } from './usePlacesSidebar'
|
|
import { PlacesDropOverlay, PlacesHeader } from './PlacesSidebarHeader'
|
|
import { PlacesSelectionBar } from './PlacesSidebarSelectionBar'
|
|
import { PlacesList } from './PlacesSidebarList'
|
|
import { MobileDayPickerSheet } from './PlacesSidebarMobileDayPicker'
|
|
import { ListImportModal } from './PlacesSidebarListImportModal'
|
|
import { PlacesBulkCategoryModal } from './PlacesBulkCategoryModal'
|
|
import SaveTripPlacesToListModal from '../Collections/SaveTripPlacesToListModal'
|
|
|
|
const PlacesSidebar = React.memo(function PlacesSidebar(props: PlacesSidebarProps) {
|
|
const S = usePlacesSidebar(props)
|
|
const {
|
|
sidebarDragOver, handleSidebarDragEnter, handleSidebarDragOver, handleSidebarDragLeave, handleSidebarDrop,
|
|
selectMode, filtered, t, dayPickerPlace, listImportOpen,
|
|
fileImportOpen, setFileImportOpen, sidebarDropFile, setSidebarDropFile, tripId, pushUndo,
|
|
ctxMenu, isMobile, pendingDeleteIds, setPendingDeleteIds, onBulkDeleteConfirm,
|
|
categories, selectedIds, exitSelectMode, onBulkChangeCategory, categoryPickerOpen, setCategoryPickerOpen,
|
|
collectionsEnabled, saveToListOpen, setSaveToListOpen,
|
|
} = S
|
|
// Below lg the places sit in their own tab with no plan beside them to drag
|
|
// into. A coarse pointer no longer disables the drag on its own — tablets
|
|
// reach it through a long press (#1616).
|
|
const dragDisabled = isMobile
|
|
return (
|
|
<div
|
|
data-touch-drag={dragDisabled ? undefined : ''}
|
|
onDragEnter={dragDisabled ? undefined : handleSidebarDragEnter}
|
|
onDragOver={dragDisabled ? undefined : handleSidebarDragOver}
|
|
onDragLeave={dragDisabled ? undefined : handleSidebarDragLeave}
|
|
onDrop={dragDisabled ? undefined : handleSidebarDrop}
|
|
style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "var(--font-system)", position: 'relative' }}
|
|
>
|
|
{!dragDisabled && sidebarDragOver && <PlacesDropOverlay {...S} />}
|
|
{/* Kopfbereich */}
|
|
<PlacesHeader {...S} />
|
|
|
|
{/* Anzahl / Auswahl-Leiste */}
|
|
{selectMode ? (
|
|
<PlacesSelectionBar {...S} />
|
|
) : (
|
|
<div style={{ padding: '6px 16px', flexShrink: 0 }}>
|
|
<span className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }}>{filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Liste */}
|
|
<PlacesList {...S} />
|
|
|
|
{dayPickerPlace && <MobileDayPickerSheet {...S} />}
|
|
{listImportOpen && <ListImportModal {...S} />}
|
|
<FileImportModal
|
|
isOpen={fileImportOpen}
|
|
onClose={() => { setFileImportOpen(false); setSidebarDropFile(null) }}
|
|
tripId={tripId}
|
|
pushUndo={pushUndo}
|
|
initialFile={sidebarDropFile}
|
|
/>
|
|
<ContextMenu menu={ctxMenu.menu} onClose={ctxMenu.close} />
|
|
{categoryPickerOpen && (
|
|
<PlacesBulkCategoryModal
|
|
count={selectedIds.size}
|
|
categories={categories}
|
|
onClose={() => setCategoryPickerOpen(false)}
|
|
onPick={(catId) => { onBulkChangeCategory?.(Array.from(selectedIds), catId); setCategoryPickerOpen(false); exitSelectMode() }}
|
|
/>
|
|
)}
|
|
{collectionsEnabled && (
|
|
<SaveTripPlacesToListModal
|
|
isOpen={saveToListOpen}
|
|
tripId={tripId}
|
|
placeIds={Array.from(selectedIds)}
|
|
onClose={() => setSaveToListOpen(false)}
|
|
onDone={exitSelectMode}
|
|
/>
|
|
)}
|
|
{isMobile && (
|
|
<ConfirmDialog
|
|
isOpen={!!pendingDeleteIds?.length}
|
|
onClose={() => setPendingDeleteIds(null)}
|
|
onConfirm={() => { onBulkDeleteConfirm?.(pendingDeleteIds!); setPendingDeleteIds(null) }}
|
|
message={t('trip.confirm.deletePlaces', { count: pendingDeleteIds?.length ?? 0 })}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export default PlacesSidebar
|