add icons

src/vinywaji/gui/static_src/package.json

@@ -6,8 +6,8 @@
     "start": "npm run dev",
     "build": "npm run build:clean && npm run build:tailwind",
     "build:clean": "rimraf ../static/css/dist",
-    "build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css --minify",
-    "dev": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",
+    "build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i src/styles.scss -o ../static/css/dist/styles.css --minify",
+    "dev": "cross-env NODE_ENV=development tailwindcss --postcss -i src/styles.scss -o ../static/css/dist/styles.css -w",
     "tailwindcss": "node ./node_modules/tailwindcss/lib/cli.js"
   },
   "keywords": [],

src/vinywaji/gui/templates/base.html

@@ -54,7 +54,7 @@
                 document.documentElement.classList.remove('dark')
             }
 
-            document.querySelector('#modeSwitch').dataset.mode = mode;
+            document.querySelector('#modeSwitch > [data-icon]').dataset.icon = mode;
         }
         updateMode();
 

src/vinywaji/gui/templates/components/forms.html

@@ -1,11 +1,28 @@
 {% load macros %}
 
-{% macro button title type="submit" class="" color="primary" darkColor=False %}
+{% macro button title type="submit" class="" color="primary" icon=False onclick=False dataA=False dataB=False dataC=False darkColor=False %}
     <button class="bg-{{ color }}-400 hover:bg-{{ color }}-500
-    dark:bg-{% if darkColor %}{{ darkColor }}{% else %}{{ color }}{% endif %}-600
-    dark:hover:bg-{% if darkColor %}{{ darkColor }}{% else %}{{ color }}{% endif %}-700
-    px-4 py-2 rounded-lg min-w-30 {{ class }}" type="{{ type }}">
-        {{ title }}
+        dark:bg-{% if darkColor %}{{ darkColor }}{% else %}{{ color }}{% endif %}-600
+        dark:hover:bg-{% if darkColor %}{{ darkColor }}{% else %}{{ color }}{% endif %}-700
+        px-4 py-2 rounded-lg min-w-30 flex items-center justify-center {{ class }}"
+        type="{{ type }}"
+        {% if onclick %}
+            onclick="{{ onclick }}"
+        {% endif %}
+        {% if dataA %}
+            data-a="{{ dataA }}"
+        {% endif %}
+        {% if dataB %}
+            data-b="{{ dataB }}"
+        {% endif %}
+        {% if dataC %}
+            data-c="{{ dataC }}"
+        {% endif %}
+    >
+        {% if icon %}
+            <span data-icon="{{ icon }}" class="size-m mr-2"></span>
+        {% endif %}
+        <span>{{ title }}</span>
     </button>
 {% endmacro %}
 

src/vinywaji/gui/templates/components/forms/add_webhook.html

@@ -11,6 +11,6 @@
 
         {% usemacro input "Transaction description" "transaction_description" type="text" placeholder="fritz-kola" %}
 
-        {% usemacro button "Add Webhook" class="col-span-full" %}
+        {% usemacro button "Add Webhook" icon="add" class="col-span-full" %}
     </div>
 </form>

src/vinywaji/gui/templates/components/forms/pay-up.html

@@ -7,6 +7,6 @@
     <div class="grid grid-cols-1 sm:grid-cols-3 justify-stretch gap-2">
         {% usemacro input "Deposit Value (€)" "amount" type="number" required=True step="0.1" min="0.1" class="sm:col-span-2" %}
 
-        {% usemacro button "Deposit" color="lime" darkColor="green" %}
+        {% usemacro button "Deposit" icon="deposit" color="lime" darkColor="green" %}
     </div>
 </form>

src/vinywaji/gui/templates/components/forms/record-purchase.html

@@ -9,6 +9,6 @@
 
         {% usemacro input "Description" "description" type="text" placeholder="fritz-kola" %}
 
-        {% usemacro button "Purchase" color="orange" class="col-span-2 sm:col-span-1" %}
+        {% usemacro button "Purchase" icon="purchase" color="orange" class="col-span-2 sm:col-span-1" %}
     </div>
 </form>

src/vinywaji/gui/templates/components/navbar.html

