Refactor CSS and JavaScript for improved readability and consistency
- Updated CSS styles for buttons, form controls, badges, and notifications to use consistent indentation and formatting. - Enhanced JavaScript code in sftp.js for better readability by breaking long lines and ensuring consistent formatting.
This commit is contained in:
Andy Dixon
@@ -103,7 +103,7 @@
|
||||
background: rgba(239, 83, 80, 0.12);
|
||||
}
|
||||
.btn-danger:active {
|
||||
background: rgba(239, 83, 80, 0.20);
|
||||
background: rgba(239, 83, 80, 0.2);
|
||||
}
|
||||
|
||||
.btn-danger-filled {
|
||||
@@ -172,7 +172,6 @@
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
FORM CONTROLS
|
||||
======================================================================= */
|
||||
@@ -191,7 +190,7 @@
|
||||
}
|
||||
|
||||
.form-label-required::after {
|
||||
content: ' *';
|
||||
content: " *";
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
@@ -279,7 +278,7 @@
|
||||
.form-input.is-error:focus,
|
||||
.form-select.is-error:focus,
|
||||
.form-textarea.is-error:focus {
|
||||
box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.20);
|
||||
box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.2);
|
||||
}
|
||||
|
||||
/* Inline layout (label beside control) */
|
||||
@@ -325,7 +324,7 @@
|
||||
}
|
||||
|
||||
.form-checkbox input[type="checkbox"]:checked::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
@@ -365,7 +364,7 @@
|
||||
}
|
||||
|
||||
.form-toggle input[type="checkbox"]::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
@@ -373,7 +372,9 @@
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-secondary);
|
||||
transition: transform var(--transition-normal), background var(--transition-normal);
|
||||
transition:
|
||||
transform var(--transition-normal),
|
||||
background var(--transition-normal);
|
||||
}
|
||||
|
||||
.form-toggle input[type="checkbox"]:checked {
|
||||
@@ -385,7 +386,6 @@
|
||||
background: var(--text-inverse);
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
BADGES
|
||||
======================================================================= */
|
||||
@@ -429,23 +429,36 @@
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.badge-status::before {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge-status.is-connected::before { background: var(--success); }
|
||||
.badge-status.is-connecting::before { background: var(--warning); animation: pulse-dot 1.2s ease infinite; }
|
||||
.badge-status.is-error::before { background: var(--error); }
|
||||
.badge-status.is-disconnected::before { background: var(--text-tertiary); }
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
.badge-status.is-connected::before {
|
||||
background: var(--success);
|
||||
}
|
||||
.badge-status.is-connecting::before {
|
||||
background: var(--warning);
|
||||
animation: pulse-dot 1.2s ease infinite;
|
||||
}
|
||||
.badge-status.is-error::before {
|
||||
background: var(--error);
|
||||
}
|
||||
.badge-status.is-disconnected::before {
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
CARDS & SURFACES
|
||||
@@ -478,7 +491,6 @@
|
||||
background: var(--bg-active);
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
DROPDOWN / CONTEXT MENU
|
||||
======================================================================= */
|
||||
@@ -530,7 +542,9 @@
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
border: none;
|
||||
background: none;
|
||||
text-align: left;
|
||||
@@ -545,7 +559,7 @@
|
||||
color: var(--error);
|
||||
}
|
||||
.dropdown-item.is-danger:hover {
|
||||
background: rgba(239, 83, 80, 0.10);
|
||||
background: rgba(239, 83, 80, 0.1);
|
||||
}
|
||||
|
||||
.dropdown-item.is-disabled {
|
||||
@@ -581,7 +595,6 @@
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
NOTIFICATIONS (toast)
|
||||
======================================================================= */
|
||||
@@ -617,12 +630,24 @@
|
||||
}
|
||||
|
||||
@keyframes notification-in {
|
||||
from { opacity: 0; transform: translateX(20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes notification-out {
|
||||
from { opacity: 1; transform: translateX(0); }
|
||||
to { opacity: 0; transform: translateX(20px); }
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
@@ -640,10 +665,18 @@
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.notification-success .notification-icon { background: var(--success); }
|
||||
.notification-error .notification-icon { background: var(--error); }
|
||||
.notification-warning .notification-icon { background: var(--warning); }
|
||||
.notification-info .notification-icon { background: var(--info); }
|
||||
.notification-success .notification-icon {
|
||||
background: var(--success);
|
||||
}
|
||||
.notification-error .notification-icon {
|
||||
background: var(--error);
|
||||
}
|
||||
.notification-warning .notification-icon {
|
||||
background: var(--warning);
|
||||
}
|
||||
.notification-info .notification-icon {
|
||||
background: var(--info);
|
||||
}
|
||||
|
||||
.notification-body {
|
||||
flex: 1;
|
||||
@@ -673,7 +706,9 @@
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-tertiary);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
}
|
||||
.notification-close:hover {
|
||||
background: var(--bg-hover);
|
||||
@@ -681,11 +716,18 @@
|
||||
}
|
||||
|
||||
/* Colour variants (left border accent) */
|
||||
.notification-success { border-left: 3px solid var(--success); }
|
||||
.notification-error { border-left: 3px solid var(--error); }
|
||||
.notification-warning { border-left: 3px solid var(--warning); }
|
||||
.notification-info { border-left: 3px solid var(--info); }
|
||||
|
||||
.notification-success {
|
||||
border-left: 3px solid var(--success);
|
||||
}
|
||||
.notification-error {
|
||||
border-left: 3px solid var(--error);
|
||||
}
|
||||
.notification-warning {
|
||||
border-left: 3px solid var(--warning);
|
||||
}
|
||||
.notification-info {
|
||||
border-left: 3px solid var(--info);
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
DISCLOSURE / ACCORDION
|
||||
@@ -705,7 +747,9 @@
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast), color var(--transition-fast);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
color var(--transition-fast);
|
||||
user-select: none;
|
||||
text-align: left;
|
||||
background: none;
|
||||
@@ -743,7 +787,6 @@
|
||||
padding: 0 var(--space-4) var(--space-4);
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
SEARCH INPUT
|
||||
======================================================================= */
|
||||
@@ -757,7 +800,9 @@
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
@@ -780,7 +825,7 @@
|
||||
}
|
||||
|
||||
.search-wrapper::before {
|
||||
content: '⌕';
|
||||
content: "⌕";
|
||||
position: absolute;
|
||||
left: var(--space-3);
|
||||
top: 50%;
|
||||
@@ -790,7 +835,6 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
EMPTY STATE
|
||||
======================================================================= */
|
||||
@@ -832,7 +876,6 @@
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
TOOLTIP
|
||||
======================================================================= */
|
||||
@@ -858,7 +901,6 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
DIVIDER
|
||||
======================================================================= */
|
||||
@@ -876,7 +918,6 @@
|
||||
margin: 0 var(--space-2);
|
||||
}
|
||||
|
||||
|
||||
/* =======================================================================
|
||||
LOADING / SPINNER
|
||||
======================================================================= */
|
||||
@@ -897,7 +938,9 @@
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
|
||||
+10
-4
@@ -795,7 +795,8 @@
|
||||
if (!state) {
|
||||
// Panel not open — still track so we can show a notification on completion
|
||||
if (payload.done) {
|
||||
var dir = payload.direction === "upload" ? "↑ Uploaded" : "↓ Downloaded";
|
||||
var dir =
|
||||
payload.direction === "upload" ? "↑ Uploaded" : "↓ Downloaded";
|
||||
var name = payload.path.split("/").pop() || payload.path;
|
||||
this.app.notifications.success(dir + " " + name);
|
||||
}
|
||||
@@ -873,8 +874,12 @@
|
||||
|
||||
var progress = createElement("div", "sftp-transfer-progress");
|
||||
var bar = createElement("div", "sftp-transfer-bar");
|
||||
var pct = transfer.total > 0
|
||||
? Math.min(100, Math.round((transfer.transferred / transfer.total) * 100))
|
||||
var pct =
|
||||
transfer.total > 0
|
||||
? Math.min(
|
||||
100,
|
||||
Math.round((transfer.transferred / transfer.total) * 100),
|
||||
)
|
||||
: 0;
|
||||
bar.style.width = pct + "%";
|
||||
progress.appendChild(bar);
|
||||
@@ -883,7 +888,8 @@
|
||||
var meta = createElement("span", "sftp-transfer-meta");
|
||||
var transferredStr = formatBytes(transfer.transferred);
|
||||
var totalStr = transfer.total > 0 ? formatBytes(transfer.total) : "?";
|
||||
meta.textContent = transferredStr + " / " + totalStr + " (" + pct + "%)";
|
||||
meta.textContent =
|
||||
transferredStr + " / " + totalStr + " (" + pct + "%)";
|
||||
info.appendChild(meta);
|
||||
|
||||
row.appendChild(info);
|
||||
|
||||
Reference in New Issue
Block a user