Skip to content

Commit

Permalink
GDB-10463 navbar toggle and improvements (#1493)
Browse files Browse the repository at this point in the history 
* GDB-10463 navbar toggle and improvements

## What
Implemented navbar toggle behavior and other layout improvements.

## Why
To match the current workbench behavior.

## How
Implemented the toggle navbar function.
Moved main-menu styles in the navbar component.
Extended the tests.

* fix the issue with the styles of the root level menu items when selected - should have a red background

* expand or collapse navbar on window resize and make it work also with navbar state when the user closes the navbar

* Extend menu toggle functionality and responsiveness based on resolution and user's selection.

* resolve collisions after rebase

* Implemented model driven approach for the navbar component. This allows the logic in the menu to be greatly simplified and moved inside the navbar model instead of using the DOM.

* Removed redundant top level menu item definitions to simplify the UI model building.

* Properly expand, collapse and highlight submenu items when the navbar is collapsed.
Translate the labels used in the navbar.

* disabled menu plugins processing in legacy-workbench app.js

* Removed obsolete layout stylesheet from the shell app
  • Loading branch information
@svilenvelikov
svilenvelikov authored Jul 31, 2024
1 parent 026f047 commit 991bb9b
Show file tree
Hide file tree
Showing 53 changed files with 1,913 additions and 820 deletions.
14 changes: 7 additions & 7 deletions packages/legacy-workbench/src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,13 +158,13 @@ const moduleDefinition = function (productInfo) {
// to construct version/edition-specific links.
$menuItemsProvider.setProductInfo(productInfo);

// TODO this remove this when clean code. The main menu is processed in shared-components
let mainMenu = PluginRegistry.get('main.menu');
mainMenu.forEach(function (menu) {
menu.items.forEach(function (item) {
$menuItemsProvider.addItem(item);
});
});
// TODO: [MIG] remove this when cleaning the code. The main menu is processed in shared-components.
// let mainMenu = PluginRegistry.get('main.menu');
// mainMenu.forEach(function (menu) {
// menu.items.forEach(function (item) {
// $menuItemsProvider.addItem(item);
// });
// });

$httpProvider.interceptors.push('$unauthorizedInterceptor');
$httpProvider.interceptors.push('$authenticationInterceptor');
Expand Down
302 changes: 0 additions & 302 deletions packages/legacy-workbench/src/css/bootstrap-graphdb-theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,194 +601,6 @@ h1 .btn {
margin-top: -0.2em
}

/*-------------------------------------------------------------
Main menu
-------------------------------------------------------------*/
.main-menu {
width: 15rem;
position: fixed;
top: 0;
font-weight: 400;
z-index: 1010;
margin: 0;
padding: 0;
-moz-transition: width 0.2s ease-in; /* FF4+ */
-o-transition: width 0.2s ease-in; /* Opera 10.5+ */
-webkit-transition: width 0.2s ease-in; /* Saf3.2+, Chrome */
transition: width 0.2s ease-in;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}

/*Make collapsed menu with absolute position if window height is smaller than the
main menu height*/
@media screen and (max-height: 475px) {
.main-menu.collapsed {
position: absolute;
}
}

.main-menu li {
list-style: none;
}

.main-menu li a {
color: var(--secondary-color);
text-decoration: none;
}

.main-menu li .menu-element-root:hover,
.main-menu .sub-menu li:hover {
background-color: rgba(0, 0, 0, .1);
}

.main-menu li .menu-element-root:hover .menu-item-icon,
.main-menu .menu-element.open .menu-item-icon {
transform: scale(1.1);
}

.main-menu .menu-element.open .sub-menu .menu-item-icon {
transform: scale(0.5);
}

.main-menu .menu-element {
border-bottom: 1px solid #fff;
background-color: #f7f7f7;
position: relative;
}

.main-menu .menu-element-root {
padding: 0.8em 2.5em 0.8em 0.8em;
display: block;
line-height: 2.5rem;
position: relative;
z-index: 100;
-moz-transition: all 0.18s ease-out; /* FF4+ */
-o-transition: all 0.18s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.18s ease-out; /* Saf3.2+, Chrome */
transition: all 0.18s ease-out;
color: var(--secondary-color);
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.main-menu .menu-item-icon {
font-size: 2.5rem;
vertical-align: middle;
color: var(--primary-color);
transform: scale(0.9);
display: inline-block;
-moz-transition: all 0.18s ease-out; /* FF4+ */
-o-transition: all 0.18s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.18s ease-out; /* Saf3.2+, Chrome */
transition: all 0.18s ease-out;
pointer-events: none;
}

.main-menu .menu-item-icon.fa-flask {
/* Temporary: until we get our own icon */
font-size: 2rem;
padding: 4px 5px;
}

.main-menu .menu-element-root .menu-item {
pointer-events: none;
}

.main-menu .menu-element-root.active,
.main-menu .menu-element-root.active:hover {
background-color: var(--primary-color);
color: #fff;
}

.main-menu .active .menu-item-icon {
color: var(--icon-on-primary-color);
}

.main-menu :not(.brand) .menu-element-root {
font-size: 1.1rem;
}

.main-menu .brand {
background-color: var(--logo-background-color);
}

.main-menu .brand a {
display: block;
position: relative;
z-index: 5;
}

.main-menu .product-version {
line-height: normal;
color: rgba(255, 255, 255, .8);
text-transform: uppercase;
font-size: 0.625rem;
display: block;
position: absolute;
right: 0;
bottom: 0;
padding: 0.2em 0.5em;
border-color: rgba(255, 255, 255, .2);
border-style: solid;
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 0;
border-right-width: 0;
}

.main-menu .menu-element.open,
.main-menu.collapsed .menu-element:hover {
background-color: #dcdcdc;
}

.main-menu .sub-menu {
position: relative;
padding: 0;
z-index: 110;
}

.main-menu .sub-menu li {
display: none;
}

.main-menu .sub-menu li a {
padding: 0.5em 0.8em;
display: block;
}

.main-menu .sub-menu li.active a {
background-color: var(--primary-color);
font-weight: 500;
color: #fff;
}

.main-menu .menu-element.open ul li {
display: block;
}

.main-menu .menu-element ul:before, .rdf-list ul.datasource:before {
font-family: 'icomoon', sans-serif !important;
content: "\e921";
display: block;
font-size: 1.5em;
position: absolute;
top: -3.3rem;
right: 1rem;
-moz-transition: all 0.2s ease-in; /* FF4+ */
-o-transition: all 0.2s ease-in; /* Opera 10.5+ */
-webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */
transition: all 0.2s ease-in;
pointer-events: none;
}

.main-menu .menu-element.open ul:before, .rdf-list ul.open.datasource:before {
transform: rotate(180deg);
}

.rdf-list ul.datasource:before {
top: 0.5rem;
}
Expand All @@ -798,124 +610,10 @@ main menu height*/
padding-right: 2.5rem;
}

.toggle-menu {
display: block;
position: absolute;
top: 0;
right: 0;
color: #fff;
font-size: 0.8em;
line-height: 1.5;
padding: 0 0.3em;
background-color: rgba(255, 255, 255, .1);
z-index: 10;
cursor: pointer;
}

.toggle-menu:hover {
background-color: var(--primary-color);
}

.toggle-menu [class^="icon-"] {
-moz-transition: all 0.2s ease-in; /* FF4+ */
-o-transition: all 0.2s ease-in; /* Opera 10.5+ */
-webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */
transition: all 0.2s ease-in;
display: inline-block;
}

.toggle-menu:hover [class^="icon-"] {
transform: scale(1.1);
}

.small-logo {
width: 50px;
height: 50px;
}

.big-logo {
width: 180px;
height: 50px;
}

.container-fluid.main-container.expanded {
margin-left: 4.375rem;
}

.main-menu.collapsed {
width: 4.375rem;
overflow: visible;
height: auto;
}

.main-menu.collapsed .menu-element.clicked .sub-menu {
position: absolute;
top: 0;
left: 4.375rem;
background-color: #EBEBEB;
width: 15rem;
}

.main-menu.collapsed .menu-element .menu-item,
.main-menu.collapsed .menu-element .sub-menu li {
display: none;
}

.main-menu.collapsed .menu-element.clicked .sub-menu li {
display: block;
}

.main-menu.collapsed .menu-element-root {
overflow: visible;
}

.main-menu .menu-element.open ul li.submenu-title,
.main-menu .submenu-title {
display: none;
}

.main-menu.collapsed .menu-element.clicked ul li.submenu-title {
display: block;
font-size: 1.2em;
font-weight: 500;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-overflow: ellipsis;
overflow: hidden;
padding: 0.5em 0.8rem 0.2em 0;
color: var(--secondary-color);
margin-left: 0.8rem;
margin-bottom: 0.5em;
}

.main-menu .sub-menu li.submenu-title:hover {
background-color: transparent;
}

.main-menu.collapsed .menu-element.clicked .sub-menu.align-bottom {
bottom: 0;
top: auto;
}

.main-menu.collapsed .menu-element ul:before {
display: none;
}

.main-menu.collapsed .brand a {
padding: 0.4rem;
}

.main-menu.collapsed .product-version {
display: none;
}

.main-menu.collapsed .small-logo, .main-menu .big-logo {
display: block;
}

.main-menu .small-logo, .main-menu.collapsed .big-logo {
display: none;
}

/*-------------------------------------------------------------
Buttons
-------------------------------------------------------------*/
Expand Down
9 changes: 0 additions & 9 deletions packages/legacy-workbench/src/js/angular/aclmanagement/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,6 @@ PluginRegistry.add('route', {

PluginRegistry.add('main.menu', {
'items': [
{
label: 'Setup',
labelKey: 'menu.setup.label',
href: '#',
order: 5,
role: 'IS_AUTHENTICATED_FULLY',
icon: "icon-settings",
guideSelector: 'menu-setup'
},
{
label: 'ACL Management',
labelKey: 'menu.aclmanagement.label',
Expand Down
1 change: 0 additions & 1 deletion packages/legacy-workbench/src/js/angular/autocomplete/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ PluginRegistry.add('route', {

PluginRegistry.add('main.menu', {
'items': [
{label: 'Setup', labelKey: 'menu.setup.label', href: '#', order: 5, role: 'IS_AUTHENTICATED_FULLY', icon: "icon-settings", guideSelector: 'menu-setup'},
{label: 'Autocomplete', labelKey: 'menu.autocomplete.label', href: 'autocomplete', order: 40, parent: 'Setup', role: "IS_AUTHENTICATED_FULLY", guideSelector: 'sub-menu-autocomplete'}
]
});
9 changes: 0 additions & 9 deletions packages/legacy-workbench/src/js/angular/chatgpt/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,6 @@ PluginRegistry.add('route', [

PluginRegistry.add('main.menu', {
'items': [
{
label: 'Lab',
labelKey: 'menu.lab.label',
href: '#',
order: 6,
role: 'IS_AUTHENTICATED_FULLY',
icon: "fa fa-flask",
guideSelector: 'menu-lab'
},
{
label: 'Talk to Your Graph',
labelKey: 'menu.ttyg.label',
Expand Down
5 changes: 0 additions & 5 deletions packages/legacy-workbench/src/js/angular/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,11 +157,6 @@ function mainCtrl($scope, $menuItems, $jwtAuth, $http, toastr, $location, $repos

$scope.$on("$routeChangeSuccess", function ($event, current, previous) {
$scope.clicked = false;
$('.menu-element-root').removeClass('active');
$timeout(function () {
$('.menu-element.open a.menu-element-root').addClass('active');
$('.main-menu.collapsed .menu-element.open .menu-element-root').addClass('active');
}, 400);
if (previous) {
// Recheck license status on navigation within the workbench (security is already inited)
$licenseService.checkLicenseStatus();
Expand Down
Loading

0 comments on commit 991bb9b

Please sign in to comment.