From 61bed2b478e04d04fcbc54512fc73b8780ffd5d5 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Thu, 9 Jun 2022 21:15:57 +0100 Subject: [PATCH] feat: background settings improvements Co-authored-by: David Ralph --- .DS_Store | Bin 6148 -> 10244 bytes .../modals/main/scss/marketplace/_main.scss | 5 + .../modals/main/scss/settings/_main.scss | 54 ++++++----- .../scss/settings/modules/tabs/_order.scss | 10 +- .../sections/background/Background.jsx | 4 +- .../settings/sections/background/Custom.jsx | 87 +++++++++++++++++- src/scss/_variables.scss | 10 ++ 7 files changed, 139 insertions(+), 31 deletions(-) diff --git a/.DS_Store b/.DS_Store index 206831e967152cd1c7299604d2d856d2d4283d93..bac96f5d044e1073917ab9aa104532042fd8dfe1 100644 GIT binary patch literal 10244 zcmeHM&uMKc%6jCr66$uEdr@kMO_n8B*eu8=Kv}Q;i^5*D)ldth4qf*9|=;3 zPMdo-TsE7fN7$O@!@K7|`+YE9YcrjTyHG2j?*3^)cH1CD_Y zg#rA}=H@NL()Er3$ADvC!T|3NJ}#COEl06bTL(II1c1z8ST)=i`3BP0vZCcEmY6{k zu_|P&D)bRU#OfILHLjxND3-B034Qnw+Op6m6rrqReP6*zRAT9R$ADuX%>bX>b5x=Y z3TR-S-^Cw?j+%2FS*s#*9WQSw9Bb*dY7Dip zjqQF{V}EaS!=OJXm!FB5+1!D-yqEVDydP?ta=SLD4~G5KdhaHG`bNsIF}|-iz75*j z>&3&DWHhJ;QM;!Uf>s-l@4pM8mfT*I!>H9)y0v)1D|m(V;?bR*<#XlJ{@InUc2D~| z=a+H6a`xQrZoxZp^2-Z1*6)O!NZwaolhE5I9gIIu`UlCFtZWpTPm}XzF1F~maV{(l zJ93(dER2Hl8ymha0IKxiJ`MewmrcTwG&sH6^s313l5;&Y>x^7J)brc1O&*QiEoHd-9R zs%B&!R;>(un}BWU5<1awN!L|tR23Q+S(-_9b}pS2gV zRo5H?jseGjW56-s7v(+N*YTg}u`)|;n6GF#iltJ=xKfAwpMDJJo9CprInTTE ZzdQd|C-1kjPxfY=WTUK;_Io=2zX4!i*kAwv delta 156 zcmZn(XfcprU|?W$DortDU=RQ@Ie-{Mvv5sJ6q~50D9Q_x2aA<36np06Cnx3PCv8kz z&dkWWSwv8Paq=1={>lBqag+CoNKT$7B0srQblK#^VhNKci>po6lrWn-TjI%Lb`B0f nW}rbpAixbITtOCWO#IF~nP0^dWE}$&#A=Xh7&gcA%wYxq?mi$N diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index 5fa64acf..669b243b 100644 --- a/src/components/modals/main/scss/marketplace/_main.scss +++ b/src/components/modals/main/scss/marketplace/_main.scss @@ -231,6 +231,11 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ } + button { + svg { + font-size: 1rem; + } + } .buttonsRow { display: flex; flex-flow: row; diff --git a/src/components/modals/main/scss/settings/_main.scss b/src/components/modals/main/scss/settings/_main.scss index cc9b285d..5e41de81 100644 --- a/src/components/modals/main/scss/settings/_main.scss +++ b/src/components/modals/main/scss/settings/_main.scss @@ -88,33 +88,45 @@ h4 { } } -.dropzone { - @include themed() { - background: t($modal-sidebar); - border: 3px solid t($modal-sidebarActive); - color: t($color); - border-radius: 12px; - font-size: 1rem; +.photosEmpty { + height: 400px; + display: grid; + place-items: center; + button { + padding: 0 20px 0 20px; + } +} + +.imagesTopBar { + padding-top: 25px; + display: flex; + flex-flow: row; + justify-content: space-between; + align-items: center; + div:nth-child(1) { display: flex; + flex-flow: row; align-items: center; - flex-flow: column; - justify-content: center; - gap: 10px; - transition: 0.5s; - padding: 45px 25px 45px 25px; + gap: 20px; svg { - font-size: 48px; + font-size: 30px; + @include themed() { + color: t($subColor); + } } - .title { - font-size: 18px; - } - &:hover { - border-style: dashed; - } - button { - width: 80% !important; + div { + display: flex; + flex-flow: column; } } + .topbarbuttons { + display: flex; + flex-flow: row; + gap: 25px; + } + button { + padding: 0 20px 0 20px; + } } .statsGrid { diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss index 5240bc3c..96b68825 100644 --- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss +++ b/src/components/modals/main/scss/settings/modules/tabs/_order.scss @@ -45,16 +45,20 @@ } .images-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + height: 250px; + padding: 20px; + grid-gap: 20px; @include themed() { - display: flex; - flex-wrap: wrap; - gap: 15px; div { background: t($modal-sidebar); padding: 10px; box-shadow: 0 0 0 4px t($modal-sidebarActive); border-radius: t($borderRadius); gap: 10px; + display: flex; + justify-content: center; img { width: auto; height: 100px; diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx index 4807b2fe..5ef1614b 100644 --- a/src/components/modals/main/settings/sections/background/Background.jsx +++ b/src/components/modals/main/settings/sections/background/Background.jsx @@ -98,6 +98,7 @@ export default class BackgroundSettings extends PureComponent { const APISettings = ( <> + {interval} this.setState({ backgroundAPI: e })} /> - {interval} ); @@ -217,7 +217,7 @@ export default class BackgroundSettings extends PureComponent { className="mainTitle" onClick={() => this.setState({ backgroundSettingsSection: false })} > - {getMessage('modals.main.settings.sections.background.title')}{' '} + {getMessage('modals.main.settings.sections.background.title')}{' '} {' '} {getMessage('modals.main.settings.sections.background.source.title')} diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx index 932fb0cc..79f063c9 100644 --- a/src/components/modals/main/settings/sections/background/Custom.jsx +++ b/src/components/modals/main/settings/sections/background/Custom.jsx @@ -1,7 +1,14 @@ import variables from 'modules/variables'; import { PureComponent, createRef } from 'react'; import { toast } from 'react-toastify'; -import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md'; +import { + MdCancel, + MdAddLink, + MdAddPhotoAlternate, + MdPersonalVideo, + MdOutlineFileUpload, + MdFolder, +} from 'react-icons/md'; import EventBus from 'modules/helpers/eventbus'; import { compressAccurately, filetoDataURL } from 'image-conversion'; import { videoCheck } from 'modules/helpers/background/widget'; @@ -14,7 +21,7 @@ import Modal from 'react-modal'; import CustomURLModal from './CustomURLModal'; export default class CustomSettings extends PureComponent { - getMessage = (text) => variables.language.getMessage(variables.languagecode, text); + getMessage = (text, obj) => variables.language.getMessage(variables.languagecode, text, obj || {}); constructor() { super(); @@ -165,9 +172,10 @@ export default class CustomSettings extends PureComponent { return ( <> {this.props.interval} -
+ + {/*
-
+ {/*
{this.state.customBackground.map((url, index) => (
))} -
+
+
@@ -210,6 +219,74 @@ export default class CustomSettings extends PureComponent {
+
*/} + +
+
+
+ +
+ Custom Images + Select images from your local computer +
+
+
+ + +
+
+
+ {this.state.customBackground.length > 0 ? ( +
+ {this.state.customBackground.map((url, index) => ( +
+ {'Custom + {this.videoCheck(url) ? : null} + {this.state.customBackground.length > 0 ? ( + + ) : null} +
+ ))} +
+ ) : ( +
+
+ + + {this.getMessage( + 'modals.main.settings.sections.background.source.drop_to_upload', + )} + + + {this.getMessage( + 'modals.main.settings.sections.background.source.formats', + { + list: 'jpeg, png, webp, webm, gif, mp4, webm, ogg', + }, + )} + + +
+
+ )} +