use icons-in-css instead of icon font

author: winter 2025-01-23 17:23:58 +0000
committer: winter 2025-01-23 17:23:58 +0000
commit: ddccaf16f39a4bf710266edc389fcde124e7ef56 (patch)
tree: f3e2b5f78bd828adfc8f842e2b3c5a6c07bde26e /templates
parent: 1b60d5ca77a387122bcf900c2972edca63403155 (diff)
11 files changed, 30 insertions, 37 deletions
diff --git a/templates/actor_profile.php b/templates/actor_profile.php
index fed8e3b..2947a72 100644
--- a/templates/actor_profile.php
+++ b/templates/actor_profile.php
@@ -19,8 +19,8 @@ $user = UserAccount::findByCurrentSession();
         </div>
         <div>
             <?php if (!$actor->isLocal): ?>
-                <a class="icon material-symbols-outlined" href="<?= $actor->homepage ?>"
-                    title="<?= __('user.profile.openRemote') ?>" target="_blank">open_in_new</a>
+                <a class="material-symbols open-in-new" href="<?= $actor->homepage ?>"
+                    title="<?= __('user.profile.openRemote') ?>" target="_blank"></a>
             <?php endif; ?>
         </div>
     </div>
diff --git a/templates/head_tags.php b/templates/head_tags.php
index 66c706a..88ac6ff 100644
--- a/templates/head_tags.php
+++ b/templates/head_tags.php
@@ -1,6 +1,5 @@
 <link rel="stylesheet" href="/static/style.css">
 <link rel="stylesheet" href="https://fonts.bunny.net/css?family=dm-sans:400,400i,800,800i">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://unpkg.com/htmx.org@2.0.4"></script>
 <script src="https://unpkg.com/hyperscript.org@0.9.13"></script>
diff --git a/templates/interaction_button.php b/templates/interaction_button.php
index 7315f7d..368cb1a 100644
--- a/templates/interaction_button.php
+++ b/templates/interaction_button.php
@@ -6,18 +6,17 @@ $tooltip = match ($action) {
     'reshare' => __('note.action.reshare')
 };
 $icon = match ($action) {
-    'like' => 'favorite',
-    'dislike' => 'heart_broken',
-    'reshare' => $active ? 'repeat_on' : 'repeat'
+    'like' => $active ? 'favorite' : 'favorite-outline',
+    'dislike' => $active ? 'heart-broken' : 'heart-broken-outline',
+    'reshare' => $active ? 'repeat-on' : 'repeat'
 };
 $id = "interactButton-$action-$note->id";
 ?>
 <div class="interactButtonContainer <?= $action . ($active ? ' active' : '') ?>">
-    <button title="<?= $tooltip ?>" class="icon material-symbols-outlined <?= $active ? 'active' : '' ?>"
+    <button title="<?= $tooltip ?>" class="material-symbols <?= $icon ?>"
         hx-post="<?= "/fragment/note/$note->id/$action" ?>" hx-swap="outerHTML"
         hx-target="closest .interactButtonContainer" hx-disabled-elt="this" id="<?= $id ?>"
         _="on click wait 1s then trigger update on #liveTimelineUpdater" <?= ($disabled ?? false) ? 'disabled' : '' ?>>
-        <?= $icon ?>
     </button>
     <label for="<?= $id ?>" class="interactionCount"><?= $count ?? '' ?></label>
 </div>
 \ No newline at end of file
