Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support of connections nav item #897

Merged
merged 4 commits into from
Dec 21, 2023
Merged

Added support of connections nav item #897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c103773
added support of connections nav item
ekaterinashenets Dec 20, 2023
1679058
updated snapshots
ekaterinashenets Dec 20, 2023
79dc8e5
added connections item to profile dropdown
ekaterinashenets Dec 20, 2023
588c283
fixed main.css
ekaterinashenets Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 58 additions & 43 deletions assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4927,27 +4927,37 @@ input.field--reset:active {
font-size: 14px;
max-width: 20vw; }

.navItem--counterBadge, .navItem--counterBadgeProNotifications, .navItem--counterBadgeProMessages {
background-color: #f65858;
border: 2px solid white;
.navItem--connections {
display: none; }
@media screen and (min-width: 768px) {
.navItem--connections {
display: block; } }

.navItem--counterBadge, .navItem--counterBadgeConnections, .navItem--counterBadgeProNotifications, .navItem--counterBadgeProMessages {
background-color: #e32359;
border: 1px solid white;
border-radius: 10px;
box-sizing: border-box;
display: inline-block;
height: 14px;
height: 10px;
position: absolute;
width: 14px; }
width: 10px; }

.navItem--counterBadge {
bottom: 12px;
right: -3px; }
bottom: 14px;
right: -5px; }

.navItem--counterBadgeConnections {
bottom: 40px;
right: 22px; }

.navItem--counterBadgeProNotifications {
bottom: 38px;
right: 24px; }
bottom: 40px;
right: 28px; }

.navItem--counterBadgeProMessages {
bottom: 38px;
right: 14px; }
bottom: 40px;
right: 18px; }

