Added support for custom SVG icons
This commit is contained in:
unknown
parent
a01661d0d5
commit
1699146f79
14 changed files with 356 additions and 270 deletions
|
|
@ -1,3 +1,6 @@
|
|||
### v1.6.3 (TBA)
|
||||
- Added support for custom SVG icons ([#73](https://github.com/pawelmalak/flame/issues/73))
|
||||
|
||||
### v1.6.2 (2021-08-06)
|
||||
- Fixed changelog link
|
||||
- Added support for Docker API ([#14](https://github.com/pawelmalak/flame/issues/14))
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
REACT_APP_VERSION=1.6.2
|
||||
REACT_APP_VERSION=1.6.3
|
||||
13
client/package-lock.json
generated
13
client/package-lock.json
generated
|
|
@ -6462,6 +6462,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"external-svg-loader": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/external-svg-loader/-/external-svg-loader-1.3.4.tgz",
|
||||
"integrity": "sha512-73h7/rYYA4KnIV74M/0r6zHWPLuY/8QHnwKymwh+46tbQAZ0ZtoN98TJZI+CUYTfP2nXgqslCgSsxcr7eOw45w==",
|
||||
"requires": {
|
||||
"idb-keyval": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"extglob": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
|
||||
|
|
@ -7527,6 +7535,11 @@
|
|||
"postcss": "^7.0.14"
|
||||
}
|
||||
},
|
||||
"idb-keyval": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-3.2.0.tgz",
|
||||
"integrity": "sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ=="
|
||||
},
|
||||
"identity-obj-proxy": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"@types/react-redux": "^7.1.16",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"axios": "^0.21.1",
|
||||
"external-svg-loader": "^1.3.4",
|
||||
"http-proxy-middleware": "^2.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-beautiful-dnd": "^13.1.0",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||
import { getConfig, setTheme } from './store/actions';
|
||||
import 'external-svg-loader';
|
||||
|
||||
// Redux
|
||||
import { store } from './store/store';
|
||||
|
|
@ -40,6 +41,6 @@ const App = (): JSX.Element => {
|
|||
<NotificationCenter />
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -33,11 +33,11 @@
|
|||
.AppCard {
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.10s;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.AppCard:hover {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,31 @@ interface ComponentProps {
|
|||
const AppCard = (props: ComponentProps): JSX.Element => {
|
||||
const [displayUrl, redirectUrl] = urlParser(props.app.url);
|
||||
|
||||
let iconEl: JSX.Element;
|
||||
const { icon } = props.app;
|
||||
|
||||
if (/.(jpeg|jpg|png)$/i.test(icon)) {
|
||||
iconEl = (
|
||||
<img
|
||||
src={`/uploads/${icon}`}
|
||||
alt={`${props.app.name} icon`}
|
||||
className={classes.CustomIcon}
|
||||
/>
|
||||
);
|
||||
} else if (/.(svg)$/i.test(icon)) {
|
||||
iconEl = (
|
||||
<div className={classes.CustomIcon}>
|
||||
<svg
|
||||
data-src={`/uploads/${icon}`}
|
||||
fill='var(--color-primary)'
|
||||
className={classes.CustomIcon}
|
||||
></svg>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
iconEl = <Icon icon={iconParser(icon)} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={redirectUrl}
|
||||
|
|
@ -20,22 +45,13 @@ const AppCard = (props: ComponentProps): JSX.Element => {
|
|||
rel='noreferrer'
|
||||
className={classes.AppCard}
|
||||
>
|
||||
<div className={classes.AppCardIcon}>
|
||||
{(/.(jpeg|jpg|png)$/i).test(props.app.icon)
|
||||
? <img
|
||||
src={`/uploads/${props.app.icon}`}
|
||||
alt={`${props.app.name} icon`}
|
||||
className={classes.CustomIcon}
|
||||
/>
|
||||
: <Icon icon={iconParser(props.app.icon)} />
|
||||
}
|
||||
</div>
|
||||
<div className={classes.AppCardIcon}>{iconEl}</div>
|
||||
<div className={classes.AppCardDetails}>
|
||||
<h5>{props.app.name}</h5>
|
||||
<span>{displayUrl}</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default AppCard;
|
||||
|
|
@ -31,28 +31,28 @@ const AppForm = (props: ComponentProps): JSX.Element => {
|
|||
name: props.app.name,
|
||||
url: props.app.url,
|
||||
icon: props.app.icon
|
||||
})
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
name: '',
|
||||
url: '',
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
}
|
||||
}, [props.app])
|
||||
}, [props.app]);
|
||||
|
||||
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
if (e.target.files) {
|
||||
setCustomIcon(e.target.files[0]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
|
||||
e.preventDefault();
|
||||
|
|
@ -66,7 +66,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
|
|||
data.append('url', formData.url);
|
||||
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
if (!props.app) {
|
||||
if (customIcon) {
|
||||
|
|
@ -89,10 +89,10 @@ const AppForm = (props: ComponentProps): JSX.Element => {
|
|||
name: '',
|
||||
url: '',
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
|
||||
setCustomIcon(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalForm
|
||||
|
|
@ -108,7 +108,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
|
|||
placeholder='Bookstack'
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
|
|
@ -120,7 +120,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
|
|||
placeholder='bookstack.example.com'
|
||||
required
|
||||
value={formData.url}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
<a
|
||||
|
|
@ -128,61 +128,65 @@ const AppForm = (props: ComponentProps): JSX.Element => {
|
|||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
{' '}Check supported URL formats
|
||||
{' '}
|
||||
Check supported URL formats
|
||||
</a>
|
||||
</span>
|
||||
</InputGroup>
|
||||
{!useCustomIcon
|
||||
{!useCustomIcon ? (
|
||||
// use mdi icon
|
||||
? (<InputGroup>
|
||||
<label htmlFor='icon'>App Icon</label>
|
||||
<input
|
||||
type='text'
|
||||
name='icon'
|
||||
id='icon'
|
||||
placeholder='book-open-outline'
|
||||
required
|
||||
value={formData.icon}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
Use icon name from MDI.
|
||||
<a
|
||||
href='https://materialdesignicons.com/'
|
||||
target='blank'>
|
||||
{' '}Click here for reference
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}>
|
||||
Switch to custom icon upload
|
||||
</span>
|
||||
</InputGroup>)
|
||||
<InputGroup>
|
||||
<label htmlFor='icon'>App Icon</label>
|
||||
<input
|
||||
type='text'
|
||||
name='icon'
|
||||
id='icon'
|
||||
placeholder='book-open-outline'
|
||||
required
|
||||
value={formData.icon}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
Use icon name from MDI.
|
||||
<a href='https://materialdesignicons.com/' target='blank'>
|
||||
{' '}
|
||||
Click here for reference
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}
|
||||
>
|
||||
Switch to custom icon upload
|
||||
</span>
|
||||
</InputGroup>
|
||||
) : (
|
||||
// upload custom icon
|
||||
: (<InputGroup>
|
||||
<label htmlFor='icon'>App Icon</label>
|
||||
<input
|
||||
type='file'
|
||||
name='icon'
|
||||
id='icon'
|
||||
required
|
||||
onChange={(e) => fileChangeHandler(e)}
|
||||
accept='.jpg,.jpeg,.png'
|
||||
/>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}>
|
||||
Switch to MDI
|
||||
</span>
|
||||
</InputGroup>)
|
||||
}
|
||||
{!props.app
|
||||
? <Button>Add new application</Button>
|
||||
: <Button>Update application</Button>
|
||||
}
|
||||
<InputGroup>
|
||||
<label htmlFor='icon'>App Icon</label>
|
||||
<input
|
||||
type='file'
|
||||
name='icon'
|
||||
id='icon'
|
||||
required
|
||||
onChange={e => fileChangeHandler(e)}
|
||||
accept='.jpg,.jpeg,.png,.svg'
|
||||
/>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}
|
||||
>
|
||||
Switch to MDI
|
||||
</span>
|
||||
</InputGroup>
|
||||
)}
|
||||
{!props.app ? (
|
||||
<Button>Add new application</Button>
|
||||
) : (
|
||||
<Button>Update application</Button>
|
||||
)}
|
||||
</ModalForm>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(null, { addApp, updateApp })(AppForm);
|
||||
|
|
@ -32,4 +32,14 @@
|
|||
display: flex;
|
||||
margin-top: 3px;
|
||||
margin-right: 2px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.BookmarkIconSvg {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
margin-top: 2px;
|
||||
margin-left: 2px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
|
@ -16,31 +16,52 @@ 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;
|
||||
|
||||
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'
|
||||
key={`bookmark-${bookmark.id}`}>
|
||||
{bookmark.icon && (
|
||||
<div className={classes.BookmarkIcon}>
|
||||
{(/.(jpeg|jpg|png)$/i).test(bookmark.icon)
|
||||
? <img
|
||||
src={`/uploads/${bookmark.icon}`}
|
||||
alt={`${bookmark.name} icon`}
|
||||
className={classes.CustomIcon}
|
||||
/>
|
||||
: <Icon icon={iconParser(bookmark.icon)} />
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
key={`bookmark-${bookmark.id}`}
|
||||
>
|
||||
{icon && iconEl}
|
||||
{bookmark.name}
|
||||
</a>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default BookmarkCard;
|
||||
|
|
@ -1,11 +1,31 @@
|
|||
import { useState, SyntheticEvent, Fragment, ChangeEvent, useEffect } from 'react';
|
||||
import {
|
||||
useState,
|
||||
SyntheticEvent,
|
||||
Fragment,
|
||||
ChangeEvent,
|
||||
useEffect
|
||||
} from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
|
||||
import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
|
||||
import { Bookmark, Category, GlobalState, NewBookmark, NewCategory, NewNotification } from '../../../interfaces';
|
||||
import {
|
||||
Bookmark,
|
||||
Category,
|
||||
GlobalState,
|
||||
NewBookmark,
|
||||
NewCategory,
|
||||
NewNotification
|
||||
} from '../../../interfaces';
|
||||
import { ContentType } from '../Bookmarks';
|
||||
import { getCategories, addCategory, addBookmark, updateCategory, updateBookmark, createNotification } from '../../../store/actions';
|
||||
import {
|
||||
getCategories,
|
||||
addCategory,
|
||||
addBookmark,
|
||||
updateCategory,
|
||||
updateBookmark,
|
||||
createNotification
|
||||
} from '../../../store/actions';
|
||||
import Button from '../../UI/Buttons/Button/Button';
|
||||
import classes from './BookmarkForm.module.css';
|
||||
|
||||
|
|
@ -22,8 +42,8 @@ interface ComponentProps {
|
|||
id: number,
|
||||
formData: NewBookmark | FormData,
|
||||
category: {
|
||||
prev: number,
|
||||
curr: number
|
||||
prev: number;
|
||||
curr: number;
|
||||
}
|
||||
) => void;
|
||||
createNotification: (notification: NewNotification) => void;
|
||||
|
|
@ -34,14 +54,14 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
const [customIcon, setCustomIcon] = useState<File | null>(null);
|
||||
const [categoryName, setCategoryName] = useState<NewCategory>({
|
||||
name: ''
|
||||
})
|
||||
});
|
||||
|
||||
const [formData, setFormData] = useState<NewBookmark>({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
|
||||
// Load category data if provided for editing
|
||||
useEffect(() => {
|
||||
|
|
@ -50,7 +70,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
} else {
|
||||
setCategoryName({ name: '' });
|
||||
}
|
||||
}, [props.category])
|
||||
}, [props.category]);
|
||||
|
||||
// Load bookmark data if provided for editing
|
||||
useEffect(() => {
|
||||
|
|
@ -60,16 +80,16 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
url: props.bookmark.url,
|
||||
categoryId: props.bookmark.categoryId,
|
||||
icon: props.bookmark.icon
|
||||
})
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
name: '',
|
||||
url: '',
|
||||
categoryId: -1,
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
}
|
||||
}, [props.bookmark])
|
||||
}, [props.bookmark]);
|
||||
|
||||
const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
|
||||
e.preventDefault();
|
||||
|
|
@ -84,7 +104,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
data.append('categoryId', `${formData.categoryId}`);
|
||||
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
if (!props.category && !props.bookmark) {
|
||||
// Add new
|
||||
|
|
@ -98,7 +118,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
props.createNotification({
|
||||
title: 'Error',
|
||||
message: 'Please select category'
|
||||
})
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -114,9 +134,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
url: '',
|
||||
categoryId: formData.categoryId,
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
|
||||
setCustomIcon(null)
|
||||
setCustomIcon(null);
|
||||
}
|
||||
} else {
|
||||
// Update
|
||||
|
|
@ -128,23 +148,15 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
// Update bookmark
|
||||
if (customIcon) {
|
||||
const data = createFormData();
|
||||
props.updateBookmark(
|
||||
props.bookmark.id,
|
||||
data,
|
||||
{
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId
|
||||
}
|
||||
)
|
||||
props.updateBookmark(props.bookmark.id, data, {
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId
|
||||
});
|
||||
} else {
|
||||
props.updateBookmark(
|
||||
props.bookmark.id,
|
||||
formData,
|
||||
{
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId
|
||||
}
|
||||
);
|
||||
props.updateBookmark(props.bookmark.id, formData, {
|
||||
prev: props.bookmark.categoryId,
|
||||
curr: formData.categoryId
|
||||
});
|
||||
}
|
||||
|
||||
setFormData({
|
||||
|
|
@ -152,36 +164,36 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
url: '',
|
||||
categoryId: -1,
|
||||
icon: ''
|
||||
})
|
||||
});
|
||||
|
||||
setCustomIcon(null)
|
||||
setCustomIcon(null);
|
||||
}
|
||||
|
||||
props.modalHandler();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const selectChangeHandler = (e: ChangeEvent<HTMLSelectElement>): void => {
|
||||
setFormData({
|
||||
...formData,
|
||||
categoryId: parseInt(e.target.value)
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
|
||||
if (e.target.files) {
|
||||
setCustomIcon(e.target.files[0]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let button = <Button>Submit</Button>
|
||||
let button = <Button>Submit</Button>;
|
||||
|
||||
if (!props.category && !props.bookmark) {
|
||||
if (props.contentType === ContentType.category) {
|
||||
|
|
@ -190,9 +202,9 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
button = <Button>Add new bookmark</Button>;
|
||||
}
|
||||
} else if (props.category) {
|
||||
button = <Button>Update category</Button>
|
||||
button = <Button>Update category</Button>;
|
||||
} else if (props.bookmark) {
|
||||
button = <Button>Update bookmark</Button>
|
||||
button = <Button>Update bookmark</Button>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -200,136 +212,133 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
|
|||
modalHandler={props.modalHandler}
|
||||
formHandler={formSubmitHandler}
|
||||
>
|
||||
{props.contentType === ContentType.category
|
||||
? (
|
||||
<Fragment>
|
||||
{props.contentType === ContentType.category ? (
|
||||
<Fragment>
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryName'>Category Name</label>
|
||||
<input
|
||||
type='text'
|
||||
name='categoryName'
|
||||
id='categoryName'
|
||||
placeholder='Social Media'
|
||||
required
|
||||
value={categoryName.name}
|
||||
onChange={e => setCategoryName({ name: e.target.value })}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Fragment>
|
||||
<InputGroup>
|
||||
<label htmlFor='name'>Bookmark Name</label>
|
||||
<input
|
||||
type='text'
|
||||
name='name'
|
||||
id='name'
|
||||
placeholder='Reddit'
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='url'>Bookmark URL</label>
|
||||
<input
|
||||
type='text'
|
||||
name='url'
|
||||
id='url'
|
||||
placeholder='reddit.com'
|
||||
required
|
||||
value={formData.url}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
<a
|
||||
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
{' '}
|
||||
Check supported URL formats
|
||||
</a>
|
||||
</span>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryId'>Bookmark Category</label>
|
||||
<select
|
||||
name='categoryId'
|
||||
id='categoryId'
|
||||
required
|
||||
onChange={e => selectChangeHandler(e)}
|
||||
value={formData.categoryId}
|
||||
>
|
||||
<option value={-1}>Select category</option>
|
||||
{props.categories.map((category: Category): JSX.Element => {
|
||||
return (
|
||||
<option key={category.id} value={category.id}>
|
||||
{category.name}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
</InputGroup>
|
||||
{!useCustomIcon ? (
|
||||
// mdi
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryName'>Category Name</label>
|
||||
<label htmlFor='icon'>Bookmark Icon (optional)</label>
|
||||
<input
|
||||
type='text'
|
||||
name='categoryName'
|
||||
id='categoryName'
|
||||
placeholder='Social Media'
|
||||
required
|
||||
value={categoryName.name}
|
||||
onChange={(e) => setCategoryName({ name: e.target.value })}
|
||||
/>
|
||||
</InputGroup>
|
||||
</Fragment>
|
||||
)
|
||||
: (
|
||||
<Fragment>
|
||||
<InputGroup>
|
||||
<label htmlFor='name'>Bookmark Name</label>
|
||||
<input
|
||||
type='text'
|
||||
name='name'
|
||||
id='name'
|
||||
placeholder='Reddit'
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='url'>Bookmark URL</label>
|
||||
<input
|
||||
type='text'
|
||||
name='url'
|
||||
id='url'
|
||||
placeholder='reddit.com'
|
||||
required
|
||||
value={formData.url}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
name='icon'
|
||||
id='icon'
|
||||
placeholder='book-open-outline'
|
||||
value={formData.icon}
|
||||
onChange={e => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
<a
|
||||
href='https://github.com/pawelmalak/flame#supported-url-formats-for-applications-and-bookmarks'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
>
|
||||
{' '}Check supported URL formats
|
||||
Use icon name from MDI.
|
||||
<a href='https://materialdesignicons.com/' target='blank'>
|
||||
{' '}
|
||||
Click here for reference
|
||||
</a>
|
||||
</span>
|
||||
</InputGroup>
|
||||
<InputGroup>
|
||||
<label htmlFor='categoryId'>Bookmark Category</label>
|
||||
<select
|
||||
name='categoryId'
|
||||
id='categoryId'
|
||||
required
|
||||
onChange={(e) => selectChangeHandler(e)}
|
||||
value={formData.categoryId}
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}
|
||||
>
|
||||
<option value={-1}>Select category</option>
|
||||
{props.categories.map((category: Category): JSX.Element => {
|
||||
return (
|
||||
<option
|
||||
key={category.id}
|
||||
value={category.id}
|
||||
>
|
||||
{category.name}
|
||||
</option>
|
||||
)
|
||||
})}
|
||||
</select>
|
||||
Switch to custom icon upload
|
||||
</span>
|
||||
</InputGroup>
|
||||
{!useCustomIcon
|
||||
// mdi
|
||||
? (<InputGroup>
|
||||
<label htmlFor='icon'>Bookmark Icon (optional)</label>
|
||||
<input
|
||||
type='text'
|
||||
name='icon'
|
||||
id='icon'
|
||||
placeholder='book-open-outline'
|
||||
value={formData.icon}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
Use icon name from MDI.
|
||||
<a
|
||||
href='https://materialdesignicons.com/'
|
||||
target='blank'>
|
||||
{' '}Click here for reference
|
||||
</a>
|
||||
</span>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}>
|
||||
Switch to custom icon upload
|
||||
</span>
|
||||
</InputGroup>)
|
||||
// custom
|
||||
: (<InputGroup>
|
||||
<label htmlFor='icon'>Bookmark Icon (optional)</label>
|
||||
<input
|
||||
type='file'
|
||||
name='icon'
|
||||
id='icon'
|
||||
onChange={(e) => fileChangeHandler(e)}
|
||||
accept='.jpg,.jpeg,.png'
|
||||
/>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}>
|
||||
Switch to MDI
|
||||
</span>
|
||||
</InputGroup>)
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
) : (
|
||||
// custom
|
||||
<InputGroup>
|
||||
<label htmlFor='icon'>Bookmark Icon (optional)</label>
|
||||
<input
|
||||
type='file'
|
||||
name='icon'
|
||||
id='icon'
|
||||
onChange={e => fileChangeHandler(e)}
|
||||
accept='.jpg,.jpeg,.png,.svg'
|
||||
/>
|
||||
<span
|
||||
onClick={() => toggleUseCustomIcon(!useCustomIcon)}
|
||||
className={classes.Switch}
|
||||
>
|
||||
Switch to MDI
|
||||
</span>
|
||||
</InputGroup>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
{button}
|
||||
</ModalForm>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state: GlobalState) => {
|
||||
return {
|
||||
categories: state.bookmark.categories
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const dispatchMap = {
|
||||
getCategories,
|
||||
|
|
@ -338,6 +347,6 @@ const dispatchMap = {
|
|||
updateCategory,
|
||||
updateBookmark,
|
||||
createNotification
|
||||
}
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, dispatchMap)(BookmarkForm);
|
||||
|
|
@ -126,8 +126,16 @@ exports.getApps = asyncWrapper(async (req, res, next) => {
|
|||
});
|
||||
}
|
||||
|
||||
// Set header to fetch containers info every time
|
||||
res.status(200).setHeader('Cache-Control', 'no-store').json({
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
// Set header to fetch containers info every time
|
||||
res.status(200).setHeader('Cache-Control', 'no-store').json({
|
||||
success: true,
|
||||
data: apps
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
res.status(200).json({
|
||||
success: true,
|
||||
data: apps
|
||||
});
|
||||
|
|
|
|||
6
db.js
6
db.js
|
|
@ -6,7 +6,7 @@ const sequelize = new Sequelize({
|
|||
dialect: 'sqlite',
|
||||
storage: './data/db.sqlite',
|
||||
logging: false
|
||||
})
|
||||
});
|
||||
|
||||
const connectDB = async () => {
|
||||
try {
|
||||
|
|
@ -24,9 +24,9 @@ const connectDB = async () => {
|
|||
logger.log(`Unable to connect to the database: ${error.message}`, 'ERROR');
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
connectDB,
|
||||
sequelize
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ const storage = multer.diskStorage({
|
|||
filename: (req, file, cb) => {
|
||||
cb(null, Date.now() + '--' + file.originalname);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const supportedTypes = ['jpg', 'jpeg', 'png'];
|
||||
const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml'];
|
||||
|
||||
const fileFilter = (req, file, cb) => {
|
||||
if (supportedTypes.includes(file.mimetype.split('/')[1])) {
|
||||
|
|
@ -22,7 +22,7 @@ const fileFilter = (req, file, cb) => {
|
|||
} else {
|
||||
cb(null, false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const upload = multer({ storage, fileFilter });
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue