From 6a599ed31857a8575981c6fdd737c45ca98150cc Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 29 Nov 2023 23:39:55 +0100
Subject: [PATCH] Replace checkboxes with sliders to conform the style on all
 platforms

---
 public/index.html                 | 49 +++++++++++------------
 public/scripts/ui.js              | 36 ++++++++++-------
 public/styles/deferred-styles.css | 64 ++++++++++++++++++++++++-------
 public/styles/styles-main.css     | 29 ++++++++++++++
 4 files changed, 128 insertions(+), 50 deletions(-)

diff --git a/public/index.html b/public/index.html
index d9cab65..7db7f4c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -177,7 +177,7 @@
     <x-dialog id="language-select-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p1">
+                <div class="row center p2">
                     <h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
                 </div>
                 <div class="language-buttons">
@@ -262,10 +262,10 @@
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <div class="row center p1">
+                    <div class="row center p2">
                         <h2 class="dialog-title" data-i18n-key="dialogs.pair-devices-title" data-i18n-attrs="text"></h2>
                     </div>
-                    <div class="row center p1">
+                    <div class="row center p2">
                         <div class="column">
                             <div class="center key-qr-code pointer" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div>
                             <h1 class="center key" dir="ltr">000 000</h1>
@@ -281,7 +281,7 @@
                             <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
                         </div>
                     </div>
-                    <div class="row center p1">
+                    <div class="row center p2">
                         <div class="column fw">
                             <div class="input-key-container six-chars" dir="ltr">
                                 <input type="tel" class="textarea center" aria-label="pair-key-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder disabled>
@@ -307,7 +307,7 @@
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <div class="row center p1">
+                    <div class="row center p2">
                         <h2 class="dialog-title" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text"></h2>
                     </div>
                     <div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty"></div>
@@ -330,10 +330,10 @@
         <form action="#">
             <x-background class="full center text-center">
                 <x-paper shadow="2">
-                    <div class="row center p1">
+                    <div class="row center p2">
                         <h2 class="dialog-title" data-i18n-key="dialogs.temporary-public-room-title" data-i18n-attrs="text"></h2>
                     </div>
-                    <div class="row center p1">
+                    <div class="row center p2">
                         <div class="column">
                             <div class="center key-qr-code pointer" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div>
                             <h1 class="center key" dir="ltr"></h1>
@@ -349,7 +349,7 @@
                             <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
                         </div>
                     </div>
-                    <div class="row center p1">
+                    <div class="row center p2">
                         <div class="column fw">
                             <div class="input-key-container" dir="ltr">
                                 <input type="text" class="textarea center" aria-label="room-id-char-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder disabled>
@@ -374,10 +374,10 @@
     <x-dialog id="receive-request-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p1">
+                <div class="row center p2">
                     <h2 class="dialog-title"></h2>
                 </div>
-                <div class="row center p1">
+                <div class="row center p2">
                     <div class="column center file-description">
                         <div>
                             <span class="display-name badge"></span>
@@ -404,10 +404,10 @@
     <x-dialog id="receive-file-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p1">
+                <div class="row center p2">
                     <h2 class="dialog-title"></h2>
                 </div>
-                <div class="row center p1">
+                <div class="row center p2">
                     <div class="column center file-description">
                         <div>
                             <span class="display-name badge"></span>
@@ -436,10 +436,10 @@
         <form action="#">
             <x-background class="full center">
                 <x-paper shadow="2">
-                    <div class="row center p1">
+                    <div class="row center p2">
                         <h2 class="dialog-title" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2>
                     </div>
-                    <div class="row center p1 display-name-wrapper">
+                    <div class="row center p2 display-name-wrapper">
                         <div class="column">
                             <div class="text-center">
                                 <span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text"></span>
@@ -447,7 +447,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row p1">
+                    <div class="row p2">
                         <div class="column fw">
                             <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
                         </div>
@@ -464,16 +464,16 @@
     <x-dialog id="receive-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p1">
+                <div class="row center p2">
                     <h2 class="dialog-title" class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text"></h2>
                 </div>
-                <div class="row center p1 display-name-wrapper">
+                <div class="row center p2 display-name-wrapper">
                     <div class="text-center">
                         <span class="display-name badge"></span>
                         <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span>
                     </div>
                 </div>
-                <div class="row center p1">
+                <div class="row center p2">
                     <div class="column fw">
                         <div id="text" class="textarea"></div>
                     </div>
@@ -489,25 +489,26 @@
     <x-dialog id="share-text-dialog">
         <x-background class="full center">
             <x-paper shadow="2">
-                <div class="row center p1">
+                <div class="row center p2">
                     <h2 class="dialog-title" data-i18n-key="dialogs.share-text-title" data-i18n-attrs="text"></h2>
                 </div>
