add docLink to config

TerosTechnology · Oct 20, 2024 · 6ec4ba1 · 6ec4ba1
1 parent 0d1f3e0
commit 6ec4ba1
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 20 deletions.
diff --git a/src/colibri/config/config_web.ts b/src/colibri/config/config_web.ts
@@ -124,6 +124,17 @@ export const WEB_CONFIG = `
             height: 100%;
         }
 
+        .help-icon {
+            width: 35px;
+            height: 35px;
+            transition: filter 0.3s;
+            filter: brightness(0) saturate(100%) invert(86%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(93%) contrast(88%);
+        }
+
+        .help-icon:hover {
+            filter: invert(23%) sepia(89%) saturate(3750%) hue-rotate(201deg) brightness(89%) contrast(91%);
+        }
+
 </style>
 </head>
 <body>
@@ -354,13 +365,14 @@ export const WEB_CONFIG = `
 <div class="col-sm-12 main h-100">
     <div class="card h-100" id="general-general">
       <div class="card-header">
-        <h1 class="card-title">General: General</h1>
+        <h1 class="card-title">General<a href="https://terostechnology.github.io/terosHDLdoc/" target="_blank"><img class="help-icon" src="HELP_ICON" alt="Go To Documentation"></a></h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
       
           
           
+          
             <div class="mb-3">
               <label for="general-general-pypath" class="form-label">
                 Python3 binary path (e.g.: /usr/bin/python3). Empty if you want to use the system path. <strong>Install teroshdl. E.g: pip3 install teroshdl</strong>
@@ -432,7 +444,7 @@ export const WEB_CONFIG = `
   </div>
     <div class="card h-100" id="documentation-general">
       <div class="card-header">
-        <h1 class="card-title">Documentation: General</h1>
+        <h1 class="card-title">Documentation</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -670,7 +682,7 @@ export const WEB_CONFIG = `
   </div>
     <div class="card h-100" id="editor-general">
       <div class="card-header">
-        <h1 class="card-title">Editor: General</h1>
+        <h1 class="card-title">Editor</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -748,7 +760,7 @@ export const WEB_CONFIG = `
   </div>
     <div class="card h-100" id="formatter-general">
       <div class="card-header">
-        <h1 class="card-title">Formatter: General</h1>
+        <h1 class="card-title">Formatter</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -1179,7 +1191,7 @@ export const WEB_CONFIG = `
   </div>
     <div class="card h-100" id="linter-general">
       <div class="card-header">
-        <h1 class="card-title">Linter settings: General</h1>
+        <h1 class="card-title">Linter settings</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -1476,7 +1488,7 @@ export const WEB_CONFIG = `
   </div>
     <div class="card h-100" id="schematic-general">
       <div class="card-header">
-        <h1 class="card-title">Schematic viewer: General</h1>
+        <h1 class="card-title">Schematic viewer</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -1542,7 +1554,7 @@ export const WEB_CONFIG = `
   </div>
     <div class="card h-100" id="templates-general">
       <div class="card-header">
-        <h1 class="card-title">Templates: General</h1>
+        <h1 class="card-title">Templates</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -1609,7 +1621,7 @@ export const WEB_CONFIG = `
   </div>
     <div class="card h-100" id="tools-general">
       <div class="card-header">
-        <h1 class="card-title">Tools: General</h1>
+        <h1 class="card-title">Tools</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -4645,6 +4657,8 @@ export const WEB_CONFIG = `
     let element_value;
     config["general"] = {}
     config["general"]["general"] = {}
+    element_value = document.getElementById("general-general-docLink").value;
+    config["general"]["general"]["docLink"] = element_value
     element_value = document.getElementById("general-general-pypath").value;
     config["general"]["general"]["pypath"] = element_value
     element_value = document.getElementById("general-general-makepath").value;
@@ -5269,6 +5283,7 @@ export const WEB_CONFIG = `
   }
 
   function set_config(config){
+    document.getElementById("general-general-docLink").value = config["general"]["general"]["docLink"];
     document.getElementById("general-general-pypath").value = config["general"]["general"]["pypath"];
     document.getElementById("general-general-makepath").value = config["general"]["general"]["makepath"];
     document.getElementById("general-general-go_to_definition_vhdl").checked = config["general"]["general"]["go_to_definition_vhdl"];
@@ -5502,6 +5517,11 @@ export const WEB_CONFIG = `
     const MODIFIEDMSG = "Modified in project";
     let mark = "";
     mark = "";
