Kobe/docupulse
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix colour system

Browse Source
This commit is contained in:
Kobe
2025-05-27 14:36:40 +02:00
parent 60582d4520
commit 0c745e7544
13 changed files with 120 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
routes/__pycache__/main.cpython-313.pyc
View File

Binary file not shown.

91
routes/main.py
View File

@@ -356,9 +356,15 @@ def init_routes(main_bp):
flash('Only administrators can update settings.', 'error')
return redirect(url_for('main.dashboard'))
logger.debug(f"Form data: {request.form}")
logger.debug(f"CSRF token: {request.form.get('csrf_token')}")
primary_color = request.form.get('primary_color')
secondary_color = request.form.get('secondary_color')
logger.debug(f"Primary color: {primary_color}")
logger.debug(f"Secondary color: {secondary_color}")
if not primary_color or not secondary_color:
flash('Both primary and secondary colors are required.', 'error')
return redirect(url_for('main.settings'))
@@ -369,8 +375,10 @@ def init_routes(main_bp):
try:
db.session.commit()
logger.debug("Colors updated successfully in database")
flash('Color settings updated successfully!', 'success')
except Exception as e:
logger.error(f"Error updating colors: {str(e)}")
db.session.rollback()
flash('An error occurred while updating color settings.', 'error')
@@ -447,9 +455,17 @@ def init_routes(main_bp):
@main_bp.route('/dynamic-colors.css')
def dynamic_colors():
site_settings = SiteSettings.get_settings()
"""Generate dynamic CSS variables based on site settings"""
logger.info(f"[Dynamic Colors] Request from: {request.referrer}")
# Calculate derived colors
# Get colors from settings
site_settings = SiteSettings.get_settings()
primary_color = site_settings.primary_color
secondary_color = site_settings.secondary_color
logger.info(f"[Dynamic Colors] Current colors - Primary: {primary_color}, Secondary: {secondary_color}")
# Convert hex to RGB for opacity calculations
def hex_to_rgb(hex_color):
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
@@ -457,60 +473,49 @@ def init_routes(main_bp):
def rgb_to_hex(rgb):
return '#{:02x}{:02x}{:02x}'.format(rgb[0], rgb[1], rgb[2])
def lighten_color(hex_color, amount):
def lighten_color(hex_color, amount=0.2):
rgb = hex_to_rgb(hex_color)
return rgb_to_hex(tuple(min(255, int(c + (255 - c) * amount)) for c in rgb))
rgb = tuple(min(255, int(c + (255 - c) * amount)) for c in rgb)
return rgb_to_hex(rgb)
# Calculate all color variants
primary_light = lighten_color(site_settings.primary_color, 0.15)
primary_bg_light = lighten_color(site_settings.primary_color, 0.9)
primary_opacity_15 = site_settings.primary_color + '26'
# Calculate derived colors
primary_rgb = hex_to_rgb(primary_color)
secondary_rgb = hex_to_rgb(secondary_color)
secondary_light = lighten_color(site_settings.secondary_color, 0.15)
secondary_bg_light = lighten_color(site_settings.secondary_color, 0.9)
secondary_opacity_15 = site_settings.secondary_color + '26'
# Calculate chart colors
primary_chart_light = lighten_color(site_settings.primary_color, 0.2)
primary_chart_lighter = lighten_color(site_settings.primary_color, 0.4)
primary_chart_lightest = lighten_color(site_settings.primary_color, 0.6)
primary_chart_pale = lighten_color(site_settings.primary_color, 0.8)
secondary_chart_light = lighten_color(site_settings.secondary_color, 0.2)
secondary_chart_lighter = lighten_color(site_settings.secondary_color, 0.4)
secondary_chart_lightest = lighten_color(site_settings.secondary_color, 0.6)
secondary_chart_pale = lighten_color(site_settings.secondary_color, 0.8)
# Lighten colors for hover states
primary_light = lighten_color(primary_color, 0.2)
secondary_light = lighten_color(secondary_color, 0.2)
# Generate CSS with opacity variables
css = f"""
:root {{
/* Primary Colors */
--primary-color: {site_settings.primary_color};
--primary-color: {primary_color};
--primary-light: {primary_light};
--primary-bg-light: {primary_bg_light};
--primary-opacity-15: {primary_opacity_15};
--primary-rgb: {primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]};
--primary-opacity-8: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.08);
--primary-opacity-15: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.15);
--primary-opacity-25: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.25);
--primary-opacity-50: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.5);
/* Secondary Colors */
--secondary-color: {site_settings.secondary_color};
--secondary-color: {secondary_color};
--secondary-light: {secondary_light};
--secondary-bg-light: {secondary_bg_light};
--secondary-opacity-15: {secondary_opacity_15};
--secondary-rgb: {secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]};
--secondary-opacity-8: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.08);
--secondary-opacity-15: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.15);
--secondary-opacity-25: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.25);
--secondary-opacity-50: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.5);
/* Chart Colors */
--chart-primary: {site_settings.primary_color};
--chart-secondary: {site_settings.secondary_color};
--chart-warning: #ffd700;
/* Primary Chart Colors */
--chart-primary-light: {primary_chart_light};
--chart-primary-lighter: {primary_chart_lighter};
--chart-primary-lightest: {primary_chart_lightest};
--chart-primary-pale: {primary_chart_pale};
/* Secondary Chart Colors */
--chart-secondary-light: {secondary_chart_light};
--chart-secondary-lighter: {secondary_chart_lighter};
--chart-secondary-lightest: {secondary_chart_lightest};
--chart-secondary-pale: {secondary_chart_pale};
--chart-color-1: {primary_color};
--chart-color-2: {secondary_color};
--chart-color-3: {lighten_color(primary_color, 0.4)};
--chart-color-4: {lighten_color(secondary_color, 0.4)};
}}
"""
logger.info(f"[Dynamic Colors] Generated CSS with primary color: {primary_color}")
logger.info(f"[Dynamic Colors] Cache version: {site_settings.updated_at.timestamp()}")
return Response(css, mimetype='text/css')

