[proxy] improve styling of items' "install" and "uninstall" buttons in the web UI

5 files changed, 95 insertions, 52 deletions

diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index 31613cd..8b8be4b 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -45,11 +45,15 @@ in a proprietary work, I am not going to enforce this in court.
           }
 
           .inline-form {
-              display: inline-block;
+              display: inline-flex;
               padding: 0;
               margin: 0;
           }
 
+          .inline-form > * {
+              flex: 1 1 0;
+          }
+
           .small-print {
               font-size: 80%;
               color: #555;
@@ -61,8 +65,7 @@ in a proprietary work, I am not going to enforce this in court.
               background-color: #fcc;
           }
 
-          .green-button {
-                  background-color: #4caf50;
+          .green-button, .red-button, .blue-button {
                   border: none;
                   border-radius: 2px;
                   color: white;
@@ -77,6 +80,47 @@ in a proprietary work, I am not going to enforce this in court.
                   margin: 2px;
           }
 
+          .green-button {
+              background-color: #4caf50;
+          }
+
+          .red-button {
+              background-color: #af504c;
+          }
+
+          .red-button {
+              background-color: #504caf;
+          }
+
+          .disabled-button {
+                  background-color: #aaa;
+                  cursor: default;
+          }
+
+          .button-bordering-right {
+              margin-right: 0;
+              border-radius: 2px 0 0 2px;
+              border-right: 1px solid #65A065;
+          }
+
+          .button-bordering-left {
+              margin-left: 0;
+              border-radius: 0 2px 2px 0;
+              border-left: 1px solid #65A065;
+          }
+
+          .button-bordering-left.button-bordering-right {
+              border-radius: 0;
+          }
+
+          .button-row {
+              display: flex;
+          }
+
+          .button-row > * {
+              flex: 1 1 0;
+          }
+
           .hide {
               display: none !important;
           }
diff --git a/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
index b4d12c2..151a8b3 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
@@ -41,43 +41,54 @@ in a proprietary work, I am not going to enforce this in court.
   <div class="item-identifier">
     {{ display_info.info.versioned_identifier }}
   </div>
-  {% if display_info.installed == InstalledStatus.INSTALLED %}
-    <div>{% block item_is_installed_msg %}{% endblock %}</div>
+
+  {% block main_info_bulk %}
+    TODO: add more info...
+  {% endblock %}
+
+  {% set install_but_classes   = ['green-button', 'button-bordering-left'] %}
+  {% set uninstall_but_classes = ['green-button', 'button-bordering-right'] %}
+  {% if display_info.installed == InstalledStatus.FAILED_TO_INSTALL %}
     {%
-      if uninstall_disallowed is not defined and
-          display_info.active != ActiveStatus.REQUIRED
+      set install_text =
+          _('web_ui.items.single_version.retry_install_button')
+    %}
+    {%
+      set uninstall_text =
+          _('web_ui.items.single_version.leave_uninstalled_button')
     %}
-      <form method="POST">
-        <input name="action" value="uninstall_item_version" type="hidden">
-        <button class="green-button">
-          {{ _('web_ui.items.single_version.uninstall_button') }}
-        </button>
-      </form>
-    {% endif %}
-  {% elif display_info.installed == InstalledStatus.NOT_INSTALLED %}
-    <div>{% block item_is_not_installed_msg %}{% endblock %}</div>
-    <form method="POST">
-      <input name="action" value="install_item_version" type="hidden">
-      <button class="green-button">
-        {{ _('web_ui.items.single_version.install_button') }}
-      </button>
-    </form>
-  {% else %}
     <div>{% block item_install_failed_msg %}{% endblock %}</div>
-    <div>
-      <form method="POST" class="inline-form">
-        <input name="action" value="install_item_version" type="hidden">
-        <button class="green-button">
-          {{ _('web_ui.items.single_version.retry_install_button') }}
-        </button>
-      </form>
-      <form method="POST" class="inline-form">
-        <input name="action" value="uninstall_item_version" type="hidden">
-        <button class="green-button">
-          {{ _('web_ui.items.single_version.leave_uninstalled_button') }}
-        </button>
-      </form>
-    </div>
-  {% endif %}
-  TODO: add more info...
+  {% else %}
+    {% set install_text   = _('web_ui.items.single_version.install_button') %}
+    {% set uninstall_text = _('web_ui.items.single_version.uninstall_button') %}
+    {% if display_info.installed == InstalledStatus.INSTALLED %}
+      {% do install_but_classes.append('disabled-button') %}
+      {%
+        if uninstall_disallowed is defined or
+            display_info.active == ActiveStatus.REQUIRED
+      %}
+        {% do uninstall_but_classes.append('disabled-button') %}
+      {% endif %}
+    {% else %}
+      {# display_info.installed == InstalledStatus.NOT_INSTALLED #}
+      {% do uninstall_but_classes.append('disabled-button') %}
+    {% endif %}
+  {% endif %}{# else/ display_info.installed == InstalledStatus.FAILED_TO_I...#}
+  <div class="button-row">
+    {%
+      for classes, text, action in [
+          (uninstall_but_classes, uninstall_text, 'uninstall_item_version'),
+          (install_but_classes,   install_text,   'install_item_version')
+      ]
+    %}
+      {% if 'disabled-button' in classes %}
+        <button class="{{ classes|join(' ') }}">{{ text }}</button>
+      {% else %}
+        <form method="POST" class="inline-form">
+          <input name="action" value="{{ action }}" type="hidden">
+          <button class="{{ classes|join(' ') }}">{{ text }}</button>
+        </form>
+      {% endif %}
+    {% endfor %}
+  </div>
 {% endblock main_info %}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
index a087a95..2176646 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
@@ -28,12 +28,6 @@ in a proprietary work, I am not going to enforce this in court.
         .format(display_info.info.long_name)
   }}
 {% endblock %}
-{% block item_is_installed_msg %}
-{{ _('web_ui.items.single_version.library.is_installed') }}
-{% endblock %}
-{% block item_is_not_nstalled_msg %}
-  {{ _('web_ui.items.single_version.library.is_not_installed') }}
-{% endblock %}
 {% block item_install_failed_msg %}
   {{ _('web_ui.items.single_version.library.install_failed') }}
 {% endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
index 4224d4b..6671747 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
@@ -28,12 +28,6 @@ in a proprietary work, I am not going to enforce this in court.
         .format(display_info.info.long_name)
   }}
 {% endblock %}
-{% block item_is_installed_msg %}
-{{ _('web_ui.items.single_version.package.is_installed') }}
-{% endblock %}
-{% block item_is_not_nstalled_msg %}
-  {{ _('web_ui.items.single_version.package.is_not_installed') }}
-{% endblock %}
 {% block item_install_failed_msg %}
   {{ _('web_ui.items.single_version.package.install_failed') }}
 {% endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
index 20d6964..ce1cef2 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
@@ -86,7 +86,7 @@ in a proprietary work, I am not going to enforce this in court.
         </div>
       </form>
     {% endif %}{# not display_info.deleted #}
-  {% endif %}{# display_info.is_local_semirepo (else) #}
+  {% endif %}{# else/ display_info.is_local_semirepo #}
   {% if display_info.deleted and not display_info.is_local_semirepo %}
     <div>
       {{ _('web_ui.repos.single.repo_is_deleted') }}