+    if (projectName !== undefined && config["general"]["general"]["docLink"] != undefined) {
+      mark = MODIFIEDMSG;
+    }
+    document.getElementById("mark_general-general-docLink").innerHTML = mark;
+    mark = "";
     if (projectName !== undefined && config["general"]["general"]["pypath"] != undefined) {
       mark = MODIFIEDMSG;
     }

diff --git a/src/colibri/config/helpers/configs/general.yml b/src/colibri/config/helpers/configs/general.yml
@@ -1,3 +1,5 @@
+docLink: "https://terostechnology.github.io/terosHDLdoc/"
+
 pypath:
   description: "Python3 binary path (e.g.: /usr/bin/python3). Empty if you want to use the system path. <strong>Install teroshdl. E.g: pip3 install teroshdl</strong>"
   type: string

diff --git a/src/colibri/config/helpers/field_config.html.nj b/src/colibri/config/helpers/field_config.html.nj
@@ -4,7 +4,11 @@
       {%- for tp1 in type_declaration[tp0]["pages"] %}
     <div class="card h-100" id="{{tp0}}-{{tp1}}">
       <div class="card-header">
-        <h1 class="card-title">{{type_declaration[tp0]["title"]}}: {{type_declaration[tp0]["pages"][tp1]["title"]}}</h1>
+        {%- if type_declaration[tp0]["pages"][tp1]["title"] == "General" %}
+        <h1 class="card-title">{{type_declaration[tp0]["title"]}}{%- if type_declaration[tp0]["pages"][tp1]["docLink"] %}<a href="{{type_declaration[tp0]["pages"][tp1]["docLink"]}}" target="_blank"><img class="help-icon" src="HELP_ICON" alt="Go To Documentation"></a>{%- endif %}</h1>
+        {%- else %}
+        <h1 class="card-title">{{type_declaration[tp0]["title"]}}: {{type_declaration[tp0]["pages"][tp1]["title"]}}{%- if type_declaration[tp0]["pages"][tp1]["docLink"] %}<a href="{{type_declaration[tp0]["pages"][tp1]["docLink"]}}" target="_blank"><img class="help-icon" src="HELP_ICON" alt="Go To Documentation"></a>{%- endif %}</h1>
+        {%- endif %}
         <h6 class="card-subtitle mb-2 text-muted">{{type_declaration[tp0]["pages"][tp1]["description"]}}</h6>
       </div>
       <div class="card-body overflow-auto">

diff --git a/src/colibri/config/helpers/generate_config.py b/src/colibri/config/helpers/generate_config.py
@@ -4,7 +4,7 @@
 import jinja2
 import yaml
 
-AUXILIAR_FIELDS = ["description", "title", "divider"]
+AUXILIAR_FIELDS = ["description", "title", "docLink", "divider"]
 
 
 def get_type_declaration(field):

diff --git a/src/colibri/config/helpers/web_css.nj b/src/colibri/config/helpers/web_css.nj
@@ -91,4 +91,15 @@
 
         .card {
             height: 100%;
+        }
+
+        .help-icon {
+            width: 35px;
+            height: 35px;
+            transition: filter 0.3s;
+            filter: brightness(0) saturate(100%) invert(86%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(93%) contrast(88%);
+        }
+
+        .help-icon:hover {
+            filter: invert(23%) sepia(89%) saturate(3750%) hue-rotate(201deg) brightness(89%) contrast(91%);
         }
diff --git a/src/colibri/config/web_config.html b/src/colibri/config/web_config.html
@@ -103,6 +103,17 @@
             height: 100%;
         }
 
