Fix Install/Update Submenu Behavior (#18)

* updated install submenus to be more user friendly * fixed app update modal dropdown * added missing label styles
Aquaveo · Jan 31, 2024 · 0d8862f · 0d8862f
1 parent cfbcd4c
commit 0d8862f
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 80 deletions.
diff --git a/tethysapp/app_store/helpers.py b/tethysapp/app_store/helpers.py
@@ -18,7 +18,7 @@
 
 CACHE_KEY = "warehouse_github_app_resources"
 
-html_label_styles = ["blue", "indigo", "pink", "red", "teal", "cyan", "white", "gray", "gray-dark", "purple"]
+html_label_styles = ["blue", "indigo", "pink", "red", "teal", "cyan", "purple", "white", "gray", "gray-dark"]
 
 
 def get_override_key():

diff --git a/tethysapp/app_store/public/css/custom_table.css b/tethysapp/app_store/public/css/custom_table.css
@@ -277,6 +277,24 @@
 	color: #fff;
 	background-color: rgba(255, 255, 255, 0.075);
 	}
+
+	.dropdown-submenu {
+	position: relative;
+	}
+
+	.dropdown-submenu a::after {
+	transform: rotate(-90deg);
+	position: absolute;
+	right: 6px;
+	top: .8em;
+	}
+
+	.dropdown-submenu .dropdown-menu {
+	top: 0;
+	left: 100%;
+	margin-left: .1rem;
+	margin-right: .1rem;
+	}
 
 	@media (max-width: 575.98px) {
 	.table-responsive-sm {

diff --git a/tethysapp/app_store/public/css/labels.css b/tethysapp/app_store/public/css/labels.css
@@ -484,6 +484,30 @@
     border-color: var(--bs-gray);
 }
 
+/* teal color label */
+.label-color-teal {
+    color: var(--bs-white);
+    background-color: var(--bs-teal);
+    border-color: var(--bs-teal);
+}
+.label-color-teal:hover {
+    color: var(--bs-white);
+    background-color: var(--bs-gray);
+    border-color: var(--bs-gray);
+}
+
+/* cyan color label */
+.label-color-cyan {
+    color: var(--bs-white);
+    background-color: var(--bs-cyan);
+    border-color: var(--bs-cyan);
+}
+.label-color-cyan:hover {
+    color: var(--bs-white);
+    background-color: var(--bs-gray);
+    border-color: var(--bs-gray);
+}
+
 /* red color label */
 .label-color-red {
     color: var(--bs-white);

diff --git a/tethysapp/app_store/public/js/main.js b/tethysapp/app_store/public/js/main.js
@@ -257,25 +257,25 @@ const getVersionsHTML_dropdown = (app,checkIfNeeded,isUpdate) => {
           color_icon = 'danger';
         }
         // let versions = app[versions].reverse()
-        let string_dropdown = `<div class="dropdown">`
-        string_dropdown += `<a class="custom-label label-color-info label-outline-xs dropdown-toggle install2" href="#" role="button" id="dropdownMenuLink_${app['name']}" data-bs-toggle="dropdown" aria-expanded="false"> <i class="bi bi-plus-lg"></i> Install </a>`
-        string_dropdown += `<ul class="dropdown-menu position-fixed" aria-labelledby="dropdownMenuLink_${app['name']}">`
+        let string_dropdown = `<div class="dropdown position-static">`
+        string_dropdown += `<a class="custom-label label-color-info label-outline-xs dropdown-toggle" href="#" role="button" id="dropdownMenuLink_${app['name']}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="bi bi-plus-lg"></i> Install </a>`
+        string_dropdown += `<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink_${app['name']}">`
         let versions_obj = app['versions'];
 
         for (channel in versions_obj){
-            string_dropdown += `<li class="dropdown dropend">`;
-            string_dropdown +=`<a class="dropdown-item dropdown-toggle" href="#" id="${channel}_${app['name']}}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">`
+            string_dropdown += `<li class="dropdown-submenu">`;
+            string_dropdown +=`<a class="dropdown-item dropdown-toggle" href="#" id="${channel}_${app['name']}">`
             string_dropdown +=`<span class="label_dropdown custom-label label-outline-${labels_style_dict[channel]["channel_style"]} label-outline-xs"> <i class="bi bi-shop"></i> ${channel} </span>`;
             string_dropdown += `</a>`
-            string_dropdown += `<ul class="dropdown-menu position-fixed" aria-labelledby="${channel}_${app['name']}}">`
+            string_dropdown += `<ul class="dropdown-menu" aria-labelledby="${channel}_${app['name']}">`
 
             for (label in versions_obj[channel]){
-                string_dropdown += `<li class="dropdown dropend">`;
-                string_dropdown +=`<a class="dropdown-item dropdown-toggle" href="#" id="${channel}_${label}_${app['name']}}" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">`
+                string_dropdown += `<li class="dropdown-submenu">`;
+                string_dropdown +=`<a class="dropdown-item dropdown-toggle" href="#" id="${channel}_${label}_${app['name']}">`
                 // string_dropdown +=`<span class="store_label custom-label label-outline-${labels_style_dict[channel]["channel_style"]} label-outline-xs"> <i class="bi bi-shop"></i> ${channel} </span>`;
                 string_dropdown +=`<span class="label_dropdown custom-label label-outline-${labels_style_dict[channel]["label_styles"][label]} label-outline-xs"><i class="bi bi-tags"></i>${label}</span>`
                 string_dropdown += `</a>`
-                string_dropdown += `<ul class="dropdown-menu position-fixed drop_down_scroll" aria-labelledby="${channel}_${label}_${app['name']}}">`
+                string_dropdown += `<ul class="dropdown-menu drop_down_scroll" aria-labelledby="${channel}_${label}_${app['name']}">`
                 for (sinlge_version in versions_obj[channel][label]){
                     // string_dropdown += `<li><a class="dropdown-item" href="#">${versions_obj[channel][label][sinlge_version]}</a></li>`
                     string_dropdown +=`<li><a class="${class_html} button-spaced dropdown-item" href="javascript:void(0)" title="Install">

diff --git a/tethysapp/app_store/templates/app_store/compatibleAppsTable.html b/tethysapp/app_store/templates/app_store/compatibleAppsTable.html
@@ -0,0 +1,24 @@
+{% load static %}
+<div class="card card-default main-app-list hidden">
+    <div class="card-header showHandIcon" data-bs-toggle="collapse" href="#mainApps">Compatible Tethys Applications</div>
+    <div class="collapse show" id="mainApps">
+        <div class="card-body">
+        {% ifchanged active_store %}
+            <table id="mainAppsTable" data-search="true" data-show-search-clear-button="true" data-bs-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-pagination="true" data-detail-view="true" data-detail-formatter="mergedDetailFormatter" data-row-style="installedRowStyle">
+                <thead>
+                    <tr>
+                        <th data-field="name" data-formatter="mergedNameFormatter">App Name</th>
+                        <th data-field="latestVersion" data-formatter="mergedFieldsFormatter">App Latest Versions</th>
+
+                        <th data-field="installed" data-formatter="mergedOperateFormatter" data-events="operateEvents">Actions</th>
+                    </tr>
+                </thead>
+            </table>
+            <div>An asterisk (*) in the 'App Latest Version' column indicates that the latest version is not compatible with your installed Tethys Platform Version.</div>
+
+        {% endifchanged %}
+        </div>
+        <div class="card-footer ">
+        </div>
+    </div>
+</div>
diff --git a/tethysapp/app_store/templates/app_store/home.html b/tethysapp/app_store/templates/app_store/home.html
@@ -92,75 +92,9 @@
 </div>
 {% endif %}
 
-    <div class="card card-default main-app-list hidden">
-        <div class="card-header showHandIcon" data-bs-toggle="collapse" href="#mainApps">Compatible Tethys Applications</div>
-        <div class="collapse show" id="mainApps">
-            <div class="card-body">
-            {% ifchanged active_store %}
-                <table id="mainAppsTable" data-search="true" data-show-search-clear-button="true" data-bs-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-pagination="true" data-detail-view="true" data-detail-formatter="mergedDetailFormatter" data-row-style="installedRowStyle">
-                    <thead>
-                        <tr>
-                            <th data-field="name" data-formatter="mergedNameFormatter">App Names</th>
-                            <th data-field="latestVersion" data-formatter="mergedFieldsFormatter">App Latest Versions</th>
-
-                            <th data-field="installed" data-formatter="mergedOperateFormatter" data-events="operateEvents">Actions</th>
-                        </tr>
-                    </thead>
-                </table>
-                <div>An asterisk (*) in the 'App Latest Version' column indicates that the latest version is not compatible with your installed Tethys Platform Version.</div>
-
-            {% endifchanged %}
-            </div>
-            <div class="card-footer ">
-            </div>
-        </div>
-    </div>
-
-
-<div class="card card-default installed-app-list hidden">
-    <div class="card-header showHandIcon" data-bs-toggle="collapse" href="#incompatibleApps">Incompatible Applications</div>
-    <div class="collapse " id="incompatibleApps">
-        <div class="card-body">
-            {% ifchanged active_store %}
-                <table id="incompatibleAppsTable" data-search="true" data-show-search-clear-button="true" data-bs-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-pagination="true" data-detail-view="true" data-detail-formatter="mergedDetailFormatter" data-row-style="installedRowStyle">
-                    <thead>
-                        <tr>
-                            <th data-field="name" data-formatter="mergedNameFormatter">Tethys App Name</th>
-                            <th data-field="latestVersion" data-formatter="mergedFieldsFormatter">App Latest Version</th>
-                            <!-- <th data-field="author" data-formatter="mergedFieldsFormatter" >Developer</th> -->
-                            <th data-field="installed" data-formatter="mergedOperateFormatter" data-events="operateEvents">Actions</th>
-                        </tr>
-                    </thead>
-                </table>
-            {% endifchanged %}
-        </div>
-        <div class="card-footer ">
-        </div>
-    </div>
-</div>
-
-<div class="card card-default installed-app-list hidden">
-    <div class="card-header showHandIcon" data-bs-toggle="collapse" href="#installedApps">Installed Tethys Applications</div>
-    <div class="collapse show" id="installedApps">
-        <div class="card-body">
-            {% ifchanged active_store %}
-                <table data-search="true" data-show-search-clear-button="true" data-bs-toolbar="#toolbar" data-show-columns="true" id="installedAppsTable" data-show-toggle="true" data-pagination="true"  data-detail-view="true" data-detail-formatter="mergedDetailFormatter">
-                    <thead>
-                        <tr>
-                            <th data-field="name" data-formatter="mergedNameFormatter">Tethys App Name</th>
-                            <th data-field="installedVersion" data-formatter="mergedFieldsFormatter">Installed Version</th>
-                            <th data-field="latestVersion" data-formatter="mergedFieldsFormatter">Latest Version</th>
-                            <th data-field="installed" data-formatter="mergedOperateFormatter" data-events="operateEvents">Actions</th>
-                        </tr>
-                    </thead>
-                </table>
-            {% endifchanged %}
-
-        </div>
-        <div class="card-footer ">
-        </div>
-    </div>
-</div>
+{% include "app_store/compatibleAppsTable.html" %}
+{% include "app_store/incompatibleAppsTable.html" %}
+{% include "app_store/installedAppsTable.html" %}
 
 {% endblock %}
 

diff --git a/tethysapp/app_store/templates/app_store/incompatibleAppsTable.html b/tethysapp/app_store/templates/app_store/incompatibleAppsTable.html
@@ -0,0 +1,22 @@
+{% load static %}
+<div class="card card-default installed-app-list hidden">
+    <div class="card-header showHandIcon" data-bs-toggle="collapse" href="#incompatibleApps">Incompatible Applications</div>
+    <div class="collapse " id="incompatibleApps">
+        <div class="card-body">
+            {% ifchanged active_store %}
+                <table id="incompatibleAppsTable" data-search="true" data-show-search-clear-button="true" data-bs-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-pagination="true" data-detail-view="true" data-detail-formatter="mergedDetailFormatter" data-row-style="installedRowStyle">
+                    <thead>
+                        <tr>
+                            <th data-field="name" data-formatter="mergedNameFormatter">App Name</th>
+                            <th data-field="latestVersion" data-formatter="mergedFieldsFormatter">App Latest Version</th>
+                            <!-- <th data-field="author" data-formatter="mergedFieldsFormatter" >Developer</th> -->
+                            <th data-field="installed" data-formatter="mergedOperateFormatter" data-events="operateEvents">Actions</th>
+                        </tr>
+                    </thead>
+                </table>
+            {% endifchanged %}
+        </div>
+        <div class="card-footer ">
+        </div>
+    </div>
+</div>
diff --git a/tethysapp/app_store/templates/app_store/installedAppsTable.html b/tethysapp/app_store/templates/app_store/installedAppsTable.html
@@ -0,0 +1,23 @@
+{% load static %}
+<div class="card card-default installed-app-list hidden">
+    <div class="card-header showHandIcon" data-bs-toggle="collapse" href="#installedApps">Installed Tethys Applications</div>
+    <div class="collapse show" id="installedApps">
+        <div class="card-body">
+            {% ifchanged active_store %}
+                <table data-search="true" data-show-search-clear-button="true" data-bs-toolbar="#toolbar" data-show-columns="true" id="installedAppsTable" data-show-toggle="true" data-pagination="true"  data-detail-view="true" data-detail-formatter="mergedDetailFormatter">
+                    <thead>
+                        <tr>
+                            <th data-field="name" data-formatter="mergedNameFormatter">App Name</th>
+                            <th data-field="installedVersion" data-formatter="mergedFieldsFormatter">Installed Version</th>
+                            <th data-field="latestVersion" data-formatter="mergedFieldsFormatter">Latest Version</th>
+                            <th data-field="installed" data-formatter="mergedOperateFormatter" data-events="operateEvents">Actions</th>
+                        </tr>
+                    </thead>
+                </table>
+            {% endifchanged %}
+
+        </div>
+        <div class="card-footer ">
+        </div>
+    </div>
+</div>
diff --git a/tethysapp/app_store/templates/app_store/modals/update.html b/tethysapp/app_store/templates/app_store/modals/update.html
@@ -5,7 +5,7 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="update-label">Application Update Status</h5>
             </div>
-            <div class="modal-body" id="add-app-container">
+            <div class="modal-body" style="position:static" id="add-app-container">
                 <h6 id="update-processing-label"></h6>
 
                 <div>