justify input with emoji palette

celluloid-camp · Oct 12, 2023 · 731ea67 · 731ea67
1 parent edcea84
commit 731ea67
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 8 deletions.
diff --git a/...src/scenes/Project/scenes/Video/components/AnnotationEditor/AnnotationEditorComponent.tsx b/...src/scenes/Project/scenes/Video/components/AnnotationEditor/AnnotationEditorComponent.tsx
@@ -127,22 +127,34 @@ const AnnotationEditorComponent: React.FC<Props> = ({
  return (
  <div className={classes.root}>
  <div className={classes.content}>
- <div className={classes.centerVerticalement}>
+ {/* <div className={classes.centerVerticalement}>
  <EmotionOntologyPicker
  position={position}
  emotion={emotion}
  onEmotionChange={onEmotionChange}
  perf={performance_mode}
  emotionDetected={emotionDetected}
  />
- </div>
+ </div> */}
  <>
- <TransparentInput
+
+ {/* <TransparentInput
  text={text}
  error={error}
  onChange={onTextChange}
  placeholder={t('annotation.contentPlaceholder')}
+ /> */}
+ <EmotionOntologyPicker
+ text={text}
+ error={error}
+ onTextChange={onTextChange}
+ position={position}
+ emotion={emotion}
+ onEmotionChange={onEmotionChange}
+ perf={performance_mode}
+ emotionDetected={emotionDetected}
  />
+
  </>
  <div className={classes.timeline}>
  <TimingControl

diff --git a/...ent/src/scenes/Project/scenes/Video/components/AnnotationEditor/EmotionOntologyPicker.tsx b/...ent/src/scenes/Project/scenes/Video/components/AnnotationEditor/EmotionOntologyPicker.tsx
@@ -6,16 +6,24 @@ import getFirstConcepts, {
 import addAnnotation from '../../api/Annotation';
 import { UserRecord } from '@celluloid/types';
 import EmotionsPalette from './EmotionsPalette';
-
+import TransparentInput from '../TransparentInput';
+import { useTranslation } from 'react-i18next';
 interface Props {
  perf: boolean;
  position: number;
  emotion?: string;
  emotionDetected: string;
+ text:string;
+ error?: string;
+ onTextChange(text: string):void;
  onEmotionChange(emotion: string): void;
+
 }
 
 interface State {
+ text: string;
+ error: string;
+
  concept: string;
  concept1: string;
  concept2: string;
@@ -36,13 +44,17 @@ const ontologyStyles: React.CSSProperties = {
  maxWidth: '30px',
  fontFamily: 'sans-serif',
  fontSize: '20px',
- color: '#CECECE',
+ // color: 'inherit',
  fontWeight: 'bold',
  width: '30px',
  display: 'inline',
  paddingLeft: '10px',
+ color:'#333',
+ backgroundColor: 'transparent',
 };
 
+
+
 let globalConcept = 'concept';
 let firstConcept = globalConcept;
 let secondConcept = 'concept';
@@ -104,6 +116,8 @@ export default class EmotionOntologyPicker extends React.Component<
  super(props);
 
  this.state = {
+ text:'',
+ error:'',
  concept: globalConcept,
  concept1: 'concept 2',
  concept2: 'concept 3',
@@ -125,6 +139,7 @@ export default class EmotionOntologyPicker extends React.Component<
  this.handleChange4 = this.handleChange4.bind(this);
  this.handleChange5 = this.handleChange5.bind(this);
  this.handleChange6 = this.handleChange6.bind(this);
+
  // this.handleEmoji = this.handleEmoji.bind(this);
  }
 
@@ -141,6 +156,8 @@ export default class EmotionOntologyPicker extends React.Component<
  sixConcept = e.target.value;
  console.log(' button 1', globalConcept);
  }
+
+
  handleChange1(e: any) {
  this.setState({ concept1: e.target.value });
  const conc1 = getSubConcepts(e.target.value);
@@ -201,7 +218,8 @@ export default class EmotionOntologyPicker extends React.Component<
 
  render() {
  const { onEmotionChange, position } = this.props;
-
+ const { onTextChange, text } = this.props;
+ // const { t } = useTranslation();
  return (
  <div>
  <div style={ontologyStyles}>
@@ -246,14 +264,27 @@ export default class EmotionOntologyPicker extends React.Component<
  ) : (
  <></>
  )}
-
+ </div>
+ <div style={{ display: 'flex' }}>
+ <div style={{ width: '60%', marginRight: '10px', flex:1}}>
+ <TransparentInput
+ text={this.props.text}
+ error={this.props.error}
+ onChange={onTextChange}
+ placeholder={'put your comment'}
+
+ />
+ </div>
+ <div style={{ width: '40%', flex:1}}>
  <EmotionsPalette
  emotion={this.props.emotion}
  onEmotionChange={onEmotionChange}
  position={position}
  emotionDetected={this.props.emotionDetected}
  />
+ </div>
  </div>
+
  </div>
  );
  }

diff --git a/...es/client/src/scenes/Project/scenes/Video/components/AnnotationEditor/EmotionsPalette.tsx b/...es/client/src/scenes/Project/scenes/Video/components/AnnotationEditor/EmotionsPalette.tsx
@@ -10,6 +10,7 @@ interface EmotionsPaletteProps {
  emotion?: string;
  emotionDetected: string;
  onEmotionChange(emotion: string | undefined): void;
+
 }
 
 interface Emoji {

diff --git a/packages/client/src/services/ProjectService.tsx b/packages/client/src/services/ProjectService.tsx
@@ -107,6 +107,7 @@ export default class Projects {
  }
 
  static share(projectId: string, data: ProjectShareData) {
+ console.log('log data ',data)
  const headers = {
  Accepts: "application/json",
  "Content-type": "application/json",
@@ -116,7 +117,9 @@ export default class Projects {
  headers: new Headers(headers),
  credentials: "include",
  body: JSON.stringify(data),
+
  }).then((response) => {
+ console.log('afficher body: ', JSON.stringify(data))
  if (response.status === 200 || response.status === 400) {
  return response.json();
  } else if (response.status === 401) {

diff --git a/packages/client/tsconfig.tsbuildinfo b/packages/client/tsconfig.tsbuildinfo
diff --git a/packages/server/src/api/ProjectApi.ts b/packages/server/src/api/ProjectApi.ts
@@ -137,6 +137,7 @@ router.get("/:projectId/members", (req, res) => {
 
 router.put("/:projectId/share", isTeacher, isProjectOwner, (req, res) => {
  const projectId = req.params.projectId;
+ console.log('in share api: ', req.body)
  ProjectStore.shareById(projectId, req.body)
  .then(() => ProjectStore.selectOne(projectId, req.user as UserRecord))
  .then((project) => res.status(200).json(project))