.navItem-label {
color: rgba(46, 62, 72, 0.6);
Expand Down Expand Up @@ -5087,38 +5097,43 @@ input.field--reset:active {
.notification--read {
background: #f6f7f8 !important; }

.profileDropdown-content.wide {
width: 512px; }

.profileDropdown-content.new-padding {
padding: 12px 16px; }

.profileDropdown-content .list-item {
padding-bottom: 8px !important;
padding-top: 8px !important; }

.profileDropdown-content .profileDropdown-draft-group {
padding-top: 0 !important; }

.profileDropdown-content .links-divider {
border-top: thin;
margin-bottom: 12px;
margin-top: 12px; }

.profileDropdown-content .links-item {
box-sizing: border-box;
color: inherit;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.43;
margin: 0;
min-width: 0;
padding-bottom: 4px;
padding-top: 4px;
text-decoration: none; }
.profileDropdown-content .links-item:hover {
color: #00798a; }
.profileDropdown-content {
/* stylelint-enable */ }
.profileDropdown-content.wide {
width: 512px; }
.profileDropdown-content.new-padding {
padding: 12px 16px; }
.profileDropdown-content .list-item {
padding-bottom: 8px !important;
padding-top: 8px !important; }
.profileDropdown-content .profileDropdown-draft-group {
padding-top: 0 !important; }
.profileDropdown-content .links-divider {
border-top: thin;
margin-bottom: 12px;
margin-top: 12px; }
.profileDropdown-content .links-item {
box-sizing: border-box;
color: inherit;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.43;
margin: 0;
min-width: 0;
padding-bottom: 4px;
padding-top: 4px;
text-decoration: none;
/* stylelint-disable selector-max-compound-selectors, selector-max-combinators, selector-max-class */ }
.profileDropdown-content .links-item--connections {
display: none; }
@media screen and (max-width: 768px) {
.profileDropdown-content .links-item--connections {
display: block; } }
.profileDropdown-content .links-item--connections .navItem--counterBadgeConnections {
position: initial; }
.profileDropdown-content .links-item:hover {
color: #00798a; }

.profileDropdown-draft-group div {
color: #0cbadf;
Expand Down
43 changes: 34 additions & 9 deletions assets/scss/components/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,18 @@ $zindex--aboveFloatingContent: map-get($zindex-map, "floating-content") + 1;
}
}

.navItem--connections {
display: none;

@media screen and (min-width: 768px) {
display: block;
}
}

%navItem--counterBadgePlaceholder {
$_newDotSize: 14px;
background-color: #f65858;
border: 2px solid $C-white;
$_newDotSize: 10px;
background-color: #e32359;
border: 1px solid $C-white;
border-radius: 10px;
box-sizing: border-box;
display: inline-block;
Expand All @@ -87,20 +95,26 @@ $zindex--aboveFloatingContent: map-get($zindex-map, "floating-content") + 1;

.navItem--counterBadge {
@extend %navItem--counterBadgePlaceholder;
bottom: 12px;
right: -3px;
bottom: 14px;
right: -5px;
}

.navItem--counterBadgeConnections {
@extend %navItem--counterBadgePlaceholder;
bottom: 40px;
right: 22px;
}

.navItem--counterBadgeProNotifications {
@extend %navItem--counterBadgePlaceholder;
bottom: 38px;
right: 24px;
bottom: 40px;
right: 28px;
}

.navItem--counterBadgeProMessages {
@extend %navItem--counterBadgePlaceholder;
bottom: 38px;
right: 14px;
bottom: 40px;
right: 18px;
}

$maxLabelSize: 12;
Expand Down Expand Up @@ -331,10 +345,21 @@ $maxScalingBP: $breakpoint-m / 1px;
padding-top: 4px;
text-decoration: none;

/* stylelint-disable selector-max-compound-selectors, selector-max-combinators, selector-max-class */
&--connections {
display: none;
@media screen and (max-width: 768px) {
display: block;
}
.navItem--counterBadgeConnections {
position: initial;
}
}
&:hover {
color: #00798a;
}
}
/* stylelint-enable */
}

.profileDropdown-draft-group {
Expand Down
10 changes: 10 additions & 0 deletions assets/svg/connections.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions src/navigation/Nav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import NavbarSearch, { NAVBAR_SEARCH_INPUT_ID } from './components/search/Navbar

import MESSAGE_ICON from '../../assets/svg/message.svg';
import NOTIFICATION_ICON from '../../assets/svg/notification.svg';
import CONNECTIONS_ICON from '../../assets/svg/connections.svg';
import PRO_DASHBOARD_ICON from '../../assets/svg/proDashboard.svg';

const CLASS_UNAUTH_ITEM = 'navItem--unauthenticated';
Expand Down Expand Up @@ -170,6 +171,7 @@ export class Nav extends React.Component {
proDashboard,
explore, // eslint-disable-line no-unused-vars
messages,
connections,
notifications,
groups,
groupDraft,
Expand Down Expand Up @@ -230,13 +232,15 @@ export class Nav extends React.Component {
savedEvents={profile.profileDropdown.savedEvents}
yourGroups={profile.profileDropdown.yourGroups}
yourEvents={profile.profileDropdown.yourEvents}
yourConnections={profile.profileDropdown.yourConnections}
profile={profile}
groups={groups.list}
groupDraft={groupDraft}
isNewNavActive={isNewNavActive}
isNewNavsOrder={
isNewNavsOrder && (localeCode ? localeCode.includes('en') : false)
}
hasNewConnections={connections.hasNewConnections}
/>
) : (
<DropdownLoader label={dropdownLoaderLabel} />
Expand Down Expand Up @@ -277,6 +281,10 @@ export class Nav extends React.Component {
);
};

const getConnectionsIcon = () => (
<img className="proIcon" alt={connections.label} src={CONNECTIONS_ICON} />
);

const getNotificationsIcon = () => {
if (media.isAtMediumUp) {
return (
Expand Down Expand Up @@ -391,6 +399,19 @@ export class Nav extends React.Component {
linkClassName: 'navItemLink-pro',
isTargetBlank: true,
},
media.isAtMediumUp && {
shrink: true,
linkTo: connections.link,
label: connections.label,
labelClassName: 'navItem-label-pro',
className: cx('navItem--connections', CLASS_AUTH_ITEM),
linkClassName: 'navItemLink-pro',
counterBadgeClassName: 'navItem--counterBadgeConnections',
icon: getConnectionsIcon(),
hasUpdates: connections.hasNewConnections > 0,
updatesLabel: updatesLabel,
onLinkClick: messages.onLinkClick,
},
{
shrink: true,
linkTo: messages.link,
Expand Down
Loading
Loading