💄 Add about dialog

Author: cp2004

octoprint_wled/__init__.py

@@ -21,6 +21,7 @@ class WLEDPlugin(
     wled: Optional[WLED]
     api: Optional[api.PluginAPI]
     events: Optional[events.PluginEventHandler]
+    progress: Optional[progress.PluginProgressHandler]
     lights_on: bool = True
 
     def initialize(self) -> None:
@@ -155,6 +156,12 @@ def get_assets(self) -> Dict[str, List[str]]:
             "css": ["dist/wled.css"],
         }
 
+    # TemplatePlugin
+    def get_template_vars(self):
+        return {
+            "version": self._plugin_version,
+        }
+
     # Software Update hook
     def get_update_information(self) -> dict:
         return {

octoprint_wled/templates/settings/about.jinja2

@@ -0,0 +1,64 @@
+<h5>About the plugin</h5>
+
+<p><strong><i><i class="fas fa-tag text-success"></i> Version {{ plugin_wled_version }}</i></strong> - <a href="https://github.com/cp2004/OctoPrint-WLED/releases" target="_blank">Release notes</a></p>
+
+<p>Some useful links for you:</p>
+<ul>
+    <li>Found a bug? Report it! <a href="https://github.com/cp2004/OctoPrint-WLED/issues" target="_blank">Issue tracker <i class="fas fa-external-link-alt"></i></a></li>
+    <li>Need support:
+        <ul>
+            <li>Open an issue as a <a href="https://github.com/cp2004/OctoPrint-WLED/issues/new" target="_blank"> question on the repository <i class="fas fa-external-link-alt"></i></a></li>
+            <li>Get in contact on the <a href="https://discord.octoprint.org" target="_blank">OctoPrint Discord server <i class="fas fa-external-link-alt"></i></a> </li>
+            <li>Get in contact on the <a href="https://community.octoprint.org" target="_blank">community forums <i class="fas fa-external-link-alt"></i></a></li>
+        </ul>
+    </li>
+</ul>
+
+<h5>Enjoying the plugin? Support it's development!</h5>
+<p>A great way to say thanks, and encourage more great features. Sponsor what you want, one time or monthly!</p><br>
+<a class="btn btn-success" href="https://github.com/sponsors/cp2004/" target="_blank"><i class="fas fa-heart" aria-hidden="true"></i> Sponsor my projects</a>
+
+<button class="btn btn-success" data-toggle="modal" data-target="#SponsorsModal">View sponsors</button>
+<div id="SponsorsModal" class="modal hide fade">
+	<div class="modal-header">
+		<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+		<h3>Sponsors!</h3>
+	</div>
+	<div class="modal-body">
+        <p>These wonderful people have sponsored development of this plugin. As a thank you, their names are here in the plugin.</p>
+        <p>Want to see your name here? <a class="text-success" href="https://github.com/sponsors/cp2004" target="_blank">You can sponsor too!</a></p>
+        <ul>
+            <li>ssl-3</li>
+            <li>Gina Häußge</li>
+            <li>FlynHokie</li>
+            <li>Ken Lucke</li>
+            <li>erickstryck</li>
+            <li>ReggieMDavis</li>
+            <li>otaku13</li>
+            <li>Matt Ockendon</li>
+            <li>nigelboubert</li>
+            <li>samwiseg0</li>
+            <li>pRINTERnOODLE</li>
+        </ul>
+    </div>
+	<div class="modal-footer">
+		<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</a>
+	</div>
+</div>
+<button class="btn btn-primary" data-toggle="modal" data-target="#ContributorModal">View contributors</button>
+<div id="ContributorModal" class="modal hide fade">
+	<div class="modal-header">
+		<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
+		<h3>Contributors!</h3>
+	</div>
+	<div class="modal-body">
+        <p>These wonderful people have helped out in development of this plugin. Whether it's fixing bugs, improvements to the code, or new features, all are useful!</p>
+        <p>Want to see your name here? Get involved over on the repo. Any help is always appreciated!</p>
+        <ul>
+            <li><a href="https://github.com/jappyjan">@jappyjan</a></li>
+        </ul>
+    </div>
+	<div class="modal-footer">
+		<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</a>
+	</div>
+</div>

octoprint_wled/templates/wled_settings.jinja2

@@ -32,10 +32,12 @@
         </button>
     </div>
 </div>
+<hr>
 <div class="tabbable">
     <ul class="nav nav-pills">
         <li class="active"><a href="#wledPrinter" data-toggle="tab">Printing effects</a></li>
         <li><a href="#wledProgress" data-toggle="tab">Progress effects</a></li>
+        <li><a href="#wledAbout" data-toggle="tab">About</a></li>
     </ul>
     <div class="tab-content">
         <div class="tab-pane active" id="wledPrinter">
@@ -44,6 +46,9 @@
         <div class="tab-pane" id="wledProgress">
             {% include 'settings/progress.jinja2' %}
         </div>
+        <div class="tab-pane" id="wledAbout">
+            {% include "settings/about.jinja2" %}
+        </div>
     </div>
 </div>