pawelmalak/flame
1
1
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2024-12-24 10:42:40 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #79 from pawelmalak/icon-fix

Browse Source 
Bookmark icon fixes
This commit is contained in:
pawelmalak 2021-08-09 15:38:41 +02:00 committed by GitHub
commit c1b61f9cd9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css
View File

@ -43,3 +43,10 @@
margin-left: 2px;
object-fit: contain;
}
.CustomIcon {
width: 90%;
height: 90%;
margin-top: 2px;
object-fit: contain;
}

64
client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
View File

@ -3,6 +3,7 @@ import classes from './BookmarkCard.module.css';
import Icon from '../../UI/Icons/Icon/Icon';
import { iconParser, urlParser, searchConfig } from '../../../utility';
import { Fragment } from 'react';
interface ComponentProps {
category: Category;
@ -16,45 +17,48 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
{props.category.bookmarks.map((bookmark: Bookmark) => {
const redirectUrl = urlParser(bookmark.url)[1];
let iconEl: JSX.Element;
const { icon, name } = bookmark;
let iconEl: JSX.Element = <Fragment></Fragment>;
if (/.(jpeg|jpg|png)$/i.test(icon)) {
iconEl = (
<div className={classes.BookmarkIcon}>
<img
src={`/uploads/${icon}`}
alt={`${name} icon`}
className={classes.CustomIcon}
/>
</div>
);
} else if (/.(svg)$/i.test(icon)) {
iconEl = (
<div className={classes.BookmarkIcon}>
<svg
data-src={`/uploads/${icon}`}
fill='var(--color-primary)'
className={classes.BookmarkIconSvg}
></svg>
</div>
);
} else {
iconEl = (
<div className={classes.BookmarkIcon}>
<Icon icon={iconParser(icon)} />
</div>
);
if (bookmark.icon) {
const { icon, name } = bookmark;
if (/.(jpeg|jpg|png)$/i.test(icon)) {
iconEl = (
<div className={classes.BookmarkIcon}>
<img
src={`/uploads/${icon}`}
alt={`${name} icon`}
className={classes.CustomIcon}
/>
</div>
);
} else if (/.(svg)$/i.test(icon)) {
iconEl = (
<div className={classes.BookmarkIcon}>
<svg
data-src={`/uploads/${icon}`}
fill="var(--color-primary)"
className={classes.BookmarkIconSvg}
></svg>
</div>
);
} else {
iconEl = (
<div className={classes.BookmarkIcon}>
<Icon icon={iconParser(icon)} />
</div>
);
}
}
return (
<a
href={redirectUrl}
target={searchConfig('bookmarksSameTab', false) ? '' : '_blank'}
rel='noreferrer'
rel="noreferrer"
key={`bookmark-${bookmark.id}`}
>
{icon && iconEl}
{bookmark.icon && iconEl}
{bookmark.name}
</a>
);