Skip to content

Commit

Permalink
#321 Use resources for Icon
Browse files Browse the repository at this point in the history
  • Loading branch information
TheHadiAhmadi committed Dec 13, 2023
1 parent 0d8646b commit 514b318
Show file tree
Hide file tree
Showing 7 changed files with 256 additions and 69 deletions.
70 changes: 14 additions & 56 deletions src/FluentCMS.Web.UI/Components/Core/Icon.razor
Original file line number Diff line number Diff line change
@@ -1,66 +1,18 @@
@inherits BaseComponent
@using System.Resources;

<span class=@this.GetClasses() @attributes=@AdditionalAttributes>
@switch (Name)
{
case IconNameEnum.Plus:
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 1v16M1 9h16" />
</svg>
break;
case IconNameEnum.Delete:
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
<path
d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z" />
</svg>
break;
case IconNameEnum.InformationFilled:
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z">
</path>
</svg>
break;
case IconNameEnum.Settings:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="mr-2 w-4 h-4"
aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z">
</path>
</svg>
break;
case IconNameEnum.Filter:
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
clip-rule="evenodd"></path>
</svg>
break;
case IconNameEnum.Search:
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z">
</path>
</svg>
break;
case IconNameEnum.Edit:
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 -ml-0.5" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
<path fill-rule="evenodd"
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
clip-rule="evenodd"></path>
</svg>
break;

}
@IconContent
</span>

@code {
[Inject(Key = "FluentCMS.Web.UI.Resources.Icons")]
public required ResourceManager ResourceManager { get; set; }

[Parameter]
public IconNameEnum Name { get; set; } = IconNameEnum.Default;
public IconDefinition Name { get; set; } = IconDefinition.Default;

public MarkupString IconContent { get; set; } = default!;

[Parameter]
[CssProperty]
Expand All @@ -69,4 +21,10 @@
[Parameter]
[CssProperty]
public SizeEnum Size { get; set; } = SizeEnum.Default;

protected override void OnInitialized()
{
base.OnInitialized();
IconContent = (MarkupString)(ResourceManager.GetString(Name.IconName) ?? throw new Exception("Invalid Icon Name"));
}
}
26 changes: 13 additions & 13 deletions src/FluentCMS.Web.UI/Previews/Pages/Components.razor
Original file line number Diff line number Diff line change
Expand Up @@ -28,48 +28,48 @@
<div class="py-8">
<h2 class="font-bold text-2xl">Icons</h2>
<div class="py-4 flex flex-col gap-4">
<Icon Name="IconNameEnum.Plus" />
<Icon Name="IconNameEnum.InformationFilled" />
<Icon Name="IconNameEnum.Delete" />
<Icon Name="IconDefinition.Plus" />
<Icon Name="IconDefinition.InformationFilled" />
<Icon Name="IconDefinition.Delete" />
</div>
<div class="py-4 flex flex-col gap-4">
<h1 class="text-4xl">
<Icon Name="IconNameEnum.InformationFilled" /> Default
<Icon Name="IconDefinition.InformationFilled" /> Default
</h1>


<div>
<Icon Size="SizeEnum.Small" Name="IconNameEnum.InformationFilled" /> Small
<Icon Size="SizeEnum.Small" Name="IconDefinition.InformationFilled" /> Small
</div>

<div>
<Icon Size="SizeEnum.Medium" Name="IconNameEnum.InformationFilled" /> Medium
<Icon Size="SizeEnum.Medium" Name="IconDefinition.InformationFilled" /> Medium

