wip
This commit is contained in:
pika
parent
7823be6481
commit
e99b2745bd
8 changed files with 147 additions and 894 deletions
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
description:
|
||||
globs:
|
||||
---
|
||||
|
||||
# Your rule content
|
||||
|
||||
- You can @ files here
|
||||
- You can use markdown but dont have to
|
||||
|
|
@ -21,9 +21,8 @@ def index():
|
|||
# Get recent files
|
||||
recent_files = File.query.filter_by(user_id=current_user.id).order_by(File.created_at.desc()).limit(5).all()
|
||||
|
||||
# Add icon_class to each file
|
||||
for file in recent_files:
|
||||
file.icon_class = file.get_icon_class()
|
||||
# We don't need to set icon_class as it's already a property
|
||||
# Just pass the files to the template
|
||||
|
||||
return render_template('dashboard/index.html',
|
||||
file_count=file_count,
|
||||
|
|
|
|||
|
|
@ -1,795 +0,0 @@
|
|||
:root {
|
||||
/* Dark mode colors - more modern palette */
|
||||
--bg-dark: #121418;
|
||||
--card-bg-dark: #1e2029;
|
||||
--text-dark: #f2f3f8;
|
||||
--text-secondary-dark: #b4bcd0;
|
||||
--border-dark: #2e3145;
|
||||
--primary-dark: #6d5dfc;
|
||||
--secondary-dark: #4839eb;
|
||||
--success-dark: #22c55e;
|
||||
--warning-dark: #f59e0b;
|
||||
--danger-dark: #ef4444;
|
||||
--info-dark: #3b82f6;
|
||||
|
||||
/* Light mode colors - cleaner palette */
|
||||
--bg-light: #f7f8fc;
|
||||
--card-bg-light: #ffffff;
|
||||
--text-light: #1a202c;
|
||||
--text-secondary-light: #64748b;
|
||||
--border-light: #e2e8f0;
|
||||
--primary-light: #5a47e8;
|
||||
--secondary-light: #4c3fe0;
|
||||
--success-light: #10b981;
|
||||
--warning-light: #f59e0b;
|
||||
--danger-light: #ef4444;
|
||||
--info-light: #3b82f6;
|
||||
|
||||
/* Shared properties */
|
||||
--border-radius: 10px;
|
||||
--border-radius-sm: 6px;
|
||||
--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
|
||||
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
}
|
||||
|
||||
/* Apply theme variables based on data attribute */
|
||||
[data-theme="light"] {
|
||||
--bg: var(--bg-light);
|
||||
--card-bg: var(--card-bg-light);
|
||||
--text: var(--text-light);
|
||||
--text-secondary: var(--text-secondary-light);
|
||||
--border-color: var(--border-light);
|
||||
--primary-color: var(--primary-light);
|
||||
--secondary-color: var(--secondary-light);
|
||||
--success-color: var(--success-light);
|
||||
--warning-color: var(--warning-light);
|
||||
--danger-color: var(--danger-light);
|
||||
--info-color: var(--info-light);
|
||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg: var(--bg-dark);
|
||||
--card-bg: var(--card-bg-dark);
|
||||
--text: var(--text-dark);
|
||||
--text-secondary: var(--text-secondary-dark);
|
||||
--border-color: var(--border-dark);
|
||||
--primary-color: var(--primary-dark);
|
||||
--secondary-color: var(--secondary-dark);
|
||||
--success-color: var(--success-dark);
|
||||
--warning-color: var(--warning-dark);
|
||||
--danger-color: var(--danger-dark);
|
||||
--info-color: var(--info-dark);
|
||||
--shadow-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Reset and base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Modern navbar */
|
||||
.navbar {
|
||||
background-color: var(--card-bg);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar-brand a {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--border-radius-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background-color: rgba(var(--primary-color-rgb), 0.1);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-item i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.theme-toggle-icon {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.theme-toggle-icon:hover {
|
||||
background-color: rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
/* Container and layout */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: calc(100vh - 160px);
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.card {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* Button styles - modernized and consistent */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
border-radius: var(--border-radius-sm);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text);
|
||||
box-shadow: inset 0 0 0 1px var(--border-color);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-color);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: 0 2px 5px rgba(var(--primary-color-rgb), 0.3);
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
box-shadow: 0 4px 10px rgba(var(--primary-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
background-color: var(--secondary-color);
|
||||
color: white;
|
||||
box-shadow: 0 2px 5px rgba(var(--secondary-color-rgb), 0.3);
|
||||
}
|
||||
|
||||
.btn.secondary:hover {
|
||||
box-shadow: 0 4px 10px rgba(var(--secondary-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
.btn.success {
|
||||
background-color: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
background-color: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.sm {
|
||||
padding: 0.3rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn.lg {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.btn i {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Modal styles - beautiful and animated */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
overflow: auto;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal.visible {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
overflow: hidden;
|
||||
margin: 2rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal.visible .modal-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
padding: 0.25rem;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* File browser styles */
|
||||
.browser-container {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.browser-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.browser-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.browser-title h2 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.browser-title i {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.browser-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-sm);
|
||||
background-color: var(--card-bg);
|
||||
color: var(--text);
|
||||
min-width: 200px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
/* Context menu for right-click */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius-sm);
|
||||
box-shadow: var(--shadow-md);
|
||||
z-index: 1000;
|
||||
min-width: 180px;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.5rem 0;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.context-menu-item:hover {
|
||||
background-color: rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
.context-menu-item i {
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.context-menu-divider {
|
||||
height: 1px;
|
||||
background-color: var(--border-color);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* File and folder items */
|
||||
.files-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.files-container.list-view {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 0.5rem;
|
||||
}
|
||||
|
||||
.file-item,
|
||||
.folder-item {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
border: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.file-item:hover,
|
||||
.folder-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.file-icon,
|
||||
.folder-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
color: #f9d71c;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 0.95rem;
|
||||
word-break: break-word;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alerts {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 1050;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
box-shadow: var(--shadow-md);
|
||||
border-left: 4px solid var(--info-color);
|
||||
animation: slideUp 0.3s ease;
|
||||
}
|
||||
|
||||
.alert.success {
|
||||
border-left-color: var(--success-color);
|
||||
}
|
||||
|
||||
.alert.error {
|
||||
border-left-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.alert.warning {
|
||||
border-left-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
flex: 1;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.alert .close {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.alert .close:hover {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.alert.fade-out {
|
||||
animation: fadeOut 0.3s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom transitions and animations for Google Drive-like experience */
|
||||
|
||||
/* Folder enter animation */
|
||||
.folder-transition-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.folder-transition-enter-active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Smooth hover effects */
|
||||
.folder-item,
|
||||
.file-item {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.folder-item:hover,
|
||||
.file-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* File hover actions */
|
||||
.file-actions {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.file-item:hover .file-actions,
|
||||
.folder-item:hover .file-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Folder navigation transitions */
|
||||
.files-container {
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.files-container.changing {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
/* File upload animation */
|
||||
@keyframes upload-progress {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-progress-bar {
|
||||
animation: upload-progress 1.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* Navigation sidebar animation */
|
||||
.sidebar {
|
||||
transition: transform 0.3s ease, width 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
transform: translateX(-100%);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Scale animation for new items */
|
||||
@keyframes new-item-appear {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.new-item {
|
||||
animation: new-item-appear 0.3s forwards;
|
||||
}
|
||||
|
||||
/* Custom animations and transitions */
|
||||
.folder-enter-active {
|
||||
animation: folder-enter 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.0);
|
||||
}
|
||||
|
||||
@keyframes folder-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Folder/file hover animation */
|
||||
.folder-item,
|
||||
.file-item {
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.folder-item:hover,
|
||||
.file-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Upload dropzone styles */
|
||||
.dropzone {
|
||||
border: 2px dashed var(--border-color);
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropzone.highlight {
|
||||
border-color: var(--primary-color);
|
||||
background-color: rgba(74, 107, 255, 0.1);
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 48px;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 15px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
@ -8,49 +8,45 @@
|
|||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
width: 450px;
|
||||
max-width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
transform: translateY(0);
|
||||
animation: modal-appear 0.3s ease;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
transform: translateY(-20px);
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes modal-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.modal.active .modal-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
|
|
@ -58,62 +54,48 @@
|
|||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-muted);
|
||||
transition: color 0.2s ease;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--danger-color);
|
||||
background-color: rgba(var(--danger-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="password"],
|
||||
.form-group input[type="email"] {
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
if (filesContainer && gridViewBtn && listViewBtn) {
|
||||
// Set initial view based on saved preference
|
||||
const savedView = localStorage.getItem('view_preference') || 'grid';
|
||||
const savedView = localStorage.getItem('view_mode') || 'grid';
|
||||
filesContainer.className = `files-container ${savedView}-view`;
|
||||
|
||||
// Highlight the correct button
|
||||
|
|
@ -26,18 +26,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
filesContainer.className = 'files-container grid-view';
|
||||
gridViewBtn.classList.add('active');
|
||||
listViewBtn.classList.remove('active');
|
||||
|
||||
// Save preference
|
||||
localStorage.setItem('view_preference', 'grid');
|
||||
localStorage.setItem('view_mode', 'grid');
|
||||
});
|
||||
|
||||
listViewBtn.addEventListener('click', function () {
|
||||
filesContainer.className = 'files-container list-view';
|
||||
listViewBtn.classList.add('active');
|
||||
gridViewBtn.classList.remove('active');
|
||||
|
||||
// Save preference
|
||||
localStorage.setItem('view_preference', 'list');
|
||||
localStorage.setItem('view_mode', 'list');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -281,6 +277,71 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
deleteModal.classList.remove('active');
|
||||
});
|
||||
}
|
||||
|
||||
// File/folder action buttons
|
||||
const setupItemActions = () => {
|
||||
// Edit/rename buttons
|
||||
document.querySelectorAll('.action-btn.edit').forEach(btn => {
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const itemElement = this.closest('.folder-item, .file-item');
|
||||
const itemId = itemElement.dataset.id;
|
||||
const itemName = itemElement.querySelector('.item-name').textContent;
|
||||
const isFolder = itemElement.classList.contains('folder-item');
|
||||
|
||||
// Set values in rename modal
|
||||
const renameModal = document.getElementById('rename-modal');
|
||||
const newNameInput = document.getElementById('new-name');
|
||||
const itemIdInput = document.getElementById('item-id');
|
||||
const itemTypeInput = document.getElementById('item-type');
|
||||
|
||||
if (renameModal && newNameInput && itemIdInput && itemTypeInput) {
|
||||
newNameInput.value = itemName;
|
||||
itemIdInput.value = itemId;
|
||||
itemTypeInput.value = isFolder ? 'folder' : 'file';
|
||||
|
||||
// Show modal
|
||||
renameModal.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Delete buttons
|
||||
document.querySelectorAll('.action-btn.delete').forEach(btn => {
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const itemElement = this.closest('.folder-item, .file-item');
|
||||
const itemId = itemElement.dataset.id;
|
||||
const isFolder = itemElement.classList.contains('folder-item');
|
||||
|
||||
// Set values in delete modal
|
||||
const deleteModal = document.getElementById('delete-modal');
|
||||
const deleteItemIdInput = document.getElementById('delete-item-id');
|
||||
const deleteItemTypeInput = document.getElementById('delete-item-type');
|
||||
|
||||
if (deleteModal && deleteItemIdInput && deleteItemTypeInput) {
|
||||
deleteItemIdInput.value = itemId;
|
||||
deleteItemTypeInput.value = isFolder ? 'folder' : 'file';
|
||||
|
||||
// Update form action
|
||||
const deleteForm = document.getElementById('delete-form');
|
||||
if (deleteForm) {
|
||||
deleteForm.action = `/files/delete/${itemId}`;
|
||||
}
|
||||
|
||||
// Show modal
|
||||
deleteModal.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize item actions
|
||||
setupItemActions();
|
||||
});
|
||||
|
||||
// Browser-specific functionality
|
||||
|
|
|
|||
|
|
@ -5,44 +5,59 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
});
|
||||
|
||||
function initializeModals() {
|
||||
// Setup modal triggers
|
||||
document.querySelectorAll('[data-toggle="modal"]').forEach(trigger => {
|
||||
const targetId = trigger.getAttribute('data-target');
|
||||
const targetModal = document.querySelector(targetId);
|
||||
// Get all modals
|
||||
const modals = document.querySelectorAll('.modal');
|
||||
|
||||
if (targetModal) {
|
||||
trigger.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
openModal(targetId);
|
||||
// Initialize each modal
|
||||
modals.forEach(modal => {
|
||||
// Get close button
|
||||
const closeBtn = modal.querySelector('.modal-close');
|
||||
const cancelBtn = modal.querySelector('.modal-cancel');
|
||||
|
||||
// Close modal when close button is clicked
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', function () {
|
||||
modal.classList.remove('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Setup direct modal triggers (like the new folder button)
|
||||
const newFolderBtn = document.getElementById('new-folder-btn');
|
||||
if (newFolderBtn) {
|
||||
newFolderBtn.addEventListener('click', function () {
|
||||
openModal('#new-folder-modal');
|
||||
});
|
||||
}
|
||||
// Close modal when cancel button is clicked
|
||||
if (cancelBtn) {
|
||||
cancelBtn.addEventListener('click', function () {
|
||||
modal.classList.remove('active');
|
||||
});
|
||||
}
|
||||
|
||||
const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');
|
||||
if (emptyNewFolderBtn) {
|
||||
emptyNewFolderBtn.addEventListener('click', function () {
|
||||
openModal('#new-folder-modal');
|
||||
});
|
||||
}
|
||||
|
||||
// Close buttons
|
||||
document.querySelectorAll('.modal-close, .modal-cancel').forEach(closeBtn => {
|
||||
closeBtn.addEventListener('click', function () {
|
||||
const modal = this.closest('.modal');
|
||||
if (modal) {
|
||||
closeModal('#' + modal.id);
|
||||
// Close modal when clicking outside
|
||||
modal.addEventListener('click', function (e) {
|
||||
if (e.target === modal) {
|
||||
modal.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Open modal when trigger is clicked
|
||||
document.querySelectorAll('[data-modal]').forEach(trigger => {
|
||||
trigger.addEventListener('click', function () {
|
||||
const modalId = this.dataset.modal;
|
||||
const modal = document.getElementById(modalId);
|
||||
if (modal) {
|
||||
modal.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// New folder button
|
||||
const newFolderBtn = document.getElementById('new-folder-btn');
|
||||
if (newFolderBtn) {
|
||||
newFolderBtn.addEventListener('click', function () {
|
||||
const modal = document.getElementById('new-folder-modal');
|
||||
if (modal) {
|
||||
modal.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close on background click
|
||||
document.querySelectorAll('.modal').forEach(modal => {
|
||||
modal.addEventListener('click', function (e) {
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
|
||||
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}"> -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
|
||||
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}"> -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/mobile-menu.css') }}">
|
||||
<!-- Font Awesome Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
{% for file in recent_files %}
|
||||
<div class="recent-file-item">
|
||||
<div class="recent-file-icon">
|
||||
<i class="{{ file.icon_class }}"></i>
|
||||
<i class="fas {{ file.icon_class }}"></i>
|
||||
</div>
|
||||
<div class="recent-file-info">
|
||||
<div class="recent-file-name">{{ file.name }}</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue