Skip to content

Commit

Permalink
Portage page geocoder CSV nouveau design
Browse files Browse the repository at this point in the history
  • Loading branch information
MelFonk committed Dec 13, 2024
1 parent 3fae154 commit 58f76f7
Show file tree
Hide file tree
Showing 13 changed files with 187 additions and 402 deletions.
42 changes: 22 additions & 20 deletions src/app/outils/csv/components/action-button-neutral.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
import colors from '@/theme'
import Button from '@codegouvfr/react-dsfr/Button'
'use client'

interface ActionButtonNeutralPropTypes {
children: React.ReactNode
label: string
isFullSize: boolean
[key: string]: any
}
import Button from '@codegouvfr/react-dsfr/Button'
import styled from 'styled-components'

export default function ActionButtonNeutral({ children, label, isFullSize = false, ...props }: ActionButtonNeutralPropTypes) {
return (
<Button aria-label={label} {...props}>
{children}
const ActionButtonWrapper = styled.div<{ $isFullSize: boolean }>`
<style jsx>{`
button {
width: ${isFullSize ? '100%' : 'fit-content'};
.button {
width: ${({ $isFullSize }) => $isFullSize ? '100%' : 'fit-content'};
height: fit-content;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
color: ${colors.colors.primary.badge};
}
button:disabled {
opacity: 75%;
opacity: 55%;
cursor: not-allowed;
}
`}
</style>
</Button>
`
interface ActionButtonNeutralPropTypes {
children: React.ReactNode
label: string
isFullSize: boolean
[key: string]: any
}

export default function ActionButtonNeutral({ children, label, isFullSize = false, ...props }: ActionButtonNeutralPropTypes) {
return (
<ActionButtonWrapper $isFullSize={isFullSize}>
<Button aria-label={label} {...props}>
{children}
</Button>
</ActionButtonWrapper>
)
}
46 changes: 46 additions & 0 deletions src/app/outils/csv/components/columns-select.style.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
'use client'

import styled from 'styled-components'
import theme from '@/theme'

export const ColumnSelectWrapper = styled.div`
.columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(auto, 200px));
grid-gap: 5px;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid ${theme.colors.grey.border};
}
.item .text {
background-color: ${theme.colors.primary};
}
.item:hover {
cursor: pointer;
}
.column {
margin: 0 1em;
}
.selection {
margin: 2em 0;
padding: 0.5em;
border: 1px dashed #ccc;
}
.button {
font-size: larger;
font-weight: bold;
text-align: center;
width: 20px;
color: ${theme.colors.grey};
background-color: ${theme.colors.grey.badge};
}
`
44 changes: 3 additions & 41 deletions src/app/outils/csv/components/columns-select.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import SelectableItemList from '../components/selectable-item-list'
import theme from '@/theme/theme'
import { ColumnSelectWrapper } from './columns-select.style'

interface ColumnsSelectPropTypes {
columns: Array<string>
Expand All @@ -10,7 +10,7 @@ interface ColumnsSelectPropTypes {

export default function ColumnsSelect({ columns, selectedColumns, onAdd, onRemove }: ColumnsSelectPropTypes) {
return (
<div>
<ColumnSelectWrapper>
<SelectableItemList
list={columns.filter(col => !selectedColumns.includes(col)).map((col) => {
return {
Expand All @@ -34,44 +34,6 @@ export default function ColumnsSelect({ columns, selectedColumns, onAdd, onRemov
buttonIcon="-"
action={onRemove}
/>
<style jsx>{`
.columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(auto, 200px));
grid-gap: 5px;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid ${theme.colors.grey.border};
}
.item:hover {
cursor: pointer;
}
.column {
margin: 0 1em;
}
.selection {
margin: 2em 0;
padding: 0.5em;
border: 1px dashed #ccc;
}
.button {
font-size: larger;
font-weight: bold;
text-align: center;
width: 20px;
color: ${theme.colors.grey.badge};
background-color: ${theme.colors.primary.bg};
}
`}
</style>
</div>
</ColumnSelectWrapper>
)
}
31 changes: 0 additions & 31 deletions src/app/outils/csv/components/filter.tsx

This file was deleted.

19 changes: 1 addition & 18 deletions src/app/outils/csv/components/geocoder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function Geocoder({ file, columns, filter }: GeocodeurPropTypes)
}
}
return (
<div className="geocoder">
<div className="geocoder" style={{ margin: '2em 0', textAlign: 'center' }}>
{!status && (
<Button onClick={handleGeocodeClick}>Lancer le géocodage</Button>
)}
Expand All @@ -68,23 +68,6 @@ export default function Geocoder({ file, columns, filter }: GeocodeurPropTypes)
{error && (
<p className="error"><b>{error.message}</b><br /><i>Code erreur : {error.name}</i></p>
)}

<style jsx>{`
.geocoder {
margin: 2em 0;
text-align: center;
}
.col {
display: flex;
align-items: center;
}
.error {
color: red;
}
`}
</style>
</div>
)
}
80 changes: 0 additions & 80 deletions src/app/outils/csv/components/holder.styles.tsx

This file was deleted.

72 changes: 0 additions & 72 deletions src/app/outils/csv/components/holder.tsx

This file was deleted.

Loading

0 comments on commit 58f76f7

Please sign in to comment.