diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss index 83f0d992..266c5cf1 100644 --- a/src/components/Nav/Header.module.scss +++ b/src/components/Nav/Header.module.scss @@ -315,18 +315,6 @@ } } -.userControl { - opacity: 1; - transition: opacity 0.3s; - z-index: 1; - - .headerWithTitle.headerScrolledBottom & { - transition: opacity 0.3s, z-index 0s 0.3s; - opacity: 0; - z-index: -1; - } -} - .articleControls { display: flex; justify-content: flex-end; @@ -338,7 +326,6 @@ .control { cursor: pointer; - margin-left: 1.6rem; border: 0; .icon { @@ -356,7 +343,137 @@ } } + .control + .control { + margin-left: 1.6rem; + } + img { vertical-align: middle; } } + +.userControl { + align-items: baseline; + display: flex; + opacity: 1; + transition: opacity 0.3s; + z-index: 1; + + .headerWithTitle.headerScrolledBottom & { + transition: opacity 0.3s, z-index 0s 0.3s; + opacity: 0; + z-index: -1; + } + + @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 57c7263f..75ca81ad 100644 --- a/src/components/Nav/Popup.module.scss +++ b/src/components/Nav/Popup.module.scss @@ -6,12 +6,20 @@ 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 2.4rem 2.4rem 1.6rem; + padding: 2.4rem; position: absolute; z-index: 10; @@ -21,7 +29,6 @@ li { margin-bottom: 1.6rem; - padding-left: 3.6rem; position: relative; &:last-child { @@ -32,19 +39,24 @@ a { border: none; white-space: nowrap; + + &:hover { + img { + filter: invert(0); + } + } } img { filter: invert(1); max-height: 2rem; max-width: 2rem; + transition: filter 0.3s; } .icon { - left: 1.5rem; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); + display: inline-block; + width: 3.6rem; } } 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 5987a0fb..00000000 --- a/src/components/Nav/Private.module.scss +++ /dev/null @@ -1,115 +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; - } - - 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 13f49885..00000000 --- a/src/components/Nav/Private.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import type { Author } from '../../graphql/types.gen' -import Userpic from '../Author/Userpic' -import { Icon } from './Icon' -import styles from './Private.module.scss' -import { useAuthStore } from '../../stores/auth' -import { useRouter } from '../../stores/router' -import { clsx } from 'clsx' - -export default () => { - const { session } = useAuthStore() - const { page } = useRouter() - - return ( - - ) -} diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx new file mode 100644 index 00000000..0a3f7a28 --- /dev/null +++ b/src/components/Nav/ProfilePopup.tsx @@ -0,0 +1,44 @@ +import { Popup, PopupProps } from './Popup' +import { signOut, useAuthStore } from '../../stores/auth' + +type ProfilePopupProps = Omit + +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": "Создать публикацию" }