Merge branch 'issue72_missing_sidebar_icons' into 'dev'

Issue72: Missing Sidebar Icons

See merge request teaml5r/l5r5e!53

system/assets/ui/sidebar/actors.svg

@@ -1,13 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="48.2px" height="48.2px" viewBox="0 0 48.2 48.2" xml:space="preserve">
-     width="48.2px" height="48.2px" viewBox="0 0 48.2 48.2" style="enable-background:new 0 0 48.2 48.2;" xml:space="preserve">
+<defs>
+	<linearGradient id="iconGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+		<stop offset="0%" style="stop-color:#E0E0E0;stop-opacity:1" />
+		<stop offset="100%" style="stop-color:#FFFFFF;stop-opacity:1" />
+	</linearGradient>
+</defs>
 <style type="text/css">
-	.st0{fill:#030104;}
+	/* Gradient fill with contrasting stroke */
+	.fill-gradient{fill:url(#iconGradient);}
+	.stroke-contrast{stroke:#2a2a2a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
 </style>
 <g>
 	<g>
-		<path class="st0" d="M43,40c-0.9-7.2-2.3-13.9-5.7-20.2c-1-1.9-2.6-3.5-3.8-5.3c-0.2-0.3-0.5-0.7-0.7-1.1c0.7-0.6,1.4-1.3,2.1-2
+		<path class="fill-gradient stroke-contrast" d="M43,40c-0.9-7.2-2.3-13.9-5.7-20.2c-1-1.9-2.6-3.5-3.8-5.3c-0.2-0.3-0.5-0.7-0.7-1.1c0.7-0.6,1.4-1.3,2.1-2
 			c0.8-0.8,1.5-1.5,2.1-2.3c0.7-0.8,1.2-1.5,1.7-2.1c1-1.3,1.5-2.3,1.5-2.3s-1,0.5-2.3,1.5c-0.7,0.5-1.4,1.1-2.1,1.7
 			c-0.8,0.7-1.5,1.4-2.3,2.1c-0.4,0.4-0.9,0.9-1.3,1.4c-0.7-3.4-3.5-6.2-7-6.6c-3.7-0.5-7.6,1.7-8.5,5.4c-0.1,0.5-0.3,1-0.4,1.4
 			c-0.5-0.5-1-1-1.5-1.5C14,9.3,13.2,8.6,12.5,8c-0.8-0.7-1.5-1.2-2.1-1.7C9,5.3,8,4.8,8,4.8s0.5,1,1.5,2.3c0.5,0.7,1.1,1.4,1.7,2.1
@@ -17,10 +24,10 @@
 			c0.5,0.1,1,0,1.4-0.2c0.4-0.2,0.8-0.6,1.1-1.1c0.5-0.7,0.7-0.3,1.3,0.6c0.5,0.9,1.6,1.2,3,1.4c2.9,0.4,2.8,0.6,2.5,3.5
 			c0,0.5,0,1-0.1,1.4c-0.5,2.3,0.1,5.1-1.8,6.9c-0.8,0.7-1.6,1.1-1.5,1.2c0.1,0.1,1.1,0,2.1-0.1c2.4-0.3,4.9-0.7,7.4-1
 			C42.3,42.1,43.1,41.1,43,40z M21.3,8.2C20.2,9,19.2,9.3,19,9s0.4-1.2,1.5-1.9c1-0.7,2.1-1.1,2.3-0.7C23,6.6,22.3,7.5,21.3,8.2z"/>
-		<path class="st0" d="M32,35.9c0-0.2-0.9-0.2-1.9-0.1c-1,0.1-1.8,0.4-1.8,0.7c0,0.2,0.9,0.3,1.9,0.1C31.3,36.4,32,36.1,32,35.9z"/>
+		<path class="fill-gradient stroke-contrast" d="M32,35.9c0-0.2-0.9-0.2-1.9-0.1c-1,0.1-1.8,0.4-1.8,0.7c0,0.2,0.9,0.3,1.9,0.1C31.3,36.4,32,36.1,32,35.9z"/>
-		<path class="st0" d="M18.2,35.8c-0.9-0.2-1.7-0.1-1.8,0.1c0,0.2,0.7,0.5,1.6,0.7c0.9,0.2,1.7,0.1,1.8-0.1
+		<path class="fill-gradient stroke-contrast" d="M18.2,35.8c-0.9-0.2-1.7-0.1-1.8,0.1c0,0.2,0.7,0.5,1.6,0.7c0.9,0.2,1.7,0.1,1.8-0.1
 			C19.9,36.3,19.2,36,18.2,35.8z"/>
-		<path class="st0" d="M25.3,40.3c-0.1,0-0.3,0-0.5-0.1c-0.1,0-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.2-0.1c-0.1,0-0.3-0.1-0.4,0
+		<path class="fill-gradient stroke-contrast" d="M25.3,40.3c-0.1,0-0.3,0-0.5-0.1c-0.1,0-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.2-0.1c-0.1,0-0.3-0.1-0.4,0
 			c-0.1,0-0.3,0-0.4,0c-0.1,0-0.2,0.1-0.2,0.1c-0.1,0-0.2,0.1-0.2,0.1c-0.2,0.1-0.4,0-0.5,0.1c-0.1,0-0.2,0.1-0.2,0.1s0,0.1,0,0.3
 			c0,0.2,0,0.3,0.1,0.6c0.1,0.1,0.1,0.2,0.3,0.3c0.1,0.1,0.2,0.2,0.4,0.3c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3,0.1,0.5,0.1
 			c0.2,0,0.3,0,0.5-0.1c0.2,0,0.3-0.1,0.4-0.2c0.3-0.1,0.5-0.4,0.6-0.6c0.1-0.2,0.2-0.4,0.2-0.6c0-0.2,0-0.2,0-0.2

system/assets/ui/sidebar/scenes.svg

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-     width="48.2px" height="48.2px" viewBox="0 0 48.2 48.2" style="enable-background:new 0 0 48.2 48.2;" xml:space="preserve">
+     width="48.2px" height="48.2px" viewBox="-1 -1 50.2 50.2" style="enable-background:new -1 -1 50.2 50.2;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#1D1C1A;}
+	.st0{fill:#030104;}
 </style>
 <g>
 	<path class="st0" d="M48.7,4.8c0,0-0.1,0-0.2,0.1c-0.9,0.6-4.4,2-9.3,3.1c-4.6,1-10.8,1.8-16.7,2.3c-6.2,0.6-14.9,0.8-21.3-0.5

system/scripts/compendium/l5r5e-compendium-directory.js

@@ -0,0 +1,10 @@
+
+export class CompendiumDirectoryL5r5e extends CompendiumDirectory {
+
+    /** @inheritdoc */
+    async _prepareContext(options) {
+        const context = await super._prepareContext(options);
+        context.sidebarIcon = foundry.applications.sidebar.Sidebar.TABS.compendium.icon;
+        return context;
+    }
+}

system/scripts/main-l5r5e.js

@@ -38,6 +38,8 @@ import { ArmyFortificationSheetL5r5e } from "./items/army-fortification-sheet.js
 // JournalEntry
 import { JournalL5r5e } from "./journal.js";
 import { BaseJournalSheetL5r5e } from "./journals/base-journal-sheet.js";
+// Compendium
+import { CompendiumDirectoryL5r5e } from "./compendium/l5r5e-compendium-directory.js";
 // Specific
 import { MigrationL5r5e } from "./migration.js";
 import { GmToolbox } from "./gm/gm-toolbox.js";
@@ -66,6 +68,23 @@ Hooks.once("init", async () => {
     // Global access to L5R Config
     CONFIG.l5r5e = L5R5E;
 
+    // Setting up sidebar icons
+    CONFIG.ChatMessage.sidebarIcon = "l5r5e chatIcon";
+    CONFIG.Combat.sidebarIcon = "l5r5e combatIcon";
+    CONFIG.Scene.sidebarIcon = "l5r5e sceneIcon";
+    CONFIG.Actor.sidebarIcon = "l5r5e actorIcon";
+    CONFIG.Item.sidebarIcon = "l5r5e itemIcon";
+    CONFIG.JournalEntry.sidebarIcon = "l5r5e journalIcon";
+    CONFIG.RollTable.sidebarIcon = "l5r5e rolltableIcon";
+    CONFIG.Playlist.sidebarIcon = "l5r5e playlistIcon";
+    // Note: We don't have any custom icons here so just append l5r5e and type
+    CONFIG.Cards.sidebarIcon += " l5r5e cardsIcon";
+    CONFIG.Macro.sidebarIcon += " l5r5e macroIcon";
+    
+    // The compendium and the settings menu is registered a little different.
+    foundry.applications.sidebar.Sidebar.TABS.compendium.icon = "l5r5e compendiumIcon";
+    foundry.applications.sidebar.Sidebar.TABS.settings.icon = "l5r5e settingsIcon";
+
     // Assign custom classes and constants here
     CONFIG.Combat.documentClass = CombatL5r5e;
     CONFIG.Actor.documentClass = ActorL5r5e;
@@ -76,6 +95,8 @@ Hooks.once("init", async () => {
     CONFIG.Token.rulerClass = TokenRulerL5r5e;
     CONFIG.Canvas.rulerClass = RulerL5r5e;
 
+    CONFIG.ui.compendium = CompendiumDirectoryL5r5e;
+
     // Define custom Roll class
     CONFIG.Dice.rolls.unshift(RollL5r5e);
 

system/styles/scss/global-appv2.scss

@@ -48,10 +48,69 @@
     }
 }
 
+// Handle Sidebar here. Starting with custom icons
+$l5r5e-custom-icons: (
+  chatIcon: "../assets/ui/sidebar/chat.svg",
+  combatIcon: "../assets/ui/sidebar/combat-tracker.svg",
+  sceneIcon: "../assets/ui/sidebar/scenes.svg",
+  actorIcon: "../assets/ui/sidebar/actors.svg",
+  itemIcon: "../assets/ui/sidebar/object.svg",
+  journalIcon: "../assets/ui/sidebar/journal.svg",
+  rolltableIcon: "../assets/ui/sidebar/rolltable.svg",
+  playlistIcon: "../assets/ui/sidebar/playlist.svg",
+  compendiumIcon: "../assets/ui/sidebar/compendium.svg",
+  settingsIcon: "../assets/ui/sidebar/settings.svg"
+);
+
+$selectors: (
+  "#sidebar-tabs button.l5r5e",
+  "#sidebar-content .create-button.l5r5e",
+  "#sidebar-content i.l5r5e"
+);
+
+@each $selector in $selectors {
+  #{$selector} {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    @if str-index($selector, "i.") {
+      width: 2em;
+      height: 2em;
+      color: currentColor;
+    }
+    
+    @if str-index($selector, "create-button") {
+      filter: drop-shadow(0 0 3px var(--color-dark-1));
+    }
+    
+    // Apply masks for each icon
+    @each $name, $url in $l5r5e-custom-icons {
+      &.#{$name}::before {
+        content: "";
+        position: absolute;
+        width: 95%;
+        height: 95%;
+        background-color: currentColor;
+        mask: url($url) no-repeat center / contain;
+        -webkit-mask: url($url) no-repeat center / contain;
+        z-index: 0;
+      }
+    }
+    
+    // Generic plus icon badge
+    &.icon-plus::after {
+      z-index: 2;
+    }
+  }
+}
+
 #sidebar-tabs > menu {
     gap: 4px; // halve the distance between menu icons
 }
 
+
 #sidebar-content.expanded {
     background: url("../assets/ui/bgSidebar.webp") no-repeat;
     border-image: url("../assets/ui/macro-button.webp") 10 repeat;