Merge pull request #44 from lars-reimann/Nicht-anklickbare-Nodes-im-T…

…reeView-kenntlich-machen Mache nicht anklickbare Nodes im Tree-View kenntlich.
Safe-DS · Jun 17, 2021 · a0d5986 · a0d5986
2 parents 36b827f + c95f9e7
commit a0d5986
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/client/src/Components/Tree/ClassNode.tsx b/client/src/Components/Tree/ClassNode.tsx
@@ -22,6 +22,8 @@ const ClassNode = ({pythonClass, selection, setSelection, moduleName, setParamet
     const cssClasses = classNames(
         "pl-3rem", "tree-view-row",
         {
+            "text-muted": !hasMethods,
+            "cursor-na":!hasMethods,
             "selected": selection === fullQualifiedName,
         }
     );

diff --git a/client/src/Components/Tree/FunctionNode.tsx b/client/src/Components/Tree/FunctionNode.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import PythonFunction from "../../model/PythonFunction";
 import classNames from "classnames";
+import {isEmptyList} from "../../Utility/listOperations";
 
 type FunctionNodeProps = {
     pythonFunction: PythonFunction,
@@ -16,12 +17,16 @@ const FunctionNode = ({pythonFunction, selection, setSelection, setParameters, p
 
     const fullQualifiedName = parentFullQualifiedName + "." + pythonFunction.name;
 
+    const hasParameters = isEmptyList(pythonFunction.parameters);
+
     const cssClasses = classNames(
         "tree-view-row",
         {
+            "text-muted": !hasParameters,
+            "cursor-na": !hasParameters,
             "pl-3-5rem": !isMethod,
             "pl-5rem": isMethod,
-            "selected": selection === fullQualifiedName,
+            "selected": selection === fullQualifiedName && hasParameters,
         }
     );
 

diff --git a/client/src/Components/Tree/ModuleNode.tsx b/client/src/Components/Tree/ModuleNode.tsx
@@ -21,19 +21,20 @@ const ModuleNode = ({pythonModule, selection, setSelection, setParameters}: Modu
     const cssClasses = classNames(
         "tree-view-row",
         {
+            "text-muted": !(hasClasses || hasFunctions),
+            "cursor-na":!(hasClasses || hasFunctions),
             "pl-2rem": !(hasClasses || hasFunctions),
             "pl-1-5rem": (hasClasses || hasFunctions),
-            "selected": selection === pythonModule.name,
+            "selected": (selection === pythonModule.name) && (hasClasses || hasFunctions),
         }
     );
 
          return (
         <div className="module-node">
             <div className={cssClasses}
                 onClick={() => {
-                     setSelection(pythonModule.name)
+                    setSelection(pythonModule.name)
                     setChildVisibility(!childVisible)
-                    console.log(pythonModule.name + " has been selected.");
                  }}>
                 { (hasClasses || hasFunctions) &&
                     <span className="indicator visibility-indicator">{ childVisible ? "▼" : "▶" }</span>

diff --git a/client/src/Components/TreeView/tree-view.css b/client/src/Components/TreeView/tree-view.css
@@ -77,3 +77,7 @@
     background-color: cornflowerblue;
     color: white;
 }
+
+.cursor-na {
+    cursor: not-allowed;
+}