feat: Add office switcher with feature comparison (#7421)

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>

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();

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;
 });

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;
 });

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;
+    }
+}