Skip to content

Commit

Permalink
added injected debugger help menu dialogue
Browse files Browse the repository at this point in the history
  • Loading branch information
Stephan Gramüller committed Nov 10, 2022
1 parent 66f0ed2 commit 2fa11a5
Show file tree
Hide file tree
Showing 20 changed files with 51,810 additions and 4,105 deletions.
55,268 changes: 51,317 additions & 3,951 deletions package-lock.json

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,17 +57,18 @@
"prop-types": "^15.5.10",
"query-string": "^5.1.1",
"raw-loader": "^0.5.1",
"react": "16.3.0",
"react": "16.8.0",
"react-contextmenu": "2.9.4",
"react-dom": "16.3.0",
"react-dom": "16.8.0",
"react-draggable": "3.0.5",
"react-ga": "2.5.3",
"react-intl": "2.9.0",
"react-modal": "3.9.1",
"react-popover": "0.5.10",
"react-redux": "5.0.7",
"react-responsive": "5.0.0",
"react-responsive": "4.1.0",
"react-style-proptype": "3.2.2",
"react-transition-group": "^4.4.5",
"react-tabs": "2.3.0",
"react-tooltip": "3.8.0",
"react-virtualized": "9.20.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
display: flex;
flex-direction: row;
padding: 4px 0;
cursor: pointer;
}
.category-list-wrap-item {
padding: 4px;
Expand Down Expand Up @@ -32,4 +31,5 @@
background-color: white;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
102 changes: 78 additions & 24 deletions src/components/help-menu/body/help-menu-body.css
Original file line number Diff line number Diff line change
@@ -1,34 +1,49 @@
@import "../../../css/colors.css";


.owl-head {
height:40px;
width: 40px;
color: white;
display: flex;
margin-right: 5px;

}

.chat-title{
display: flex;
margin-left: 10px;
margin-right: 5px;
}

.header {
background: #0FBD8C;
cursor: default;
border-width: 0px;
height:5%;
width: 100%;
border-left: 1px solid transparent;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
height:10%;
font-size: 15px;
padding: 0 15px;
font-weight: bold;
color: white;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
flex-direction: row;
align-items: center;
}
.speech-bubble-box {
position: relative;
width: 350px;
height: fit-content;
min-height: 95px;
max-height: 300px;
margin-right: 25px;
padding-right: 3px;
border-radius: 10px;
left: -10px;
color: #575E75;
background: $ui-tertiary;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.speech-bubble-triangle:before {
Expand All @@ -46,24 +61,62 @@

.help-messages {
padding: 10px;
max-height: 130px;
width: 100%;

text-align: center;
}
.menu{


.body{
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
display: flex;
flex-flow: wrap;
flex-direction: row;
flex-direction: column;
border-left: 1px solid #CECDCE;
border-right: 1px solid #CECDCE;
border-bottom: 1px solid #CECDCE;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
height: 90%;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #CECDCE transparent;
}

.my-node-enter {
opacity: 0;
}
.my-node-enter-active {
opacity: 1;
transition: opacity 200ms;
}
.my-node-exit {
opacity: 1;
}
.my-node-exit-active {
opacity: 0;
transition: opacity 200ms;
}

.body::-webkit-scrollbar-track {
margin-top: 1px;
margin-bottom: 1px;
}

.body::-webkit-scrollbar {
width: 6px;
}

.body::-webkit-scrollbar-thumb {
background:#CECDCE;
border: 1px solid #CECDCE;
border-radius: 4px;
}
.body{
margin-top: 1px;

height: 550px;
.menu{
height: 520px;
max-width: 700px;
margin: 5px auto;
}
.category-list {
list-style-type: none;
Expand All @@ -82,25 +135,26 @@
}

.category {
margin-top: 20px;
margin-bottom: 70px;
display: flex;
padding: 4px 0;
width: 100%;
height: 60%;
margin-left: 50px;
cursor: pointer;
border: none;
}
.owlArea {
margin-bottom: 20px;
margin-top: -20px;
display: flex;
height: 25%;
border: none;
width:100%;
max-height: 25%;
padding: 4px 0;
cursor: pointer;
justify-content: flex-end
}
.owl {
position: relative;
right: 150px;
right: 100px;
height: 200px;
}
115 changes: 79 additions & 36 deletions src/components/help-menu/body/help-menu-body.jsx
Original file line number Diff line number Diff line change
@@ -1,81 +1,124 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import React, {useEffect, useState} from 'react';

import styles from './help-menu-body.css';
import Owl from '../owl/help-menu-owl.jsx';
import owlHead from './owl-head.svg';
import {QuestionCategory} from 'scratch-ir';
import AbstractCategoryComponent from '../abstract-category/abstract-category.jsx';
import PrevMessageGenerator from '../prev-message-generator/prev-message-generator.jsx';
import {CSSTransition} from 'react-transition-group';

const HelpMenuBodyComponent = function (props) {
const {
abstractCategories,
categories,
onClick,
message,
owlMessage,
userMessage,
injected,
chooseQuestionType
prevMessages
} = props;


// const [show, setShow] = useState(false);

const blockRef = React.useRef(null);
useEffect(() => {
if (blockRef.current) {
blockRef.current.scrollTo({
top: blockRef.current.scrollHeight,
left: 0,
behavior: 'smooth'
});
}
// setTimeout(() => setShow(true), 300);
});

/* const handleClick = category => {
onClick(category);
};*/

return (
<div
className={styles.body}
className={styles.menu}
>
<div className={styles.menu}>
<div className={styles.header}>
<i className={styles.owlHead}><img src={owlHead} /></i>
<div>{'Owl Chat'}</div>
</div>
<div
className={styles.body}
ref={blockRef}
>
<PrevMessageGenerator
messages={prevMessages}
/>
<div
className={styles.owlArea}
>
<div className={styles.owl}>
<div
className={styles.owl}
>
<Owl
injected={injected}
onSubmit={print}
enabled={false}
text={message}
text={owlMessage}
/>
</div>
</div>
{abstractCategories && abstractCategories.length > 0 ? (
<div
className={styles.category}
>
{categories && categories.length > 0 ? (
<div>
<div
className={classNames(styles.speechBubbleBox, styles.speechBubbleTriangle)}
className={styles.category}
>
{/* <CSSTransition
in={show}
timeout={200}
unmountOnExit
classNames="my-node"
>*/}
<div
id="help-messages"
className={styles.helpMessages}
className={classNames(styles.speechBubbleBox, styles.speechBubbleTriangle)}
>
<div>
{'text'}
<div
id="help-messages"
className={styles.helpMessages}
>
<div>
{userMessage}
</div>
<ul className={styles.categoryList}>
{categories.map(category => (
<li
key={category.id}
>
{category.questionCategories && category.questionCategories.length ?
(<AbstractCategoryComponent
onClick={onClick}
category={category}
abstractCategories={category.questionCategories}
/>) : null}
</li>
))}
</ul>
</div>
<ul className={styles.categoryList}>
{abstractCategories.map(category => (
<li
key={category.id}
>
{category.questionCategories && category.questionCategories.length ? (
<AbstractCategoryComponent
onClick={onClick}
category={category}
abstractCategories={category.questionCategories}
/>) : null}
</li>
))}
</ul>
</div>
</div>
</div>) : null}
</div>
</div>

);
};

HelpMenuBodyComponent.propTypes = {
abstractCategories: PropTypes.arrayOf(PropTypes.instanceOf(QuestionCategory)),
chooseQuestionType: PropTypes.bool.isRequired,
categories: PropTypes.arrayOf(PropTypes.instanceOf(QuestionCategory)),
onClick: PropTypes.func.isRequired,
message: PropTypes.string.isRequired,
injected: PropTypes.bool.isRequired
owlMessage: PropTypes.string.isRequired,
userMessage: PropTypes.string.isRequired,
injected: PropTypes.bool.isRequired,
prevMessages: PropTypes.arrayOf(PropTypes.string)
};

export default HelpMenuBodyComponent;
1 change: 1 addition & 0 deletions src/components/help-menu/body/owl-head.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions src/components/help-menu/owl/help-menu-owl.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,21 @@
top: 54px;
}

.my-node-enter {
opacity: 0;
}
.my-node-enter-active {
opacity: 1;
transition: opacity 200ms;
}
.my-node-exit {
opacity: 1;
}
.my-node-exit-active {
opacity: 0;
transition: opacity 200ms;
}

.help-messages {
padding: 10px;
max-height: 130px;
Expand Down
Loading

0 comments on commit 2fa11a5

Please sign in to comment.