diff --git a/src/components/panels/UserPanel.jsx b/src/components/panels/UserPanel.jsx index 0cf3a9a..f154927 100644 --- a/src/components/panels/UserPanel.jsx +++ b/src/components/panels/UserPanel.jsx @@ -4,12 +4,14 @@ import { GuestButton } from '$components/user/GuestButton'; import { SERVER } from '$constants/api'; import { DEFAULT_USER, ROLES } from '$constants/auth'; import { UserButton } from '$components/user/UserButton'; -import { Icon } from '$components/panels/Icon'; +import { UserMenu } from '$components/user/UserMenu'; export class UserPanel extends React.PureComponent { - componentDidMount() { - window.doLogin = console.log; + state = { + menuOpened: false, + }; + componentDidMount() { window.addEventListener('message', e => { const { data } = e; @@ -32,10 +34,13 @@ export class UserPanel extends React.PureComponent { } }; + this.setState({ menuOpened: false }); this.props.setUser(user); }); } + setMenuOpened = () => this.setState({ menuOpened: !this.state.menuOpened }); + openOauthFrame = () => { const width = parseInt(window.innerWidth, 10); const height = parseInt(window.innerHeight, 10); @@ -51,27 +56,24 @@ export class UserPanel extends React.PureComponent { render() { const { - user - } = this.props; + props: { user, userLogout }, + state: { menuOpened }, + } = this; return (
-
- +
+ { + !user || user.role === ROLES.guest + ? + : + } + { + (user && user.role && user.role !== 'guest' && menuOpened) && + + }
- -
- - { - !user || user.role === ROLES.guest - ? - : - }
); diff --git a/src/components/user/UserButton.jsx b/src/components/user/UserButton.jsx index 986826e..29e3b16 100644 --- a/src/components/user/UserButton.jsx +++ b/src/components/user/UserButton.jsx @@ -2,16 +2,17 @@ import React from 'react'; import { UserPicture } from '$components/user/UserPicture'; export const UserButton = ({ - user: { - id, - userdata: { - name, - photo, - } + setMenuOpened, + user: { + id, + userdata: { + name, + photo, } + } }) => (
-
+
diff --git a/src/components/user/UserMenu.jsx b/src/components/user/UserMenu.jsx new file mode 100644 index 0000000..37819f4 --- /dev/null +++ b/src/components/user/UserMenu.jsx @@ -0,0 +1,19 @@ +import React from 'react'; + +export const UserMenu = ({ userLogout, user: { id, userdata: { agent, ip } } }) => ( +
+
+
Мы храним следующие данные о вас:
+ { id &&
ID: {id}
} + { agent &&
Браузер: {agent}
} + { ip &&
Адрес: {ip}
} +
Мы используем их для авторизации и исправления ошибок.
+
+ + Проект на github + +
+ Выйти +
+
+); diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 274ad7d..ab5e2f5 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -66,7 +66,6 @@ export class App extends React.Component { const fallback = () => getGuestToken({ callback: this.setUser }); if (id && token) { - console.log('checking'); checkUserToken({ callback: this.setUser, fallback, @@ -79,11 +78,8 @@ export class App extends React.Component { }; setUser = user => { - console.log('hup', user); if (!user.token || !user.id) return; - console.log('setting', user); - this.setState({ user: { ...DEFAULT_USER, @@ -102,6 +98,16 @@ export class App extends React.Component { return getData('user') || null; }; + userLogout = () => { + this.setState({ + user: { + ...DEFAULT_USER, + } + }); + + this.storeUserData(); + }; + render() { const { editor, @@ -120,6 +126,7 @@ export class App extends React.Component { { const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng); - console.log('push', waypoints); this.router.setWaypoints([...waypoints, { lat, lng }]); }; diff --git a/src/sprites/icons_draft.svg b/src/sprites/icons_draft.svg index 14f2751..cfa3fd2 100644 --- a/src/sprites/icons_draft.svg +++ b/src/sprites/icons_draft.svg @@ -7,7 +7,6 @@ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="600" @@ -26,9 +25,9 @@ borderopacity="1.0" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:zoom="2.8284271" - inkscape:cx="-4.6277031" - inkscape:cy="14.448652" + inkscape:zoom="2" + inkscape:cx="-83.901329" + inkscape:cy="9.506994" inkscape:document-units="px" inkscape:current-layer="svg8" showgrid="false" @@ -39,7 +38,7 @@ inkscape:window-maximized="1" units="px" inkscape:showpageshadow="false" - inkscape:snap-global="true" /> + inkscape:snap-global="false" /> @@ -57,59 +56,6 @@ inkscape:groupmode="layer" id="layer1" transform="translate(0,-288.53332)" /> - - - - - - - - - - - @@ -494,7 +440,8 @@ style="fill:#ececec;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + id="icon-locate" + transform="translate(-224)"> + + + diff --git a/src/styles/panel.less b/src/styles/panel.less index fdf73d8..79a6f5a 100644 --- a/src/styles/panel.less +++ b/src/styles/panel.less @@ -176,3 +176,4 @@ } } } + diff --git a/src/styles/user-button.less b/src/styles/user-button.less index 6d53a2e..2c4bfe5 100644 --- a/src/styles/user-button.less +++ b/src/styles/user-button.less @@ -1,5 +1,5 @@ .user-bar { - width: 200px; + width: 240px; .button { width: 100%; @@ -12,6 +12,7 @@ display: flex; user-select: none; + cursor: pointer; } .user-button-picture { @@ -41,7 +42,7 @@ } .user-button-name { - font-size: 12px; + font-size: 14px; } .user-button-text { @@ -50,3 +51,67 @@ padding-top: 2px; font-weight: 200; } + + +.user-panel { + position: relative; +} + +.user-panel-menu { + position: absolute; + bottom: 45px; + left: 0; + width: 100%; + background: @dialog_background; + border-radius: 3px; + padding: 0 0 3px 0; + box-sizing: border-box; + z-index: -1 +} + +.user-panel-item { + padding: 10px 10px; + position: relative; + cursor: pointer; + width: 100%; + transition: all 250ms; + color: white; + box-sizing: border-box; + user-select: none; + display: block; + border-bottom: 1px solid rgba(255,255,255,0.1); + text-decoration: none; + font-weight: 200; + + &:first-child::after { + border-radius: 3px 3px 0 0; + } + + &::after { + content: ' '; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: linear-gradient(150deg, @blue_primary, @blue_secondary); + opacity: 0; + transition: opacity 0.3s; + z-index: -1; + } + + &:hover::after { + opacity: 0.5; + } +} + +.user-panel-text { + padding: 10px; + opacity: 0.5; + font-weight: 200; + border-bottom: 1px solid rgba(255,255,255,0.1); + + div { + padding-top: 5px; + } +}