From 4d642e312ed728ad51c454d1e2a0b7bb350fc174 Mon Sep 17 00:00:00 2001 From: Piotr Russ Date: Sun, 6 Dec 2020 23:49:13 +0100 Subject: first creator page --- client/src/admin/data/translations.js | 11 ++++ client/src/admin/hocs/View.jsx | 9 ++++ client/src/admin/hocs/index.js | 3 +- client/src/admin/jsx/App.jsx | 8 +-- client/src/admin/jsx/Info.jsx | 10 ---- client/src/admin/jsx/LangSwitch.jsx | 42 ---------------- client/src/admin/jsx/MainScreen.jsx | 6 ++- client/src/admin/jsx/TopBar.jsx | 35 ------------- client/src/admin/jsx/User.jsx | 39 -------------- client/src/admin/jsx/creator/Creator.jsx | 18 +++++++ client/src/admin/jsx/creator/Step1.jsx | 67 ++++++++++++++++++++++++ client/src/admin/jsx/layout/Info.jsx | 10 ++++ client/src/admin/jsx/layout/LangSwitch.jsx | 42 ++++++++++++++++ client/src/admin/jsx/layout/TopBar.jsx | 35 +++++++++++++ client/src/admin/jsx/layout/UserSwitch.jsx | 39 ++++++++++++++ client/src/admin/scss/_creator.scss | 81 ++++++++++++++++++++++++++++++ client/src/admin/scss/_forms.scss | 38 +++++++++++--- client/src/admin/scss/_globals.scss | 3 -- client/src/admin/scss/index.scss | 1 + client/src/login/jsx/App.jsx | 4 +- 20 files changed, 358 insertions(+), 143 deletions(-) create mode 100644 client/src/admin/hocs/View.jsx delete mode 100644 client/src/admin/jsx/Info.jsx delete mode 100644 client/src/admin/jsx/LangSwitch.jsx delete mode 100644 client/src/admin/jsx/TopBar.jsx delete mode 100644 client/src/admin/jsx/User.jsx create mode 100644 client/src/admin/jsx/creator/Creator.jsx create mode 100644 client/src/admin/jsx/creator/Step1.jsx create mode 100644 client/src/admin/jsx/layout/Info.jsx create mode 100644 client/src/admin/jsx/layout/LangSwitch.jsx create mode 100644 client/src/admin/jsx/layout/TopBar.jsx create mode 100644 client/src/admin/jsx/layout/UserSwitch.jsx create mode 100644 client/src/admin/scss/_creator.scss (limited to 'client/src') diff --git a/client/src/admin/data/translations.js b/client/src/admin/data/translations.js index 732e311..b7a8161 100644 --- a/client/src/admin/data/translations.js +++ b/client/src/admin/data/translations.js @@ -21,6 +21,17 @@ export const translations = { "click-to-logout": "Click to logout current user", "user-settings": "User settings", "click-to-change-user-settings": "Click to change user name, password or to completely remove current user", + "main-information": "Main information", + "website-title": "Website title", + "website-title-hover": "Website title should have less than 55 characters, it will be displayed on the browser tab and will help search engines find your page", + "website-description": "Website description", + "website-description-hover": "Website description should have around 150 characters, it will be displayed on search results under website title", + "upload-favicon": "Website's favicon", + "upload-favicon-hover": "Click to add favicon for your website (32x32px)", + "next": "Next", + "creator-next-hover": "Click to navigate to next screen", + "cancel": "Cancel", + "creator-cancel-hover": "Click to exit creator without saving changes", }, "de": { "main-title": "Website Manager", diff --git a/client/src/admin/hocs/View.jsx b/client/src/admin/hocs/View.jsx new file mode 100644 index 0000000..3c654c2 --- /dev/null +++ b/client/src/admin/hocs/View.jsx @@ -0,0 +1,9 @@ +import React, { useContext } from 'react'; +import Context from '../context'; + +const View = (view) => { + const { setView } = useContext(Context); + return () => setView(view); +}; + +export default View; diff --git a/client/src/admin/hocs/index.js b/client/src/admin/hocs/index.js index df8c0c7..4abd050 100644 --- a/client/src/admin/hocs/index.js +++ b/client/src/admin/hocs/index.js @@ -1,4 +1,5 @@ import WithHover from './WithHover.jsx'; import WithTranslation from './WithTranslation.jsx'; +import View from './View.jsx'; -export { WithHover, WithTranslation as t }; +export { WithHover, WithTranslation as t, View as goTo }; diff --git a/client/src/admin/jsx/App.jsx b/client/src/admin/jsx/App.jsx index 1bb224f..cb82e90 100644 --- a/client/src/admin/jsx/App.jsx +++ b/client/src/admin/jsx/App.jsx @@ -3,9 +3,10 @@ import ReactDOM from 'react-dom'; import "../scss/index.scss"; -import TopBar from './TopBar.jsx'; -import Info from './Info.jsx'; +import TopBar from './layout/TopBar.jsx'; +import Info from './layout/Info.jsx'; import MainScreen from './MainScreen.jsx'; +import Creator from './creator/Creator.jsx'; import Context from '../context'; import { defaultLanguage } from '../data/translations'; import { getUser, setDbLang } from '../api'; @@ -33,11 +34,12 @@ const App = () => { }, [user]); return ( - +
{ view === 'main' && } + { view === 'creator' && }
diff --git a/client/src/admin/jsx/Info.jsx b/client/src/admin/jsx/Info.jsx deleted file mode 100644 index 75294e1..0000000 --- a/client/src/admin/jsx/Info.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { t } from '../hocs'; - -const Info = ({ info, hover }) => ( -

- { hover ? t(hover) : t(info) } -

-); - -export default Info; diff --git a/client/src/admin/jsx/LangSwitch.jsx b/client/src/admin/jsx/LangSwitch.jsx deleted file mode 100644 index 2494bef..0000000 --- a/client/src/admin/jsx/LangSwitch.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { WithHover } from '../hocs'; -import { languages } from '../data/translations.js' - -const LangSwitch = ({ lang, setLang, opened, setOpened}) => { - const handleSetLang = (key) => { - setLang(key); - setOpened(false); - }; - - return ( -
- - setOpened(opened !== 'lang' ? 'lang' : false)} - > - {lang} - - { - opened === 'lang' && ( -
- { - languages.map(key => key !== lang && ( - handleSetLang(key)} - > - {key} - - )) - } -
- ) - } - -
- ); -}; - -export default LangSwitch; diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx index 3d65384..ea2def5 100644 --- a/client/src/admin/jsx/MainScreen.jsx +++ b/client/src/admin/jsx/MainScreen.jsx @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { WithHover, t } from '../hocs'; +import { WithHover, t, goTo } from '../hocs'; const MainScreen = ({ projects }) => (
@@ -16,7 +16,9 @@ const MainScreen = ({ projects }) => ( )} -

