feat: Add office switcher with feature comparison (#7421)
Some checks failed
Codespell / Check spelling (push) Waiting to run
Docker Lint / docker-lint (push) Waiting to run
Lint php / php-lint (push) Waiting to run
Lint php / php-lint-summary (push) Blocked by required conditions
PHP Deprecation Detector / PHP Deprecation Detector (push) Waiting to run
Playwright Tests on push / test (push) Waiting to run
Static analysis / static-psalm-analysis (push) Waiting to run
Twig Lint / twig-lint (push) Has been cancelled

Signed-off-by: Julius Knorr <jus@bitgrid.net>
Signed-off-by: Simon L. <szaimen@e.mail.de>
Signed-off-by: Andrew Backhouse <andrew.backhouse@nextcloud.com>
Co-authored-by: Simon L. <szaimen@e.mail.de>
Co-authored-by: Andrew Backhouse <andrew.backhouse@nextcloud.com>
This commit is contained in:
Julius Knorr 2026-01-28 09:53:53 +01:00 committed by GitHub
parent 8939104d10
commit 3f4eecaa96
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 338 additions and 59 deletions

View file

@ -27,7 +27,7 @@
<script type="text/javascript" src="timezone.js"></script>
{# js for optional containers and additional containers forms #}
<script type="text/javascript" src="containers-form-submit.js?v4"></script>
<script type="text/javascript" src="containers-form-submit.js?v5"></script>
{% set hasBackupLocation = borg_backup_host_location or borg_remote_repo %}
{% set isAnyRunning = false %}

View file

@ -9,6 +9,105 @@
<input type="hidden" name="{{csrf.keys.name}}" value="{{csrf.name}}">
<input type="hidden" name="{{csrf.keys.value}}" value="{{csrf.value}}">
<input type="hidden" name="options-form" value="options-form">
<h3>Office Suite</h3>
{% if isAnyRunning == false %}
<p>Choose your preferred office suite. Only one can be enabled at a time.</p>
{% endif %}
<div class="office-suite-cards">
<input
type="radio"
id="office-collabora"
name="office_suite_choice"
value="collabora"
class="office-radio"
{% if is_collabora_enabled == true %}
checked="checked"
{% endif %}
>
<label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-collabora">
<div class="office-card-header">
<h4>Nextcloud Office</h4>
<svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="var(--color-nextcloud-blue)"/>
<path d="M7 12L10.5 15.5L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<ul class="office-features">
<li>Best Nextcloud integration</li>
<li>Open source</li>
<li>Good performance</li>
<li>Best security: documents never leave your server</li>
<li>Best ODF compatibility</li>
<li>Best support for legacy files</li>
</ul>
{% if isAnyRunning == false %}
<a href="https://www.collaboraoffice.com/code/" target="_blank" class="office-learn-more" onclick="event.stopPropagation();">
Learn more
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-left: 4px;">
<path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
{% endif %}
</label>
<input type="hidden" id="collabora" name="collabora" value="" data-initial-state="{% if is_collabora_enabled == true %}true{% else %}false{% endif %}">
<input
type="radio"
id="office-onlyoffice"
name="office_suite_choice"
value="onlyoffice"
class="office-radio"
{% if is_onlyoffice_enabled == true %}
checked="checked"
{% endif %}
>
<label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-onlyoffice">
<div class="office-card-header">
<h4>OnlyOffice</h4>
<svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="var(--color-nextcloud-blue)"/>
<path d="M7 12L10.5 15.5L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<ul class="office-features">
<li>Good Nextcloud integration</li>
<li>Open core</li>
<li>Best performance</li>
<li>Limited ODF compatibility</li>
<li>Best Microsoft compatibility</li>
</ul>
{% if isAnyRunning == false %}
<a href="https://www.onlyoffice.com/" target="_blank" class="office-learn-more" onclick="event.stopPropagation();">
Learn more
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-left: 4px;">
<path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
{% endif %}
</label>
<input type="hidden" id="onlyoffice" name="onlyoffice" value="" data-initial-state="{% if is_onlyoffice_enabled == true %}true{% else %}false{% endif %}">
</div>
{% if isAnyRunning == false %}
<div class="office-none-card">
<input
type="radio"
id="office-none"
name="office_suite_choice"
value=""
class="office-radio"
{% if is_collabora_enabled == false and is_onlyoffice_enabled == false %}
checked="checked"
{% endif %}
>
<label class="office-none-label" for="office-none">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle; margin-right: 6px;">
<path d="M2 2L14 14M2 14L14 2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Disable office suite
</label>
</div>
{% endif %}
<input class="options-form-submit" type="submit" value="Save changes" />
<h3>Additional Optional Containers</h3>
<p>
<input
type="checkbox"
@ -23,20 +122,6 @@
>
<label for="clamav">ClamAV (Antivirus backend for Nextcloud, needs ~1GB additional RAM)</label>
</p>
<p>
<input
type="checkbox"
id="collabora"
name="collabora"
{% if is_collabora_enabled == true %}
checked="checked"
data-initial-state="true"
{% else %}
data-initial-state="false"
{% endif %}
>
<label for="collabora">Collabora (Nextcloud Office)</label>
</p>
<p>
<input
type="checkbox"
@ -98,20 +183,7 @@
>
<label for="talk-recording">Nextcloud Talk Recording-server (needs Nextcloud Talk being enabled and ~1GB additional RAM and ~2 additional vCPUs)</label>
</p>
<p>
<input
type="checkbox"
id="onlyoffice"
name="onlyoffice"
{% if is_onlyoffice_enabled == true %}
checked="checked"
data-initial-state="true"
{% else %}
data-initial-state="false"
{% endif %}
>
<label for="onlyoffice">OnlyOffice</label>
</p>
<p>
<input
type="checkbox"
@ -140,15 +212,15 @@
>
<label for="whiteboard">Whiteboard</label>
</p>
<input id="options-form-submit" type="submit" value="Save changes" />
<input class="options-form-submit" type="submit" value="Save changes" />
</form>
<p><strong>Minimal system requirements:</strong> When any optional container is enabled, at least 2GB RAM, a dual-core CPU and 40GB system storage are required. When enabling ClamAV, Nextcloud Talk Recording-server or Fulltextsearch, at least 3GB RAM are required. For Talk Recording-server additional 2 vCPUs are required. When enabling everything, at least 5GB RAM and a quad-core CPU are required. Recommended are at least 1GB more RAM than the minimal requirement. For further advice and recommendations see <strong><a target="_blank" href="https://github.com/nextcloud/all-in-one/discussions/1335">this documentation</a></strong></p>
{% if isAnyRunning == true %}
<script type="text/javascript" src="disable-clamav.js"></script>
<script type="text/javascript" src="disable-docker-socket-proxy.js"></script>
<script type="text/javascript" src="disable-talk.js"></script>
<script type="text/javascript" src="disable-collabora.js"></script>
<script type="text/javascript" src="disable-onlyoffice.js"></script>
<script type="text/javascript" src="disable-collabora.js?v2"></script>
<script type="text/javascript" src="disable-onlyoffice.js?v2"></script>
<script type="text/javascript" src="disable-imaginary.js"></script>
<script type="text/javascript" src="disable-fulltextsearch.js"></script>
<script type="text/javascript" src="disable-talk-recording.js"></script>

View file

@ -1,7 +1,7 @@
<html>
<head>
<title>AIO</title>
<link rel="stylesheet" href="style.css?v6" media="all" />
<link rel="stylesheet" href="style.css?v7" media="all" />
<link rel="icon" href="img/favicon.png">
<script type="text/javascript" src="forms.js"></script>
<script type="text/javascript" src="toggle-dark-mode.js"></script>