mirror of
https://github.com/pawelmalak/flame.git
synced 2025-07-29 23:59:37 +02:00
Added option to set custom description for apps
This commit is contained in:
parent
b08181e712
commit
531ede0adf
7 changed files with 53 additions and 9 deletions
|
@ -8,16 +8,15 @@ import { State } from '../../../store/reducers';
|
|||
|
||||
interface Props {
|
||||
app: App;
|
||||
pinHandler?: Function;
|
||||
}
|
||||
|
||||
export const AppCard = (props: Props): JSX.Element => {
|
||||
export const AppCard = ({ app }: Props): JSX.Element => {
|
||||
const { config } = useSelector((state: State) => state.config);
|
||||
|
||||
const [displayUrl, redirectUrl] = urlParser(props.app.url);
|
||||
const [displayUrl, redirectUrl] = urlParser(app.url);
|
||||
|
||||
let iconEl: JSX.Element;
|
||||
const { icon } = props.app;
|
||||
const { icon } = app;
|
||||
|
||||
if (isImage(icon)) {
|
||||
const source = isUrl(icon) ? icon : `/uploads/${icon}`;
|
||||
|
@ -25,7 +24,7 @@ export const AppCard = (props: Props): JSX.Element => {
|
|||
iconEl = (
|
||||
<img
|
||||
src={source}
|
||||
alt={`${props.app.name} icon`}
|
||||
alt={`${app.name} icon`}
|
||||
className={classes.CustomIcon}
|
||||
/>
|
||||
);
|
||||
|
@ -54,8 +53,8 @@ export const AppCard = (props: Props): JSX.Element => {
|
|||
>
|
||||
<div className={classes.AppCardIcon}>{iconEl}</div>
|
||||
<div className={classes.AppCardDetails}>
|
||||
<h5>{props.app.name}</h5>
|
||||
<span>{displayUrl}</span>
|
||||
<h5>{app.name}</h5>
|
||||
<span>{!app.description.length ? displayUrl : app.description}</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
|
|
|
@ -96,7 +96,7 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
|
|||
<ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
|
||||
{/* NAME */}
|
||||
<InputGroup>
|
||||
<label htmlFor="name">App Name</label>
|
||||
<label htmlFor="name">App name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
|
@ -122,11 +122,27 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
|
|||
/>
|
||||
</InputGroup>
|
||||
|
||||
{/* DESCRIPTION */}
|
||||
<InputGroup>
|
||||
<label htmlFor="description">App description</label>
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
id="description"
|
||||
placeholder="My self-hosted app"
|
||||
value={formData.description}
|
||||
onChange={(e) => inputChangeHandler(e)}
|
||||
/>
|
||||
<span>
|
||||
Optional - If description is not set, app URL will be displayed
|
||||
</span>
|
||||
</InputGroup>
|
||||
|
||||
{/* ICON */}
|
||||
{!useCustomIcon ? (
|
||||
// use mdi icon
|
||||
<InputGroup>
|
||||
<label htmlFor="icon">App Icon</label>
|
||||
<label htmlFor="icon">App icon</label>
|
||||
<input
|
||||
type="text"
|
||||
name="icon"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue