Backgrounds

2024-02-21 15:49:44 +01:00
parent ae7268736f
commit 81a60804b1
10 changed files with 113 additions and 13 deletions
@@ -4,6 +4,15 @@
    {% include "head.html" %}
  </head>
  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+    <svg class="offscreen" width="0" height="0" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <defs>
+          <filter id="crispify">
+              <feComponentTransfer>
+                  <feFuncA type="discrete" tableValues="0 1"/>
+              </feComponentTransfer>
+          </filter>
+      </defs>
+    </svg>
    <script>setWallpaper()</script>
    <div class="window" id="main-window">
      <div class="title-bar main-title-bar">
@@ -10,11 +10,25 @@
    </div>
  </form>
  {% endif %}
-  <div class="field-row">
-    <label for="wallpaper">Eigen wallpaper url:</label>
-    <input id="wallpaper" type="text" onchange="wallpaperChanged()" />
-    <button id="wallpaper-reset" onclick="wallpaperChanged()">Reset</button>
-  </div>
+  <form method="post">
+    {% csrf_token %}
+    {% if backgrounds %}
+    <div class="field-row">
+      <label for="wallpaper">Wallpaper:</label>
+      <select id="background" name="background" onchange="this.form.submit()">
+        {% for background in backgrounds %}
+          <option
+            value="{{background.id}}"
+            {% if background.id == currentBackground %} selected{% endif %}
+            >
+            {{background.name}}
+          </option>
+        {% endfor %}
+      </select>
+      <button id="wallpaper-reset" onclick="wallpaperChanged()">Reset</button>
+    </div>
+    {% endif %}
+  </form>
  <script>
    function wallpaperChanged() {
      const expression = /^https?:\/\/.*\.(jpeg|jpg|png|gif)$/
@@ -26,6 +40,5 @@
        setWallpaper()
      }
    }
-
  </script>
 {% endblock %}
@@ -0,0 +1,10 @@
+{% load static %}
+
+body {
+	{% if background.image %}
+	background-image: url('{{background.image.url}}');
+	{% if not background.repeat %}background-repeat:  no-repeat;{% endif %}
+	{% else %}
+	background-color: {{background.color}};
+	{% endif %}
+}
@@ -4,6 +4,11 @@
 <script src="https://unpkg.com/interactjs"></script>
 <link rel="stylesheet" href="https://unpkg.com/98.css" >
 <link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
+<style>
+	{% include 'background.css' with background=user.profile.background %}
+</style>
+<link href="{% static 'style.css'%}" rel="stylesheet" type="text/css" />
+
 <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
 <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
 <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}">