From 018784e11357f1caac5a8210cf3c4598483d041d Mon Sep 17 00:00:00 2001 From: Muhammad Labeeb Date: Fri, 14 Feb 2025 19:13:11 +0500 Subject: [PATCH] add single plugin page --- tutordash/server/app.py | 9 +- tutordash/server/static/img/CheckCircle.svg | 3 + .../server/static/img/{X.svg => Vector.svg} | 0 tutordash/server/static/js/dash.js | 2 +- tutordash/server/static/scss/dash.scss | 192 +++++++++++++----- tutordash/server/templates/base_header.html | 2 +- .../server/templates/installed_plugins.html | 13 +- tutordash/server/templates/plugin.html | 34 +++- tutordash/server/templates/plugin_header.html | 34 ++++ tutordash/server/templates/plugin_store.html | 71 +++++-- tutordash/server/templates/switch_macro.html | 12 ++ 11 files changed, 281 insertions(+), 91 deletions(-) create mode 100644 tutordash/server/static/img/CheckCircle.svg rename tutordash/server/static/img/{X.svg => Vector.svg} (100%) create mode 100644 tutordash/server/templates/plugin_header.html create mode 100644 tutordash/server/templates/switch_macro.html diff --git a/tutordash/server/app.py b/tutordash/server/app.py index 4c0e918..0b761a3 100644 --- a/tutordash/server/app.py +++ b/tutordash/server/app.py @@ -57,7 +57,8 @@ async def plugin_store() -> str: "name": p.name, "url": p.url, "index": p.index, - "description": markdown(p.description), + "author": p.author.split('<')[0].strip(), + "description": markdown(p.description.replace("\n", " ")), "is_installed": p.name in installed_plugins, } for p in tutorclient.Client.plugins_in_store() @@ -105,10 +106,16 @@ async def installed_plugins() -> str: async def plugin(name: str) -> str: # TODO check that plugin exists is_enabled = name in tutorclient.Client.enabled_plugins() + is_installed = name in tutorclient.Client.installed_plugins() + author = next((p.author.split('<')[0].strip() for p in tutorclient.Client.plugins_in_store() if p.name == name), "") + description = next((markdown(p.description) for p in tutorclient.Client.plugins_in_store() if p.name == name), "") return await render_template( "plugin.html", plugin_name=name, is_enabled=is_enabled, + is_installed=is_installed, + author_name=author, + plugin_description=description, plugin_config_unique=tutorclient.Client.plugin_config_unique(name), plugin_config_defaults=tutorclient.Client.plugin_config_defaults(name), user_config=tutorclient.Project.get_user_config(), diff --git a/tutordash/server/static/img/CheckCircle.svg b/tutordash/server/static/img/CheckCircle.svg new file mode 100644 index 0000000..e3dac27 --- /dev/null +++ b/tutordash/server/static/img/CheckCircle.svg @@ -0,0 +1,3 @@ + + + diff --git a/tutordash/server/static/img/X.svg b/tutordash/server/static/img/Vector.svg similarity index 100% rename from tutordash/server/static/img/X.svg rename to tutordash/server/static/img/Vector.svg diff --git a/tutordash/server/static/js/dash.js b/tutordash/server/static/js/dash.js index 1f49932..d9cebdb 100644 --- a/tutordash/server/static/js/dash.js +++ b/tutordash/server/static/js/dash.js @@ -12,7 +12,7 @@ document.getElementById("search-input").addEventListener("input", function () { }); }); -let open = document.querySelectorAll(".open_modal_button"); +let open = document.querySelectorAll(".open-modal-button"); const modal_container = document.getElementById("modal_container"); let close = document.querySelectorAll(".close-modal-button"); diff --git a/tutordash/server/static/scss/dash.scss b/tutordash/server/static/scss/dash.scss index 6484eda..a6f20c2 100644 --- a/tutordash/server/static/scss/dash.scss +++ b/tutordash/server/static/scss/dash.scss @@ -6,6 +6,7 @@ $black: #181d27; $white: #e6f3ff; $blue: #1570ef; $light-blue: #2e90fa; +$green: #009951; $font-family_1: Arial; * { @@ -121,14 +122,23 @@ body { font-weight: 600; } .page-description { - font-size: 16px; + font-size: 1.25em; color: $gray; } } - .launch-button { + .page-button { display: flex; justify-content: center; + + .installed { + display: flex; + align-items: center; + width: 6em; + justify-content: space-around; + color: $green; + font-size: 1em; + } button { width: 9em; height: 2.5em; @@ -212,65 +222,83 @@ body { .details { width: 30em; } - .form-switch { - .switch { - position: relative; - display: inline-block; - width: 60px; - height: 34px; + } + } + .store-plugins { + display: flex; + flex-wrap: wrap; + justify-content: space-between; - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #ccc; - -webkit-transition: 0.4s; - transition: 0.4s; - &:before { - position: absolute; - content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; - background-color: white; - -webkit-transition: 0.4s; - transition: 0.4s; + .plugin { + border: 1px solid $light-gray; + border-radius: 1em; + display: flex; + flex-direction: column; + width: 26em; + margin-bottom: 1.5em; + padding: 1em; + justify-content: space-between; + + .header { + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 0px; + height: 4em; + + .title { + display: flex; + flex-direction: column; + text-transform: capitalize; + justify-content: space-around; + + .name { + a { + color: $blue; + text-decoration: none; + font-size: 1.75em; + + &:visited { + text-decoration: none; + } } } - .slider.round { - border-radius: 34px; + .author { + font-size: 1em; + color: $gray; } + } - .slider.round:before { - border-radius: 50%; - } - - input { - opacity: 0; - width: 0; - height: 0; - - &:checked + .slider { - background-color: #2196f3; - } - - &:focus + .slider { - box-shadow: 0 0 1px #2196f3; - } - - &:checked + .slider:before { - -webkit-transform: translateX(26px); - -ms-transform: translateX(26px); - transform: translateX(26px); - } + .status { + img { + width: 1.5em; } } } + .body { + p { + width: 100%; + height: auto; + display: -webkit-box; + -webkit-line-clamp: 3; // Limit to 3 lines + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + } + } + } + } + .status { + display: flex; + + .status-text { + width: 25em; + } + + .switch-text { + margin-left: 1em; } } } @@ -367,3 +395,63 @@ body { } } } + +.form-switch { + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: 0.4s; + transition: 0.4s; + &:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: 0.4s; + transition: 0.4s; + } + } + + .slider.round { + border-radius: 34px; + } + + .slider.round:before { + border-radius: 50%; + } + + input { + opacity: 0; + width: 0; + height: 0; + + &:checked + .slider { + background-color: #2196f3; + } + + &:focus + .slider { + box-shadow: 0 0 1px #2196f3; + } + + &:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + } + } +} diff --git a/tutordash/server/templates/base_header.html b/tutordash/server/templates/base_header.html index c760819..c9b7b74 100644 --- a/tutordash/server/templates/base_header.html +++ b/tutordash/server/templates/base_header.html @@ -6,7 +6,7 @@
{% block page_title %}{% endblock %}
{% block page_description %}{% endblock %}
-
+
{% block page_button %}{% endblock %}
diff --git a/tutordash/server/templates/installed_plugins.html b/tutordash/server/templates/installed_plugins.html index f6a376d..43bcc37 100644 --- a/tutordash/server/templates/installed_plugins.html +++ b/tutordash/server/templates/installed_plugins.html @@ -1,5 +1,7 @@ {% extends "base_header.html" %} +{% from 'switch_macro.html' import switch %} + {% block page_title %} My Plugins {% endblock %} @@ -9,7 +11,7 @@ View all your installed plugins in one place. {% endblock %} {% block page_button %} - + {% endblock %} {% block model_icon %} @@ -43,14 +45,7 @@ Running local launch will allow all changes to plugins to take effect. This coul
{{ plugin.description|safe }}
-
- -
+ {{ switch(plugin.name, plugin.is_enabled)}} {% endfor %} diff --git a/tutordash/server/templates/plugin.html b/tutordash/server/templates/plugin.html index b0336d3..94fb309 100644 --- a/tutordash/server/templates/plugin.html +++ b/tutordash/server/templates/plugin.html @@ -1,18 +1,33 @@ -{% extends "index.html" %} +{% extends "plugin_header.html" %} -{% block workspace_header %} -{{ plugin_name }} -{% endblock %} +{% set sidebar_active_tab = "" %} -{% set sidebar_active_tab = "my-plugins" %} +{% from 'switch_macro.html' import switch %} {% block workspace_content %} -Enabled:
- -
+ +
+ {% if is_installed %} +
+ Status +
+ {{ switch(plugin_name, is_enabled) }} +
+
+ {% if is_enabled %} Enabled {% else %} Disabled {% endif %} +
+
+ {% if not is_enabled %} Enable the plugin to edit parameters. {% endif %} +
+
+ {% endif %} +
{% if is_enabled %} -

