karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'FullScreen mode added in Navbar 1 and 2' (#219) from OptimUpdate into main 

Reviewed-on: Pozomind/pozo-retail-app#219
This commit is contained in:
karthikalakshmi 2026-03-03 18:28:18 +05:30
parent 8a65376eb2 34b710073a
commit 4f1295bbf7
5 changed files with 131 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx
View File

@ -157,6 +157,7 @@ import { FaParking } from 'react-icons/fa';
import { isMobile } from 'react-device-detect';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss';
import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
const subDirectory = import.meta.env.ENV_BASE_URL;
const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@ -263,6 +264,30 @@ const BSNavbar1 = (props) => {
setAccIsOpen(false);
}
};
const [isFullscreen, setIsFullscreen] = useState(false);
const handleFullscreen = useCallback(async () => {
if (!isFullscreen) {
try {
await document.documentElement.requestFullscreen();
setIsFullscreen(true);
} catch (error) {
console.error('Fullscreen error:', error);
}
} else {
try {
if (document.fullscreenElement) {
await document.exitFullscreen();
}
setIsFullscreen(false);
} catch (error) {
console.error('Exit fullscreen error:', error);
}
}
}, [isFullscreen]);
useEffect(() => {
if (!FeatureAddonData?.FeatureDtls?.length) return;
@ -967,6 +992,20 @@ const BSNavbar1 = (props) => {
{formattedDate}
</div>
</div>
<Tooltip title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}>
<div
className={
isFullscreen
? 'BsNavbar1FullScreenExit'
: 'BsNavbar1FullScreen'
}
onClick={handleFullscreen}
>
{isFullscreen ? <RiFullscreenExitFill /> : <RiFullscreenFill />}
</div>
</Tooltip>
<TooltipWrapper title="User Profile" isMobile={isMobile}>
<div className="UserProfile">
<PozoUserIcon onClick={UserAcc} />

42
src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx
View File

@ -98,7 +98,7 @@ import {
getUserProfile,
userDataByUserId,
} from '../../../../Features/UserAccount/userData.js';
import { TbSettingsSearch } from 'react-icons/tb';
import { TbSettingsSearch } from 'react-icons/tb';
import { FaParking } from 'react-icons/fa';
import BSNavBarUserInfo from './BSNavBarUserInfo';
import { OtherServicesCardlistdata } from '../../../../Features/OtherServices/OtherServices.js';
@ -128,8 +128,8 @@ const FeaturesFunctionalities = lazy(
const BSCustomerSelect = lazy(
() => import('../UtillComponents/BSSelectCustomer.jsx')
);
// Scss
import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss';
import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss';
import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
const subDirectory = import.meta.env.ENV_BASE_URL;
const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@ -239,6 +239,27 @@ const BSNavbar2 = () => {
item.SettingIdName === 'VerifyProduct' && item?.SettingValue === 'Y'
);
const [isFullscreen, setIsFullscreen] = useState(false);
const handleFullscreen = useCallback(async () => {
if (!isFullscreen) {
try {
await document.documentElement.requestFullscreen();
setIsFullscreen(true);
} catch (error) {
console.error('Fullscreen error:', error);
}
} else {
try {
if (document.fullscreenElement) {
await document.exitFullscreen();
}
setIsFullscreen(false);
} catch (error) {
console.error('Exit fullscreen error:', error);
}
}
}, [isFullscreen]);
useEffect(() => {
if (!FeatureAddonData?.FeatureDtls?.length) return;
@ -871,8 +892,7 @@ const BSNavbar2 = () => {
)}
</>
)}
<div className='Nav2BSNavBarWholeSale'>
<div className="Nav2BSNavBarWholeSale">
{SalesMode?.SettingValue === 'Y' && !OtherServicesglobal && (
<BSNavBarWholeSale />
)}
@ -1280,6 +1300,18 @@ const BSNavbar2 = () => {
</div>
</>
)}
<Tooltip title={isFullscreen ? 'Exit Full Screen' : 'Full Screen'}>
<div
className={
isFullscreen ? 'BsNavbar1FullScreenExit' : 'BsNavbar1FullScreen'
}
onClick={handleFullscreen}
>
{isFullscreen ? <RiFullscreenExitFill /> : <RiFullscreenFill />}
</div>
</Tooltip>
{isMobile && (
<div
style={{

1
src/Pages/Preference/PreferenceList.scss
View File

@ -166,7 +166,6 @@
display: flex;
align-items: flex-start;
justify-content: flex-end;
width: 100%;
margin-top: 1rem;
position: fixed;
bottom: 1.3rem;

25
src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
View File

@ -522,3 +522,28 @@
top: 53%;
}
}
.BsNavbar1FullScreen {
background-color: #1292ee;
height: 28px;
width: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
color: #fff;
}
.BsNavbar1FullScreenExit {
background-color: #ef4444;
height: 28px;
width: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #fff;
font-size: 18px;
cursor: pointer;
}

26
src/Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss
View File

@ -423,3 +423,29 @@
left: 11px;
top: 10px;
}
.BsNavbar1FullScreen {
background-color: #1292ee;
height: 28px;
width: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
color: #fff;
}
.BsNavbar1FullScreenExit {
background-color: #ef4444;
height: 28px;
width: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
color: #fff;
font-size: 18px;
cursor: pointer;
}