merge: develop

cesium · Sep 23, 2024 · a996ead · a996ead
2 parents 378c32a + 783805f
commit a996ead
Show file tree

Hide file tree

Showing 72 changed files with 1,518 additions and 1,229 deletions.
diff --git a/assets/css/components/avatar.css b/assets/css/components/avatar.css
@@ -21,23 +21,23 @@
 /* Avatar - sizes */
 
 .atomic-avatar--xs {
-  @apply h-8 w-8 text-xs;
+  @apply size-8 text-xs;
 }
 
 .atomic-avatar--sm {
-  @apply h-12 w-12 text-lg;
+  @apply size-12 text-lg;
 }
 
 .atomic-avatar--md {
-  @apply h-16 w-16 text-lg;
+  @apply size-16 text-lg;
 }
 
 .atomic-avatar--lg {
-  @apply h-20 w-20 text-4xl;
+  @apply size-20 text-4xl;
 }
 
 .atomic-avatar--xl {
-  @apply h-24 w-24 text-4xl;
+  @apply size-24 text-4xl;
 }
 
 /* Avatar - colors */
@@ -94,4 +94,10 @@
 
 .atomic-avatar--src {
   @apply bg-transparent;
+}
+
+/* Avatar Group */
+
+.atomic-avatar-grouped {
+  @apply ring-1 ring-white;
 }
diff --git a/assets/css/components/button.css b/assets/css/components/button.css
@@ -159,19 +159,19 @@
 }
 
 .atomic-button__icon--xs {
-  @apply w-3 h-3;
+  @apply !size-3
 }
 .atomic-button__icon--sm {
-  @apply w-4 h-4;
+  @apply !size-4
 }
 .atomic-button__icon--md {
-  @apply w-5 h-5;
+  @apply !size-5
 }
 .atomic-button__icon--lg {
-  @apply w-5 h-5;
+  @apply !size-5
 }
 .atomic-button__icon--xl {
-  @apply w-6 h-6;
+  @apply !size-6
 }
 
 /* Buttons - with full width */
@@ -185,96 +185,6 @@
   @apply flex items-center gap-2 whitespace-nowrap;
 }
 
