diff --git a/plinth/forms.py b/plinth/forms.py
index 2d541513a..1cacf78ef 100644
--- a/plinth/forms.py
+++ b/plinth/forms.py
@@ -35,6 +35,7 @@ import plinth
class AppForm(forms.Form):
"""Generic configuration form for an app."""
is_enabled = forms.BooleanField(
+ widget=CheckboxInput(attrs={'id': 'app-toggle-input'}),
label=_('Enable application'), required=False)
diff --git a/plinth/templates/app.html b/plinth/templates/app.html
index ba9532806..53dedbcc0 100644
--- a/plinth/templates/app.html
+++ b/plinth/templates/app.html
@@ -26,17 +26,29 @@
{% load static %}
{% block content %}
+
+
+
+
+ {% block pagetitle %}
+ {{ name }}
+ {% endblock %}
- {% block pagetitle %}
- {{ name }}
- {% endblock %}
-
- {% block description %}
- {% for paragraph in description %}
- {{ paragraph|safe }}
- {% endfor %}
- {% endblock %}
-
+ {% block description %}
+ {% for paragraph in description %}
+ {{ paragraph|safe }}
+ {% endfor %}
+ {% endblock %}
+
+
{% if manual_page %}
@@ -98,17 +110,19 @@
{% include "port-forwarding-info.html" with service_name=name %}
- {% block configuration %}
- {% trans "Configuration" %}
+
+
+
{% endblock %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index e79a55991..5b8e68881 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -464,3 +464,46 @@ a.menu_link_active {
.names-domain-column {
width: 50%;
}
+
+.toggle-button-container {
+ display: none;
+ flex-flow: row;
+ justify-content: flex-end;
+}
+
+.toggle-button-container .form-group {
+ display: none;
+}
+
+.toggle-button {
+ border-radius: 25px;
+ border: none;
+ width: 55px;
+ height: 25px;
+ background: #ccc;
+ position: relative;
+}
+
+.toggle-button::before {
+ content: '';
+ display: block;
+ height: 18px;
+ width: 18px;
+ border-radius: 100%;
+ background: #fff;
+ position: absolute;
+ top: 50%;
+ left: 6%;
+ transform: translateY(-50%);
+}
+.toggle-button--toggled {
+ background: #337ab7;
+}
+.toggle-button--toggled::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 100%;
+ transform: translateY(-50%) translateX(-116%)
+}
+
diff --git a/static/themes/default/js/app.template.js b/static/themes/default/js/app.template.js
new file mode 100644
index 000000000..ded526b62
--- /dev/null
+++ b/static/themes/default/js/app.template.js
@@ -0,0 +1,18 @@
+const appToggleForm = document.querySelector('#app-toggle')
+const appToggleContainer = appToggleForm.parentElement
+const appToggleInput = document.querySelector('#app-toggle-input')
+
+const onSubmit = (e) => {
+ e.preventDefault
+ appToggleInput.checked = !appToggleInput.checked
+ appToggleForm.submit()
+}
+
+appToggleForm.addEventListener('submit', onSubmit)
+
+
+/**
+ * if javascript is enabled, this script will run and show the toggle button
+ */
+
+appToggleContainer.style.display = 'flex';
\ No newline at end of file