Merge remote-tracking branch 'origin/master' into FeedbackLeereParamD…

…okumentation # Conflicts: # client/src/Components/ParameterView/ParameterNode.tsx
Safe-DS · Jun 17, 2021 · 41c7cbb · 41c7cbb
2 parents 60aa274 + 45f3bd9
commit 41c7cbb
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 7 deletions.
diff --git a/client/src/Components/ParameterView/DocumentationText.tsx b/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)}}>

diff --git a/client/src/Components/ParameterView/ParameterNode.tsx b/client/src/Components/ParameterView/ParameterNode.tsx
@@ -2,6 +2,7 @@ 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}
 
@@ -11,9 +12,17 @@ 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>
             {
                 hasDescription &&

diff --git a/client/src/Components/ParameterView/ParameterView.css b/client/src/Components/ParameterView/ParameterView.css
@@ -10,6 +10,11 @@
     padding-left: 1rem;
 }
 
+.parameterViewDiv h5{
+    padding-top: 1rem;
+    padding-left: 1rem;
+}
+
 .parameterViewDiv a{
     padding-left: .5rem;
 }
@@ -19,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;
@@ -40,3 +54,7 @@
     text-decoration: underline;
     cursor: pointer;
 }
+
+.documentation-text {
+    clear: both;
+}
diff --git a/client/src/Components/ParameterView/ParameterView.tsx b/client/src/Components/ParameterView/ParameterView.tsx
@@ -6,15 +6,20 @@ type ParameterViewProps = {inputParameters: PythonParameter[]}
 
 const ParameterView = ({inputParameters}: ParameterViewProps) => {
 
-    return (
+    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} />)
                 })
             }
+            {
+                !hasInputParameters &&
+                    <h5>No Parameters available</h5>
+            }
 
         </div>
     )