CSS class migrations for ticket page: tabs, visibility, markdown preview, uploads

- Switch tab show/hide from style.display to .tab-content.active CSS class
- Convert visibilityGroupsField, markdownPreview, uploadProgress to use .is-hidden class
- Replace comment text div style.display with classList.add/remove('is-hidden')
- Add .is-hidden utility class to ticket.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-20 21:13:55 -04:00
parent 913e294f9d
commit e35401d54e
3 changed files with 16 additions and 25 deletions

View File

@@ -5,7 +5,7 @@ function toggleVisibilityGroupsEdit() {
const visibility = document.getElementById('visibilitySelect')?.value;
const groupsField = document.getElementById('visibilityGroupsField');
if (groupsField) {
groupsField.style.display = visibility === 'internal' ? 'block' : 'none';
groupsField.classList.toggle('is-hidden', visibility !== 'internal');
}
}
@@ -201,7 +201,7 @@ function togglePreview() {
if (!preview || !textarea || !toggleEl) return;
const isPreviewEnabled = toggleEl.checked;
preview.style.display = isPreviewEnabled ? 'block' : 'none';
preview.classList.toggle('is-hidden', !isPreviewEnabled);
if (isPreviewEnabled) {
preview.innerHTML = parseMarkdown(textarea.value);
@@ -222,9 +222,9 @@ function updatePreview() {
if (isMarkdownEnabled && commentText.trim()) {
previewDiv.innerHTML = parseMarkdown(commentText);
previewDiv.style.display = 'block';
previewDiv.classList.remove('is-hidden');
} else {
previewDiv.style.display = 'none';
previewDiv.classList.add('is-hidden');
}
}
@@ -238,7 +238,7 @@ function toggleMarkdownMode() {
if (!isMasterEnabled) {
previewToggle.checked = false;
const preview = document.getElementById('markdownPreview');
if (preview) preview.style.display = 'none';
if (preview) preview.classList.add('is-hidden');
}
}
@@ -450,17 +450,7 @@ function showTab(tabName) {
}
// Hide all tabs
descriptionTab.style.display = 'none';
commentsTab.style.display = 'none';
if (attachmentsTab) {
attachmentsTab.style.display = 'none';
}
if (dependenciesTab) {
dependenciesTab.style.display = 'none';
}
if (activityTab) {
activityTab.style.display = 'none';
}
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
// Remove active class and aria-selected from all buttons
document.querySelectorAll('.tab-btn').forEach(btn => {
@@ -470,7 +460,7 @@ function showTab(tabName) {
// Show selected tab and activate its button
const tabEl = document.getElementById(`${tabName}-tab`);
if (tabEl) tabEl.style.display = 'block';
if (tabEl) tabEl.classList.add('active');
const activeBtn = document.querySelector(`.tab-btn[data-tab="${tabName}"]`);
if (activeBtn) {
activeBtn.classList.add('active');
@@ -713,7 +703,7 @@ function handleFileUpload(files) {
let uploadedCount = 0;
const totalFiles = files.length;
progressDiv.style.display = 'block';
progressDiv.classList.remove('is-hidden');
statusText.textContent = `Uploading 0 of ${totalFiles} files...`;
progressFill.style.width = '0%';
@@ -779,7 +769,7 @@ function resetUploadUI() {
const progressDiv = document.getElementById('uploadProgress');
const fileInput = document.getElementById('fileInput');
progressDiv.style.display = 'none';
progressDiv.classList.add('is-hidden');
if (fileInput) {
fileInput.value = '';
}
@@ -1181,7 +1171,7 @@ function editComment(commentId) {
`;
// Hide original text, show edit form
textDiv.style.display = 'none';
textDiv.classList.add('is-hidden');
textDiv.after(editForm);
commentDiv.classList.add('editing');
@@ -1248,7 +1238,7 @@ function saveEditComment(commentId) {
// Remove edit form and show text
if (editForm) editForm.remove();
textDiv.style.display = '';
textDiv.classList.remove('is-hidden');
commentDiv.classList.remove('editing');
lt.toast.success('Comment updated successfully');
@@ -1270,7 +1260,7 @@ function cancelEditComment(commentId) {
const editForm = document.getElementById(`comment-edit-form-${commentId}`);
if (editForm) editForm.remove();
if (textDiv) textDiv.style.display = '';
if (textDiv) textDiv.classList.remove('is-hidden');
if (commentDiv) commentDiv.classList.remove('editing');
}