-/* Icon Button */
-
-.atomic-icon-button {
-  @apply inline-block p-2 rounded-full;
-}
-
-/* Icon Buttons - colors */
-
-.atomic-icon-button--primary {
-  @apply text-primary-600 dark:text-primary-500;
-}
-.atomic-icon-button--secondary {
-  @apply text-secondary-600 dark:text-secondary-500;
-}
-.atomic-icon-button--gray {
-  @apply text-gray-600 dark:text-gray-500;
-}
-.atomic-icon-button--info {
-  @apply text-info-600 dark:text-info-500;
-}
-.atomic-icon-button--success {
-  @apply text-success-600 dark:text-success-500;
-}
-.atomic-icon-button--warning {
-  @apply text-warning-600 dark:text-warning-500;
-}
-.atomic-icon-button--danger {
-  @apply text-danger-600 dark:text-danger-500;
-}
-
-/* Icon Buttons - background colors */
-
-.atomic-icon-button-bg--primary {
-  @apply hover:bg-primary-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--secondary {
-  @apply hover:bg-secondary-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--gray {
-  @apply hover:bg-gray-100 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--info {
-  @apply hover:bg-info-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--success {
-  @apply hover:bg-success-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--warning {
-  @apply hover:bg-warning-50 dark:hover:bg-gray-800;
-}
-.atomic-icon-button-bg--danger {
-  @apply hover:bg-danger-50 dark:hover:bg-gray-800;
-}
-
-/* Icon Button - sizes */
-
-.atomic-icon-button--xs {
-  @apply w-9 h-9;
-}
-.atomic-icon-button--sm {
-  @apply w-10 h-10;
-}
-.atomic-icon-button--md {
-  @apply w-11 h-11;
-}
-.atomic-icon-button--lg {
-  @apply w-12 h-12;
-}
-.atomic-icon-button--xl {
-  @apply w-14 h-14;
-}
-
-/* Icon Button - spinner */
-
-.atomic-icon-button-spinner--xs {
-  @apply w-5 h-5;
-}
-.atomic-icon-button-spinner--sm {
-  @apply w-6 h-6;
-}
-.atomic-icon-button-spinner--md {
-  @apply w-7 h-7;
-}
-.atomic-icon-button-spinner--lg {
-  @apply w-8 h-8;
-}
-.atomic-icon-button-spinner--xl {
-  @apply w-10 h-10;
-}
-
 /* Button - disabled */
 
 .atomic-button--disabled {

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -1,6 +1,9 @@
 const colors = require("tailwindcss/colors");
 const plugin = require('tailwindcss/plugin');
 
+const fs = require("fs");
+const path = require("path");
+
 module.exports = {
   darkMode: 'selector',
   content: [
@@ -25,23 +28,23 @@ module.exports = {
       },
       keyframes: {
         wave: {
-            '0%': { transform: 'rotate(0.0deg)' },
-            '15%': { transform: 'rotate(14.0deg)' },
-            '30%': { transform: 'rotate(-8.0deg)' },
-            '40%': { transform: 'rotate(14.0deg)' },
-            '50%': { transform: 'rotate(-4.0deg)' },
-            '60%': { transform: 'rotate(10.0deg)' },
-            '70%': { transform: 'rotate(0.0deg)' },
-            '100%': { transform: 'rotate(0.0deg)' },
+          '0%': { transform: 'rotate(0.0deg)' },
+          '15%': { transform: 'rotate(14.0deg)' },
+          '30%': { transform: 'rotate(-8.0deg)' },
+          '40%': { transform: 'rotate(14.0deg)' },
+          '50%': { transform: 'rotate(-4.0deg)' },
+          '60%': { transform: 'rotate(10.0deg)' },
+          '70%': { transform: 'rotate(0.0deg)' },
+          '100%': { transform: 'rotate(0.0deg)' },
         },
         progress: {
-            '0%': { width: '0%' },
-            '100%': { width: '100%' },
+          '0%': { width: '0%' },
+          '100%': { width: '100%' },
         }
       },
       animation: {
-          wave: 'wave 1.5s infinite',
-          progress: 'progress 5s linear 1'
+        wave: 'wave 1.5s infinite',
+        progress: 'progress 5s linear 1'
       },
       backgroundSize: {
         '75': '75%'
@@ -50,9 +53,92 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/forms'),
+
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
     plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
     plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
     plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
-    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
+    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
+
+    // Embeds Heroicons (https://heroicons.com) into app.css bundle
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"],
+        ["-micro", "/16/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          let size = theme("spacing.6")
+          if (name.endsWith("-mini")) {
+            size = theme("spacing.5")
+          } else if (name.endsWith("-micro")) {
+            size = theme("spacing.4")
+          }
+
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": size,
+            "height": size
+          }
+        }
+      }, { values })
+    }),
+
+    // Embeds Tabler icons (https://tabler.io/icons) into app.css bundle
+    plugin(function ({ matchComponents, theme }) {
+      let iconsDir = path.join(__dirname, "../deps/tabler_icons/icons")
+      let values = {}
+      let icons = [
+        ["", "/outline"],
+        ["-filled", "/filled"],
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
+        })
+      })
+      matchComponents({
+        "tabler": ({ name, fullPath }) => {
+          let content = fs.readFileSync(fullPath).toString()
+            .replace(/\r?\n|\r/g, "")
+            .replace(/width="[^"]*"/, "")
+            .replace(/height="[^"]*"/, "");
+
+          return {
+            [`--tabler-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--tabler-${name})`,
+            "mask": `var(--tabler-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": theme("spacing.5"),
+            "height": theme("spacing.5")
+          }
+        }
+      }, { values })
+    })
   ]
 }
diff --git a/lib/atomic/schema.ex b/lib/atomic/schema.ex
@@ -2,16 +2,16 @@ defmodule Atomic.Schema do
   @moduledoc """
   The application Schema for all the modules, providing Ecto.UUIDs as default id.
   """
-  alias Atomic.Time
+  use Gettext, backend: AtomicWeb.Gettext
 
-  import AtomicWeb.Gettext
+  alias Atomic.Time
 
   defmacro __using__(_) do
     quote do
       use Ecto.Schema
       use Waffle.Ecto.Schema
+      use Gettext, backend: AtomicWeb.Gettext
 
-      import AtomicWeb.Gettext
       import Ecto.Changeset
       import Ecto.Query
 

diff --git a/lib/atomic_web.ex b/lib/atomic_web.ex
@@ -20,9 +20,9 @@ defmodule AtomicWeb do
   def controller do
     quote do
       use Phoenix.Controller, namespace: AtomicWeb
+      use Gettext, backend: AtomicWeb.Gettext
 
       import Plug.Conn
-      import AtomicWeb.Gettext
 
       alias AtomicWeb.Router.Helpers, as: Routes
     end
@@ -81,7 +81,7 @@ defmodule AtomicWeb do
   def channel do
     quote do
       use Phoenix.Channel
-      import AtomicWeb.Gettext
+      use Gettext, backend: AtomicWeb.Gettext
     end
   end
 
@@ -102,8 +102,10 @@ defmodule AtomicWeb do
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View
 
+      # Custom imports
+      use Gettext, backend: AtomicWeb.Gettext
+
       import AtomicWeb.ErrorHelpers
-      import AtomicWeb.Gettext
       import AtomicWeb.Helpers
 
       alias Atomic.Uploaders

diff --git a/lib/atomic_web/components/activity.ex b/lib/atomic_web/components/activity.ex
@@ -46,21 +46,21 @@ defmodule AtomicWeb.Components.Activity do
         <div class="flex space-x-4">
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:clock} solid class="h-5 w-5" />
+              <.icon name="hero-clock-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= relative_datetime(@activity.start) %></span>
               <span class="sr-only">starting in</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:user_group} solid class="h-5 w-5" />
+              <.icon name="hero-user-group-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.enrolled %>/<%= @activity.maximum_entries %></span>
               <span class="sr-only">enrollments</span>
             </span>
           </span>
           <span class="inline-flex items-center text-sm">
             <span class="inline-flex space-x-2 text-zinc-400">
-              <.icon name={:map_pin} solid class="h-5 w-5" />
+              <.icon name="hero-map-pin-solid" class="size-5" />
               <span class="font-medium text-gray-900"><%= @activity.location.name %></span>
               <span class="sr-only">location</span>
             </span>