diff --git a/templates/left_side_navigation.php b/templates/left_side_navigation.php
index f03ee23..012cf23 100644
--- a/templates/left_side_navigation.php
+++ b/templates/left_side_navigation.php
@@ -8,17 +8,17 @@ $user = UserAccount::findByCurrentSession();
 if ($user != null) {
     $links = [[
         'href' => '/followrequests',
-        'icon' => 'person_add',
+        'icon' => 'person-add-outline',
         'label' => __('navigation.followRequests'),
         'unreadCount' => FollowRelation::countWhere("object = ? AND status = 'pending'", [$user->actor->id])
     ]];
     if ($user->isAdmin) {
-        $links[] = ['href' => '/admin/settings/instance', 'icon' => 'settings', 'label' => __('navigation.instanceSettings')];
+        $links[] = ['href' => '/admin/settings/instance', 'icon' => 'settings-outline', 'label' => __('navigation.instanceSettings')];
     }
 }
 $links[] = [
     'href' => '/about',
-    'icon' => 'info',
+    'icon' => 'info-outline',
     'label' => __('about.pageTitle')
 ];
 if ($user != null) {
diff --git a/templates/mobilepane_left.php b/templates/mobilepane_left.php
index 7dccca3..753383a 100644
--- a/templates/mobilepane_left.php
+++ b/templates/mobilepane_left.php
@@ -16,7 +16,7 @@ $settings = GlobalSettings::getInstance();
 <body hx-boost="true">
     <header>
         <nav>
-            <a id="leftPaneActivator" class="inlineIcon material-symbols-outlined" _="on click go back">close</a>
+            <a id="leftPaneActivator" class="inlineIcon material-symbols close" _="on click go back"></a>
             <span></span>
             <span></span>
             <span>
diff --git a/templates/mobilepane_right.php b/templates/mobilepane_right.php
index 4804f67..2a72c6e 100644
--- a/templates/mobilepane_right.php
+++ b/templates/mobilepane_right.php
@@ -19,7 +19,7 @@ $settings = GlobalSettings::getInstance();
                 <img id="loadingIndicator" class="htmx-indicator" src="/static/tail-spin.svg"></span>
             <span></span>
             <span></span>
-            <a id="rightPaneActivator" class="inlineIcon material-symbols-outlined" _="on click go back">close</a>
+            <a id="rightPaneActivator" class="inlineIcon material-symbols close" _="on click go back"></a>
         </nav>
     </header>
     <main class="mobilePane">
diff --git a/templates/note.php b/templates/note.php
index 3e978b9..d892656 100644
--- a/templates/note.php
+++ b/templates/note.php
@@ -32,23 +32,23 @@ if ($user != null) {
                     )
                     ?>
             </a>
-            <span class="privacyScope inlineIcon material-symbols-outlined" title="<?= match ($note->privacy->scope) {
-                NotePrivacyScope::NONE => __('note.privacy.scope.none'),
-                NotePrivacyScope::MUTUALS => __('note.privacy.scope.mutuals'),
-                NotePrivacyScope::FOLLOWERS => __('note.privacy.scope.followers'),
-                NotePrivacyScope::PUBLIC => __('note.privacy.scope.public')
-            } ?>"><?= match ($note->privacy->scope) {
-                 NotePrivacyScope::NONE => 'lock',
-                 NotePrivacyScope::MUTUALS => 'group',
-                 NotePrivacyScope::FOLLOWERS => 'groups',
-                 NotePrivacyScope::PUBLIC => 'public'
-             } ?></span>
+            <span class="privacyScope inlineIcon material-symbols <?= match ($note->privacy->scope) {
+                NotePrivacyScope::NONE => 'lock',
+                NotePrivacyScope::MUTUALS => 'group',
+                NotePrivacyScope::FOLLOWERS => 'groups',
+                NotePrivacyScope::PUBLIC => 'public'
+            } ?>" title="<?= match ($note->privacy->scope) {
+                 NotePrivacyScope::NONE => __('note.privacy.scope.none'),
+                 NotePrivacyScope::MUTUALS => __('note.privacy.scope.mutuals'),
+                 NotePrivacyScope::FOLLOWERS => __('note.privacy.scope.followers'),
+                 NotePrivacyScope::PUBLIC => __('note.privacy.scope.public')
+             } ?>"></span>
         </div>
 
         <?php if (isset($note->inReplyTo)): ?>
             <div class="replyInfo">
                 <a href="/@/<?= $note->inReplyTo->author->getFullHandle() ?>/note/<?= $note->inReplyTo->id ?>">
-                    <span class="material-symbols-outlined inlineIcon">reply</span>
+                    <span class="material-symbols reply inlineIcon"></span>
                     <?= sprintf(__('note.info.replyTo'),
                         '<b>' . htmlspecialchars($note->inReplyTo->author->displayName)) . '</b>' ?>
                 </a>