</div>
<div>
<Icon Size="SizeEnum.Large" Name="IconNameEnum.InformationFilled" /> Large
<Icon Size="SizeEnum.Large" Name="IconDefinition.InformationFilled" /> Large
</div>
</div>
<div class="py-4 flex flex-col gap-4">
<h1 class="text-4xl">
<Icon Color="ColorEnum.Primary" Name="IconNameEnum.InformationFilled" /> Primary
<Icon Color="ColorEnum.Primary" Name="IconDefinition.InformationFilled" /> Primary
</h1>
<h1 class="text-4xl">
<Icon Color="ColorEnum.Secondary" Name="IconNameEnum.InformationFilled" /> Secondary
<Icon Color="ColorEnum.Secondary" Name="IconDefinition.InformationFilled" /> Secondary
</h1>
<h1 class="text-4xl">
<Icon Color="ColorEnum.Success" Name="IconNameEnum.InformationFilled" /> Success
<Icon Color="ColorEnum.Success" Name="IconDefinition.InformationFilled" /> Success
</h1>
<h1 class="text-4xl">
<Icon Color="ColorEnum.Danger" Name="IconNameEnum.InformationFilled" /> Danger
<Icon Color="ColorEnum.Danger" Name="IconDefinition.InformationFilled" /> Danger
</h1>

<h1 class="text-4xl">
<Icon Color="ColorEnum.Info" Name="IconNameEnum.InformationFilled" /> Info
<Icon Color="ColorEnum.Info" Name="IconDefinition.InformationFilled" /> Info
</h1>

<h1 class="text-4xl">
<Icon Color="ColorEnum.Warning" Name="IconNameEnum.InformationFilled" /> Warning
<Icon Color="ColorEnum.Warning" Name="IconDefinition.InformationFilled" /> Warning
</h1>

</div>
Expand Down
10 changes: 10 additions & 0 deletions src/FluentCMS.Web.UI/Program.cs
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
using FluentCMS.Api;
using FluentCMS.Entities;
using FluentCMS.Web.UI;
using FluentCMS.Web.UI.Resources;
using System.Resources;

var builder = WebApplication.CreateBuilder(args);

Expand Down Expand Up @@ -40,6 +42,14 @@

services.AddJwtAuthentication(builder.Configuration);

// register IconResourceManager
services.AddKeyedScoped<ResourceManager>(typeof(Icons).FullName, (_, _) =>
{
var iconsType = typeof(Icons);
return new ResourceManager(iconsType.FullName!, iconsType.Assembly);
});


var app = builder.Build();

if (app.Environment.IsDevelopment())
Expand Down
22 changes: 22 additions & 0 deletions src/FluentCMS.Web.UI/Resources/IconDefinition.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
namespace FluentCMS.Web.UI.Resources;

// Enum Class for Icons
public class IconDefinition
{
// home icon
public static readonly IconDefinition Default = new("Default");
public static readonly IconDefinition Home = new("Home");
public static readonly IconDefinition Delete = new("Delete");
public static readonly IconDefinition Plus = new("Plus");
public static readonly IconDefinition Search = new("Search");
public static readonly IconDefinition Settings = new("Settings");
public static readonly IconDefinition Filter = new("Filter");
public static readonly IconDefinition InformationFilled = new("InformationFilled");

private IconDefinition(string iconName)
{
IconName = iconName;
}

public string IconName { get; }
}
6 changes: 6 additions & 0 deletions src/FluentCMS.Web.UI/Resources/Icons.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
namespace FluentCMS.Web.UI.Resources;

