From f21a420dc9500814a497d5cf377202ea4532cf89 Mon Sep 17 00:00:00 2001 From: trubizki Date: Fri, 21 May 2021 10:06:19 +0200 Subject: [PATCH 1/4] Finished DokumentationsAnzeige as a Tree View inside Parameter Section --- .../ParameterView/ParameterNode.tsx | 27 +++++++++++++++++++ .../Components/ParameterView/ParameterView.js | 14 +++++----- 2 files changed, 35 insertions(+), 6 deletions(-) create mode 100644 client/src/Components/ParameterView/ParameterNode.tsx diff --git a/client/src/Components/ParameterView/ParameterNode.tsx b/client/src/Components/ParameterView/ParameterNode.tsx new file mode 100644 index 000000000..a69eddfbb --- /dev/null +++ b/client/src/Components/ParameterView/ParameterNode.tsx @@ -0,0 +1,27 @@ +import React, {useState} from "react"; + +// @ts-ignore +const ParameterNode = ({inputParameters}) => { + const [childVisible, setChildVisibility] = useState(false); + + return ( +
  • +
    { + setChildVisibility(!childVisible) + }}> + {inputParameters?.name} +
    +
    + { + childVisible && +
      + {inputParameters?.docstring} + +
    + } +
    +
    • +); +}; + +export default ParameterNode; diff --git a/client/src/Components/ParameterView/ParameterView.js b/client/src/Components/ParameterView/ParameterView.js index 010c9b7e9..e4ddce924 100644 --- a/client/src/Components/ParameterView/ParameterView.js +++ b/client/src/Components/ParameterView/ParameterView.js @@ -1,14 +1,16 @@ -import React from "react"; +import ParameterNode from "./ParameterNode"; const ParameterView = ({parameters}) => { return (
    - { - parameters?.map(function (parameters) { - return (

    {parameters.name}: {parameters.type}

    ) - }) - } +
    ) }; From fdce1490ccc6bd488f75d672ba2b33e14da762dd Mon Sep 17 00:00:00 2001 From: trubizki Date: Fri, 21 May 2021 10:30:46 +0200 Subject: [PATCH 2/4] Refactoring Parameterview.js to ParameterView.tsx --- .../ParameterView/{ParameterView.js => ParameterView.tsx} | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) rename client/src/Components/ParameterView/{ParameterView.js => ParameterView.tsx} (90%) diff --git a/client/src/Components/ParameterView/ParameterView.js b/client/src/Components/ParameterView/ParameterView.tsx similarity index 90% rename from client/src/Components/ParameterView/ParameterView.js rename to client/src/Components/ParameterView/ParameterView.tsx index e4ddce924..4cb280401 100644 --- a/client/src/Components/ParameterView/ParameterView.js +++ b/client/src/Components/ParameterView/ParameterView.tsx @@ -1,11 +1,12 @@ import ParameterNode from "./ParameterNode"; +// @ts-ignore const ParameterView = ({parameters}) => { return (
      - { + {// @ts-ignore parameters?.map(function (parameters) { return () }) From cd0e98587202cb016bcb4502d33ba594831c578d Mon Sep 17 00:00:00 2001 From: trubizki Date: Fri, 21 May 2021 13:28:08 +0200 Subject: [PATCH 3/4] =?UTF-8?q?Sch=C3=B6n=20machen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ParameterView/ParameterNode.tsx | 12 ++++++-- .../ParameterView/ParameterView.css | 30 +++++++++++++++++++ .../ParameterView/ParameterView.tsx | 2 +- 3 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 client/src/Components/ParameterView/ParameterView.css diff --git a/client/src/Components/ParameterView/ParameterNode.tsx b/client/src/Components/ParameterView/ParameterNode.tsx index a69eddfbb..85da679d6 100644 --- a/client/src/Components/ParameterView/ParameterNode.tsx +++ b/client/src/Components/ParameterView/ParameterNode.tsx @@ -1,4 +1,5 @@ import React, {useState} from "react"; +import "./ParameterView.css"; // @ts-ignore const ParameterNode = ({inputParameters}) => { @@ -6,17 +7,22 @@ const ParameterNode = ({inputParameters}) => { return (
    • -
      { +
      { setChildVisibility(!childVisible) }}> - {inputParameters?.name} + + { childVisible ? "▼" : ">" } + + + {inputParameters?.name} + +
      { childVisible &&
        {inputParameters?.docstring} -
      }
      diff --git a/client/src/Components/ParameterView/ParameterView.css b/client/src/Components/ParameterView/ParameterView.css new file mode 100644 index 000000000..a14e35611 --- /dev/null +++ b/client/src/Components/ParameterView/ParameterView.css @@ -0,0 +1,30 @@ + +.tree { + padding-left: 0; +} + +.parameterViewDiv li { + list-style-type: none; +} + +.parameterViewDiv{ + overflow: auto; +} + +.tree ul { + padding-left: 2rem; +} + +.module-name { + padding-left: .5rem; +} + +.pl-1rem { + padding-left: 1rem; +} + +.visibility-indicator { + display: inline-block; + width: 1rem; +} + diff --git a/client/src/Components/ParameterView/ParameterView.tsx b/client/src/Components/ParameterView/ParameterView.tsx index 4cb280401..1d5c8b3b0 100644 --- a/client/src/Components/ParameterView/ParameterView.tsx +++ b/client/src/Components/ParameterView/ParameterView.tsx @@ -4,7 +4,7 @@ import ParameterNode from "./ParameterNode"; const ParameterView = ({parameters}) => { return ( -
      +
        {// @ts-ignore parameters?.map(function (parameters) { From 2107e4ea2a6f0c2fd994ba95efd44072df4addcd Mon Sep 17 00:00:00 2001 From: trubizki Date: Fri, 21 May 2021 16:32:04 +0200 Subject: [PATCH 4/4] =?UTF-8?q?Dokumentation=20sch=C3=B6n=20machen=20mit?= =?UTF-8?q?=20read=20more=20und=20read=20less.=20mit=20formatierung?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/Components/App/App.tsx | 4 +- .../ParameterView/DocumentationText.tsx | 25 ++++++++++++ .../ParameterView/ParameterNode.tsx | 37 ++++++----------- .../ParameterView/ParameterView.css | 40 ++++++++++++------- .../ParameterView/ParameterView.tsx | 22 +++++----- 5 files changed, 79 insertions(+), 49 deletions(-) create mode 100644 client/src/Components/ParameterView/DocumentationText.tsx diff --git a/client/src/Components/App/App.tsx b/client/src/Components/App/App.tsx index 417dc2806..42fbbe093 100644 --- a/client/src/Components/App/App.tsx +++ b/client/src/Components/App/App.tsx @@ -4,13 +4,13 @@ import ParameterView from "../ParameterView/ParameterView"; import TreeView from "../TreeView/TreeView"; function App() { - const [parameters, setParameters] = useState(null); + const [parameters, setParameters] = useState([]); return (
        - +
        ); } diff --git a/client/src/Components/ParameterView/DocumentationText.tsx b/client/src/Components/ParameterView/DocumentationText.tsx new file mode 100644 index 000000000..a6c6f36c2 --- /dev/null +++ b/client/src/Components/ParameterView/DocumentationText.tsx @@ -0,0 +1,25 @@ +import React, {useState} from "react"; +import "./ParameterView.css"; + +// @ts-ignore +const DocumentationText = ({inputText}) => { + + const [readMore,setReadMore] = useState(false); + const moreTextOption = inputText.length > 50 + + const linkName = readMore ? '[Read less]' : '[Read more]' + + return ( +
        +

        {!readMore && inputText.substr(0, 50)} + {readMore && inputText} + +

        + +
        + ); +}; + +export default DocumentationText; \ No newline at end of file diff --git a/client/src/Components/ParameterView/ParameterNode.tsx b/client/src/Components/ParameterView/ParameterNode.tsx index 85da679d6..f70ea947e 100644 --- a/client/src/Components/ParameterView/ParameterNode.tsx +++ b/client/src/Components/ParameterView/ParameterNode.tsx @@ -1,33 +1,22 @@ -import React, {useState} from "react"; +import React from "react"; import "./ParameterView.css"; +import DocumentationText from "./DocumentationText"; +import PythonParameter from "../../model/PythonParameter"; -// @ts-ignore -const ParameterNode = ({inputParameters}) => { - const [childVisible, setChildVisibility] = useState(false); +type ParameterProps = {inputParameter: PythonParameter} +const ParameterNode = ({inputParameter}: ParameterProps) => { return ( -
      • -
        { - setChildVisibility(!childVisible) - }}> +
        - { childVisible ? "▼" : ">" } + +

        {inputParameter?.name}

        +         - - {inputParameters?.name} - - -
        -
        - { - childVisible && -
          - {inputParameters?.docstring} -
        - } -
        -
        • -); + +
      + ); }; export default ParameterNode; + diff --git a/client/src/Components/ParameterView/ParameterView.css b/client/src/Components/ParameterView/ParameterView.css index a14e35611..7c3288d8c 100644 --- a/client/src/Components/ParameterView/ParameterView.css +++ b/client/src/Components/ParameterView/ParameterView.css @@ -1,26 +1,26 @@ - -.tree { - padding-left: 0; -} - -.parameterViewDiv li { - list-style-type: none; -} - .parameterViewDiv{ - overflow: auto; + position: -webkit-sticky; + position: sticky; + top: 0; + padding-right: 1rem; } -.tree ul { - padding-left: 2rem; +.parameterViewDiv h2{ + padding-top: 1rem; + padding-left: 1rem; } -.module-name { +.parameterViewDiv a{ padding-left: .5rem; } -.pl-1rem { +.parametersList { padding-left: 1rem; + padding-bottom: .5rem; +} + +.parameter-name { + font-weight: bold; } .visibility-indicator { @@ -28,3 +28,15 @@ width: 1rem; } +.read-more-button { + background: none!important; + border: none; + /*padding: 0!important;*/ + padding-left: 0.5rem; + /*optional*/ + font-family: arial, sans-serif; + /*input has OS specific font-family*/ + color: #069; + text-decoration: underline; + cursor: pointer; +} diff --git a/client/src/Components/ParameterView/ParameterView.tsx b/client/src/Components/ParameterView/ParameterView.tsx index 1d5c8b3b0..f092bad63 100644 --- a/client/src/Components/ParameterView/ParameterView.tsx +++ b/client/src/Components/ParameterView/ParameterView.tsx @@ -1,17 +1,21 @@ import ParameterNode from "./ParameterNode"; +import React from "react"; +import PythonParameter from "../../model/PythonParameter"; -// @ts-ignore -const ParameterView = ({parameters}) => { +type ParameterViewProps = {inputParameters: PythonParameter[]} + +const ParameterView = ({inputParameters}: ParameterViewProps) => { return ( +
      -
        - {// @ts-ignore - parameters?.map(function (parameters) { - return () - }) - } -
      +

      Parameters

      + { + inputParameters?.map(function (parameters) { + return () + }) + } +
      ) };