diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index 83f0d992..dd17f050 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -338,7 +338,6 @@ .control { cursor: pointer; - margin-left: 1.6rem; border: 0; .icon { @@ -356,7 +355,128 @@ } } + .control + .control { + margin-left: 1.6rem; + } + img { vertical-align: middle; } } + +.userControl { + align-items: baseline; + display: flex; + + @include font-size(1.7rem); + + justify-content: flex-end; + + @include media-breakpoint-down(md) { + padding: divide($container-padding-x, 2); + } + + .userpic { + margin-right: 0; + + img { + height: 100%; + width: 100%; + } + } +} + +.userControlItem { + align-items: center; + border: 2px solid #f6f6f6; + border-radius: 100%; + display: flex; + height: 2.4em; + justify-content: center; + margin-left: divide($container-padding-x, 2); + position: relative; + width: 2.4em; + + @include media-breakpoint-up(sm) { + margin-left: 1.2rem; + } + + .circlewrap { + height: 23px; + min-width: 23px; + width: 23px; + } + + .button, + a { + border: none; + + &:hover { + background: none; + + &::before { + background-color: #000; + } + + img { + filter: invert(1); + } + } + + img { + filter: invert(0); + transition: filter 0.3s; + } + + &::before { + background-color: #fff; + border-radius: 100%; + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + transition: background-color 0.3s; + width: 100%; + } + } + + img { + height: 20px; + vertical-align: middle; + width: auto; + } + + .textLabel { + display: none; + } +} + +.userControlItemInbox, +.userControlItemSearch { + @include media-breakpoint-down(sm) { + display: none; + } +} + +.userControlItemWritePost { + width: auto; + + @include media-breakpoint-up(lg) { + .icon { + display: none; + } + + .textLabel { + display: inline; + padding: 0 1.2rem; + position: relative; + z-index: 1; + } + } + + &, + a::before { + border-radius: 1.2em; + } +} diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx index cf19c73c..aa29bb56 100644 --- a/src/components/Nav/Header.tsx +++ b/src/components/Nav/Header.tsx @@ -1,5 +1,4 @@ import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js' -import Private from './Private' import Notifications from './Notifications' import { Icon } from './Icon' import { Modal } from './Modal' @@ -9,11 +8,13 @@ import { useModalStore, showModal, useWarningsStore } from '../../stores/ui' import { useAuthStore } from '../../stores/auth' import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router' import styles from './Header.module.scss' -import privateStyles from './Private.module.scss' import { getPagePath } from '@nanostores/router' import { getLogger } from '../../utils/logger' import { clsx } from 'clsx' import { SharePopup } from '../Article/SharePopup' +import { ProfilePopup } from './ProfilePopup' +import Userpic from '../Author/Userpic' +import type { Author } from '../../graphql/types.gen' const log = getLogger('header') @@ -35,6 +36,8 @@ export const Header = (props: Props) => { const [fixed, setFixed] = createSignal(false) const [visibleWarnings, setVisibleWarnings] = createSignal(false) const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false) + const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false) + // stores const { warnings } = useWarningsStore() const { session } = useAuthStore() @@ -86,7 +89,8 @@ export const Header = (props: Props) => { classList={{ [styles.headerFixed]: props.isHeaderFixed, [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(), - [styles.headerScrolledBottom]: (getIsScrollingBottom() && getIsScrolled()) || isSharePopupVisible(), + [styles.headerScrolledBottom]: + (getIsScrollingBottom() && getIsScrolled() && !isProfilePopupVisible()) || isSharePopupVisible(), [styles.headerWithTitle]: Boolean(props.title) }} > @@ -128,8 +132,15 @@ export const Header = (props: Props) => {
-
-
+
+ + +
@@ -138,7 +149,7 @@ export const Header = (props: Props) => {
-
+
@@ -146,21 +157,42 @@ export const Header = (props: Props) => { +
} > - + + { + setIsProfilePopupVisible(isVisible) + }} + containerCssClass={styles.control} + trigger={ +
+ +
+ } + />
{ - console.log({ isVisible }) setIsSharePopupVisible(isVisible) }} containerCssClass={styles.control} diff --git a/src/components/Nav/Popup.module.scss b/src/components/Nav/Popup.module.scss index 4a8b32c5..75ca81ad 100644 --- a/src/components/Nav/Popup.module.scss +++ b/src/components/Nav/Popup.module.scss @@ -6,9 +6,17 @@ background: #fff; border: 2px solid #000; top: calc(100% + 8px); - transform: translateX(-50%); opacity: 1; + &.horizontalAnchorCenter { + left: 50%; + transform: translateX(-50%); + } + + &.horizontalAnchorRight { + right: 0; + } + @include font-size(1.6rem); padding: 2.4rem; diff --git a/src/components/Nav/Popup.tsx b/src/components/Nav/Popup.tsx index a53517cf..bf9f6ced 100644 --- a/src/components/Nav/Popup.tsx +++ b/src/components/Nav/Popup.tsx @@ -2,15 +2,19 @@ import { createEffect, createSignal, JSX, onCleanup, onMount, Show } from 'solid import styles from './Popup.module.scss' import { clsx } from 'clsx' +type HorizontalAnchor = 'center' | 'right' + export type PopupProps = { containerCssClass?: string trigger: JSX.Element children: JSX.Element onVisibilityChange?: (isVisible) => void + horizontalAnchor?: HorizontalAnchor } export const Popup = (props: PopupProps) => { const [isVisible, setIsVisible] = createSignal(false) + const horizontalAnchor: HorizontalAnchor = props.horizontalAnchor || 'center' createEffect(() => { if (props.onVisibilityChange) { @@ -38,12 +42,19 @@ export const Popup = (props: PopupProps) => { }) const toggle = () => setIsVisible((oldVisible) => !oldVisible) - // class={clsx(styles.popupShare, stylesPopup.popupShare)} + return ( {props.trigger} -
{props.children}
+
+ {props.children} +
) diff --git a/src/components/Nav/Private.module.scss b/src/components/Nav/Private.module.scss deleted file mode 100644 index 5d68cf08..00000000 --- a/src/components/Nav/Private.module.scss +++ /dev/null @@ -1,116 +0,0 @@ -.userControl { - align-items: baseline; - display: flex; - - @include font-size(1.7rem); - - justify-content: flex-end; - - @include media-breakpoint-down(md) { - padding: divide($container-padding-x, 2); - } - - .userpic { - margin-right: 0; - - img { - height: 100%; - width: 100%; - } - } -} - -.userControlItem { - align-items: center; - border: 2px solid #f6f6f6; - border-radius: 100%; - display: flex; - height: 2.4em; - justify-content: center; - margin-left: divide($container-padding-x, 2); - position: relative; - width: 2.4em; - - @include media-breakpoint-up(sm) { - margin-left: 1.2rem; - } - - .circlewrap { - height: 23px; - min-width: 23px; - width: 23px; - } - - .button, - a { - border: none; - - &:hover { - background: none; - - &::before { - background-color: #000; - } - - img { - filter: invert(1); - } - } - - img { - filter: invert(0); - transition: filter 0.3s; - } - - &::before { - background-color: #fff; - border-radius: 100%; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - transition: background-color 0.3s; - width: 100%; - } - } - - img { - height: 20px; - vertical-align: middle; - width: auto; - } - - .textLabel { - display: none; - } -} - -.userControlItemWritePost { - width: auto; - - @include media-breakpoint-up(lg) { - .icon { - display: none; - } - - .textLabel { - display: inline; - padding: 0 1.2rem; - position: relative; - z-index: 1; - } - } - - &, - a::before { - border-radius: 1.2em; - } -} - -.userControlItemInbox, -.userControlItemSearch { - @include media-breakpoint-down(sm) { - display: none; - } -} diff --git a/src/components/Nav/Private.tsx b/src/components/Nav/Private.tsx deleted file mode 100644 index da4852e6..00000000 --- a/src/components/Nav/Private.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import type { Author } from '../../graphql/types.gen' -import Userpic from '../Author/Userpic' -import { ProfilePopup } from './ProfilePopup' -import { Icon } from './Icon' -import styles from './Private.module.scss' -import { useAuthStore } from '../../stores/auth' -import { useRouter } from '../../stores/router' -import { clsx } from 'clsx' -import { createSignal } from 'solid-js' - -export default () => { - const { session } = useAuthStore() - const { page } = useRouter() - const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false) - - return ( -
- - - { - setIsProfilePopupVisible(isVisible) - }} - containerCssClass={styles.control} - trigger={ -
- -
- } - /> -
- ) -} diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx index d81e4a13..0a3f7a28 100644 --- a/src/components/Nav/ProfilePopup.tsx +++ b/src/components/Nav/ProfilePopup.tsx @@ -1,6 +1,5 @@ -import styles from './Popup.module.scss' import { Popup, PopupProps } from './Popup' -import { useAuthStore } from '../../stores/auth' +import { signOut, useAuthStore } from '../../stores/auth' type ProfilePopupProps = Omit @@ -8,7 +7,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => { const { session } = useAuthStore() return ( - + diff --git a/src/locales/ru.json b/src/locales/ru.json index c279ffab..47c07e87 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -164,5 +164,6 @@ "Almost done! Check your email.": "Почти готово! Осталось подтвердить вашу почту.", "We've sent you a message with a link to enter our website.": "Мы выслали вам письмо с ссылкой на почту. Перейдите по ссылке в письме, чтобы войти на сайт.", "Send link again": "Прислать ссылку ещё раз", - "Link sent, check your email": "Ссылка отправлена, проверьте почту" + "Link sent, check your email": "Ссылка отправлена, проверьте почту", + "Create post": "Создать публикацию" }