mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-17 22:14:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(widgets): Move to new layout of widgets and options

Browse Source
This commit is contained in:
alexsparkes
2024-02-24 20:17:11 +00:00
parent 9a9d7bb136
commit 7e78465406
27 changed files with 727 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/features/modals/main/settings/sections/quicklinks/AddModal.jsx
View File

@@ -1,79 +0,0 @@
import variables from 'config/variables';
import { useState, memo } from 'react';
import { TextareaAutosize } from '@mui/material';
import { MdAddLink, MdClose } from 'react-icons/md';
import { Tooltip } from 'components/Elements';
function AddModal({ urlError, iconError, addLink, closeModal, edit, editData, editLink }) {
const [name, setName] = useState(edit ? editData.name : '');
const [url, setUrl] = useState(edit ? editData.url : '');
const [icon, setIcon] = useState(edit ? editData.icon : '');
return (
<div className="addLinkModal">
<div className="shareHeader">
<span className="title">
{edit
? variables.getMessage('widgets.quicklinks.edit')
: variables.getMessage('widgets.quicklinks.new')}
</span>
<Tooltip title={variables.getMessage('modals.welcome.buttons.close')}>
<div className="close" onClick={() => closeModal()}>
<MdClose />
</div>
</Tooltip>
</div>
<div className="quicklinkModalTextbox">
<TextareaAutosize
maxRows={1}
placeholder={variables.getMessage('widgets.quicklinks.name')}
value={name}
onChange={(e) => setName(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
style={{ gridColumn: 'span 2' }}
/>
<TextareaAutosize
maxRows={10}
placeholder={variables.getMessage('widgets.quicklinks.url')}
value={url}
onChange={(e) => setUrl(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
/>
<TextareaAutosize
maxRows={10}
maxLines={1}
placeholder={variables.getMessage('widgets.quicklinks.icon')}
value={icon}
onChange={(e) => setIcon(e.target.value.replace(/(\r\n|\n|\r)/gm, ''))}
/>
</div>
<div className="addFooter">
<span className="dropdown-error">
{iconError} {urlError}
</span>
{edit ? (
<button
style={{
height: '16px',
fontSize: '15px',
}}
onClick={() => editLink(editData, name, url, icon)}
>
<MdAddLink /> {variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
</button>
) : (
<button
style={{
height: '16px',
fontSize: '15px',
}}
className="btn-settings"
onClick={() => addLink(name, url, icon)}
>
<MdAddLink /> {variables.getMessage('widgets.quicklinks.add')}
</button>
)}
</div>
</div>
);
}
export default memo(AddModal);

68
src/features/modals/main/settings/sections/quicklinks/QuickLink.jsx
View File

@@ -1,68 +0,0 @@
import variables from 'config/variables';
import { MdEdit, MdCancel } from 'react-icons/md';
const QuickLink = ({ item, deleteLink, startEditLink }) => {
let target,
rel = null;
if (localStorage.getItem('quicklinksnewtab') === 'true') {
target = '_blank';
rel = 'noopener noreferrer';
}
const useText = localStorage.getItem('quicklinksText') === 'true';
if (useText) {
return (
<a
className="quicklinkstext"
onContextMenu={(e) => deleteLink(item.key, e)}
href={item.url}
target={target}
rel={rel}
draggable={false}
>
{item.name}
</a>
);
}
const img =
item.icon ||
'https://icon.horse/icon/ ' + item.url.replace('https://', '').replace('http://', '');
return (
<div className="messageMap">
<div className="icon">
<img
src={img}
alt={item.name}
draggable={false}
style={{ height: '30px', width: '30px' }}
/>
</div>
<div className="messageText">
<div className="title">{item.name}</div>
<div className="subtitle">
<a className="quicklinknostyle" target="_blank" rel="noopener noreferrer" href={item.url}>
{item.url}
</a>
</div>
</div>
<div>
<div className="messageAction">
<button className="deleteButton" onClick={() => startEditLink(item)}>
{variables.getMessage('modals.main.settings.sections.quicklinks.edit')}
<MdEdit />
</button>
<button className="deleteButton" onClick={(e) => deleteLink(item.key, e)}>
{variables.getMessage('modals.main.marketplace.product.buttons.remove')}
<MdCancel />
</button>
</div>
</div>
</div>
);
};
export default QuickLink;