@@ -2,16 +2,32 @@
     <div class="bg-primary-400 dark:bg-primary-600 text-black dark:text-white flex justify-between px-2 items-stretch">
         <a href="/" class="text-3xl font-bold place-self-center">{{ title }}</a>
         <ul class="flex items-stretch">
-            <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors" href="#"
-                   onclick="switchMode()" id="modeSwitch">Mode</a></li>
+            <li>
+                <a class="px-2  h-16 hover:bg-primary-700 transition-colors flex items-center" href="#"
+                   onclick="switchMode()" id="modeSwitch">
+                    <span data-icon="user" class="size-m"></span>
+                </a>
+            </li>
             {% if request.user.is_anonymous %}
-                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors"
-                       href="{% url 'simple_openid_connect:login' %}">Login</a></li>
+                <li>
+                    <a class="px-2 h-16 hover:bg-primary-700 transition-colors flex items-center"
+                       href="{% url 'simple_openid_connect:login' %}" aria-description="login">
+                        <span data-icon="login" class="size-m"></span>
+                    </a>
+                </li>
             {% else %}
-                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors"
-                       href="{% url 'profile' %}">Profile</a></li>
-                <li><a class="block px-2 leading-[4rem] hover:bg-primary-700 transition-colors"
-                       href="{% url 'simple_openid_connect:logout' %}">Logout</a></li>
+                <li>
+                    <a class="px-2 h-16 hover:bg-primary-700 transition-colors flex items-center"
+                       href="{% url 'profile' %}" aria-description="profile">
+                        <span data-icon="user" class="size-m"></span>
+                </a>
+                </li>
+                <li>
+                    <a class="px-2 h-16 hover:bg-primary-700 transition-colors flex items-center"
+                       href="{% url 'simple_openid_connect:logout' %}" aria-description="logout">
+                        <span data-icon="logout" class="size-m"></span>
+                    </a>
+                </li>
             {% endif %}
         </ul>
     </div>

src/vinywaji/gui/templates/views/profile.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% load custom_filters %}
 {% load static %}
+{% load macros %}
+{% loadmacros "components/forms.html" %}
 
 {% block authorized-content %}
     <h4 class="text-4xl leading-normal">
@@ -70,26 +72,14 @@ <h5 class="text-2xl leading-normal">Webhooks</h5>
                                          bg-lime-300 dark:bg-green-900
                                      {% endif %}
                                   text-center rounded-lg">
-                                    {{ webhook.amount|toeuro }} €
+                                    {{ webhook.amount|toEuro }} €
                                 </span>
-
-
                             <span class="ml-4"><b>Description:</b> {{ webhook.transaction_description }}</span>
                         </div>
                         <div>
-                            <button data-key="{{ webhook.trigger_key }}"
-                                    onclick="writeClipboardText(`{{ request.scheme }}://
-
-
-
-                                            {{ request.META.HTTP_HOST }}{% url 'webhook-trigger' trigger=webhook.trigger_key %}`)"
-                                    class="text-center bg-primary-400 hover:bg-primary-500 dark:bg-primary-600 dark:hover:bg-primary-700 px-4 py-2 rounded-lg min-w-30">
-                                Copy URL
-                            </button>
-                            <button onclick="deleteWebhook('{{ webhook.id }}')"
-                                    class="text-center bg-red-400 hover:bg-red-500 dark:bg-red-600 dark:hover:bg-red-700 px-4 py-2 rounded-lg min-w-30">
-                                Delete
-                            </button>
+                            {% url 'webhook-trigger' trigger=webhook.trigger_key as webhook_url %}
+                            {% usemacro button "Copy URL" icon="copy" dataA=request.scheme dataB=request.META.HTTP_HOST dataC=webhook_url onclick="writeClipboardText(`${this.dataset.a}://${this.dataset.b}${this.dataset.c}`)" color="primary" %}
+                            {% usemacro button "Delete" icon="delete" dataA=webhook.id onclick="deleteWebhook(this.dataset.a)" color="red" %}
                         </div>
                     </dd>
                 </div>

src/vinywaji/gui/templatetags/custom_filters.py

@@ -4,7 +4,7 @@
 
 
 @register.filter
-def toeuro(value):
+def toEuro(value):
     try:
         value = int(value) / 100
         return f"{value:.2f}"