Avii/Radicale
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Replace fieldset and h2 in sharing with details/summary

Browse Source
This commit is contained in:
Max Berger
2026-03-18 22:19:00 +01:00
parent f4ee4f7060
commit 218cf00deb
4 changed files with 91 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
integ_tests/test_sharing.py
View File

@@ -139,6 +139,12 @@ def test_share_with_property_overrides(page: Page, radicale_server: str) -> None
page.click('article:not(.hidden) a[data-name="share"]', force=True, strict=True) page.click('article:not(.hidden) a[data-name="share"]', force=True, strict=True)
page.click('button[data-name="sharebytoken"]') page.click('button[data-name="sharebytoken"]')
# Verify property override is closed by default
expect(
page.locator('input[data-name="displayname_override_enabled"]')
).not_to_be_visible()
page.click('details[data-name="properties_override"] summary')
# Verify defaults # Verify defaults
expect(page.locator('input[data-name="displayname_override"]')).to_have_value( expect(page.locator('input[data-name="displayname_override"]')).to_have_value(
"Test Collection" "Test Collection"
@@ -191,7 +197,12 @@ def test_share_journal_no_overrides(page: Page, radicale_server: str) -> None:
page.click('button[data-name="sharebytoken"]') page.click('button[data-name="sharebytoken"]')
# Verify property override visibility # Verify property override visibility
expect(page.locator('fieldset[data-name="properties_override"]')).to_be_visible() expect(page.locator('details[data-name="properties_override"]')).to_be_visible()
expect(
page.locator('input[data-name="displayname_override_enabled"]')
).not_to_be_visible()
page.click('details[data-name="properties_override"] summary')
expect( expect(
page.locator('input[data-name="displayname_override_enabled"]') page.locator('input[data-name="displayname_override_enabled"]')
).to_be_visible() ).to_be_visible()

129
radicale/web/internal_data/index.html
View File

@@ -147,56 +147,58 @@
<p>Manage sharing for collection <span class="title" data-name="title">title</span> <p>Manage sharing for collection <span class="title" data-name="title">title</span>
</p> </p>
<div data-name="sharebytoken"> <div data-name="sharebytoken">
<h2>By Token</h2> <details open>
<table> <summary>By Token</summary>
<tbody> <table>
<tr data-name="sharetokenrowtemplate" class="hidden"> <tbody>
<td> <tr data-name="sharetokenrowtemplate" class="hidden">
<button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg" <td>
class="small_icon" alt="Edit"></button> <button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg"
</td> class="small_icon" alt="Edit"></button>
<td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span></td> </td>
<td><input type="text" data-name="pathortoken" value="" readonly="" <td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span></td>
class="inline selectall"></td> <td><input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall"></td>
<td> <td>
<button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg" <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
class="small_icon" alt="Delete"></button> class="small_icon" alt="Delete"></button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><button type="button" class="blue inline" data-name="sharebytoken"><img src="css/icons/new.svg" <td><button type="button" class="blue inline" data-name="sharebytoken"><img src="css/icons/new.svg"
class="small_icon" alt="New Share by Token"></button> class="small_icon" alt="New Share by Token"></button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</details>
</div> </div>
<div data-name="sharebymap"> <div data-name="sharebymap">
<h2>By Map</h2> <details open>
<table> <summary>By Map</summary>
<tbody> <table>
<tr data-name="sharemaprowtemplate" class="hidden"> <tbody>
<td> <tr data-name="sharemaprowtemplate" class="hidden">
<button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg" <td>
class="small_icon" alt="Edit"></button> <button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg"
</td> class="small_icon" alt="Edit"></button>
<td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span></td> </td>
<td><input type="text" data-name="pathortoken" value="" readonly="" <td><span class="pill" data-name="rw">rw</span><span class="pill" data-name="ro">ro</span></td>
class="inline selectall"></td> <td><input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall"></td>
<td> <td>
<button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg" <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
class="small_icon" alt="Delete"></button> class="small_icon" alt="Delete"></button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<button type="button" class="blue inline" data-name="sharebymap"> <button type="button" class="blue inline" data-name="sharebymap">
<img src="css/icons/new.svg" class="small_icon" alt="New Share by Map"> <img src="css/icons/new.svg" class="small_icon" alt="New Share by Map">
</button> </button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</details>
</div> </div>
<form> <form>
<button type="button" class="green" data-name="cancel">Close</button> <button type="button" class="green" data-name="cancel">Close</button>
@@ -219,8 +221,7 @@
</thead> </thead>
<tbody data-name="incomingsharesbody"> <tbody data-name="incomingsharesbody">
<tr data-name="incomingsharerowtemplate" class="hidden"> <tr data-name="incomingsharerowtemplate" class="hidden">
<td><input type="text" data-name="pathortoken" value="" readonly="" <td><input type="text" data-name="pathortoken" value="" readonly="" class="inline selectall"></td>
class="inline selectall"></td>
<td data-name="owner"></td> <td data-name="owner"></td>
<td data-name="permissions"><span class="pill" data-name="rw">rw</span><span class="pill" <td data-name="permissions"><span class="pill" data-name="rw">rw</span><span class="pill"
data-name="ro">ro</span></td> data-name="ro">ro</span></td>
@@ -239,29 +240,29 @@
<section id="newshare" class="container hidden"> <section id="newshare" class="container hidden">
<h1>New Share</h1> <h1>New Share</h1>
<form> <form>
<fieldset data-name="sharemapfields" class="hidden"> <details open data-name="sharemapfields" class="hidden">
<legend>Map Target</legend> <summary>Map Target</summary>
<label for="newshare_attr_shareuser">Share User</label> <label for="newshare_attr_shareuser">Share User</label>
<input type="text" data-name="shareuser" id="newshare_attr_shareuser" /> <input type="text" data-name="shareuser" id="newshare_attr_shareuser" />
<label for="newshare_attr_sharehref">Share Href</label> <label for="newshare_attr_sharehref">Share Href</label>
<input type="text" data-name="sharehref" id="newshare_attr_sharehref" /> <input type="text" data-name="sharehref" id="newshare_attr_sharehref" />
</fieldset> </details>
<fieldset> <details open>
<legend>Attributes</legend> <summary>Attributes</summary>
<input type="checkbox" data-name="enabled" checked id="newshare_attr_enabled" /><label <input type="checkbox" data-name="enabled" checked id="newshare_attr_enabled" /><label
for="newshare_attr_enabled">Enabled</label> for="newshare_attr_enabled">Enabled</label>
<input type="checkbox" data-name="hidden" id="newshare_attr_hidden" /><label <input type="checkbox" data-name="hidden" id="newshare_attr_hidden" /><label
for="newshare_attr_hidden">Hidden</label> for="newshare_attr_hidden">Hidden</label>
</fieldset> </details>
<fieldset> <details open>
<legend>Permissions</legend> <summary>Permissions</summary>
<input type="radio" data-name="permissions" checked="true" id="newshare_attr_permissions_ro" <input type="radio" data-name="permissions" checked="true" id="newshare_attr_permissions_ro"
name="newshare_permissions"><label for="newshare_attr_permissions_ro">Readonly</label> name="newshare_permissions"><label for="newshare_attr_permissions_ro">Readonly</label>
<input type="radio" data-name="permissions" checked="false" id="newshare_attr_permissions_rw" <input type="radio" data-name="permissions" checked="false" id="newshare_attr_permissions_rw"
name="newshare_permissions" /><label for="newshare_attr_permissions_rw">Read/Write</label> name="newshare_permissions" /><label for="newshare_attr_permissions_rw">Read/Write</label>
</fieldset> </details>
<fieldset data-name="properties_override"> <details data-name="properties_override">
<legend>Properties override</legend> <summary>Properties override</summary>
<div class="property-override"> <div class="property-override">
<input type="checkbox" data-name="displayname_override_enabled" id="newshare_attr_displayname_enabled"> <input type="checkbox" data-name="displayname_override_enabled" id="newshare_attr_displayname_enabled">
<label for="newshare_attr_displayname_enabled">Displayname:</label> <label for="newshare_attr_displayname_enabled">Displayname:</label>
@@ -277,7 +278,7 @@
<label for="newshare_attr_color_enabled">Color:</label> <label for="newshare_attr_color_enabled">Color:</label>
<input type="color" data-name="color_override" disabled> <input type="color" data-name="color_override" disabled>
</div> </div>
</fieldset> </details>
<button type="submit" class="green" data-name="submit">Create</button> <button type="submit" class="green" data-name="submit">Create</button>
<button type="button" class="red" data-name="cancel">Cancel</button> <button type="button" class="red" data-name="cancel">Cancel</button>
</form> </form>
@@ -346,8 +347,8 @@
<section id="deleteconfirmationscene" class="container hidden"> <section id="deleteconfirmationscene" class="container hidden">
<h1 data-name="headertitle">Delete Collection</h1> <h1 data-name="headertitle">Delete Collection</h1>
<p data-name="confirmationprompt">To delete the collection <span class="title" data-name="title">title</span> please enter the phrase <strong <p data-name="confirmationprompt">To delete the collection <span class="title" data-name="title">title</span>
data-name="deleteconfirmationtext"></strong> in the box below:</p> please enter the phrase <strong data-name="deleteconfirmationtext"></strong> in the box below:</p>
<input type="text" class="deleteconfirmationtxt" data-name="confirmationtxt" /> <input type="text" class="deleteconfirmationtxt" data-name="confirmationtxt" />
<p class="red">WARNING: This action cannot be reversed.</p> <p class="red">WARNING: This action cannot be reversed.</p>
<form> <form>

12
radicale/web/internal_data/js/scenes/CreateEditShareScene.js
View File

@@ -51,7 +51,7 @@ export class CreateEditShareScene {
let permissions_ro_radio = /** @type {HTMLInputElement} */ (document.getElementById("newshare_attr_permissions_ro")); let permissions_ro_radio = /** @type {HTMLInputElement} */ (document.getElementById("newshare_attr_permissions_ro"));
let permissions_rw_radio = /** @type {HTMLInputElement} */ (document.getElementById("newshare_attr_permissions_rw")); let permissions_rw_radio = /** @type {HTMLInputElement} */ (document.getElementById("newshare_attr_permissions_rw"));
/** @type {HTMLElement} */ let properties_fieldset = html_scene.querySelector("[data-name=properties_override]"); /** @type {HTMLDetailsElement} */ let properties_fieldset = /** @type {HTMLDetailsElement} */ (html_scene.querySelector("[data-name=properties_override]"));
/** @type {HTMLInputElement} */ let displayname_override_enabled = html_scene.querySelector("[data-name=displayname_override_enabled]"); /** @type {HTMLInputElement} */ let displayname_override_enabled = html_scene.querySelector("[data-name=displayname_override_enabled]");
/** @type {HTMLInputElement} */ let displayname_override_input = html_scene.querySelector("[data-name=displayname_override]"); /** @type {HTMLInputElement} */ let displayname_override_input = html_scene.querySelector("[data-name=displayname_override]");
/** @type {HTMLInputElement} */ let description_override_enabled = html_scene.querySelector("[data-name=description_override_enabled]"); /** @type {HTMLInputElement} */ let description_override_enabled = html_scene.querySelector("[data-name=description_override_enabled]");
@@ -162,6 +162,13 @@ export class CreateEditShareScene {
this.show = function () { this.show = function () {
this.release(); this.release();
html_scene.classList.remove("hidden"); html_scene.classList.remove("hidden");
html_scene.querySelectorAll("details").forEach(function (details) {
if (details.dataset.name !== "properties_override") {
details.open = true;
} else {
details.open = false;
}
});
cancel_btn.onclick = oncancel; cancel_btn.onclick = oncancel;
form.onsubmit = onsubmit; form.onsubmit = onsubmit;
@@ -218,6 +225,9 @@ export class CreateEditShareScene {
let is_calendar = CollectionType.is_subset(CollectionType.CALENDAR, collection.type); let is_calendar = CollectionType.is_subset(CollectionType.CALENDAR, collection.type);
let is_addressbook = collection.type === CollectionType.ADDRESSBOOK; let is_addressbook = collection.type === CollectionType.ADDRESSBOOK;
properties_fieldset.classList.remove("hidden"); properties_fieldset.classList.remove("hidden");
if (displayname_override_enabled_value || description_override_enabled_value || color_override_enabled_value) {
properties_fieldset.open = true;
}
if (is_calendar || is_addressbook) { if (is_calendar || is_addressbook) {
description_override_enabled.parentElement.classList.remove("hidden"); description_override_enabled.parentElement.classList.remove("hidden");
color_override_enabled.parentElement.classList.remove("hidden"); color_override_enabled.parentElement.classList.remove("hidden");

3
radicale/web/internal_data/js/scenes/ShareCollectionScene.js
View File

@@ -86,6 +86,9 @@ export class ShareCollectionScene {
this.show = function () { this.show = function () {
this.release(); this.release();
html_scene.classList.remove("hidden"); html_scene.classList.remove("hidden");
html_scene.querySelectorAll("details").forEach(function (details) {
details.open = true;
});
cancel_btn.onclick = oncancel; cancel_btn.onclick = oncancel;
collectionsCache.getServerFeatures(user, password, errorHandler.setError, (features) => { collectionsCache.getServerFeatures(user, password, errorHandler.setError, (features) => {