3
static/css/auth.css
View File

@@ -1,6 +1,3 @@
/* Import color variables */
@import 'colors.css';
body {
background-color: var(--bg-color);
}

3
static/css/base.css
View File

@@ -1,6 +1,3 @@
/* Import color variables */
@import 'colors.css';
body {
background-color: var(--bg-color);
}

3
static/css/dashboard.css
View File

@@ -1,6 +1,3 @@
/* Import color variables */
@import 'colors.css';
/* Masonry Layout */
.masonry {
column-count: 1;

3
static/css/home.css
View File

@@ -1,6 +1,3 @@
/* Import color variables */
@import 'colors.css';
.navbar {
background-color: var(--primary-color) !important;
}

3
static/css/trash.css
View File

@@ -1,6 +1,3 @@
/* Import color variables */
@import 'colors.css';
.btn-group .btn.active {
background-color: var(--primary-bg-light) !important;
border-color: var(--primary-color) !important;

33
static/js/settings.js
View File

@@ -1,6 +1,7 @@
document.addEventListener('DOMContentLoaded', function() {
const primaryColorInput = document.getElementById('primaryColor');
const secondaryColorInput = document.getElementById('secondaryColor');
const colorSettingsForm = document.getElementById('colorSettingsForm');
// Tab persistence
const settingsTabs = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]');
@@ -163,15 +164,37 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialize colors from database values
function initializeColors() {
// Reset inputs to original database values
primaryColorInput.value = primaryColorInput.dataset.originalValue;
secondaryColorInput.value = secondaryColorInput.dataset.originalValue;
// Get the current computed CSS variable values
const computedPrimaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
const computedSecondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim();
console.log('[Settings] Initializing colors:', {
primary: computedPrimaryColor,
secondary: computedSecondaryColor,
timestamp: new Date().toISOString()
});
// Update input values
primaryColorInput.value = computedPrimaryColor;
secondaryColorInput.value = computedSecondaryColor;
// Update all color previews
updateAllColors(primaryColorInput.value, true);
updateAllColors(secondaryColorInput.value, false);
updateAllColors(computedPrimaryColor, true);
updateAllColors(computedSecondaryColor, false);
}
// Initialize colors when the page loads
initializeColors();
// Handle form submission
if (colorSettingsForm) {
colorSettingsForm.addEventListener('submit', function(e) {
console.log('[Settings] Form submitted with values:', {
primary: primaryColorInput.value,
secondary: secondaryColorInput.value,
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
timestamp: new Date().toISOString()
});
});
}
});

10
templates/auth/login.html
View File

@@ -8,7 +8,15 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
<script>
console.log('[CSS] Base colors loaded');
document.addEventListener('DOMContentLoaded', function() {
console.log('[CSS] All CSS files loaded');
console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
});
</script>
<style>
body {
min-height: 100vh;

10
templates/auth/register.html
View File

@@ -7,6 +7,16 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
<script>
console.log('[CSS] Base colors loaded');
document.addEventListener('DOMContentLoaded', function() {
console.log('[CSS] All CSS files loaded');
console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
});
</script>
</head>
<body>
<div class="container">

11
templates/common/base.html
View File

@@ -10,8 +10,17 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='css/file-grid.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}?v={{ site_settings.updated_at.timestamp() }}" onload="console.log('[CSS] Dynamic colors loaded with version:', '{{ site_settings.updated_at.timestamp() }}')">
{% block extra_css %}{% endblock %}
<script>
console.log('[CSS] Base colors loaded');
document.addEventListener('DOMContentLoaded', function() {
console.log('[CSS] All CSS files loaded');
console.log('[CSS] Primary color:', getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim());
console.log('[CSS] Secondary color:', getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim());
});
</script>
</head>
<body>
<!-- Navigation -->

49
templates/dashboard/dashboard.html
View File

@@ -5,7 +5,6 @@
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
{% endblock %}
{% block content %}
@@ -70,17 +69,11 @@ document.addEventListener('DOMContentLoaded', function() {
// Get all chart colors
const chartColors = {
primary: getCssVar('--chart-primary'),
secondary: getCssVar('--chart-secondary'),
warning: getCssVar('--chart-warning'),
primaryLight: getCssVar('--chart-primary-light'),
primaryLighter: getCssVar('--chart-primary-lighter'),
primaryLightest: getCssVar('--chart-primary-lightest'),
primaryPale: getCssVar('--chart-primary-pale'),
secondaryLight: getCssVar('--chart-secondary-light'),
secondaryLighter: getCssVar('--chart-secondary-lighter'),
secondaryLightest: getCssVar('--chart-secondary-lightest'),
secondaryPale: getCssVar('--chart-secondary-pale')
color1: getCssVar('--chart-color-1'),
color2: getCssVar('--chart-color-2'),
color3: getCssVar('--chart-color-3'),
color4: getCssVar('--chart-color-4'),
warning: getCssVar('--warning-color')
};
// Contact Status Chart
@@ -92,7 +85,7 @@ document.addEventListener('DOMContentLoaded', function() {
labels: ['Active', 'Inactive'],
datasets: [{
data: [{{ active_count }}, {{ inactive_count }}],
backgroundColor: [chartColors.primary, chartColors.secondary],
backgroundColor: [chartColors.color1, chartColors.color2],
borderWidth: 0,
hoverOffset: 4
}]
@@ -119,7 +112,7 @@ document.addEventListener('DOMContentLoaded', function() {
labels: ['Starred', 'Unstarred'],
datasets: [{
data: [{{ starred_count }}, {{ file_count - starred_count }}],
backgroundColor: [chartColors.warning, chartColors.primary],
backgroundColor: [chartColors.warning, chartColors.color1],
borderWidth: 0,
hoverOffset: 4
}]
@@ -145,16 +138,10 @@ document.addEventListener('DOMContentLoaded', function() {
datasets: [{
data: [{% for type in storage_by_type %}{{ type.total_size }}{% if not loop.last %}, {% endif %}{% endfor %}],
backgroundColor: [
chartColors.primary,
chartColors.primaryLight,
chartColors.primaryLighter,
chartColors.primaryLightest,
chartColors.primaryPale,
chartColors.secondary,
chartColors.secondaryLight,
chartColors.secondaryLighter,
chartColors.secondaryLightest,
chartColors.secondaryPale
chartColors.color1,
chartColors.color2,
chartColors.color3,
chartColors.color4
],
borderWidth: 0,
hoverOffset: 4
@@ -185,16 +172,10 @@ document.addEventListener('DOMContentLoaded', function() {
datasets: [{
data: [{% for type in trash_by_type %}{{ type.count }}{% if not loop.last %}, {% endif %}{% endfor %}],
backgroundColor: [
chartColors.primary,
chartColors.primaryLight,
chartColors.primaryLighter,
chartColors.primaryLightest,
chartColors.primaryPale,
chartColors.secondary,
chartColors.secondaryLight,
chartColors.secondaryLighter,
chartColors.secondaryLightest,
chartColors.secondaryPale
chartColors.color1,
chartColors.color2,
chartColors.color3,
chartColors.color4
],
borderWidth: 0,
hoverOffset: 4

1
templates/trash/trash.html
View File

@@ -5,7 +5,6 @@
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/trash.css') }}">
<link rel="stylesheet" href="{{ url_for('main.dynamic_colors') }}">
{% endblock %}
{% block content %}