Configuration

+
+

Plugin Parameters

+

This plugin has default parameters. If you make any changes, save them and run a local launch to make the changes effective.

+

Unique settings

{% if plugin_config_unique %} @@ -29,4 +44,5 @@ Enabled:
+ Plugin Marketplace + / {{ plugin_name }} + +
+
+
{{ plugin_name }}
+
By {{ author_name }}
+
+
+ {% block page_button %} + {% if plugin_name in installed_plugins %} +
+ + Installed +
+ {% else %} + + + + {% endif %} + {% endblock %} +
+
+{% block plugin_description %} +
+ {{ plugin_description | safe }} +
+{% endblock %} + +{% endblock %} diff --git a/tutordash/server/templates/plugin_store.html b/tutordash/server/templates/plugin_store.html index ec1c0a9..977a79e 100644 --- a/tutordash/server/templates/plugin_store.html +++ b/tutordash/server/templates/plugin_store.html @@ -8,26 +8,61 @@ Plugin Marketplace View and install available plugins. {% endblock %} +{% block page_button %} +
+ +
+{% endblock %} + {% set sidebar_active_tab = "plugin-marketplace" %} {% block workspace_content %} -
- -
+
+ {% for plugin in plugins %} +
+
+
+
+ {{ plugin.name }} +
+
+ By {{ plugin.author }} +
+
+
+ {% if plugin.is_installed %} + + {% endif %} +
+
+
+ + {{ plugin.description|safe }} +
+
+
-{% for plugin in plugins %} -

{{ plugin.name }}

-{% if plugin.is_installed %} -

Installed: ✅

-{% else %} -

-{% endif %} -

- -

{{ plugin.description|safe }}

-
    -
  • url: {{ plugin.url }}
    • -
  • index: {{ plugin.index }}
    • -
-{% endfor %} +
+
+ {% if plugin.is_installed %} +
+ +
+ {% else %} +
+ +
+ {% endif %} +
+
+ + + +
+ {% endfor %} +
{% endblock %} diff --git a/tutordash/server/templates/switch_macro.html b/tutordash/server/templates/switch_macro.html new file mode 100644 index 0000000..e1732f4 --- /dev/null +++ b/tutordash/server/templates/switch_macro.html @@ -0,0 +1,12 @@ +{% macro switch(plugin_name, is_enabled) %} +
+
+ +
+
+{% endmacro %} \ No newline at end of file