Hinzufügen eines Dropdownmenus zur Annotationsauswahl

client/src/Components/ParameterView/DocumentationText.tsx

@@ -10,7 +10,7 @@ const DocumentationText = ({inputText}) => {
     const linkName = readMore ? '[Read less]' : '[Read more]'
 
     return (
-        <div>
+        <div className="documentation-text">
             <p>{!readMore && inputText.substr(0, 50)}
                 {readMore && inputText}
                 <button className="read-more-button" onClick={()=>{setReadMore(!readMore)}}>

client/src/Components/ParameterView/ParameterNode.tsx

@@ -2,17 +2,25 @@ import React from "react";
 import "./ParameterView.css";
 import DocumentationText from "./DocumentationText";
 import PythonParameter from "../../model/PythonParameter";
+import { Dropdown } from "react-bootstrap";
 
 type ParameterProps = {inputParameter: PythonParameter}
 
 const ParameterNode = ({inputParameter}: ParameterProps) => {
     return (
         <div className="parametersList">
-
-            <span className="parameter-name">
-                <h4>{inputParameter?.name}</h4>
+            <span className="parameter-header">
+                <h4 className={"parameter-name"}>{inputParameter?.name}</h4>
+                <Dropdown>
+                    <Dropdown.Toggle size="sm" variant="outline-primary">
+                        + @Annotation
+                    </Dropdown.Toggle>
+                    <Dropdown.Menu>
+                        <Dropdown.Item eventKey="rename">@Rename</Dropdown.Item>
+                        <Dropdown.Item eventKey="enum">@Enum</Dropdown.Item>
+                    </Dropdown.Menu>
+                </Dropdown>
             </span>
-
             <DocumentationText inputText={inputParameter?.docstring}/>
         </div>
     );

client/src/Components/ParameterView/ParameterView.css

@@ -24,10 +24,19 @@
     padding-bottom: .5rem;
 }
 
-.parameter-name {
+.parameter-header {
     font-weight: bold;
 }
 
+.parameter-name {
+    float: left;
+    margin-right: 15px;
+}
+
+.parameter-title {
+    padding-bottom: 15px;
+}
+
 .visibility-indicator {
     display: inline-block;
     width: 1rem;
@@ -45,3 +54,7 @@
     text-decoration: underline;
     cursor: pointer;
 }
+
+.documentation-text {
+    clear: both;
+}

client/src/Components/ParameterView/ParameterView.tsx

@@ -9,9 +9,8 @@ const ParameterView = ({inputParameters}: ParameterViewProps) => {
     const hasInputParameters = inputParameters.length > 0;
 
     return (
-
         <div className="parameterViewDiv">
-            <h2>Parameters</h2>
+            <h2 className={"parameter-title"}>Parameters</h2>
             {
                 inputParameters?.map(function (parameters) {
                     return (<ParameterNode key={parameters.name} inputParameter={parameters} />)