// marker class for Icons.resx
public class Icons
{
}
189 changes: 189 additions & 0 deletions src/FluentCMS.Web.UI/Resources/Icons.resx
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<?xml version="1.0" encoding="utf-8"?>
<root>
<!--
Microsoft ResX Schema
Version 2.0
The primary goals of this format is to allow a simple XML format
that is mostly human readable. The generation and parsing of the
various data types are done through the TypeConverter classes
associated with the data types.
Example:
... ado.net/XML headers & schema ...
<resheader name="resmimetype">text/microsoft-resx</resheader>
<resheader name="version">2.0</resheader>
<resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
<resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
<data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
<data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
<data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
<value>[base64 mime encoded serialized .NET Framework object]</value>
</data>
<data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
<value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
<comment>This is a comment</comment>
</data>
There are any number of "resheader" rows that contain simple
name/value pairs.
Each data row contains a name, and value. The row also contains a
type or mimetype. Type corresponds to a .NET class that support
text/value conversion through the TypeConverter architecture.
Classes that don't support this are serialized and stored with the
mimetype set.
The mimetype is used for serialized objects, and tells the
ResXResourceReader how to depersist the object. This is currently not
extensible. For a given mimetype the value must be set accordingly:
Note - application/x-microsoft.net.object.binary.base64 is the format
that the ResXResourceWriter will generate, however the reader can
read any of the formats listed below.
mimetype: application/x-microsoft.net.object.binary.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.soap.base64
value : The object must be serialized with
: System.Runtime.Serialization.Formatters.Soap.SoapFormatter
: and then encoded with base64 encoding.
mimetype: application/x-microsoft.net.object.bytearray.base64
value : The object must be serialized into a byte array
: using a System.ComponentModel.TypeConverter
: and then encoded with base64 encoding.
-->
<xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
<xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
<xsd:element name="root" msdata:IsDataSet="true">
<xsd:complexType>
<xsd:choice maxOccurs="unbounded">
<xsd:element name="metadata">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" />
</xsd:sequence>
<xsd:attribute name="name" use="required" type="xsd:string" />
<xsd:attribute name="type" type="xsd:string" />
<xsd:attribute name="mimetype" type="xsd:string" />
<xsd:attribute ref="xml:space" />
</xsd:complexType>
</xsd:element>
<xsd:element name="assembly">
<xsd:complexType>
<xsd:attribute name="alias" type="xsd:string" />
<xsd:attribute name="name" type="xsd:string" />
</xsd:complexType>
</xsd:element>
<xsd:element name="data">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
<xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
<xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
<xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
<xsd:attribute ref="xml:space" />
</xsd:complexType>
</xsd:element>
<xsd:element name="resheader">
<xsd:complexType>
<xsd:sequence>
<xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
</xsd:sequence>
<xsd:attribute name="name" type="xsd:string" use="required" />
</xsd:complexType>
</xsd:element>
</xsd:choice>
</xsd:complexType>
</xsd:element>
</xsd:schema>
<resheader name="resmimetype">
<value>text/microsoft-resx</value>
</resheader>
<resheader name="version">
<value>2.0</value>
</resheader>
<resheader name="reader">
<value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<resheader name="writer">
<value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
</resheader>
<data name="Default" xml:space="preserve">
<value />
</data>
<data name="Delete" xml:space="preserve">
<value>&lt;svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20"&gt;
&lt;path
d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0
0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z" /&gt;
&lt;/svg&gt;</value>
</data>
<data name="Filter" xml:space="preserve">
<value>&lt;svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor"&gt;
&lt;path fill-rule="evenodd"
d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293
6.707A1 1 0 013 6V3z"
clip-rule="evenodd"&gt;&lt;/path&gt;
&lt;/svg&gt;</value>
</data>
<data name="Home" xml:space="preserve">
<value>&lt;svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"&gt;
&lt;path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /&gt;
&lt;/svg&gt;</value>
</data>
<data name="InformationFilled" xml:space="preserve">
<value>&lt;svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"&gt;
&lt;path
d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1
0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"&gt;
&lt;/path&gt;
&lt;/svg&gt;</value>
</data>
<data name="Plus" xml:space="preserve">
<value>&lt;svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 18 18"&gt;
&lt;path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 1v16M1 9h16" /&gt;
&lt;/svg&gt;</value>
</data>
<data name="Search" xml:space="preserve">
<value>&lt;svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;path fill-rule="evenodd" clip-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012
8z"&gt;
&lt;/path&gt;
&lt;/svg&gt;</value>
</data>
<data name="Settings" xml:space="preserve">
<value>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="mr-2 w-4 h-4"
aria-hidden="true"&gt;
&lt;path fill-rule="evenodd" clip-rule="evenodd"
d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0
01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796
7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567
1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2
2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0
01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0
1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875
1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0
01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0
001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0
00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0
00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875
0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"&gt;
&lt;/path&gt;
&lt;/svg&gt;</value>
</data>
<data name="Spinner" xml:space="preserve">
<value>Spinner</value>
</data>
</root>
Loading

0 comments on commit 514b318

Please sign in to comment.