Skip to content

Commit

Permalink
fix: dynamically switch location of notification and style mobile men…
Browse files Browse the repository at this point in the history 
…u platform switcher
  • Loading branch information
@henry-deriv
henry-deriv committed Feb 14, 2024
1 parent 4eabdfc commit 28351c4
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 6 deletions.
2 changes: 1 addition & 1 deletion build/connect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ module.exports = function (grunt) {
appName: {
app: 'Google\ Chrome'
},
target : 'https://localhost',
target : 'https://localhost:8090',
},
middleware: (connect, options) => {
const middlewares = [
Expand Down
24 changes: 22 additions & 2 deletions src/javascript/app/base/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ const Header = (() => {

const bindSvg = () => {
const cashier = getElementById('cashier-icon');
const trade = getElementById('mobile__platform-switcher-icon-trade');
const arrow = getElementById('mobile__platform-switcher-icon-arrowright');
const back = getElementById('mobile__menu-content-submenu-icon-back');
const open = getElementById('mobile__menu-content-submenu-icon-open');
Expand Down Expand Up @@ -192,9 +191,11 @@ const Header = (() => {
applyToAllElements('.deriv-com-logo', (el) => {
el.src = Url.urlForStatic(`${wallet_header_icon_base_path}wallet-deriv-logo.svg`);
});
applyToAllElements('#mobile__platform-switcher-icon-trade', (el) => {
el.src = Url.urlForStatic(`${header_icon_base_path}ic-trade.svg`);
});

cashier.src = Url.urlForStatic(`${header_icon_base_path}ic-cashier.svg`);
trade.src = Url.urlForStatic(`${header_icon_base_path}ic-trade.svg`);
arrow.src = Url.urlForStatic(`${header_icon_base_path}ic-chevron-right.svg`);
back.src = Url.urlForStatic(`${header_icon_base_path}ic-chevron-left.svg`);
open.src = Url.urlForStatic(`${header_icon_base_path}ic-portfolio.svg`);
Expand Down Expand Up @@ -266,13 +267,16 @@ const Header = (() => {
platform_list.appendChild(platform_div);
});

// Make cta link in dropdown dynamic depending on account type (wallet or non-wallet)
const wallets_hub_link = Url.urlForDeriv('wallets', `ext_platform_url=${encodeURIComponent(window.location.href)}`);
const traders_hub_link = Url.urlForDeriv('appstore/traders-hub', `ext_platform_url=${encodeURIComponent(window.location.href)}`);
const platform_dropdown_cta_container = createElement('div', { class: 'platform__dropdown-cta' });
const platform_dropdown_cta_link = createElement('a', { text: localize('Looking for CFDs? Go to Trader\'s hub'), class: ' platform__dropdown-cta--link', href: `${Client.hasWalletsAccount ? wallets_hub_link : traders_hub_link}` });

platform_dropdown_cta_container.appendChild(platform_dropdown_cta_link);
platform_list.appendChild(platform_dropdown_cta_container);
// Add traders hub cta link to mobile platform switcher dropdown as well
mobile_platform_list.appendChild(platform_dropdown_cta_container);
};

const bindClick = () => {
Expand Down Expand Up @@ -310,6 +314,16 @@ const Header = (() => {
// Mobile Menu Livechat Icon
mobile_menu__livechat_logo.src = Url.urlForStatic('images/common/livechat.svg');

// Dynamically switch location of notification for wallets mobile header before attaching event handler
const dynamic_notification = getElementById('dynamic_notification');
const is_mobile = window.innerWidth <= 767;
if (is_mobile && Client.hasWalletsAccount()) {
const cloned_notification = dynamic_notification.cloneNode(true);
const wallet_header_right = getElementById('wallet__header-menu-right');
wallet_header_right.appendChild(cloned_notification);
dynamic_notification.remove();
}

// Notification Event
const notification_bell = getElementById('header__notifcation-icon-container');
const notification_container = getElementById('header__notification-container');
Expand Down Expand Up @@ -387,6 +401,12 @@ const Header = (() => {
}
});

// Dynamic link for trader's hub cta for mobile menu
const mobile_platform_appstore_link = getElementById('url-appstore');
const wallets_hub_link = Url.urlForDeriv('wallets', `ext_platform_url=${encodeURIComponent(window.location.href)}`);
const traders_hub_link = Url.urlForDeriv('appstore/traders-hub', `ext_platform_url=${encodeURIComponent(window.location.href)}`);
mobile_platform_appstore_link.href = Client.hasWalletsAccount() ? wallets_hub_link : traders_hub_link;

// Account Switcher Event
const acc_switcher = Client.hasWalletsAccount() ? getElementById('wallet_switcher') : getElementById('acc_switcher');
const account_switcher = Client.hasWalletsAccount() ? getElementById('wallet__switcher') : getElementById('account__switcher');
Expand Down
25 changes: 24 additions & 1 deletion src/sass/_common/wallet_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
&-left, &-right {
display: inline-flex;
height: 47px;
position: relative;

& > * {
align-self: center;
Expand Down Expand Up @@ -135,4 +134,28 @@
}
}
}
}

.mobile {
&__wallet-platform-switcher {
&-current {
height: 72px;
display: flex;
justify-content: center;
border-bottom: 1px solid var(--general-section-2);
align-items: center;
padding: 0 32px;
cursor: pointer;
}
&-container {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
&-logo {
width: 148px !important;
height: 32px !important;
}
}
}
86 changes: 84 additions & 2 deletions src/templates/_common/_layout/wallet-header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,85 @@
import React from 'react';
import Notification from '../components/notification.jsx';

const MobileMenu = () => (
<div id='mobile__container' className='mobile__container mobile-show'>
<div id='mobile__menu' className='mobile__menu'>
<div className='mobile__menu-header'>
<img id='mobile__menu-close' className='btn__close' />
<div className='mobile__menu-header-wrapper'>
<div className='mobile__menu-header-text'>{it.L('Menu')}</div>
</div>
</div>
<div id='mobile_menu-content' className='mobile__menu-content mobile__menu-content--active'>
<div className='mobile__platform-switcher' >
<div id='mobile__platform-switcher-current' className='mobile__wallet-platform-switcher-current' >
<div className='mobile__wallet-platform-switcher-container'>
<img className='header__logo mobile__wallet-platform-switcher-logo' />
<img id='mobile__platform-switcher-expand' className='mobile__platform-switcher-expand header__expand' />
</div>
</div>
<div id='mobile__platform-switcher-dropdown' className='mobile__platform-switcher-dropdown' />
</div>
<div className='mobile__platform-switcher-lists'>
<div id='mobile__platform-switcher-item-appstore' className='mobile__platform-switcher-item client_logged_in invisible'>
<a id='url-appstore' className='url-appstore'>
<img id='appstore-icon' className='mobile__platform-switcher-icon appstore-icon' />
<div className='mobile__platform-switcher-text'>{it.L('Trader\'s hub')}</div>
</a>
</div>
<div className='mobile__platform-switcher-item'>
<img id='mobile__platform-switcher-icon-trade' className='mobile__platform-switcher-icon' />
<div className='mobile__platform-switcher-text mobile__platform-switcher-text-bold'>{it.L('Trade')}</div>
</div>
<div id='mobile__platform-switcher-item-reports' className='mobile__platform-switcher-item client_logged_in invisible'>
<img className='mobile__platform-switcher-icon reports-icon' />
<div className='mobile__platform-switcher-text'>{it.L('Reports')}</div>
<img id='mobile__platform-switcher-icon-arrowright' className='mobile__platform-switcher-icon-right' />
</div>
<div id='whatsapp-mobile-drawer' className='mobile__platform-switcher-item whatsapp'>
<img className='mobile__platform-switcher-icon whatsapp-icon' />
<div className='mobile__platform-switcher-text'>{it.L('WhatsApp')}</div>
</div>
<div id='mobile__menu-livechat' className='mobile__platform-switcher-item'>
<img className='mobile__platform-switcher-icon livechat-icon' />
<div className='mobile__platform-switcher-text'>{it.L('Live chat')}</div>
</div>
<div className='mobile__platform-switcher-item client_logged_in invisible logout'>
<img className='mobile__platform-switcher-icon logout-icon' />
<div className='mobile__platform-switcher-text'>{it.L('Log out')}</div>
</div>
</div>
</div>
<div id='mobile__menu-content-submenu' className='mobile__menu-content-submenu mobile__menu-content client_logged_in invisible'>
<div id='mobile__menu-content-submenu-header' className='mobile__menu-content-submenu-header mobile__platform-switcher-item'>
<img id='mobile__menu-content-submenu-icon-back' className='mobile__menu-content-submenu-icon' />
<div className='mobile__menu-content-submenu-header-text' >{it.L('Reports')}</div>
</div>
<div className='mobile__menu-content-submenu-lists'>
<a className='url-reports-positions mobile__menu-content-submenu-item mobile__platform-switcher-item'>
<img id='mobile__menu-content-submenu-icon-open' className='mobile__menu-content-submenu-icon' />
<div className='mobile__menu-content-submenu-item-text'>{it.L('Open positions')}</div>
</a>
<a className='url-reports-profit mobile__menu-content-submenu-item mobile__platform-switcher-item'>
<img id='mobile__menu-content-submenu-icon-profit' className='mobile__menu-content-submenu-icon' />
<div className='mobile__menu-content-submenu-item-text'>{it.L('Profit table')}</div>
</a>
<a className='url-reports-statement mobile__menu-content-submenu-item mobile__platform-switcher-item'>
<img id='mobile__menu-content-submenu-icon-statement' className='mobile__menu-content-submenu-icon' />
<div className='mobile__menu-content-submenu-item-text'>{it.L('Statements')}</div>
</a>
</div>
</div>
<div className='mobile__menu-footer topbar'>
<span className='no-underline nowrap gmt-clock' />
<div className='no-underline'>
<div className='network_status' />
</div>
</div>
</div>
</div>
);

const WalletHeader = () => (
<div className='wallet__header' id='wallet__header'>
<div id='platform__dropdown' className='platform__dropdown'>
Expand Down Expand Up @@ -32,8 +111,10 @@ const WalletHeader = () => (
</a>
</div>
</div>
<div className='wallet__header-menu-right client_logged_in invisible'>
<Notification />
<div id='wallet__header-menu-right' className='wallet__header-menu-right client_logged_in invisible'>
<div id='dynamic_notification'>
<Notification />
</div>
<a className='url-account-details header__account header__menu-item mobile-hide'>
<img className='header__icon-button' id='header__account-settings' />
</a>
Expand Down Expand Up @@ -67,6 +148,7 @@ const WalletHeader = () => (
<a className='url-cashier-deposit btn btn--primary header__deposit mobile-hide'>{it.L('Manage funds')}</a>
</div>
</div>
<MobileMenu />
</div>
);

Expand Down

0 comments on commit 28351c4

Please sign in to comment.