search

mathesar-foundation / mathesar

Web application providing an intuitive user experience to databases.
https://mathesar.org/
GNU General Public License v3.0
2.39k stars 333 forks source link

Customize page favicons #1520

Open seancolsen opened 2 years ago

seancolsen commented 2 years ago

Current behavior

Desired behavior

Implementation

  1. Review specs to see which entities require custom favicons.
  2. Look in src/icons.ts to find the correct FontAwesome icons for those entities.
  3. Generate custom favicons based on the FontAwesome icons. I like to follow this guide for favicons, but we could probably get away with just using the SVG. Which browser's don't support SVG favicons these days? It might be good to look.
  4. Use <svelte:head> to modify the HTML <head> element from within components like TablePage.svelte

See also

seancolsen commented 2 years ago

This will be visible in the demo video, so I'm bumping this up with the hope that it might be quick to implement.

IyadElwy commented 1 year ago

This should be easy enough. Should I go ahead and start working on it ?

seancolsen commented 1 year ago

Sure, @IyadElwy feel free to start work and submit a PR when you have one. Thanks!

IyadElwy commented 1 year ago

@seancolsen I wanted to ask about the favicon locations. Right now I've been able to only locate logo.svg in mathesar_ui/src/static-assets/logo.svg, which is the mathesar logo. Are there any other local svg's or should I search a 3rd party provider like FontAwesome for the rest of the icons like for example the database page ?

I thought I'd ask first to adhere to any conventions.

seancolsen commented 1 year ago

@IyadElwy You'll need to look in our src/icons.ts to find the name of the FontAwesome icon that we're currently using to represent the entity. Then you'll need to go to the FontAwesome website and download that icon as an SVG. Then save those files alongside mathesar_ui/src/static-assets/logo.svg

seancolsen commented 1 year ago

And actually we have started using custom icons for some of the entities (e.g. Exploration). You'll need to create an SVG for that. The simplest way is to inspect the DOM when viewing a page with that icon and then copy the HTML that gets generated for it. You can use that same process for all the icons actually (including the FontAwesome ones).

IyadElwy commented 1 year ago

Great, I’ll get on that.

On Fri, 18 Nov 2022 at 21:24 Sean Colsen @.***> wrote:

And actually we have started using custom icons for some of the entities (e.g. Exploration). You'll need to create an SVG for that. The simplest way is to inspect the DOM when viewing a page with that icon and then copy the HTML that gets generated for it. You can use that same process for all the icons actually (including the FontAwesome ones).

— Reply to this email directly, view it on GitHub https://github.com/centerofci/mathesar/issues/1520#issuecomment-1320437929, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATZQTS35ETXATG2MPPAGVQTWI7JVNANCNFSM56JQVI3A . You are receiving this because you were mentioned.Message ID: @.***>

IyadElwy commented 1 year ago

I got the favicons to appear like so: mathesar_tables _ public _ Mathesar - Google Chrome 11_20_2022 2_45_10 PM (2) But I struggled to understand how to use the icons.ts file and I'm not sure if the implementation adheres to your style guides but I tried to do it in a modularised manner. I submitted a PR. If anything needs to be changed I'm always open to working on it again.

seancolsen commented 1 year ago

@IyadElwy I see you have a adding_favicons branch within your fork, but I don't see a PR open for this work. The next step here is to open a PR with those changes. Then we can discuss your implementation within that PR.

kgodey commented 1 year ago

@seancolsen the PR is #1958

seancolsen commented 1 year ago

Thanks, @kgodey. Not sure why I didn't see that before.

github-actions[bot] commented 1 year ago

This issue has not been updated in 90 days and is being marked as stale.