From 52dafcef97b5567f822ca0a37a2ed3d7ff88c622 Mon Sep 17 00:00:00 2001 From: "weakmap@gmail.com" Date: Sun, 27 Mar 2022 19:42:58 +0200 Subject: [PATCH] improving ui / ux --- CHANGELOG.md | 7 + package.json | 4 +- ui/src/App.less | 8 ++ ui/src/components/menu/Menu.less | 2 +- ui/src/components/segment/SegmentPart.js | 27 ++++ ui/src/components/segment/SegmentParts.less | 4 + .../views/generalSettings/GeneralSettings.js | 29 +--- .../generalSettings/GeneralSettings.less | 4 + ui/src/views/jobs/ProcessingTimes.js | 10 +- ui/src/views/jobs/mutation/JobMutation.js | 124 +++++++----------- ui/src/views/jobs/mutation/JobMutation.less | 24 ---- ui/src/views/user/mutation/UserMutator.js | 76 ++++++----- 12 files changed, 150 insertions(+), 169 deletions(-) create mode 100644 ui/src/components/segment/SegmentPart.js create mode 100644 ui/src/components/segment/SegmentParts.less diff --git a/CHANGELOG.md b/CHANGELOG.md index 8363e8f..b203959 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +Newer release changelog see https://github.com/orangecoding/fredy/releases + +------------ + +###### [V5.4.6] +- Adding Instana node.js monitoring +- ###### [V5.4.5] - Adding Instana node.js monitoring diff --git a/package.json b/package.json index 0032176..44fec6a 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fredy", - "version": "5.4.8", + "version": "5.5.0", "description": "[F]ind [R]eal [E]states [d]amn eas[y].", "scripts": { "start": "node index.js", @@ -96,7 +96,7 @@ "css-loader": "6.7.1", "eslint": "7.32.0", "eslint-config-prettier": "8.5.0", - "eslint-plugin-react": "7.29.3", + "eslint-plugin-react": "7.29.4", "file-loader": "6.2.0", "history": "5.3.0", "husky": "4.3.8", diff --git a/ui/src/App.less b/ui/src/App.less index bdd4a2d..2bab601 100644 --- a/ui/src/App.less +++ b/ui/src/App.less @@ -10,4 +10,12 @@ background-color: #3f3e3ef5; color: #f1f1f1; } +} + +.ui.inverted.segment{ + background: #31303078!important; +} + +.ui.black.label, .ui.black.labels .label { + background-color: #31303078!important; } \ No newline at end of file diff --git a/ui/src/components/menu/Menu.less b/ui/src/components/menu/Menu.less index 3579ab7..1d84a53 100644 --- a/ui/src/components/menu/Menu.less +++ b/ui/src/components/menu/Menu.less @@ -4,7 +4,7 @@ &__active { border-bottom: 1px solid #06dcfff2 !important; font-weight: 550 !important; - color: #78e5ff !important; + color: #3ed7ff !important; margin: 0 0 -1px !important; } diff --git a/ui/src/components/segment/SegmentPart.js b/ui/src/components/segment/SegmentPart.js new file mode 100644 index 0000000..aa0a9ce --- /dev/null +++ b/ui/src/components/segment/SegmentPart.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Header, Icon, Popup, Segment } from 'semantic-ui-react'; + +import './SegmentParts.less'; + +export const SegmentPart = ({ name, icon = null, children, helpText }) => ( + +
+ {icon && } + {name} +
+ + + {' '} + + What is this? + + } + /> + + {children} + + +); diff --git a/ui/src/components/segment/SegmentParts.less b/ui/src/components/segment/SegmentParts.less new file mode 100644 index 0000000..0ecc660 --- /dev/null +++ b/ui/src/components/segment/SegmentParts.less @@ -0,0 +1,4 @@ +.segmentParts { + border: 1px solid #323232 !important; + border-radius: 5px !important; +} \ No newline at end of file diff --git a/ui/src/views/generalSettings/GeneralSettings.js b/ui/src/views/generalSettings/GeneralSettings.js index b83e180..972a8ac 100644 --- a/ui/src/views/generalSettings/GeneralSettings.js +++ b/ui/src/views/generalSettings/GeneralSettings.js @@ -2,36 +2,13 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { Button, Form, Header, Icon, Message, Popup, Segment } from 'semantic-ui-react'; +import { Button, Form, Icon, Message, Segment } from 'semantic-ui-react'; import ToastContext from '../../components/toasts/ToastContext'; import Headline from '../../components/headline/Headline'; import { xhrPost } from '../../services/xhr'; - +import { SegmentPart } from '../../components/segment/SegmentPart'; import './GeneralSettings.less'; -const SegmentPart = ({ name, icon, children, helpText }) => ( - -
- - {name} -
- - - {' '} - - What is this? - - } - /> - - {children} - - -); - const GeneralSettings = function Users() { const dispatch = useDispatch(); const [loading, setLoading] = React.useState(true); @@ -111,7 +88,7 @@ const GeneralSettings = function Users() { {!loading && ( - +
Info diff --git a/ui/src/views/generalSettings/GeneralSettings.less b/ui/src/views/generalSettings/GeneralSettings.less index b712ea5..21138eb 100644 --- a/ui/src/views/generalSettings/GeneralSettings.less +++ b/ui/src/views/generalSettings/GeneralSettings.less @@ -14,4 +14,8 @@ margin-left: 1rem; } + &__message{ + background: #60c5df!important; + } + } diff --git a/ui/src/views/jobs/ProcessingTimes.js b/ui/src/views/jobs/ProcessingTimes.js index 3beb374..7c474b1 100644 --- a/ui/src/views/jobs/ProcessingTimes.js +++ b/ui/src/views/jobs/ProcessingTimes.js @@ -37,9 +37,13 @@ export default function ProcessingTimes({ processingTimes }) { {processingTimes.scrapingAntData.plan_total_credits} (250 credits per call) - If you want to scrape Immoscout more often, you have to purchase a premium account of ScrapingAnt. You can use - the code FREDY10 to get 10% off. (No affiliation, we are not getting paid to recommend - ScrapingAnt. + If you want to scrape Immoscout more often, you have to purchase a premium account of{' '} + + {' '} + ScrapingAnt + + . You can use the code FREDY10 to get 10% off. (No affiliation, we are not getting paid to + recommend ScrapingAnt. )} diff --git a/ui/src/views/jobs/mutation/JobMutation.js b/ui/src/views/jobs/mutation/JobMutation.js index d85b901..16b3afc 100644 --- a/ui/src/views/jobs/mutation/JobMutation.js +++ b/ui/src/views/jobs/mutation/JobMutation.js @@ -2,7 +2,7 @@ import React, { Fragment, useState } from 'react'; import NotificationAdapterMutator from './components/notificationAdapter/NotificationAdapterMutator'; import NotificationAdapterTable from '../../../components/table/NotificationAdapterTable'; -import { Header, Icon, Form, Popup, Button, Label } from 'semantic-ui-react'; +import { Icon, Form, Button, Label } from 'semantic-ui-react'; import ProviderTable from '../../../components/table/ProviderTable'; import ProviderMutator from './components/provider/ProviderMutator'; import ToastContext from '../../../components/toasts/ToastContext'; @@ -14,6 +14,7 @@ import { useParams } from 'react-router'; import './JobMutation.less'; import Switch from 'react-switch'; +import { SegmentPart } from '../../../components/segment/SegmentPart'; export default function JobMutator() { const jobs = useSelector((state) => state.jobs.jobs); @@ -39,27 +40,6 @@ export default function JobMutator() { const dispatch = useDispatch(); const ctx = React.useContext(ToastContext); - const header = (name, icon) => ( -
- - {name} -
- ); - - const help = (helpText) => ( -
- - - What is this? - - } - /> -
- ); - const isSavingEnabled = () => { return notificationAdapterData.length > 0 && providerData.length > 0 && name != null && name.length > 0; }; @@ -128,8 +108,8 @@ export default function JobMutator() { )} -
-
+ + setName(e.target.value)} /> -
+ -
- {header('Provider', 'briefcase')} + + setProviderCreationVisibility(true)}> + + Add new Provider + -
- {help( - 'A provider is essentially the service (Immowelt etc.) that Fredy is using to search for new listings. When adding a new provider, Fredy will open a new tab pointing ' + - 'to the website of this provider. You have to adjust your search parameter and click on "Search". If the results are being shown, copy the browser url. This is the url, Fredy will use ' + - 'to search for new listings.' - )} - - setProviderCreationVisibility(true)}> - - Add new Provider - -
{ setProviderData(providerData.filter((provider) => provider.id !== providerId)); }} /> -
+ -
- {header('Notification Adapter', 'bell')} - -
- {help( - 'Fredy supports multiple ways to notify you about new findings. These are called notification adapter. You can chose between email, Telegram etc.' - )} - - setNotificationCreationVisibility(true)} - > - - Add new Notification Adapter - -
+ + setNotificationCreationVisibility(true)} + > + + Add new Notification Adapter + -
- -
- {header('Blacklist', 'bell')} - -
- {help( - 'If a listing contains one of these words, it will be filtered out. Words must be comma separated. To remove a word from the black list, just click the red label(s).' - )} -
+ + ))} -
- -
- {header('Job activation', 'play circle outline')} - -
- {help( - 'Whether or not the job is activated. If it is not activated, it will be ignored when Fredy checks for new listings.' - )} -
+ + setEnabled(checked)} checked={enabled} /> -
+