bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: use hidden state for workspace setup panels

Browse Source
This commit is contained in:
a.tolmachev
2026-05-02 14:49:35 +00:00
parent 4256d16426
commit 8a4deb6249
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/workspace-setup.html
+7 -7
View File
@@ -126,7 +126,7 @@
</div>
<!-- ── Members (edit mode only) ── -->
<div id="section-members" class="ws-form-section" style="display:none; padding:0; overflow:hidden;">
<div id="section-members" class="ws-form-section" hidden style="padding:0; overflow:hidden;">
<div style="display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;">
<div>
<div class="ws-form-section-title" style="margin-bottom:2px;" data-i18n="workspace_setup.members.title">Team members</div>
@@ -139,7 +139,7 @@
</div>
<!-- Invite form -->
<div id="invite-form" style="display:none; padding: 0 24px 16px; border-bottom: 1px solid var(--border-subtle);">
<div id="invite-form" hidden style="padding: 0 24px 16px; border-bottom: 1px solid var(--border-subtle);">
<div style="display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;">
<div class="form-group" style="flex:1; min-width:200px; margin-bottom:0;">
<label class="form-label" data-i18n="workspace_setup.members.email">Email address</label>
@@ -156,7 +156,7 @@
<button class="btn-primary" type="button" style="padding:7px 14px;font-size:13px;" onclick="sendInvite()" data-i18n="workspace_setup.members.send_invite">Send invite</button>
<button class="btn-ghost-sm" type="button" style="padding:7px 12px;" onclick="toggleInviteForm()" data-i18n="workspace_setup.members.cancel">Cancel</button>
</div>
<div id="invite-success" style="display:none; margin-top:10px; font-size:13px; color: #3fb950;" data-i18n="workspace_setup.members.invite_sent">✓ Invite sent.</div>
<div id="invite-success" hidden style="margin-top:10px; font-size:13px; color: #3fb950;" data-i18n="workspace_setup.members.invite_sent">✓ Invite sent.</div>
</div>
<!-- Members list -->
@@ -221,7 +221,7 @@
</div>
<!-- Pending invites -->
<div id="pending-invites" style="border-top: 1px solid var(--border-subtle); padding: 12px 24px 16px;">
<div id="pending-invites" hidden style="border-top: 1px solid var(--border-subtle); padding: 12px 24px 16px;">
<div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:10px;">
<span data-i18n="workspace_setup.members.pending">Pending invites</span> <span id="pending-count" style="background:rgba(139,148,158,0.15);border-radius:10px;padding:1px 7px;font-size:10px;">1</span>
</div>
@@ -262,7 +262,7 @@
</div>
<!-- ── Invite team members (create mode only) ── -->
<div id="section-invite" class="ws-form-section" style="display:none;">
<div id="section-invite" class="ws-form-section" hidden>
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
<div class="ws-form-section-title" style="margin-bottom:0;"><span data-i18n="workspace_setup.invite.title">Invite team members</span> <span style="font-size:12px;font-weight:400;color:var(--text-muted);" data-i18n="workspace_setup.optional">(optional)</span></div>
<button class="btn-ghost-sm" type="button" onclick="addInviteRow()" style="font-size:12px;padding:4px 10px;" data-i18n="workspace_setup.invite.add_person">+ Add person</button>
@@ -289,12 +289,12 @@
<button class="btn-primary ws-submit-btn" id="submit-btn" type="button" onclick="submitForm()" data-i18n="workspace_setup.actions.save">Save changes</button>
</div>
<div class="ws-setup-footer-note" id="footer-note" style="display:none;">
<div class="ws-setup-footer-note" id="footer-note" hidden>
<span data-i18n="workspace_setup.create.footer">You'll be the Owner of this workspace. You can invite additional members after creation.</span>
</div>
<!-- ── Danger zone (edit mode only) ── -->
<div id="section-danger" style="display:none; margin-top:32px;">
<div id="section-danger" hidden style="margin-top:32px;">
<div class="ws-form-section" style="border-color: rgba(248,81,73,0.25); padding:0; overflow:hidden;">
<div style="padding:16px 24px; border-bottom: 1px solid rgba(248,81,73,0.15);">
<div style="font-size:14px;font-weight:600;color:var(--red);" data-i18n="workspace_setup.danger.title">Danger zone</div>
apps/ui/js/workspace-setup.js
+11 -11
View File
@@ -257,11 +257,11 @@ function renderInvitations() {
count.textContent = String(items.length);
if (!items.length) {
pending.style.display = 'none';
pending.hidden = true;
return;
}
pending.style.display = '';
pending.hidden = false;
pending.innerHTML = '';
var heading = createElement('div', null, tKey('workspace_setup.members.pending') + ' ');
heading.style.fontSize = '11px';
@@ -369,14 +369,14 @@ function updatePageMode() {
document.title = 'Crank — ' + tKey('workspace_setup.create.title');
document.getElementById('page-title').textContent = tKey('workspace_setup.create.title');
document.getElementById('page-subtitle').textContent = tKey('workspace_setup.create.subtitle');
document.getElementById('section-invite').style.display = '';
document.getElementById('footer-note').style.display = '';
document.getElementById('section-invite').hidden = false;
document.getElementById('footer-note').hidden = false;
submit.textContent = tKey('workspace_setup.actions.create');
submit.disabled = true;
submit.classList.add('is-disabled');
} else {
document.getElementById('section-members').style.display = '';
document.getElementById('section-danger').style.display = '';
document.getElementById('section-members').hidden = false;
document.getElementById('section-danger').hidden = false;
submit.textContent = tKey('workspace_setup.actions.save');
submit.classList.remove('is-disabled');
}
@@ -558,14 +558,14 @@ function toggleInviteForm() {
return;
}
if (form.style.display === 'none') {
form.style.display = '';
if (form.hidden) {
form.hidden = false;
if (success) {
success.style.display = 'none';
success.hidden = true;
}
document.getElementById('invite-email').focus();
} else {
form.style.display = 'none';
form.hidden = true;
}
}
@@ -583,7 +583,7 @@ async function sendInvite() {
try {
await window.CrankApi.createInvitation(workspaceFormState.workspaceId, { email: email, role: role });
document.getElementById('invite-email').value = '';
document.getElementById('invite-success').style.display = '';
document.getElementById('invite-success').hidden = false;
await loadWorkspaceAccessData();
} catch (error) {
if (window.CrankUi) {