Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix refine mbtiles modal design #956

Merged
merged 6 commits into from
Nov 2, 2023
Merged

Fix refine mbtiles modal design #956

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b912e3e
feat (deleteIcon): delete icon added
NSUWAL123 Oct 31, 2023
9724bad
fix (projectDetails): generateMbTilesModal - id replaced with sn, chi…
NSUWAL123 Oct 31, 2023
0639d02
Merge branch 'development' of https://github.com/hotosm/fmtm into fix…
NSUWAL123 Oct 31, 2023
6795b3b
fix (projectDetails) - zIndex adjustment for UI fix
NSUWAL123 Oct 31, 2023
1a381e3
fix (projectDetails): generateTilesModal - modal UI fixes
NSUWAL123 Oct 31, 2023
16a6888
Merge branch 'development' of https://github.com/hotosm/fmtm into fix…
NSUWAL123 Nov 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 52 additions & 17 deletions src/frontend/src/components/GenerateBasemap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,11 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI

const modalStyle = (theme) => ({
width: '90vw', // Responsive modal width using vw
height: '95vh',
// height: '90vh',
bgcolor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
border: '1px solid ',
padding: '16px 32px 24px 32px',
maxWidth: '1000px',
});
const downloadBasemap = (tileId) => {
dispatch(DownloadTile(`${import.meta.env.VITE_API_URL}/projects/download_tiles/?tile_id=${tileId}`, projectInfo));
Expand Down Expand Up @@ -203,36 +204,70 @@ const GenerateBasemap = ({ setToggleGenerateModal, toggleGenerateModal, projectI

{/* Table Content */}
<CoreModules.Grid item xs={12}>
<CoreModules.TableContainer component={CoreModules.Paper} sx={{ maxHeight: '50vh', overflowY: 'auto' }}>
<CoreModules.TableContainer
component={CoreModules.Paper}
className="scrollbar fmtm-overflow-y-auto fmtm-max-h-[38vh] lg:fmtm-max-h-[45vh] sm:fmtm-mb-5"
>
<CoreModules.Table sx={{ minWidth: 650 }} aria-label="simple table">
<CoreModules.TableHead>
<CoreModules.TableRow>
<CoreModules.TableCell>Id</CoreModules.TableCell>
<CoreModules.TableCell align="right">Source</CoreModules.TableCell>
<CoreModules.TableCell align="right">Status</CoreModules.TableCell>
<CoreModules.TableCell align="right"></CoreModules.TableCell>
{/* <CoreModules.TableCell>Id</CoreModules.TableCell> */}
<CoreModules.TableCell>S.N.</CoreModules.TableCell>
<CoreModules.TableCell align="center">Source</CoreModules.TableCell>
<CoreModules.TableCell align="center">Status</CoreModules.TableCell>
<CoreModules.TableCell align="center"></CoreModules.TableCell>
</CoreModules.TableRow>
</CoreModules.TableHead>
<CoreModules.TableBody>
{tilesList.map((list) => (
{tilesList.map((list, i) => (
<CoreModules.TableRow key={list.name}>
<CoreModules.TableCell component="th" scope="row">
{/* <CoreModules.TableCell component="th" scope="row">
{list.id}
</CoreModules.TableCell> */}
<CoreModules.TableCell component="th" scope="row">
{i + 1}
</CoreModules.TableCell>
<CoreModules.TableCell align="right">{list.tile_source}</CoreModules.TableCell>
<CoreModules.TableCell align="right" sx={{ color: environment.statusColors[list.status] }}>
{list.status === 'SUCCESS' ? 'COMPLETED' : list.status}
<CoreModules.TableCell align="center">
<div className="fmtm-text-primaryRed fmtm-border-primaryRed fmtm-border-[1px] fmtm-rounded-full fmtm-px-4 fmtm-py-1 fmtm-w-fit fmtm-mx-auto">
{list.tile_source}
</div>
</CoreModules.TableCell>
<CoreModules.TableCell align="right">
<CoreModules.TableCell align="center" sx={{ color: environment.statusColors[list.status] }}>
{/* {list.status === 'SUCCESS' ? 'COMPLETED' : list.status} */}
{list.status === 'SUCCESS' ? (
<AssetModules.FileDownloadIcon
sx={{ cursor: 'pointer' }}
onClick={() => downloadBasemap(list.id)}
></AssetModules.FileDownloadIcon>
<div className="fmtm-bg-green-50 fmtm-text-green-700 fmtm-border-green-700 fmtm-border-[1px] fmtm-rounded-full fmtm-px-4 fmtm-py-1 fmtm-w-fit fmtm-mx-auto">
COMPLETED
</div>
) : (
<></>
<div
className={`${
list.status === 'PENDING'
? 'fmtm-bg-yellow-50 fmtm-text-yellow-500 fmtm-border-yellow-500'
: 'fmtm-bg-red-50 fmtm-text-red-500 fmtm-border-red-500'
} fmtm-border-[1px] fmtm-rounded-full fmtm-px-4 fmtm-py-1 fmtm-w-fit fmtm-mx-auto`}
>
{list.status}
</div>
)}
</CoreModules.TableCell>
<CoreModules.TableCell align="center">
<div className="fmtm-flex fmtm-gap-4 fmtm-float-right">
{list.status === 'SUCCESS' ? (
<AssetModules.FileDownloadIcon
sx={{ cursor: 'pointer', fontSize: '22px' }}
onClick={() => downloadBasemap(list.id)}
className="fmtm-text-gray-500 hover:fmtm-text-blue-500"
></AssetModules.FileDownloadIcon>
) : (
<></>
)}
<AssetModules.DeleteIcon
sx={{ cursor: 'pointer', fontSize: '22px' }}
onClick={() => {}}
className="fmtm-text-red-500 hover:fmtm-text-red-700"
></AssetModules.DeleteIcon>
</div>
</CoreModules.TableCell>
</CoreModules.TableRow>
))}
</CoreModules.TableBody>
Expand Down
3 changes: 2 additions & 1 deletion src/frontend/src/components/ProjectDetails/MobileFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ const MobileFooter = () => {
);
};
return (
<div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px] fmtm-z-[10001]">
<div className="fmtm-absolute fmtm-bottom-0 sm:fmtm-hidden fmtm-w-full fmtm-border-t-[1px] fmtm-z-[1200]">
{/* fmtm-z-[10001] */}
<div
className={`fmtm-w-full fmtm-grid fmtm-grid-cols-5 fmtm-bg-white fmtm-pb-16 fmtm-pt-2 fmtm-gap-5 fmtm-px-2`}
>
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/components/common/BottomSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const BottomSheet = ({ body, onClose }) => {
}, [currSheetHeight]);

return (
<div className="fmtm-absolute fmtm-bottom-[200px] fmtm-bg-white sm:fmtm-hidden fmtm-z-[10000]">
<div className="fmtm-absolute fmtm-bottom-[200px] fmtm-bg-white sm:fmtm-hidden fmtm-z-[1199]">
<div
className={`bottom-sheet fmtm-fixed fmtm-w-full fmtm-left-0 fmtm-bottom-0 fmtm-flex fmtm-items-center fmtm-flex-col fmtm-justify-end fmtm-duration-100 fmtm-ease-linear ${
!show ? 'fmtm-opacity-0 fmtm-pointer-events-none' : 'fmtm-opacity-100 fmtm-pointer-events-auto'
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/shared/AssetModules.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import {
LocationOn as LocationOnIcon,
CropFree as CropFreeIcon,
LegendToggle as LegendToggleIcon,
Delete as DeleteIcon,
} from '@mui/icons-material';
import LockPng from '../assets/images/lock.png';
import RedLockPng from '../assets/images/red-lock.png';
Expand Down Expand Up @@ -106,4 +107,5 @@ export default {
LocationOnIcon,
CropFreeIcon,
LegendToggleIcon,
DeleteIcon,
};
Loading