diff --git a/php/public/containers-form-submit.js b/php/public/containers-form-submit.js index b7ffd2d8..1382bced 100644 --- a/php/public/containers-form-submit.js +++ b/php/public/containers-form-submit.js @@ -1,7 +1,9 @@ document.addEventListener("DOMContentLoaded", function () { // Hide submit button initially - const optionsFormSubmit = document.getElementById("options-form-submit"); - optionsFormSubmit.style.display = 'none'; + const optionsFormSubmit = document.querySelectorAll(".options-form-submit"); + optionsFormSubmit.forEach(element => { + element.style.display = 'none'; + }); const communityFormSubmit = document.getElementById("community-form-submit"); communityFormSubmit.style.display = 'none'; @@ -12,6 +14,14 @@ document.addEventListener("DOMContentLoaded", function () { const optionsContainersCheckboxes = document.querySelectorAll("#options-form input[type='checkbox']"); const communityContainersCheckboxes = document.querySelectorAll("#community-form input[type='checkbox']"); + // Office suite radio buttons + const collaboraRadio = document.getElementById('office-collabora'); + const onlyofficeRadio = document.getElementById('office-onlyoffice'); + const noneRadio = document.getElementById('office-none'); + const collaboraHidden = document.getElementById('collabora'); + const onlyofficeHidden = document.getElementById('onlyoffice'); + let initialOfficeSelection = null; + optionsContainersCheckboxes.forEach(checkbox => { initialStateOptionsContainers[checkbox.id] = checkbox.checked; // Use checked property to capture actual initial state }); @@ -20,6 +30,17 @@ document.addEventListener("DOMContentLoaded", function () { initialStateCommunityContainers[checkbox.id] = checkbox.checked; // Use checked property to capture actual initial state }); + // Store initial office suite selection + if (collaboraRadio && onlyofficeRadio && noneRadio) { + if (collaboraRadio.checked) { + initialOfficeSelection = 'collabora'; + } else if (onlyofficeRadio.checked) { + initialOfficeSelection = 'onlyoffice'; + } else { + initialOfficeSelection = 'none'; + } + } + // Function to compare current states to initial states function checkForOptionContainerChanges() { let hasChanges = false; @@ -30,8 +51,32 @@ document.addEventListener("DOMContentLoaded", function () { } }); + // Check office suite changes and sync to hidden inputs + if (collaboraRadio && onlyofficeRadio && noneRadio && collaboraHidden && onlyofficeHidden) { + let currentOfficeSelection = null; + if (collaboraRadio.checked) { + currentOfficeSelection = 'collabora'; + collaboraHidden.value = 'on'; + onlyofficeHidden.value = ''; + } else if (onlyofficeRadio.checked) { + currentOfficeSelection = 'onlyoffice'; + collaboraHidden.value = ''; + onlyofficeHidden.value = 'on'; + } else { + currentOfficeSelection = 'none'; + collaboraHidden.value = ''; + onlyofficeHidden.value = ''; + } + + if (currentOfficeSelection !== initialOfficeSelection) { + hasChanges = true; + } + } + // Show or hide submit button based on changes - optionsFormSubmit.style.display = hasChanges ? 'block' : 'none'; + optionsFormSubmit.forEach(element => { + element.style.display = hasChanges ? 'block' : 'none'; + }); } // Function to compare current states to initial states @@ -82,6 +127,13 @@ document.addEventListener("DOMContentLoaded", function () { // Initialize talk-recording visibility on page load handleTalkVisibility(); // Ensure talk-recording is correctly initialized + // Add event listeners for office suite radio buttons + if (collaboraRadio && onlyofficeRadio && noneRadio) { + collaboraRadio.addEventListener('change', checkForOptionContainerChanges); + onlyofficeRadio.addEventListener('change', checkForOptionContainerChanges); + noneRadio.addEventListener('change', checkForOptionContainerChanges); + } + // Initial call to check for changes checkForOptionContainerChanges(); checkForCommunityContainerChanges(); diff --git a/php/public/disable-collabora.js b/php/public/disable-collabora.js index 3064ef51..762252ce 100644 --- a/php/public/disable-collabora.js +++ b/php/public/disable-collabora.js @@ -1,5 +1,5 @@ document.addEventListener("DOMContentLoaded", function(event) { // Collabora - let collabora = document.getElementById("collabora"); + const collabora = document.getElementById("office-collabora"); collabora.disabled = true; }); \ No newline at end of file diff --git a/php/public/disable-onlyoffice.js b/php/public/disable-onlyoffice.js index 83482339..c660bd9d 100644 --- a/php/public/disable-onlyoffice.js +++ b/php/public/disable-onlyoffice.js @@ -1,7 +1,5 @@ document.addEventListener("DOMContentLoaded", function(event) { // OnlyOffice - let onlyoffice = document.getElementById("onlyoffice"); - if (onlyoffice) { - onlyoffice.disabled = true; - } + const onlyoffice = document.getElementById("office-onlyoffice"); + onlyoffice.disabled = true; }); \ No newline at end of file diff --git a/php/public/style.css b/php/public/style.css index b4d5f8a5..b35883d0 100644 --- a/php/public/style.css +++ b/php/public/style.css @@ -28,7 +28,7 @@ --border-radius-large: 12px; --default-font-size: 13px; --checkbox-size: 16px; - --max-width: 500px; + --max-width: 580px; --container-top-margin: 20px; --container-bottom-margin: 20px; --container-padding: 2px; @@ -37,9 +37,9 @@ --main-padding: 50px; } -/* Breakpoint calculation: 500px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 800px +/* Breakpoint calculation: 580px (max-width) + 100px (main-padding * 2) + 200px (additional space) = 880px Note: Unfortunately, it's not possible to calculate this dynamically using CSS variables in media queries */ -@media only screen and (max-width: 800px) { +@media only screen and (max-width: 880px) { :root { --container-top-margin: 50px; --container-bottom-margin: 0px; @@ -549,3 +549,160 @@ input[type="checkbox"]:disabled:not(:checked) + label { #theme-toggle:not(:hover) #theme-icon { opacity: 0.6; /* Slightly transparent */ } +/* Office Suite Feature Cards */ +.office-suite-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 16px; + margin: 20px 0; + align-items: stretch; +} + +.office-radio { + display: none; +} + +.office-card { + position: relative; + border: 2px solid var(--color-border-maxcontrast); + border-radius: var(--border-radius-large); + padding: 20px; + cursor: pointer; + transition: all 0.3s ease; + background-color: var(--color-main-background); + display: flex; + flex-direction: column; +} + +.office-card-disabled { + opacity: 50%; + pointer-events: none; +} + +.office-card:hover { + border-color: var(--color-primary-element); + box-shadow: 0 4px 12px rgba(0, 130, 201, 0.15); + transform: translateY(-2px); +} + +#office-collabora:checked + .office-card, +#office-onlyoffice:checked + .office-card { + border-color: var(--color-nextcloud-blue); + background: linear-gradient(135deg, rgba(0, 130, 201, 0.08) 0%, rgba(0, 130, 201, 0.02) 100%); +} + +[data-theme="dark"] #office-collabora:checked + .office-card, +[data-theme="dark"] #office-onlyoffice:checked + .office-card { + background: linear-gradient(135deg, rgba(0, 145, 242, 0.15) 0%, rgba(0, 145, 242, 0.03) 100%); +} + +.office-card-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +.office-card h4 { + margin: 0; + height: 24px; + font-size: 18px; + font-weight: 600; + color: var(--color-main-text); +} + +.office-checkmark { + flex-shrink: 0; + display: none; +} + +#office-collabora:checked + .office-card .office-checkmark, +#office-onlyoffice:checked + .office-card .office-checkmark { + display: block; +} + +.office-features { + list-style: none; + padding: 0; + margin: 0; +} + +.office-features li { + position: relative; + padding-left: 20px; + margin-bottom: 4px; + font-size: var(--default-font-size); + line-height: 1.5; + color: var(--color-main-text); +} + +.office-features li::before { + content: '•'; + position: absolute; + left: 6px; + color: var(--color-nextcloud-blue); + font-weight: bold; +} + +.office-checkbox { + position: absolute; + opacity: 0; + pointer-events: none; +} + +.office-learn-more { + display: inline-flex; + align-items: center; + margin-top: 12px; + color: var(--color-primary-element); + text-decoration: none; + font-size: var(--default-font-size); + font-weight: 500; + transition: color 0.2s ease; +} + +.office-learn-more:hover { + color: var(--color-primary-element-hover); +} + +.office-learn-more svg { + transition: transform 0.2s ease; +} + +.office-learn-more:hover svg { + transform: translateX(3px); +} + +.office-none-card { + text-align: center; + margin: 12px 0 20px 0; +} + +.office-none-label { + display: inline-flex; + align-items: center; + font-size: 13px; + color: var(--color-primary-element); + cursor: pointer; + opacity: 0.7; + transition: opacity 0.2s ease; + padding: 8px 12px; + border-radius: var(--border-radius); +} + +.office-none-label:hover { + opacity: 1; + background-color: var(--color-primary-element-light); +} + +#office-none:checked + .office-none-label { + opacity: 1; + font-weight: 600; +} + +/* Responsive adjustments for mobile */ +@media only screen and (max-width: 800px) { + .office-suite-cards { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/php/src/Controller/ConfigurationController.php b/php/src/Controller/ConfigurationController.php index 45586f9c..b449db6a 100644 --- a/php/src/Controller/ConfigurationController.php +++ b/php/src/Controller/ConfigurationController.php @@ -76,24 +76,24 @@ readonly class ConfigurationController { } if (isset($request->getParsedBody()['options-form'])) { - if (isset($request->getParsedBody()['collabora']) && isset($request->getParsedBody()['onlyoffice'])) { - throw new InvalidSettingConfigurationException("Collabora and Onlyoffice are not allowed to be enabled at the same time!"); + $officeSuiteChoice = $request->getParsedBody()['office_suite_choice'] ?? ''; + + if ($officeSuiteChoice === 'collabora') { + $this->configurationManager->SetCollaboraEnabledState(1); + $this->configurationManager->SetOnlyofficeEnabledState(0); + } elseif ($officeSuiteChoice === 'onlyoffice') { + $this->configurationManager->SetCollaboraEnabledState(0); + $this->configurationManager->SetOnlyofficeEnabledState(1); + } else { + $this->configurationManager->SetCollaboraEnabledState(0); + $this->configurationManager->SetOnlyofficeEnabledState(0); } + if (isset($request->getParsedBody()['clamav'])) { $this->configurationManager->SetClamavEnabledState(1); } else { $this->configurationManager->SetClamavEnabledState(0); } - if (isset($request->getParsedBody()['onlyoffice'])) { - $this->configurationManager->SetOnlyofficeEnabledState(1); - } else { - $this->configurationManager->SetOnlyofficeEnabledState(0); - } - if (isset($request->getParsedBody()['collabora'])) { - $this->configurationManager->SetCollaboraEnabledState(1); - } else { - $this->configurationManager->SetCollaboraEnabledState(0); - } if (isset($request->getParsedBody()['talk'])) { $this->configurationManager->SetTalkEnabledState(1); } else { diff --git a/php/templates/containers.twig b/php/templates/containers.twig index 2f722768..8e437bc2 100644 --- a/php/templates/containers.twig +++ b/php/templates/containers.twig @@ -27,7 +27,7 @@ {# js for optional containers and additional containers forms #} - + {% set hasBackupLocation = borg_backup_host_location or borg_remote_repo %} {% set isAnyRunning = false %} diff --git a/php/templates/includes/optional-containers.twig b/php/templates/includes/optional-containers.twig index b4764592..dcf59bfb 100644 --- a/php/templates/includes/optional-containers.twig +++ b/php/templates/includes/optional-containers.twig @@ -9,6 +9,105 @@ +

Office Suite

+ {% if isAnyRunning == false %} +

Choose your preferred office suite. Only one can be enabled at a time.

+ {% endif %} +
+ + + + + + +
+ {% if isAnyRunning == false %} +
+ + +
+ {% endif %} + +

Additional Optional Containers

-

- - -

-

- - -

+

- +

Minimal system requirements: 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 this documentation

{% if isAnyRunning == true %} - - + + diff --git a/php/templates/layout.twig b/php/templates/layout.twig index 4d842e3d..79c615d9 100644 --- a/php/templates/layout.twig +++ b/php/templates/layout.twig @@ -1,7 +1,7 @@ AIO - + diff --git a/php/tests/tests/initial-setup.spec.js b/php/tests/tests/initial-setup.spec.js index c88cd8e3..1f21f011 100644 --- a/php/tests/tests/initial-setup.spec.js +++ b/php/tests/tests/initial-setup.spec.js @@ -32,12 +32,12 @@ test('Initial setup', async ({ page: setupPage }) => { await containersPage.locator('#talk').uncheck(); await containersPage.getByRole('checkbox', { name: 'Whiteboard' }).uncheck(); await containersPage.getByRole('checkbox', { name: 'Imaginary' }).uncheck(); - await containersPage.getByRole('checkbox', { name: 'Collabora' }).uncheck(); - await containersPage.getByRole('button', { name: 'Save changes' }).click(); + await containersPage.getByText('Disable office suite').click(); + await containersPage.getByRole('button', { name: 'Save changes' }).last().click(); await expect(containersPage.locator('#talk')).not.toBeChecked() await expect(containersPage.getByRole('checkbox', { name: 'Whiteboard' })).not.toBeChecked() await expect(containersPage.getByRole('checkbox', { name: 'Imaginary' })).not.toBeChecked() - await expect(containersPage.getByRole('checkbox', { name: 'Collabora' })).not.toBeChecked() + await expect(containersPage.locator('#office-none')).toBeChecked() // Reject invalid time zones await containersPage.locator('#timezone').click();