略改
This commit is contained in:
shuaiplus committed
1 parent
dd6e0e787e
commit
bedc7f1cc8
3 files changed
+89
-40
No files matched your search
+44
-29
@@ -997,27 +997,13 @@ body {
|
||||
|
||||
/* File message styles */
|
||||
/* 文件消息样式 */
|
||||
.file-message {
|
||||
max-width: 320px;
|
||||
border-radius: 16px;
|
||||
margin: 6px 0;
|
||||
font-family: inherit;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(48, 168, 247, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.file-message:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.file-main-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
padding: 6px 6px;
|
||||
gap: 12px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
@@ -1058,21 +1044,49 @@ body {
|
||||
|
||||
.file-download-btn {
|
||||
padding: 10px;
|
||||
background: linear-gradient(135deg, #30a8f7, #4fc3f7);
|
||||
background: linear-gradient(135deg, #52abff, #4fc3f7);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 8px rgba(48, 168, 247, 0.3);
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(5px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-download-btn.show {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.file-download-btn.show.animate-in {
|
||||
animation: downloadBtnAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes downloadBtnAppear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.6) translateY(10px) rotate(-5deg);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1) translateY(-2px) rotate(2deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.file-download-btn svg {
|
||||
@@ -1084,12 +1098,10 @@ body {
|
||||
.file-download-btn:hover {
|
||||
background: linear-gradient(135deg, #2196f3, #42a5f5);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(48, 168, 247, 0.4);
|
||||
}
|
||||
|
||||
.file-download-btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(48, 168, 247, 0.3);
|
||||
}
|
||||
|
||||
.file-download-btn:disabled {
|
||||
@@ -1102,6 +1114,16 @@ body {
|
||||
.file-progress-container {
|
||||
padding: 0 16px 12px;
|
||||
margin-top: -4px;
|
||||
opacity: 1;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.4s ease, max-height 0.4s ease, padding 0.4s ease;
|
||||
}
|
||||
|
||||
.file-progress-container.fade-out {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding: 0 16px 0;
|
||||
}
|
||||
|
||||
.file-progress-bar {
|
||||
@@ -1112,6 +1134,7 @@ body {
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.file-progress {
|
||||
@@ -1160,9 +1183,6 @@ body {
|
||||
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
|
||||
}
|
||||
|
||||
.bubble.private-message .file-message:hover {
|
||||
box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2);
|
||||
}
|
||||
|
||||
.bubble.private-message .file-message .file-download-btn {
|
||||
background: linear-gradient(135deg, #ff9800, #ffb74d);
|
||||
@@ -1567,11 +1587,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* File message animation enhancements */
|
||||
/* 文件消息动画增强 */
|
||||
.file-message {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
|
||||
+3
-4
@@ -306,12 +306,11 @@ function renderFileMessage(fileData, isSender) {
|
||||
} else if (transfer.status === 'completed') {
|
||||
// 完成时不显示任何状态，只显示下载按钮
|
||||
downloadBtnStyle = isSender ? 'display: none;' : 'display: flex;';
|
||||
}
|
||||
} else if (isSender) {
|
||||
} } else if (isSender) {
|
||||
// 发送方历史消息，不显示状态和下载按钮
|
||||
downloadBtnStyle = 'display: none;';
|
||||
} else {
|
||||
// 接收方历史消息，直接显示下载按钮
|
||||
// 接收方历史消息，直接显示下载按钮（带动画效果）
|
||||
downloadBtnStyle = 'display: flex;';
|
||||
}
|
||||
// Different icon for archives vs single files
|
||||
@@ -327,7 +326,7 @@ function renderFileMessage(fileData, isSender) {
|
||||
<div class="file-meta">${displayMeta}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="file-download-btn" style="${downloadBtnStyle}" onclick="window.downloadFile('${fileId}')">
|
||||
<button class="file-download-btn show" style="${downloadBtnStyle}" onclick="window.downloadFile('${fileId}')">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10V11H17C18.933 11 20.5 12.567 20.5 14.5C20.5 16.433 18.933 18 17 18H16.9C16.3477 18 15.9 18.4477 15.9 19C15.9 19.5523 16.3477 20 16.9 20H17C20.0376 20 22.5 17.5376 22.5 14.5C22.5 11.7793 20.5245 9.51997 17.9296 9.07824C17.4862 6.20213 15.0003 4 12 4C8.99974 4 6.51381 6.20213 6.07036 9.07824C3.47551 9.51997 1.5 11.7793 1.5 14.5C1.5 17.5376 3.96243 20 7 20H7.1C7.65228 20 8.1 19.5523 8.1 19C8.1 18.4477 7.65228 18 7.1 18H7C5.067 18 3.5 16.433 3.5 14.5C3.5 12.567 5.067 11 7 11H8V10ZM13 11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V16.5858L9.70711 15.2929C9.31658 14.9024 8.68342 14.9024 8.29289 15.2929C7.90237 15.6834 7.90237 16.3166 8.29289 16.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L15.7071 16.7071C16.0976 16.3166 16.0976 15.6834 15.7071 15.2929C15.3166 14.9024 14.6834 14.9024 14.2929 15.2929L13 16.5858V11Z" fill="currentColor"></path> </g></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
+42
-7
@@ -537,9 +537,9 @@ async function sendVolumes(fileId, volumes, onSend, updateProgress, fileName) {
|
||||
function updateFileProgress(fileId) {
|
||||
const transfer = window.fileTransfers.get(fileId);
|
||||
if (!transfer) return;
|
||||
|
||||
const elements = document.querySelectorAll(`[data-file-id="${fileId}"]`);
|
||||
elements.forEach(element => {
|
||||
const progressContainer = element.querySelector('.file-progress-container');
|
||||
const progressBar = element.querySelector('.file-progress');
|
||||
const statusText = element.querySelector('.file-status');
|
||||
const downloadBtn = element.querySelector('.file-download-btn');
|
||||
@@ -549,24 +549,59 @@ function updateFileProgress(fileId) {
|
||||
|
||||
if (transfer.status === 'sending') {
|
||||
const progress = (transfer.sentVolumes / transfer.totalVolumes) * 100;
|
||||
if (progressContainer) {
|
||||
progressContainer.style.display = 'block';
|
||||
progressContainer.classList.remove('fade-out');
|
||||
}
|
||||
if (progressBar) progressBar.style.width = `${progress}%`;
|
||||
if (statusText) statusText.textContent = `Sending ${transfer.sentVolumes}/${transfer.totalVolumes}`;
|
||||
if (downloadBtn) downloadBtn.style.display = 'none';
|
||||
if (downloadBtn) {
|
||||
downloadBtn.classList.remove('show', 'animate-in');
|
||||
downloadBtn.style.display = 'none';
|
||||
}
|
||||
} else if (transfer.status === 'receiving') {
|
||||
const progress = (transfer.receivedVolumes.size / transfer.totalVolumes) * 100;
|
||||
if (progressContainer) {
|
||||
progressContainer.style.display = 'block';
|
||||
progressContainer.classList.remove('fade-out');
|
||||
}
|
||||
if (progressBar) progressBar.style.width = `${progress}%`;
|
||||
if (statusText) statusText.textContent = `Receiving ${transfer.receivedVolumes.size}/${transfer.totalVolumes}`;
|
||||
if (downloadBtn) downloadBtn.style.display = 'none';
|
||||
if (downloadBtn) {
|
||||
downloadBtn.classList.remove('show', 'animate-in');
|
||||
downloadBtn.style.display = 'none';
|
||||
}
|
||||
} else if (transfer.status === 'completed') {
|
||||
if (progressBar) progressBar.style.width = '100%';
|
||||
if (statusText) statusText.textContent = '✓ Completed';
|
||||
// 传输完成时的动画序列
|
||||
if (progressContainer) {
|
||||
// 先添加淡出动画类
|
||||
progressContainer.classList.add('fade-out');
|
||||
// 延迟后完全隐藏
|
||||
setTimeout(() => {
|
||||
progressContainer.style.display = 'none';
|
||||
}, 400);
|
||||
}
|
||||
|
||||
if (downloadBtn) {
|
||||
// 只有接收方才显示下载按钮
|
||||
if (isSender) {
|
||||
downloadBtn.classList.remove('show', 'animate-in');
|
||||
downloadBtn.style.display = 'none';
|
||||
} else {
|
||||
downloadBtn.style.display = 'inline-block';
|
||||
downloadBtn.disabled = false;
|
||||
// 延迟显示下载按钮，等进度条消失动画完成
|
||||
setTimeout(() => {
|
||||
downloadBtn.style.display = 'flex';
|
||||
downloadBtn.classList.add('show');
|
||||
downloadBtn.disabled = false;
|
||||
// 添加进入动画
|
||||
setTimeout(() => {
|
||||
downloadBtn.classList.add('animate-in');
|
||||
}, 50);
|
||||
// 清理动画类
|
||||
setTimeout(() => {
|
||||
downloadBtn.classList.remove('animate-in');
|
||||
}, 550);
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user