mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 15:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace checkboxes with sliders to conform the style on all platforms

Browse source
This commit is contained in:
schlagmichdoch 2023-11-29 23:39:55 +01:00
parent f9a32c3e82
commit 6a599ed318
4 changed files with 128 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

49
public/index.html
View file

@ -177,7 +177,7 @@
<x-dialog id="language-select-dialog"> <x-dialog id="language-select-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <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> <h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="language-buttons"> <div class="language-buttons">
@ -262,10 +262,10 @@
<form action="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <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> <h2 class="dialog-title" data-i18n-key="dialogs.pair-devices-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p1"> <div class="row center p2">
<div class="column"> <div class="column">
<div class="center key-qr-code pointer" data-i18n-key="dialogs.pair-devices-qr-code" data-i18n-attrs="title"></div> <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> <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> <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
</div> </div>
</div> </div>
<div class="row center p1"> <div class="row center p2">
<div class="column fw"> <div class="column fw">
<div class="input-key-container six-chars" dir="ltr"> <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> <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="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <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> <h2 class="dialog-title" data-i18n-key="dialogs.edit-paired-devices-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="paired-devices-wrapper" data-i18n-key="dialogs.paired-devices-wrapper" data-i18n-attrs="data-empty"></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="#"> <form action="#">
<x-background class="full center text-center"> <x-background class="full center text-center">
<x-paper shadow="2"> <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> <h2 class="dialog-title" data-i18n-key="dialogs.temporary-public-room-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p1"> <div class="row center p2">
<div class="column"> <div class="column">
<div class="center key-qr-code pointer" data-i18n-key="dialogs.public-room-qr-code" data-i18n-attrs="title"></div> <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> <h1 class="center key" dir="ltr"></h1>
@ -349,7 +349,7 @@
<span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.hr-or" data-i18n-attrs="text"></span>
</div> </div>
</div> </div>
<div class="row center p1"> <div class="row center p2">
<div class="column fw"> <div class="column fw">
<div class="input-key-container" dir="ltr"> <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> <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-dialog id="receive-request-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center p1"> <div class="row center p2">
<h2 class="dialog-title"></h2> <h2 class="dialog-title"></h2>
</div> </div>
<div class="row center p1"> <div class="row center p2">
<div class="column center file-description"> <div class="column center file-description">
<div> <div>
<span class="display-name badge"></span> <span class="display-name badge"></span>
@ -404,10 +404,10 @@
<x-dialog id="receive-file-dialog"> <x-dialog id="receive-file-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <x-paper shadow="2">
<div class="row center p1"> <div class="row center p2">
<h2 class="dialog-title"></h2> <h2 class="dialog-title"></h2>
</div> </div>
<div class="row center p1"> <div class="row center p2">
<div class="column center file-description"> <div class="column center file-description">
<div> <div>
<span class="display-name badge"></span> <span class="display-name badge"></span>
@ -436,10 +436,10 @@
<form action="#"> <form action="#">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <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> <h2 class="dialog-title" data-i18n-key="dialogs.send-message-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p1 display-name-wrapper"> <div class="row center p2 display-name-wrapper">
<div class="column"> <div class="column">
<div class="text-center"> <div class="text-center">
<span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.send-message-to" data-i18n-attrs="text"></span>
@ -447,7 +447,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row p1"> <div class="row p2">
<div class="column fw"> <div class="column fw">
<div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div> <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
</div> </div>
@ -464,16 +464,16 @@
<x-dialog id="receive-text-dialog"> <x-dialog id="receive-text-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <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> <h2 class="dialog-title" class="text-center" data-i18n-key="dialogs.receive-text-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p1 display-name-wrapper"> <div class="row center p2 display-name-wrapper">
<div class="text-center"> <div class="text-center">
<span class="display-name badge"></span> <span class="display-name badge"></span>
<span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.has-sent" data-i18n-attrs="text"></span>
</div> </div>
</div> </div>
<div class="row center p1"> <div class="row center p2">
<div class="column fw"> <div class="column fw">
<div id="text" class="textarea"></div> <div id="text" class="textarea"></div>
</div> </div>
@ -489,25 +489,26 @@
<x-dialog id="share-text-dialog"> <x-dialog id="share-text-dialog">
<x-background class="full center"> <x-background class="full center">
<x-paper shadow="2"> <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> <h2 class="dialog-title" data-i18n-key="dialogs.share-text-title" data-i18n-attrs="text"></h2>
</div> </div>
<div class="row center p1"> <div class="row center p2 pb0">
<div class="column"> <div class="column">
<div class="text-center"> <div class="text-center">
<span data-i18n-key="dialogs.share-text-subtitle" data-i18n-attrs="text"></span> <span data-i18n-key="dialogs.share-text-subtitle" data-i18n-attrs="text"></span>
</div> </div>
</div> </div>
</div> </div>
<div class="row p1"> <div class="row p2">
<div class="column fw"> <div class="column fw">
<div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" contenteditable></div> <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" contenteditable></div>
</div> </div>
</div> </div>
<div class="row center p1"> <div class="row p2 center">
<label class="auto-accept pointer"> <span class="mx1" data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span>
<span data-i18n-key="dialogs.share-text-checkbox" data-i18n-attrs="text"></span> <label class="pointer switch mx1">
<input type="checkbox"> <input type="checkbox">
<div class="slider round"></div>
</label> </label>
</div> </div>
<div class="btn-row row-reverse"> <div class="btn-row row-reverse">