diff --git a/templates/reason_reshared.php b/templates/reason_reshared.php
index 2c1e4c5..b382c6c 100644
--- a/templates/reason_reshared.php
+++ b/templates/reason_reshared.php
@@ -1,5 +1,5 @@
 <div class="timelineReason">
-    <span class="icon material-symbols-outlined">repeat</span>
+    <span class="material-symbols repeat"></span>
     <span>
         <?php
         $handle = $actor->getFullHandle();
diff --git a/templates/reply_button.php b/templates/reply_button.php
index b86a21f..af36000 100644
--- a/templates/reply_button.php
+++ b/templates/reply_button.php
@@ -1,12 +1,11 @@
 <?php
 use Digitigrade\Model\Note;
 
-$icon = $note->countReplies() > 0 ? 'reply_all' : 'reply';
+$icon = $note->countReplies() > 0 ? 'reply-all' : 'reply';
 $id = "interactButton-reply-$note->id";
 ?>
 <div class="interactButtonContainer reply">
-    <button title="<?= __('note.action.reply') ?>" class="icon material-symbols-outlined reply" id="<?= $id ?>"
-        <?= ($disabled ?? false) ? 'disabled' : '' ?>
-        _="on click send toggle to [me, next .noteReplyForm] on toggle toggle .active on closest <div/>"><?= $icon ?></button>
+    <button title="<?= __('note.action.reply') ?>" class="material-symbols <?= $icon ?>" id="<?= $id ?>" <?= ($disabled ?? false) ? 'disabled' : '' ?>
+        _="on click send toggle to [me, next .noteReplyForm] on toggle toggle .active on closest <div/>"></button>
     <label for="<?= $id ?>"><?= $count ?? '' ?></label>
 </div>
 \ No newline at end of file
diff --git a/templates/side_navigation.php b/templates/side_navigation.php
index 9b21833..94bff5e 100644
--- a/templates/side_navigation.php
+++ b/templates/side_navigation.php
@@ -2,7 +2,7 @@
     <?php foreach ($links as $entry): ?>
         <li>
             <a href="<?= $entry['href'] ?>" <?= ($entry['confirmation'] ?? null) ? ('hx-confirm="' . $entry['confirmation'] . '"') : '' ?>>
-                <div class="icon material-symbols-outlined"><?= $entry['icon'] ?></div>
+                <div class="material-symbols <?= $entry['icon'] ?>"></div>
                 <div><?= $entry['label'] ?></div>
                 <?php if (isset($entry['unreadCount']) && $entry['unreadCount'] > 0) {
                     call_template('unread_indicator', ['count' => $entry['unreadCount']]);
diff --git a/templates/skeleton.php b/templates/skeleton.php
index a7b6e95..a9c3424 100644
--- a/templates/skeleton.php
+++ b/templates/skeleton.php
@@ -18,9 +18,7 @@ $settings = GlobalSettings::getInstance();
     <header>
         <nav>
             <?php if ($user != null): ?>
-                <a id="leftPaneActivator" href="/mobilepane/left" class="inlineIcon material-symbols-outlined">
-                    menu
-                </a>
+                <a id="leftPaneActivator" href="/mobilepane/left" class="inlineIcon material-symbols menu"></a>
             <?php else: ?>
                 <span id="leftPaneActivator"></span>
             <?php endif; ?>
@@ -37,9 +35,7 @@ $settings = GlobalSettings::getInstance();
             <img id="loadingIndicator" class="htmx-indicator" src="/static/tail-spin.svg">
 
             <?php if ($user != null): ?>
-                <a id="rightPaneActivator" href="/mobilepane/right" class="inlineIcon material-symbols-outlined">
-                    notifications
-                </a>
+                <a id="rightPaneActivator" href="/mobilepane/right" class="inlineIcon material-symbols notifications"></a>
             <?php endif; ?>
 
             <?php if ($user == null):
author	winter	2025-01-23 17:23:58 +0000
committer	winter	2025-01-23 17:23:58 +0000
commit	ddccaf16f39a4bf710266edc389fcde124e7ef56 (patch)
tree	f3e2b5f78bd828adfc8f842e2b3c5a6c07bde26e /templates
parent	1b60d5ca77a387122bcf900c2972edca63403155 (diff)