Skip to content

Commit

Permalink
implementing navbar custom buttons (#2362)
Browse files Browse the repository at this point in the history 
* implementing navbar custom buttons

* post build & fixing errors

* fix buttons

* fix based on feedback

* minor changes

* minor fixes

* code review feedback

* code review feedback

* fix popper header

* fixing title border color

* fix the according to comments

* adding back eslint and converting to any

* reverting back to old code

* switching from popover to popper
  • Loading branch information
@cphelefu
cphelefu authored Jul 12, 2024
1 parent 8d985e7 commit 5a2880b
Show file tree
Hide file tree
Showing 8 changed files with 412 additions and 353 deletions.
1 change: 1 addition & 0 deletions packages/geoview-core/public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ td {
justify-content: center;
width: 100%;
margin: 10px;
gap: 10px;
}

.index-header-title {
Expand Down
300 changes: 146 additions & 154 deletions packages/geoview-core/public/templates/add-panels.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Panels - Canadian Geospatial Platform Viewer</title>
<link rel="shortcut icon" href="./favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="./img/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<div class="header-table">
<table>
<tbody>
<tr>
<td><img class="header-logo" alt="logo" src="./img/Logo.png" /></td>
<td class="header-title">
<h1><strong>Add Panels</strong></h1>
</td>
</tr>
<tr>
<td><a href="./index.html">Main</a><br /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>This page is used to showcase adding panels to the app-bar and adding panels and buttons to the navbar.</td>
</tr>
</tbody>
</table>
</div>

<div class="toolbar">
<button class="add-appbar-panel-btn">Add Appbar Panel</button>
<button class="add-navbar-panel-btn">Add Navbar Panel</button>
<button class="add-navbar-button-btn">Add Navbar Button</button>
<button class="add-navbar-button-group-btn">Add Navbar Panel New Group</button>
</div>
<div
id="mapWM"
class="geoview-map"
data-lang="en"
data-config="{

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add Panels - Canadian Geospatial Platform Viewer</title>
<link rel="shortcut icon" href="./favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="./img/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="css/style.css" />
</head>

<body>
<div class="header-table">
<table>
<tbody>
<tr>
<td><img class="header-logo" alt="logo" src="./img/Logo.png" /></td>
<td class="header-title">
<h1><strong>Add Panels</strong></h1>
</td>
</tr>
<tr>
<td><a href="./index.html">Main</a><br /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>This page is used to showcase adding panels to the app-bar and adding panels and buttons to the navbar.
</td>
</tr>
</tbody>
</table>
</div>

<div class="toolbar">
<button class="add-appbar-panel-btn">Add Appbar Panel</button>
<button class="add-navbar-panel-btn">Add Navbar Panel</button>
<button class="add-navbar-button-btn">Add Navbar Button</button>
<input type="text" id="navbar-button-group-name" placeholder="Enter group name" value="groupName1" />
</div>
<div id="mapWM" class="geoview-map" data-lang="en" data-config="{
'map': {
'interaction': 'dynamic',
'viewSettings': {
Expand All @@ -71,109 +69,103 @@ <h1><strong>Add Panels</strong></h1>
}"></div>
<p></p>

<button type="button" class="collapsible">Code Snippet</button>
<pre id="codeSnippet" class="panel"></pre>

<script src="codedoc.js"></script>
<script>
// initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
cgpv.init((mapId) => {
if (mapId === 'mapWM') {
// get add panel button element for WM map
var addAppbarPanelBtn = document.getElementsByClassName('add-appbar-panel-btn')[0];

// add app-bar panel btn click event handler
// button will open a panel on the app-bar
addAppbarPanelBtn.addEventListener('click', function (e) {
const button = {
id: 'AppbarPanelButtonId',
tooltip: 'Test',
tooltipPlacement: 'right',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
};

const panel = {
panelId: 'AppbarPanelId',
title: 'Test',
content: `<div>Test content</div>`,
width: 200,
};

// call an api function to add a panel with a button in the default group
cgpv.api.maps['mapWM'].appBarApi.createAppbarPanel(button, panel, null);
});

// get add nav-bar panel button element for WM map
var addNavbarPanelBtn = document.getElementsByClassName('add-navbar-panel-btn')[0];
// add nav-bar panel btn click event handler
// button will open a panel on the nav-bar
addNavbarPanelBtn.addEventListener('click', function (e) {
const button = {
tooltip: 'Test',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
tooltipPlacement: 'left',
};

const panel = {
title: 'Test',
content: `<div>Test content</div>`,
width: 200,
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, null);
});

// get add nav-bar button element for WM map
var addNavbarButtonBtn = document.getElementsByClassName('add-navbar-button-btn')[0];

// add nav-bar button btn click event handler
// button will call a function
addNavbarButtonBtn.addEventListener('click', function (e) {
const button = {
tooltip: 'Test',
children: cgpv.react.createElement(cgpv.ui.elements.OpenInBrowserIcon),
tooltipPlacement: 'left',
onClick: function () {
alert('test function');
},
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarApi.createNavbarButton(button, null);
});

// get add nav-bar button group element for WM map
var addNavbarButtonGroupBtn = document.getElementsByClassName('add-navbar-button-group-btn')[0];

// add nav-bar button group btn click event handler
// button will add a button panel on the nav-bar in a new group
addNavbarButtonGroupBtn.addEventListener('click', function (e) {
const button = {
id: 'id',
tooltip: 'Group',
tooltipPlacement: 'left',
children: cgpv.react.createElement(cgpv.ui.elements.GroupIcon), // comment
};

const panel = {
panelId: 'panerId',
title: 'Group',
content: `<div>Test content</div>`,
width: 400,
};

// call an api function to add a new button panel in the nav-bar in a new group
cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, 'newGroup');
});
}
});

// create snippets
window.addEventListener('load', () => {
createCodeSnippet();
createConfigSnippet();
});
</script>
</body>
</html>
<button type="button" class="collapsible">Code Snippet</button>
<pre id="codeSnippet" class="panel"></pre>

<script src="codedoc.js"></script>
<script>
// initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
cgpv.init((mapId) => {
if (mapId === 'mapWM') {
// get add panel button element for WM map
var addAppbarPanelBtn = document.getElementsByClassName('add-appbar-panel-btn')[0];

// get the input for the group name
var navbarButtonGroupNameInput = document.getElementById('navbar-button-group-name');

// add app-bar panel btn click event handler
// button will open a panel on the app-bar
addAppbarPanelBtn.addEventListener('click', function (e) {
const button = {
id: 'AppbarPanelButtonId',
tooltip: 'Test',
tooltipPlacement: 'right',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
};

const panel = {
panelId: 'AppbarPanelId',
title: 'Test',
content: `<div>Test content</div>`,
width: 200,
};

// call an api function to add a panel with a button in the default group
cgpv.api.maps['mapWM'].appBarApi.createAppbarPanel(button, panel, null);
});

// get add nav-bar panel button element for WM map
var addNavbarPanelBtn = document.getElementsByClassName('add-navbar-panel-btn')[0];
// add nav-bar panel btn click event handler
// button will open a panel on the nav-bar
addNavbarPanelBtn.addEventListener('click', function (e) {
const groupName = navbarButtonGroupNameInput.value;

if (groupName === '') {
alert('Enter a value group name');
return;
}
const button = {
tooltip: 'Test',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
tooltipPlacement: 'left',
};

const panel = {
title: 'Panel Title',
content: `<div><p>Vestibulum in fringilla tortor. Aliquam placerat odio nec urna consequat tincidunt eu sit amet mauris.</p><p>Donec vestibulum tellus ex, a venenatis urna finibus quis. Sed venenatis nisi porttitor ex laoreet auctor. </p></div>`,
width: 400,
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, groupName);
});

// get add nav-bar button element for WM map
var addNavbarButtonBtn = document.getElementsByClassName('add-navbar-button-btn')[0];

// add nav-bar button btn click event handler
// button will call a function
addNavbarButtonBtn.addEventListener('click', function (e) {
const groupName = navbarButtonGroupNameInput.value;

if (groupName === '') {
alert('Enter a value group name');
return;
}

const button = {
tooltip: `Test (${groupName})`,
children: cgpv.react.createElement(cgpv.ui.elements.OpenInBrowserIcon),
tooltipPlacement: 'left',
onClick: function () {
alert('You clicked on a navbar test button');
},
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarApi.createNavbarButton(button, groupName);
});

}
});

// create snippets
window.addEventListener('load', () => {
createCodeSnippet();
createConfigSnippet();
});
</script>
</body>

</html>
13 changes: 9 additions & 4 deletions packages/geoview-core/src/core/components/app-bar/buttons/version.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ export default function Version(): JSX.Element {
borderRadius: '5px',
boxShadow: 2,
marginLeft: '15px',
padding: '10px',
'& a': {
color: (theme: Theme) =>
theme.palette.mode === 'light' ? theme.palette.secondary.contrastText : theme.palette.geoViewColor.primary.light[300],
Expand All @@ -64,11 +63,17 @@ export default function Version(): JSX.Element {
versionsInfoTitle: {
fontSize: (theme: Theme) => theme.palette.geoViewFontSize.default,
fontWeight: '700',
padding: '10px',
padding: '20px',
color: (theme: Theme) => theme.palette.geoViewColor.textColor.main,
borderBottom: (theme: Theme) => `1px solid ${theme.palette.geoViewColor.bgColor.dark[300]}}`,
borderBottom: (theme: Theme) => `1px solid ${theme.palette.geoViewColor.bgColor.dark[100]}}`,
marginBottom: '10px',
},
versionInfoContent: {
padding: '20px',
gap: '5px',
display: 'flex',
flexDirection: 'column',
},
};

return (
Expand All @@ -91,7 +96,7 @@ export default function Version(): JSX.Element {
<Typography sx={sxClasses.versionsInfoTitle} component="h3">
{t('appbar.version')}
</Typography>
<Box sx={{ padding: '10px', gap: '5px', display: 'flex', flexDirection: 'column' }}>
<Box sx={sxClasses.versionInfoContent}>
<Box sx={{ display: 'flex', flexDirection: 'row', alignContent: 'center', gap: '6px' }}>
<SvgIcon viewBox="-4 -2 38 36">
<GeoCaIcon />
Expand Down
Loading

0 comments on commit 5a2880b

Please sign in to comment.