nik/FreedomBox
1
0
Fork 0
mirror of https://github.com/freedombox/FreedomBox.git synced 2026-07-22 11:59:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

app: Use single form for app toggle and configuration

Browse Source 
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
This commit is contained in:
Alice Kile 2019-11-11 17:34:07 +05:30 committed by Joseph Nuthalapati
parent ec62f331b8
commit 1a65c88881
No known key found for this signature in database
GPG Key ID: 5398F00A2FA43C35
4 changed files with 20 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
plinth/modules/ejabberd/templates/ejabberd.html
View File

@ -49,7 +49,7 @@
<h3>{% trans "Configuration" %}</h3>
<form class="form form-configuration" method="post">
<form id="app-form" class="form form-configuration" method="post">
{% csrf_token %}
{{ form|bootstrap }}

30
plinth/templates/app.html
View File

@ -26,16 +26,12 @@
{% load static %}
{% block content %}
<div id='app-toggle-container' class="toggle-button-container">
<form id="app-toggle" class="form form-configuration" method="post">
{% csrf_token %}
{{ form|bootstrap }}
<div id='app-toggle-container' class="app-toggle-container">
{% if is_enabled %}
<button type="submit" value="False" class="btn toggle-button toggle-button--toggled"></button>
<button id="app-toggle-button" value="False" class="btn toggle-button toggle-button--toggled"></button>
{% else %}
<button type="submit" value="True" class="btn toggle-button"></button>
<button id="app-toggle-button" value="True" class="btn toggle-button"></button>
{% endif %}
</form>
</div>
<header>
{% block pagetitle %}
@ -110,19 +106,17 @@
{% include "port-forwarding-info.html" with service_name=name %}
<noscript>
{% block configuration %}
<h3>{% trans "Configuration" %}</h3>
<form class="form form-configuration" method="post">
{% csrf_token %}
{% block configuration %}
<h3>{% trans "Configuration" %}</h3>
<form id="app-form" class="form form-configuration" method="post">
{% csrf_token %}
{{ form|bootstrap }}
{{ form|bootstrap }}
<input type="submit" class="btn btn-primary"
value="{% trans "Update setup" %}"/>
</form>
{% endblock %}
</noscript>
<input type="submit" class="btn btn-primary"
value="{% trans "Update setup" %}"/>
</form>
{% endblock %}
<script src="{% static 'theme/js/app.template.js' %}"></script>
{% endblock %}

6
static/themes/default/css/plinth.css
View File

@ -465,16 +465,12 @@ a.menu_link_active {
width: 50%;
}
.toggle-button-container {
.app-toggle-container {
display: none;
flex-flow: row;
justify-content: flex-end;
}
.toggle-button-container .form-group {
display: none;
}
.toggle-button {
border-radius: 25px;
border: none;

12
static/themes/default/js/app.template.js
View File

@ -1,18 +1,18 @@
const appToggleForm = document.querySelector('#app-toggle')
const appToggleContainer = appToggleForm.parentElement
const appForm = document.querySelector('#app-form')
const appToggleContainer = document.querySelector('#app-toggle-container')
const appToggleButton = document.querySelector('#app-toggle-button')
const appToggleInput = document.querySelector('#app-toggle-input')
const onSubmit = (e) => {
e.preventDefault
appToggleInput.checked = !appToggleInput.checked
appToggleForm.submit()
appForm.submit()
}
appToggleForm.addEventListener('submit', onSubmit)
appToggleButton.addEventListener('click', onSubmit)
/**
* if javascript is enabled, this script will run and show the toggle button
*/
appToggleInput.parentElement.style.display = 'none'
appToggleContainer.style.display = 'flex';