From d1a225911a88f7ba59516589c96f4c4c79524544 Mon Sep 17 00:00:00 2001 From: capelliludivine Date: Mon, 7 Oct 2019 14:53:15 +0200 Subject: [PATCH 01/17] Add FormTwo --- src/components/LeftBar/LeftBar.scss | 10 +- src/containers/App.scss | 2 +- src/containers/App.tsx | 2 + src/pages/FormOne/FormOne.scss | 13 +- src/pages/FormOne/index.tsx | 6 +- src/pages/FormTwo/FormTwo.scss | 365 +++++++++++++++++++++++++++ src/pages/FormTwo/index.tsx | 202 +++++++++++++++ src/pages/Management/management.scss | 1 + 8 files changed, 591 insertions(+), 10 deletions(-) create mode 100644 src/pages/FormTwo/FormTwo.scss create mode 100644 src/pages/FormTwo/index.tsx diff --git a/src/components/LeftBar/LeftBar.scss b/src/components/LeftBar/LeftBar.scss index 2929f8d..e032c07 100644 --- a/src/components/LeftBar/LeftBar.scss +++ b/src/components/LeftBar/LeftBar.scss @@ -1,7 +1,7 @@ .left-bar-container { + display:flex; .left-bar { - width: 399px; - height: 1945px; + width: 400px; border-radius: 2px; background-color: rgba(0, 0, 0, 0.15); z-index: 3; @@ -176,3 +176,9 @@ background-color: white; } } + +@media (max-width:1025px) { + .left-bar-container { + display: none; + } +} \ No newline at end of file diff --git a/src/containers/App.scss b/src/containers/App.scss index 29e8195..cdf6715 100644 --- a/src/containers/App.scss +++ b/src/containers/App.scss @@ -15,5 +15,5 @@ } body { z-index: 2; - overflow: hidden; + overflow: auto; } diff --git a/src/containers/App.tsx b/src/containers/App.tsx index 2cc4a17..a67239a 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -9,6 +9,7 @@ import ManagementPage from 'pages/Management' import './App.scss'; import FormOne from 'pages/FormOne'; +import FormTwo from 'pages/FormTwo'; moment.locale('fr'); @@ -19,6 +20,7 @@ const App: React.FC = () => ( + ); diff --git a/src/pages/FormOne/FormOne.scss b/src/pages/FormOne/FormOne.scss index 4be0529..3d360f7 100644 --- a/src/pages/FormOne/FormOne.scss +++ b/src/pages/FormOne/FormOne.scss @@ -45,7 +45,7 @@ display: flex; margin-top: 2.1%; justify-content: space-between; - flex-wrap: wrap; + align-items: flex-end; } .begin, @@ -87,6 +87,9 @@ margin-right: 2%; } + .to, .in { + margin-left: 2%; + } .adress-inputs { margin-right: 32px; width: 100%; @@ -170,6 +173,7 @@ margin-top: 3.3%; display: flex; justify-content: space-between; + align-items: flex-end; } .color-primary-secondary { @@ -177,6 +181,7 @@ justify-content: space-between; margin-right: 2.2%; width: 100%; + } .color-primary { @@ -208,7 +213,7 @@ border-color: #189e37; font-size: 24px; border-width: 2px; - border-top: 0px; + border-top: 2px; border-left: 0px; border-right: 0px; background: transparent; @@ -233,9 +238,9 @@ } .gradient { - height: 35px; + height: 44px; background-image: linear-gradient(85deg, #c7cc18, #e43232 100%); - margin-top: 1.4%; + margin-top: 1.6%; } .logo { diff --git a/src/pages/FormOne/index.tsx b/src/pages/FormOne/index.tsx index 399341a..399e243 100644 --- a/src/pages/FormOne/index.tsx +++ b/src/pages/FormOne/index.tsx @@ -23,8 +23,8 @@ class FormOne extends React.Component { required={true} />
-
Du
+
{ required={true} />
-
au
+
{ required={true} />
-
à
+
{ + public render() { + return ( +
+ + +
+
+ + + + +
+
Du
+
+ +
+
au
+
+ +
+
à
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ Preview de l’image du speaker +
+
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
Preview du logo
+
+
+
+
+
+
+
+
Ajouter un·e speaker·ine
+
+
+
+
+
Sauvegarder le talk
+
+
+
Soumettre le talk
+
+
+
+
+ + ); + } +} + +export default FormOne; diff --git a/src/pages/Management/management.scss b/src/pages/Management/management.scss index beb4af4..5c3703f 100644 --- a/src/pages/Management/management.scss +++ b/src/pages/Management/management.scss @@ -5,6 +5,7 @@ box-sizing: border-box; display: flex; justify-content: center; + overflow: hidden; padding: 32px; flex-grow: 1; From 9838ceaeed5e9b6c912e6ecba2c82708b9e968cd Mon Sep 17 00:00:00 2001 From: capelliludivine Date: Mon, 7 Oct 2019 15:01:16 +0200 Subject: [PATCH 02/17] Indentation to FormTwo --- src/pages/FormTwo/FormTwo.scss | 14 +++++++------- src/pages/FormTwo/index.tsx | 8 ++++---- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/pages/FormTwo/FormTwo.scss b/src/pages/FormTwo/FormTwo.scss index fc75994..266f955 100644 --- a/src/pages/FormTwo/FormTwo.scss +++ b/src/pages/FormTwo/FormTwo.scss @@ -276,9 +276,9 @@ height: 100%; background-color: rgba(0, 0, 0, 0.7); margin-top: 0.6%; - } - - .button-add { + } + + .button-add { margin-bottom: 5.6%; width: 100%; flex-wrap: wrap; @@ -306,8 +306,8 @@ &:hover { cursor: pointer; } - } - + } + .button-talk { display: flex; margin-bottom: 5.6%; @@ -315,8 +315,8 @@ flex-wrap: wrap; justify-content: flex-end; margin-top: 3.8%; - } - + } + .save-talk { width: 352px; height: 43px; diff --git a/src/pages/FormTwo/index.tsx b/src/pages/FormTwo/index.tsx index 3950b96..53c2205 100644 --- a/src/pages/FormTwo/index.tsx +++ b/src/pages/FormTwo/index.tsx @@ -56,7 +56,7 @@ class FormOne extends React.Component {
{ required={true} />
-
+
{ Preview de l’image du speaker
-
+
@@ -175,7 +175,7 @@ class FormOne extends React.Component {
Preview du logo
-
+
From 34eb9852f13b2ddd6c4d48d781f207b464470a00 Mon Sep 17 00:00:00 2001 From: capelliludivine Date: Mon, 7 Oct 2019 16:03:39 +0200 Subject: [PATCH 03/17] To correct --- src/pages/FormTwo/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/FormTwo/index.tsx b/src/pages/FormTwo/index.tsx index 53c2205..c3c4a7c 100644 --- a/src/pages/FormTwo/index.tsx +++ b/src/pages/FormTwo/index.tsx @@ -66,7 +66,7 @@ class FormOne extends React.Component {
{ label="Catégories pour retrouver le talk" className="input-category" type="text" - required={true} + required={false} />
@@ -141,7 +141,7 @@ class FormOne extends React.Component { label="Nom de l’entreprise du speaker·ine *" className="input-company" type="text" - required={false} + required={true} />
From c6ced8c1735e02deec3f23fbfdc02f7033ce7e5f Mon Sep 17 00:00:00 2001 From: capelliludivine Date: Tue, 12 Nov 2019 17:42:09 +0100 Subject: [PATCH 04/17] image speaker-ine changement --- src/atoms/Forms/index.tsx | 4 +- src/atoms/Input/index.tsx | 8 +- src/atoms/TextArea/index.tsx | 48 ++++++--- src/atoms/TextArea/textarea.scss | 7 +- src/pages/FormTwo/FormTwo.scss | 164 ++++++++++++++++++++++++++++--- src/pages/FormTwo/index.tsx | 163 ++++++++++++++++++++++++------ src/tools/color.ts | 68 +++++++++++++ 7 files changed, 394 insertions(+), 68 deletions(-) diff --git a/src/atoms/Forms/index.tsx b/src/atoms/Forms/index.tsx index e26adbd..b42737a 100644 --- a/src/atoms/Forms/index.tsx +++ b/src/atoms/Forms/index.tsx @@ -724,6 +724,8 @@ export default class GenericForm< throw new Error( 'GenericForm has no render method. You need to extend from GenericForm to create a form.', ); + + return
; } } @@ -866,4 +868,4 @@ export const InputContainer = (props: IInputContainer) => (
); -export const Separator = () =>
; +export const Separator = () =>
; \ No newline at end of file diff --git a/src/atoms/Input/index.tsx b/src/atoms/Input/index.tsx index af2d0fe..325d192 100644 --- a/src/atoms/Input/index.tsx +++ b/src/atoms/Input/index.tsx @@ -211,12 +211,8 @@ export default class Input extends Component { public componentDidUpdate(prevProps, prevState) { const { value } = this.props; - if ( - (value || value === 0) && - prevProps.value !== value && - (typeof value === 'number' || value.length > 0) - ) { - this.setState({ value, isEmpty: false }); + if (value !== undefined && value !== null && prevProps.value !== value) { + this.setState({ value, isEmpty: this.props.type !== 'number' && (value as string).length < 1}); } } diff --git a/src/atoms/TextArea/index.tsx b/src/atoms/TextArea/index.tsx index bb654b6..0367cbb 100644 --- a/src/atoms/TextArea/index.tsx +++ b/src/atoms/TextArea/index.tsx @@ -1,6 +1,6 @@ 'use strict'; -import React, { CSSProperties, Component } from 'react'; +import React, { CSSProperties, Component, useRef } from 'react'; import { Event } from 'tools/types'; @@ -8,6 +8,8 @@ import './textarea.scss'; export interface ITextAreaProps { className?: string; + label?: string; + focus?: boolean; name: string; placeholder?: string; readOnly?: boolean; @@ -15,13 +17,31 @@ export interface ITextAreaProps { style?: CSSProperties; value?: string; - textAreaRef?(e: HTMLTextAreaElement): void; onChange?(e: Event): void; onSelect?(e: Event<{ start: number; end: number }>): void; } export default (props: ITextAreaProps) => { - const { className, value, onChange, onSelect, textAreaRef, ...attributes } = props; + const {className, label, value, onChange, onSelect, ...attributes } = props; + let nameDiv; + + const textAreaRef = useRef(null); + + const onLabelClick = () => { + const textArea: any = textAreaRef.current; + + if (textArea) { + textArea.focus(); + } + }; + + if (label) { + nameDiv = ( + + ); + } const internalOnChange = (e: React.SyntheticEvent) => { if (props.onChange) { @@ -42,13 +62,17 @@ export default (props: ITextAreaProps) => { }; return ( -