{ t('create-new-project') }

+

+ { t('create-new-project') } +

diff --git a/client/src/admin/jsx/TopBar.jsx b/client/src/admin/jsx/TopBar.jsx deleted file mode 100644 index e9be676..0000000 --- a/client/src/admin/jsx/TopBar.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, {useState} from 'react'; -import LangSwitch from './LangSwitch.jsx'; -import User from './User.jsx'; - -const TopBar = ({ user, setUser, lang, setLang }) => { - const [opened, setOpened] = useState(false); - - return ( -
- { opened !== false && ( -
setOpened(false)} - /> - )} - - { user && ( - - ) - } -
- ); -}; - -export default TopBar; diff --git a/client/src/admin/jsx/User.jsx b/client/src/admin/jsx/User.jsx deleted file mode 100644 index eb596bf..0000000 --- a/client/src/admin/jsx/User.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { WithHover, t } from '../hocs'; -import { logout } from '../api'; - -const User = ({ user, setUser, opened, setOpened }) => { - const handleLogout = () => { - setOpened(false); - logout(); - }; - const handleChangePass = () => { setOpened(false) }; - const handleRemoveUser = () => { setOpened(false) }; - - return ( -
- - setOpened(opened !== 'user' ? 'user' : false)} - > - {user.email} - - { - opened === 'user' && ( -
- - {t('logout')} - - - {t('user-settings')} - -
- ) - } - -
- ); -}; - -export default User; diff --git a/client/src/admin/jsx/creator/Creator.jsx b/client/src/admin/jsx/creator/Creator.jsx new file mode 100644 index 0000000..896235e --- /dev/null +++ b/client/src/admin/jsx/creator/Creator.jsx @@ -0,0 +1,18 @@ +import React, { useState } from 'react'; +import Step1 from './Step1'; +import { t, goTo } from '../../hocs'; + +const Creator = ({projects}) => { + const [step, setStep] = useState('step1'); + + switch(step) { + case 'step1': + return ; + case 'step2': + return null; + default: + return null; + } +}; + +export default Creator; diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx new file mode 100644 index 0000000..647661e --- /dev/null +++ b/client/src/admin/jsx/creator/Step1.jsx @@ -0,0 +1,67 @@ +import React, { useState } from 'react'; +import { WithHover, t, goTo } from '../../hocs'; + +const Step1 = () => { + const [websiteTitle, setWebsiteTitle] = useState(''); + const [websiteDescription, setWebsiteDescription] = useState(''); + const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : ''; + + return ( +
+
{ t('main-information') }
+
+ +
+ setWebsiteTitle(e.target.value)} + placeholder={t('website-title')} + id="website-title" + name="website-title" + type="text" + className="text-input-field" + value={websiteTitle} + /> + +
+ +
+
+ +
+ + +
+ +
+
+
+ +
+
+ + + {t('upload-favicon')} + +
+
+
+ +
+ {t('cancel')} +
+ + +
+ {t('next')} +
+ +
+
+ ) +}; + +export default Step1; diff --git a/client/src/admin/jsx/layout/Info.jsx b/client/src/admin/jsx/layout/Info.jsx new file mode 100644 index 0000000..0ea8686 --- /dev/null +++ b/client/src/admin/jsx/layout/Info.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { t } from '../../hocs'; + +const Info = ({ info, hover }) => ( +

+ { hover ? t(hover) : t(info) } +

+); + +export default Info; diff --git a/client/src/admin/jsx/layout/LangSwitch.jsx b/client/src/admin/jsx/layout/LangSwitch.jsx new file mode 100644 index 0000000..684d432 --- /dev/null +++ b/client/src/admin/jsx/layout/LangSwitch.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { WithHover } from '../../hocs'; +import { languages } from '../../data/translations.js' + +const LangSwitch = ({ lang, setLang, opened, setOpened}) => { + const handleSetLang = (key) => { + setLang(key); + setOpened(false); + }; + + return ( +
+ + setOpened(opened !== 'lang' ? 'lang' : false)} + > + {lang} + + { + opened === 'lang' && ( +
+ { + languages.map(key => key !== lang && ( + handleSetLang(key)} + > + {key} + + )) + } +
+ ) + } + +
+ ); +}; + +export default LangSwitch; diff --git a/client/src/admin/jsx/layout/TopBar.jsx b/client/src/admin/jsx/layout/TopBar.jsx new file mode 100644 index 0000000..b6564f7 --- /dev/null +++ b/client/src/admin/jsx/layout/TopBar.jsx @@ -0,0 +1,35 @@ +import React, {useState} from 'react'; +import LangSwitch from './LangSwitch.jsx'; +import UserSwitch from './UserSwitch.jsx'; + +const TopBar = ({ user, setUser, lang, setLang }) => { + const [opened, setOpened] = useState(false); + + return ( +
+ { opened !== false && ( +
setOpened(false)} + /> + )} + + { user && ( + + ) + } +
+ ); +}; + +export default TopBar; diff --git a/client/src/admin/jsx/layout/UserSwitch.jsx b/client/src/admin/jsx/layout/UserSwitch.jsx new file mode 100644 index 0000000..403783c --- /dev/null +++ b/client/src/admin/jsx/layout/UserSwitch.jsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { WithHover, t } from '../../hocs'; +import { logout } from '../../api'; + +const User = ({ user, setUser, opened, setOpened }) => { + const handleLogout = () => { + setOpened(false); + logout(); + }; + const handleChangePass = () => { setOpened(false) }; + const handleRemoveUser = () => { setOpened(false) }; + + return ( +
+ + setOpened(opened !== 'user' ? 'user' : false)} + > + {user.email} + + { + opened === 'user' && ( +
+ + {t('logout')} + + + {t('user-settings')} + +
+ ) + } + +
+ ); +}; + +export default User; diff --git a/client/src/admin/scss/_creator.scss b/client/src/admin/scss/_creator.scss new file mode 100644 index 0000000..0bf267e --- /dev/null +++ b/client/src/admin/scss/_creator.scss @@ -0,0 +1,81 @@ +.creator { + text-align: center; + width: 100%; + + &__header { + color: $text; + text-align: center; + font-size: 1.5em; + padding-bottom: 1.5em; + } + + &__input-line { + max-width: 600px; + margin: 0 auto; + align-items: center; + padding: 1em 0; + } + + &__favicon { + display: flex; + + &-ico { + height: 32px; + width: 32px; + line-height: 32px; + background: $text-inactive; + color: $background-menu; + border: 1px solid $background-menu; + transition: .3s background; + cursor: pointer; + + &:hover { + background: $text-selected; + } + } + + &-text { + color: $text-inactive; + font-size: 1em; + line-height: 32px; + padding-left: 1em; + } + } + + &__btns { + padding-top: 3em; + font-size: 1.5em; + margin: 0 auto; + text-align: center; + display: flex; + justify-content: center; + + &-next { + color: $text-inactive; + display: inline-block; + padding: 1em; + + &.active { + color: $text; + transition: .3s color; + cursor: pointer; + + &:hover { + color: $text-selected; + } + } + } + + &-cancel { + display: inline-block; + color: $text; + transition: .3s color; + cursor: pointer; + padding: 1em; + + &:hover { + color: $text-selected; + } + } + } +} diff --git a/client/src/admin/scss/_forms.scss b/client/src/admin/scss/_forms.scss index e74c343..3e98014 100644 --- a/client/src/admin/scss/_forms.scss +++ b/client/src/admin/scss/_forms.scss @@ -1,6 +1,7 @@ // Text Input -.text-input { +.text-input, +.text-area { text-align: left; margin-bottom: 1.5em; transition: all .3s; @@ -11,12 +12,12 @@ } } -.text-input-label { +.text-input-label, +.text-area-label { font-size: 1em; width: 100%; color: #aaa; display:block; - transform:translateY(-1.75em); transform-origin: 0 0; transition: all .3s; z-index: -1; @@ -24,17 +25,28 @@ pointer-events: none; } -.text-input-field { - font-size: 1.25rem; +.text-input-label { + transform:translateY(-1.75em); +} + +.text-area-label { + transform:translateY(-2em); +} + +.text-input-field, +.text-area textarea { + font-size: 1.25em; box-shadow: none; background: $background; - color: $text; + color: $text-selected; border-radius: 0; border-color: #ccc; border-style: none none solid none; width: 100%; transition: all .5s; padding: 5px; + -webkit-user-select: auto; + user-select: auto; &::placeholder { color: transparent; @@ -46,8 +58,22 @@ border-color: $text-selected; } +} + +.text-input-field { &:focus + .text-input-label, &:not(:placeholder-shown) + .text-input-label { transform: translateY(-3em) scale(0.8); } } + +.text-area textarea { + height: 6em; + resize: none; + overflow:hidden; + + &:focus + .text-area-label, + &:not(:placeholder-shown) + .text-area-label { + transform: translateY(-6.5em) scale(0.8); + } +} diff --git a/client/src/admin/scss/_globals.scss b/client/src/admin/scss/_globals.scss index d15363f..1039f4b 100644 --- a/client/src/admin/scss/_globals.scss +++ b/client/src/admin/scss/_globals.scss @@ -4,9 +4,6 @@ html { * { -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: -moz-none; - -o-user-select: none; user-select: none; } diff --git a/client/src/admin/scss/index.scss b/client/src/admin/scss/index.scss index ab61dd9..8290be8 100644 --- a/client/src/admin/scss/index.scss +++ b/client/src/admin/scss/index.scss @@ -6,3 +6,4 @@ @import 'info'; @import 'topBar'; @import 'mainScreen'; +@import 'creator'; diff --git a/client/src/login/jsx/App.jsx b/client/src/login/jsx/App.jsx index 58256a8..e5921fc 100644 --- a/client/src/login/jsx/App.jsx +++ b/client/src/login/jsx/App.jsx @@ -3,8 +3,8 @@ import ReactDOM from 'react-dom'; import "../scss/index.scss"; -import TopBar from '../../admin/jsx/TopBar.jsx'; -import Info from '../../admin/jsx/Info.jsx'; +import TopBar from '../../admin/jsx/layout/TopBar.jsx'; +import Info from '../../admin/jsx/layout/Info.jsx'; import LoginPanel from './LoginPanel.jsx'; import Context from '../../admin/context'; import { defaultLanguage } from '../../admin/data/translations'; -- cgit v1.2.3