This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 92df7894 allow header to be customised, and make username its own
directive
92df7894 is described below
commit 92df7894fa1eab19a61954ebbb7525839fffb59d
Author: Alex Heneveld <[email protected]>
AuthorDate: Fri Sep 22 16:13:03 2023 +0100
allow header to be customised, and make username its own directive
simplify the user menu
---
ui-modules/branding/brand.properties | 1 +
.../partials/{header.html => brooklyn-header.html} | 4 ++--
ui-modules/shared/partials/header.html | 23 +---------------------
.../utils/user-management/user-management.js | 22 +++++++++++++++++----
.../utils/user-management/user-menu.template.html | 3 +--
5 files changed, 23 insertions(+), 30 deletions(-)
diff --git a/ui-modules/branding/brand.properties
b/ui-modules/branding/brand.properties
index 2f463155..4defcede 100644
--- a/ui-modules/branding/brand.properties
+++ b/ui-modules/branding/brand.properties
@@ -41,6 +41,7 @@ hero.subheading=Model, Deploy, Manage: Application Control
## Custom partials
partials.footer=brooklyn-shared/partials/brooklyn-footer.html
+partials.header=brooklyn-shared/partials/brooklyn-header.html
partials.header_hero=brooklyn-shared/partials/brooklyn-header-hero.html
## Config
diff --git a/ui-modules/shared/partials/header.html
b/ui-modules/shared/partials/brooklyn-header.html
similarity index 93%
copy from ui-modules/shared/partials/header.html
copy to ui-modules/shared/partials/brooklyn-header.html
index f51d69ee..0b53fd47 100644
--- a/ui-modules/shared/partials/header.html
+++ b/ui-modules/shared/partials/brooklyn-header.html
@@ -32,8 +32,8 @@
</div>
<div class="navbar-collapse collapse" id="br-navbar-collapse-main"
uib-collapse="!isCollapsed">
<ul class="nav navbar-nav navbar-right">
- <li class="dropdown" br-user-menu></li>
- <li class="dropdown" brooklyn-module-links-menu></li>
+ <li><a><br-user-menu> </br-user-menu></a></li>
+ <li brooklyn-module-links-menu></li>
</ul>
</div>
</div>
diff --git a/ui-modules/shared/partials/header.html
b/ui-modules/shared/partials/header.html
index f51d69ee..dde0d12a 100644
--- a/ui-modules/shared/partials/header.html
+++ b/ui-modules/shared/partials/header.html
@@ -16,25 +16,4 @@
specific language governing permissions and limitations
under the License.
-->
-<nav class="navbar navbar-default">
- <div class="container-fluid">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#br-navbar-collapse-main"
aria-expanded="false" ng-click="isCollapsed = !isCollapsed">
- <span class="sr-only">Toggle navigation</span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- <span class="icon-bar"></span>
- </button>
- <a class="navbar-brand" href="/">
- ${require('ejs-html!<%= brand.product.logo.html %>')}
- </a>
- <h4 class="navbar-text"><a href="#!/"><%= app.appname %></a></h4>
- </div>
- <div class="navbar-collapse collapse" id="br-navbar-collapse-main"
uib-collapse="!isCollapsed">
- <ul class="nav navbar-nav navbar-right">
- <li class="dropdown" br-user-menu></li>
- <li class="dropdown" brooklyn-module-links-menu></li>
- </ul>
- </div>
- </div>
-</nav>
+${require('ejs-html!<%= brand.partials.header %>')}
diff --git a/ui-modules/utils/user-management/user-management.js
b/ui-modules/utils/user-management/user-management.js
index 54fd2bd6..22a4b2c8 100644
--- a/ui-modules/utils/user-management/user-management.js
+++ b/ui-modules/utils/user-management/user-management.js
@@ -23,13 +23,14 @@ import template from './user-menu.template.html';
const MODULE_NAME = 'brooklyn.component.user-management';
angular.module(MODULE_NAME, [serverApi])
- .directive('brUserMenu', ['$compile', 'serverApi', userMenuDirective]);
+ .directive('brUserMenu', ['$compile', userMenuDirective])
+ .directive('brUserName', ['serverApi', userNameDirective]);
export default MODULE_NAME;
-export function userMenuDirective($compile, serverApi) {
+export function userMenuDirective($compile) {
return {
- restrict: 'EA',
+ restrict: 'A',
template: template,
terminal: true,
priority: 1000,
@@ -42,11 +43,24 @@ export function userMenuDirective($compile, serverApi) {
.addClass('dropdown')
.removeAttr('br-user-menu') //remove the attribute to avoid
indefinite loop
.removeAttr('data-br-user-menu'); //also remove the same attribute
with data- prefix in case users specify data-common-things in the html
+ $compile(element)(scope);
+ }
+}
+
+export function userNameDirective(serverApi) {
+ return {
+ restrict: 'E',
+ // template: '<i class="fa fa-spin fa-loader" ng-if="!user"></i><span
ng-if="user">{{user}}</span>', // could show loader
+ template: '<span ng-if="user">{{user}}</span>',
+ link: link,
+ };
+
+ function link(scope, element, attrs, controller) {
serverApi.getUser().then((response) => {
scope.user = response.data;
}).catch((response) => {
scope.user = 'user';
});
- $compile(element)(scope);
}
}
+
diff --git a/ui-modules/utils/user-management/user-menu.template.html
b/ui-modules/utils/user-management/user-menu.template.html
index 56baa9af..e611a294 100644
--- a/ui-modules/utils/user-management/user-menu.template.html
+++ b/ui-modules/utils/user-management/user-menu.template.html
@@ -18,8 +18,7 @@
-->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"
uib-dropdown-toggle>
- <i class="fa fa-fw fa-user-circle-o"></i> Welcome
- <i class="fa fa-spin fa-loader" ng-if="!user"></i><span
ng-if="user">{{user}}</span>
+ <i class="fa fa-fw fa-user-circle-o"></i> Welcome
<br-user-name></br-user-name>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu>