36
public/scripts/ui.js
View file

@ -1553,21 +1553,31 @@ class EditPairedDevicesDialog extends Dialog {
roomSecretsEntries roomSecretsEntries
.forEach(roomSecretsEntry => { .forEach(roomSecretsEntry => {
let $pairedDevice = document.createElement('div'); let $pairedDevice = document.createElement('div');
$pairedDevice.classList = ["paired-device"]; $pairedDevice.classList.add("paired-device");
$pairedDevice.innerHTML = ` $pairedDevice.innerHTML = `
<div class="display-name"> <div class="display-name">
<span>${roomSecretsEntry.display_name}</span> <span class="fw">
</div> ${roomSecretsEntry.display_name}
<div class="device-name"> </span>
<span>${roomSecretsEntry.device_name}</span> </div>
</div> <div class="device-name">
<div class="button-wrapper"> <span class="fw">
<label class="auto-accept pointer">${autoAcceptString} ${roomSecretsEntry.device_name}
<input type="checkbox" ${roomSecretsEntry.auto_accept ? "checked" : ""}> </span>
</label> </div>
<button class="btn" type="button">${unpairString}</button> <div class="button-wrapper">
</div>` <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 $pairedDevice
.querySelector('input[type="checkbox"]') .querySelector('input[type="checkbox"]')

64
public/styles/deferred-styles.css
View file

@ -268,6 +268,56 @@ x-peer[drop] x-icon {
transform: scale(1.1); 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 */ /* Dialog */
@ -466,26 +516,14 @@ x-dialog hr {
border-bottom: solid 2px rgba(128, 128, 128, 0.5); border-bottom: solid 2px rgba(128, 128, 128, 0.5);
opacity: 1; opacity: 1;
} }
.paired-device span {
width: 100%;
}
.paired-device > .button-wrapper { .paired-device > .button-wrapper {
display: flex; display: flex;
height: 36px; height: 36px;
justify-content: space-between;
flex-direction: row;
align-items: center;
width: 100%; width: 100%;
} }
.paired-device > .button-wrapper > label, .paired-device > .button-wrapper > * {
.paired-device > .button-wrapper > button {
display: flex;
align-items: center;
text-align: center;
white-space: nowrap;
justify-content: center;
width: 50%; width: 50%;
padding-left: 6px; padding-left: 6px;
padding-right: 6px; padding-right: 6px;

29
public/styles/styles-main.css
View file

@ -31,9 +31,26 @@ html {
} }
.p1 { .p1 {
padding: 5px;
}
.p2 {
padding: 10px; padding: 10px;
} }
.pb0 {
padding-bottom: 0;
}
.mx1 {
margin-left: 5px;
margin-right: 5px;
}
.m1 {
margin: 10px;
}
.cursive { .cursive {
font-style: italic; font-style: italic;
} }
@ -43,6 +60,18 @@ html {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.space-evenly {
justify-content: space-evenly;
}
.space-between { .space-between {
justify-content: space-between; justify-content: space-between;
} }