eliott/docs
1
0
Fork 0
mirror of https://github.com/suitenumerique/docs.git synced 2026-05-09 00:22:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Nathan Vasse
2024-09-12 16:15:04 +02:00
parent cc7747089f
commit fb9cea586c
7 changed files with 132 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/apps/impress/.env
View File

@@ -1,4 +1,4 @@
NEXT_PUBLIC_API_ORIGIN=
NEXT_PUBLIC_Y_PROVIDER_URL=
NEXT_PUBLIC_MEDIA_URL=
NEXT_PUBLIC_THEME=openDesk
NEXT_PUBLIC_THEME=dsfr

28
src/frontend/apps/impress/cunningham.ts
View File

@@ -21,6 +21,11 @@ const config = {
none: '0',
},
},
components: {
card: {
'box-shadow': 'none',
},
},
},
dsfr: {
theme: {
@@ -151,6 +156,9 @@ const config = {
'color-hover': 'var(--c--theme--colors--primary-text)',
},
},
card: {
'box-shadow': '2px 2px 5px var(--c--theme--colors--greyscale-300)',
},
datagrid: {
header: {
color: 'var(--c--theme--colors--primary-600)',
@@ -230,6 +238,16 @@ const config = {
'secondary-700': '#006C60',
'secondary-800': '#00564D',
'secondary-900': '#004039',
'greyscale-000': '#ffffff',
'greyscale-100': '#EEEFF2',
'greyscale-200': '#D3D7DE',
'greyscale-300': '#B6BCC8',
'greyscale-400': '#7C879C',
'greyscale-500': '#637089',
'greyscale-600': '#4D5B79',
'greyscale-700': '#364768',
'greyscale-800': '#203257',
'greyscale-900': '#1e1e1e',
},
font: {
families: {
@@ -245,6 +263,10 @@ const config = {
},
},
components: {
alert: {
'border-radius': '0',
'background-color': 'var(--c--theme--colors--greyscale-000)',
},
button: {
'medium-height': '48px',
'border-radius': '8px',
@@ -286,9 +308,13 @@ const config = {
},
datagrid: {
header: {
color: 'var(--c--theme--colors--primary-600)',
color: 'var(--c--theme--colors--primary-700)',
size: 'var(--c--theme--font--sizes--s)',
},
body: {
'background-color': 'transparent',
'background-color-hover': '#F4F4FD',
},
},
},
},

4
src/frontend/apps/impress/src/components/Card.tsx
View File

@@ -9,14 +9,14 @@ export const Card = ({
$css,
...props
}: PropsWithChildren<BoxType>) => {
const { colorsTokens } = useCunninghamTheme();
const { colorsTokens, componentTokens } = useCunninghamTheme();
return (
<Box
$background="white"
$radius="4px"
$css={`
box-shadow: 2px 2px 5px ${colorsTokens()['greyscale-300']};
box-shadow: 2px 2px 5px ${componentTokens()['card']['box-shadow']};
border: 1px solid ${colorsTokens()['card-border']};
${$css}
`}

37
src/frontend/apps/impress/src/cunningham/cunningham-style.css
View File

@@ -278,6 +278,37 @@
);
}
/**
* React Select
*/
.async-search-control {
border-radius: var(--c--components--forms-select--border-radius);
border-width: var(--c--components--forms-select--border-width);
border-color: var(--c--components--forms-select--border-color);
border-style: var(--c--components--forms-select--border-style);
background-color: var(--c--components--forms-select--background-color);
height: var(--c--components--forms-select--height);
padding: 0 12px;
}
.async-search-control:hover {
border-color: var(--c--components--forms-select--border-color);
}
.async-search-placeholder {
font-size: var(--c--components--forms-input--font-size);
font-weight: var(--c--components--forms-input--font-weight);
}
.async-search-separator {
display: none;
}
.async-search-value-container {
padding: 0;
}
/**
* Alert
*/
@@ -292,3 +323,9 @@
border-color: var(--c--theme--colors--danger-600);
}
}
.cunningham-theme--openDesk {
.c__datagrid__table__container > table tbody tr {
border: 1px var(--c--theme--colors--greyscale-100) solid;
}
}

21
src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
View File

@@ -117,6 +117,7 @@
--c--theme--breakpoints--lg: 992px;
--c--theme--breakpoints--xl: 1200px;
--c--theme--breakpoints--xxl: 1400px;
--c--components--card--box-shadow: none;
}
.cunningham-theme--dark {
--c--theme--colors--greyscale-100: #182536;
@@ -282,6 +283,8 @@
--c--components--button--tertiary-text--color-hover: var(
--c--theme--colors--primary-text
);
--c--components--card--box-shadow: 2px 2px 5px
var(--c--theme--colors--greyscale-300);
--c--components--datagrid--header--color: var(
--c--theme--colors--primary-600
);
@@ -361,12 +364,26 @@
--c--theme--colors--secondary-700: #006c60;
--c--theme--colors--secondary-800: #00564d;
--c--theme--colors--secondary-900: #004039;
--c--theme--colors--greyscale-000: #ffffff;
--c--theme--colors--greyscale-100: #eeeff2;
--c--theme--colors--greyscale-200: #d3d7de;
--c--theme--colors--greyscale-300: #b6bcc8;
--c--theme--colors--greyscale-400: #7c879c;
--c--theme--colors--greyscale-500: #637089;
--c--theme--colors--greyscale-600: #4d5b79;
--c--theme--colors--greyscale-700: #364768;
--c--theme--colors--greyscale-800: #203257;
--c--theme--colors--greyscale-900: #1e1e1e;
--c--theme--font--families--accent: Open Sans;
--c--theme--font--families--base: Open Sans;
--c--theme--logo--src: /assets/logo-opendesk.svg;
--c--theme--logo--widthHeader: 110px;
--c--theme--logo--widthFooter: 220px;
--c--theme--logo--alt: Gouvernement Logo;
--c--components--alert--border-radius: 0;
--c--components--alert--background-color: var(
--c--theme--colors--greyscale-000
);
--c--components--button--medium-height: 48px;
--c--components--button--border-radius: 8px;
--c--components--button--font-weight: 600;
@@ -409,9 +426,11 @@
--c--theme--colors--primary-text
);
--c--components--datagrid--header--color: var(
--c--theme--colors--primary-600
--c--theme--colors--primary-700
);
--c--components--datagrid--header--size: var(--c--theme--font--sizes--s);
--c--components--datagrid--body--background-color: transparent;
--c--components--datagrid--body--background-color-hover: #f4f4fd;
}
.clr-secondary-text {
color: var(--c--theme--colors--secondary-text);

24
src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
View File

@@ -139,6 +139,7 @@ export const tokens = {
xxl: '1400px',
},
},
components: { card: { 'box-shadow': 'none' } },
},
dark: {
theme: {
@@ -313,6 +314,9 @@ export const tokens = {
'color-hover': 'var(--c--theme--colors--primary-text)',
},
},
card: {
'box-shadow': '2px 2px 5px var(--c--theme--colors--greyscale-300)',
},
datagrid: {
header: {
color: 'var(--c--theme--colors--primary-600)',
@@ -384,6 +388,16 @@ export const tokens = {
'secondary-700': '#006C60',
'secondary-800': '#00564D',
'secondary-900': '#004039',
'greyscale-000': '#ffffff',
'greyscale-100': '#EEEFF2',
'greyscale-200': '#D3D7DE',
'greyscale-300': '#B6BCC8',
'greyscale-400': '#7C879C',
'greyscale-500': '#637089',
'greyscale-600': '#4D5B79',
'greyscale-700': '#364768',
'greyscale-800': '#203257',
'greyscale-900': '#1e1e1e',
},
font: { families: { accent: 'Open Sans', base: 'Open Sans' } },
logo: {
@@ -394,6 +408,10 @@ export const tokens = {
},
},
components: {
alert: {
'border-radius': '0',
'background-color': 'var(--c--theme--colors--greyscale-000)',
},
button: {
'medium-height': '48px',
'border-radius': '8px',
@@ -432,9 +450,13 @@ export const tokens = {
},
datagrid: {
header: {
color: 'var(--c--theme--colors--primary-600)',
color: 'var(--c--theme--colors--primary-700)',
size: 'var(--c--theme--font--sizes--s)',
},
body: {
'background-color': 'transparent',
'background-color-hover': '#F4F4FD',
},
},
},
},

24
src/frontend/apps/impress/src/features/docs/members/members-add/components/SearchUsers.tsx
View File

@@ -1,3 +1,4 @@
import { Button } from '@openfun/cunningham-react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { InputActionMeta, Options } from 'react-select';
@@ -116,16 +117,35 @@ export const SearchUsers = ({
return (
<AsyncSelect
className="search-users"
classNames={{
container: () => 'async-search-container',
control: () => 'async-search-control',
indicatorSeparator: () => 'async-search-separator',
valueContainer: () => 'async-search-value-container',
placeholder: () => 'async-search-placeholder',
}}
components={{
IndicatorsContainer: (c) => (
<Button
color="tertiary-text"
size="nano"
className="c__select__inner__actions__open"
icon={<span className="material-icons">arrow_drop_down</span>}
type="button"
/>
),
}}
styles={{
placeholder: (base) => ({
...base,
fontSize: '14px',
color: colorsTokens()['primary-600'],
color: colorsTokens()['greyscale-900'],
}),
control: (base) => ({
...base,
minHeight: '45px',
borderColor: colorsTokens()['primary-600'],
borderColor: colorsTokens()['greyscale-500'],
}),
input: (base) => ({
...base,