From 4583ca00e9c38fbf6049410747daf59548b4eec6 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 9 Jun 2021 12:45:55 +0200 Subject: [PATCH] Added ability to set icons on bookmarks. Added hover indicator for apps --- .../Apps/AppCard/AppCard.module.css | 12 +++++++ .../src/components/Apps/AppCard/AppCard.tsx | 11 +----- .../BookmarkCard/BookmarkCard.module.css | 8 +++++ .../Bookmarks/BookmarkCard/BookmarkCard.tsx | 8 +++++ .../Bookmarks/BookmarkForm/BookmarkForm.tsx | 36 ++++++++++++++++--- .../Bookmarks/BookmarkTable/BookmarkTable.tsx | 2 ++ client/src/components/Bookmarks/Bookmarks.tsx | 1 + client/src/interfaces/Bookmark.ts | 2 ++ client/src/utility/iconParser.ts | 9 +++++ db.js | 7 ++-- models/Bookmark.js | 4 +++ 11 files changed, 80 insertions(+), 20 deletions(-) create mode 100644 client/src/utility/iconParser.ts diff --git a/client/src/components/Apps/AppCard/AppCard.module.css b/client/src/components/Apps/AppCard/AppCard.module.css index a66a60f..26a8a69 100644 --- a/client/src/components/Apps/AppCard/AppCard.module.css +++ b/client/src/components/Apps/AppCard/AppCard.module.css @@ -27,4 +27,16 @@ font-weight: 400; font-size: 0.8em; opacity: 1; +} + +@media (min-width: 500px) { + .AppCard { + padding: 2px; + border-radius: 4px; + transition: all 0.10s; + } + + .AppCard:hover { + background-color: rgba(0,0,0,0.2); + } } \ No newline at end of file diff --git a/client/src/components/Apps/AppCard/AppCard.tsx b/client/src/components/Apps/AppCard/AppCard.tsx index bc6c967..25edb88 100644 --- a/client/src/components/Apps/AppCard/AppCard.tsx +++ b/client/src/components/Apps/AppCard/AppCard.tsx @@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'; import classes from './AppCard.module.css'; import Icon from '../../UI/Icons/Icon/Icon'; +import { iconParser } from '../../../utility/iconParser'; import { App } from '../../../interfaces'; @@ -11,16 +12,6 @@ interface ComponentProps { } const AppCard = (props: ComponentProps): JSX.Element => { - const iconParser = (mdiName: string): string => { - let parsedName = mdiName - .split('-') - .map((word: string) => `${word[0].toUpperCase()}${word.slice(1)}`) - .join(''); - parsedName = `mdi${parsedName}`; - - return parsedName; - } - const redirectHandler = (url: string): void => { window.open(url); } diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css index af71a2e..4f11ca8 100644 --- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css +++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css @@ -18,9 +18,17 @@ .Bookmarks a { line-height: 2; transition: all 0.25s; + display: flex; } .BookmarkCard a:hover { text-decoration: underline; padding-left: 10px; +} + +.BookmarkIcon { + width: 20px; + display: flex; + margin-bottom: 1px; + margin-right: 2px; } \ No newline at end of file diff --git a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx index 6d0b020..7a5f25c 100644 --- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx +++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx @@ -1,6 +1,9 @@ import { Bookmark, Category } from '../../../interfaces'; import classes from './BookmarkCard.module.css'; +import Icon from '../../UI/Icons/Icon/Icon'; +import { iconParser } from '../../../utility/iconParser'; + interface ComponentProps { category: Category; } @@ -15,6 +18,11 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => { href={`http://${bookmark.url}`} target='blank' key={`bookmark-${bookmark.id}`}> + {bookmark.icon && ( +
+ +
+ )} {bookmark.name} ))} diff --git a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx index 984c156..c5f5bcf 100644 --- a/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx +++ b/client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx @@ -29,9 +29,11 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { const [formData, setFormData] = useState({ name: '', url: '', - categoryId: -1 + categoryId: -1, + icon: '' }) + // Load category data if provided for editing useEffect(() => { if (props.category) { setCategoryName({ name: props.category.name }); @@ -40,18 +42,21 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { } }, [props.category]) + // Load bookmark data if provided for editing useEffect(() => { if (props.bookmark) { setFormData({ name: props.bookmark.name, url: props.bookmark.url, - categoryId: props.bookmark.categoryId + categoryId: props.bookmark.categoryId, + icon: props.bookmark.icon }) } else { setFormData({ name: '', url: '', - categoryId: -1 + categoryId: -1, + icon: '' }) } }, [props.bookmark]) @@ -79,7 +84,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { setFormData({ name: '', url: '', - categoryId: formData.categoryId + categoryId: formData.categoryId, + icon: '' }) } } else { @@ -94,7 +100,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { setFormData({ name: '', url: '', - categoryId: -1 + categoryId: -1, + icon: '' }) } @@ -201,6 +208,25 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => { })} + + + inputChangeHandler(e)} + /> + + Use icon name from MDI. + + {' '}Click here for reference + + + ) } diff --git a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx index b674bea..1d319fb 100644 --- a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx +++ b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx @@ -96,6 +96,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => { @@ -104,6 +105,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => { +
{bookmark.bookmark.name} {bookmark.bookmark.url}{bookmark.bookmark.icon} {bookmark.categoryName}
{ name: '', url: '', categoryId: -1, + icon: '', id: -1, createdAt: new Date(), updatedAt: new Date() diff --git a/client/src/interfaces/Bookmark.ts b/client/src/interfaces/Bookmark.ts index 4025361..bcbf9ab 100644 --- a/client/src/interfaces/Bookmark.ts +++ b/client/src/interfaces/Bookmark.ts @@ -4,10 +4,12 @@ export interface Bookmark extends Model { name: string; url: string; categoryId: number; + icon: string; } export interface NewBookmark { name: string; url: string; categoryId: number; + icon: string; } \ No newline at end of file diff --git a/client/src/utility/iconParser.ts b/client/src/utility/iconParser.ts new file mode 100644 index 0000000..e846102 --- /dev/null +++ b/client/src/utility/iconParser.ts @@ -0,0 +1,9 @@ +export const iconParser = (mdiName: string): string => { + let parsedName = mdiName + .split('-') + .map((word: string) => `${word[0].toUpperCase()}${word.slice(1)}`) + .join(''); + parsedName = `mdi${parsedName}`; + + return parsedName; +} \ No newline at end of file diff --git a/db.js b/db.js index b357dca..bc4c536 100644 --- a/db.js +++ b/db.js @@ -8,13 +8,10 @@ const sequelize = new Sequelize({ const connectDB = async () => { try { - await sequelize.authenticate({ logging: false }); + await sequelize.authenticate(); console.log('Connected to database'); - await sequelize.sync({ - // alter: true, - logging: false - }); + await sequelize.sync({ alter: true }); console.log('All models were synced'); } catch (error) { console.error('Unable to connect to the database:', error); diff --git a/models/Bookmark.js b/models/Bookmark.js index bc21808..6c7d27b 100644 --- a/models/Bookmark.js +++ b/models/Bookmark.js @@ -13,6 +13,10 @@ const Bookmark = sequelize.define('Bookmark', { categoryId: { type: DataTypes.INTEGER, allowNull: false + }, + icon: { + type: DataTypes.STRING, + defaultValue: '' } }, { tableName: 'bookmarks'