+        .help-icon {
+            width: 35px;
+            height: 35px;
+            transition: filter 0.3s;
+            filter: brightness(0) saturate(100%) invert(86%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(93%) contrast(88%);
+        }
+
+        .help-icon:hover {
+            filter: invert(23%) sepia(89%) saturate(3750%) hue-rotate(201deg) brightness(89%) contrast(91%);
+        }
+
 </style>
 </head>
 <body>
@@ -333,13 +344,14 @@
 <div class="col-sm-12 main h-100">
     <div class="card h-100" id="general-general">
       <div class="card-header">
-        <h1 class="card-title">General: General</h1>
+        <h1 class="card-title">General<a href="https://terostechnology.github.io/terosHDLdoc/" target="_blank"><img class="help-icon" src="HELP_ICON" alt="Go To Documentation"></a></h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
 
 
 
+
             <div class="mb-3">
               <label for="general-general-pypath" class="form-label">
                 Python3 binary path (e.g.: /usr/bin/python3). Empty if you want to use the system path. <strong>Install teroshdl. E.g: pip3 install teroshdl</strong>
@@ -411,7 +423,7 @@ <h6 class="card-subtitle mb-2 text-muted"></h6>
   </div>
     <div class="card h-100" id="documentation-general">
       <div class="card-header">
-        <h1 class="card-title">Documentation: General</h1>
+        <h1 class="card-title">Documentation</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -649,7 +661,7 @@ <h6 class="card-subtitle mb-2 text-muted"></h6>
   </div>
     <div class="card h-100" id="editor-general">
       <div class="card-header">
-        <h1 class="card-title">Editor: General</h1>
+        <h1 class="card-title">Editor</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -727,7 +739,7 @@ <h6 class="card-subtitle mb-2 text-muted"></h6>
   </div>
     <div class="card h-100" id="formatter-general">
       <div class="card-header">
-        <h1 class="card-title">Formatter: General</h1>
+        <h1 class="card-title">Formatter</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -1158,7 +1170,7 @@ <h6 class="card-subtitle mb-2 text-muted">VHDL Style Guide. Analyzes VHDL files
   </div>
     <div class="card h-100" id="linter-general">
       <div class="card-header">
-        <h1 class="card-title">Linter settings: General</h1>
+        <h1 class="card-title">Linter settings</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -1455,7 +1467,7 @@ <h6 class="card-subtitle mb-2 text-muted"></h6>
   </div>
     <div class="card h-100" id="schematic-general">
       <div class="card-header">
-        <h1 class="card-title">Schematic viewer: General</h1>
+        <h1 class="card-title">Schematic viewer</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -1521,7 +1533,7 @@ <h6 class="card-subtitle mb-2 text-muted"></h6>
   </div>
     <div class="card h-100" id="templates-general">
       <div class="card-header">
-        <h1 class="card-title">Templates: General</h1>
+        <h1 class="card-title">Templates</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -1588,7 +1600,7 @@ <h6 class="card-subtitle mb-2 text-muted"></h6>
   </div>
     <div class="card h-100" id="tools-general">
       <div class="card-header">
-        <h1 class="card-title">Tools: General</h1>
+        <h1 class="card-title">Tools</h1>
         <h6 class="card-subtitle mb-2 text-muted"></h6>
       </div>
       <div class="card-body overflow-auto">
@@ -4624,6 +4636,8 @@ <h4 class="card-subtitle text-muted">Simulation</h4>
     let element_value;
     config["general"] = {}
     config["general"]["general"] = {}
+    element_value = document.getElementById("general-general-docLink").value;
+    config["general"]["general"]["docLink"] = element_value
     element_value = document.getElementById("general-general-pypath").value;
     config["general"]["general"]["pypath"] = element_value
     element_value = document.getElementById("general-general-makepath").value;
@@ -5248,6 +5262,7 @@ <h4 class="card-subtitle text-muted">Simulation</h4>
   }
 
   function set_config(config){
+    document.getElementById("general-general-docLink").value = config["general"]["general"]["docLink"];
     document.getElementById("general-general-pypath").value = config["general"]["general"]["pypath"];
     document.getElementById("general-general-makepath").value = config["general"]["general"]["makepath"];
     document.getElementById("general-general-go_to_definition_vhdl").checked = config["general"]["general"]["go_to_definition_vhdl"];
@@ -5481,6 +5496,11 @@ <h4 class="card-subtitle text-muted">Simulation</h4>
     const MODIFIEDMSG = "Modified in project";
     let mark = "";
     mark = "";
+    if (projectName !== undefined && config["general"]["general"]["docLink"] != undefined) {
+      mark = MODIFIEDMSG;
+    }
+    document.getElementById("mark_general-general-docLink").innerHTML = mark;
+    mark = "";
     if (projectName !== undefined && config["general"]["general"]["pypath"] != undefined) {
       mark = MODIFIEDMSG;
     }

diff --git a/src/teroshdl/features/config.ts b/src/teroshdl/features/config.ts
@@ -216,6 +216,9 @@ export class Config_manager {
     private getWebviewContent(webview: vscode.Webview): string {
         const template_str = this.web_content;
 
+        const helpIcon = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'resources', 'icon',
+            'light', 'help.svg'));
+
         const css_0 = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'resources',
             'project_manager', 'bootstrap.min.css'));
         const css_1 = webview.asWebviewUri(vscode.Uri.joinPath(this.context.extensionUri, 'resources',
@@ -225,8 +228,9 @@ export class Config_manager {
 
         const html = nunjucks.renderString(template_str, {
             "css_0": css_0, "css_1": css_1, "js_0": js_0,
-            "cspSource": webview.cspSource
-        });
+            "cspSource": webview.cspSource,
+        }).replace(/HELP_ICON/g, helpIcon.toString());
+
         return html;
     }