-                <div class="row center p1">
+                <div class="row center p2 pb0">
                     <div class="column">
                         <div class="text-center">
                             <span data-i18n-key="dialogs.share-text-subtitle" data-i18n-attrs="text"></span>
                         </div>
                     </div>
                 </div>
-                <div class="row p1">
+                <div class="row p2">
                     <div class="column fw">
                         <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" contenteditable></div>
                     </div>
                 </div>
-                <div class="row center p1">
-                    <label class="auto-accept pointer">
-                        <span data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span>
+                <div class="row p2 center">
+                    <span class="mx1" data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span>
+                    <label class="pointer switch mx1">
                         <input type="checkbox">
+                        <div class="slider round"></div>
                     </label>
                 </div>
                 <div class="btn-row row-reverse">
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 353ea8e..a65b269 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -1553,21 +1553,31 @@ class EditPairedDevicesDialog extends Dialog {
         roomSecretsEntries
             .forEach(roomSecretsEntry => {
                 let $pairedDevice = document.createElement('div');
-                $pairedDevice.classList = ["paired-device"];
+                $pairedDevice.classList.add("paired-device");
 
                 $pairedDevice.innerHTML = `
-                <div class="display-name">
-                    <span>${roomSecretsEntry.display_name}</span>
-                </div>
-                <div class="device-name">
-                    <span>${roomSecretsEntry.device_name}</span>
-                </div>
-                <div class="button-wrapper">
-                    <label class="auto-accept pointer">${autoAcceptString}
-                        <input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}>
-                    </label>
-                    <button class="btn" type="button">${unpairString}</button>
-                </div>`
+                    <div class="display-name">
+                        <span class="fw">
+                            ${roomSecretsEntry.display_name}
+                        </span>
+                    </div>
+                    <div class="device-name">
+                        <span class="fw">
+                            ${roomSecretsEntry.device_name}
+                        </span>
+                    </div>
+                    <div class="button-wrapper">
+                        <div class="row center">
+                            <span class="p1">
+                                ${autoAcceptString}
+                            </span>
+                            <label class="auto-accept pointer switch">
+                                <input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}>
+                                <div class="slider round"></div>
+                            </label>
+                        </div>
+                        <button class="btn" type="button">${unpairString}</button>
+                    </div>`
 
                 $pairedDevice
                     .querySelector('input[type="checkbox"]')
diff --git a/public/styles/deferred-styles.css b/public/styles/deferred-styles.css
index d8e8f0e..d9d90ad 100644
--- a/public/styles/deferred-styles.css
+++ b/public/styles/deferred-styles.css
@@ -268,6 +268,56 @@ x-peer[drop] x-icon {
     transform: scale(1.1);
 }
 
+/* Checkboxes as slider */
+
+.switch {
+    display: inline-block;
+    height: 20px;
+    position: relative;
+    width: 30px;
+}
+
+.switch input {
+    display:none;
+}
+
+.slider {
+    background-color: rgba(128, 128, 128, 0.5);
+    cursor: pointer;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    position: absolute;
+    transition: .4s;
+}
+
+.slider:before {
+    background-color: #fff;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: var(--primary-color);
+}
+
+input:checked + .slider:before {
+    transform: translateX(10px);
+}
+
+.slider.round {
+    border-radius: 20px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
 
 /* Dialog */
 
@@ -466,26 +516,14 @@ x-dialog hr {
     border-bottom: solid 2px rgba(128, 128, 128, 0.5);
     opacity: 1;
 }
-.paired-device span {
-    width: 100%;
-}
 
 .paired-device > .button-wrapper {
     display: flex;
     height: 36px;
-    justify-content: space-between;
-    flex-direction: row;
-    align-items: center;
     width: 100%;
 }
 
-.paired-device > .button-wrapper > label,
-.paired-device > .button-wrapper > button {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    white-space: nowrap;
-    justify-content: center;
+.paired-device > .button-wrapper > * {
     width: 50%;
     padding-left: 6px;
     padding-right: 6px;
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index 4fd96f5..8f109c7 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -31,9 +31,26 @@ html {
 }
 
 .p1 {
+    padding: 5px;
+}
+
+.p2 {
     padding: 10px;
 }
 
+.pb0 {
+    padding-bottom: 0;
+}
+
+.mx1 {
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.m1 {
+    margin: 10px;
+}
+
 .cursive {
     font-style: italic;
 }
@@ -43,6 +60,18 @@ html {
     flex-direction: row-reverse;
 }
 
+.flex {
+    display: flex;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.space-evenly {
+    justify-content: space-evenly;
+}
+
 .space-between {
     justify-content: space-between;
 }