mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-06-11 19:18:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: UX improvements to custom backgrounds

Browse Source
This commit is contained in:
alexsparkes
2022-10-27 17:58:42 +01:00
parent 73501a4fb9
commit a4c10bc3b3
2 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/modals/main/scss/settings/modules/tabs/_order.scss
View File

@@ -52,12 +52,13 @@
@include themed() {
div {
border-radius: t($borderRadius);
border: 5px t($modal-sidebar) solid;
// border: 5px t($modal-sidebar) solid;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
gap: 5px;
position: relative;
img {
width: 100%;
height: 200px;
@@ -72,6 +73,11 @@
background: t($modal-sidebarActive);
}
}
.tooltip {
position: absolute !important;
top: 5px !important;
right: 5px !important;
}
}
.iconButton {
width: calc(100% - 22px);

27
src/components/modals/main/settings/sections/background/Custom.jsx
View File

@@ -15,6 +15,8 @@ import { videoCheck } from 'modules/helpers/background/widget';
import Checkbox from '../../Checkbox';
import FileUpload from '../../FileUpload';
import Tooltip from '../../../../../helpers/tooltip/Tooltip'
import Modal from 'react-modal';
@@ -180,8 +182,16 @@ export default class CustomSettings extends PureComponent {
<div>
<MdAddPhotoAlternate />
<div>
<span className="title">{variables.getMessage('modals.main.settings.sections.background.source.custom_title')}</span>
<span className="subtitle">{variables.getMessage('modals.main.settings.sections.background.source.custom_description')}</span>
<span className="title">
{variables.getMessage(
'modals.main.settings.sections.background.source.custom_title',
)}
</span>
<span className="subtitle">
{variables.getMessage(
'modals.main.settings.sections.background.source.custom_description',
)}
</span>
</div>
</div>
<div className="topbarbuttons">
@@ -206,10 +216,15 @@ export default class CustomSettings extends PureComponent {
/>
{this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
{this.state.customBackground.length > 0 ? (
<button onClick={() => this.modifyCustomBackground('remove', index)}>
{variables.getMessage('modals.main.settings.sections.background.source.remove')}{' '}
<MdCancel />
</button>
<Tooltip
title={variables.getMessage(
'modals.main.settings.sections.background.source.remove',
)}
>
<button onClick={() => this.modifyCustomBackground('remove', index)}>
<MdCancel />
</button>
</Tooltip>
) : null}
</div>
))}