Page 1 of 1
Modify menu and topbar with p:commandLink
Posted: 31 Jul 2020, 00:54
by tkernstock
Hi,
I would like to have some functions triggerd with the items in Menu and topbar. For example here:
Code: Select all
<a class="layout-profile-button" href="#">
<span class="profile-image-icons">
<p:graphicImage name="images/menu/avatar.png" library="pandora-layout" />
<span class="icons">
<i class="fa fa-fw fa-comment"><span></span></i>
<i class="fa fa-fw fa-bell-o"></i>
<i class="fa fa-fw fa-sign-out"></i>
</span>
</span>
<span class="profile-info-button">
<span class="layout-profile-userinfo">
<span class="layout-profile-name">Amelia Cabal</span>
<span class="layout-profile-role">Normal Employee</span>
</span>
<i class="layout-profile-icon fa fa-angle-down"></i>
</span>
</a>
<ul class="layout-profile-menu">
<li class="info">
<div class="profile-info">
<div class="layout-profile-userinfo">
<span class="layout-profile-name">Amelia Cabal</span>
<span class="layout-profile-role">Normal Employee</span>
</div>
<div class="icons">
<i class="fa fa-fw fa-comment"></i>
<i class="fa fa-fw fa-bell-o"></i>
<i class="fa fa-fw fa-sign-out"></i>
</div>
</div>
</li>
.......
1) There is no way I can see how the dropdown works when I click on the Username because it not a JSF widget but some JavaScript code that is not mentioned in any documentation and triggered when I click on the line.
2) Let's assume I would like to really logout instead of just havin a nice icon and I change the code to something like that:
Code: Select all
<span class="icons">
<i class="fa fa-fw fa-comment"><span></span></i>
<i class="fa fa-fw fa-bell-o"></i>
<p:commandLink action="somebean.logout()" ajax="false" ><i class="fa fa-fw fa-sign-out" /></p:commandLink>
</span>
a) the Layout gets destroyed so that the logout button is displayed in the same line like the user name and
b) the dropdown script for the user menu doesn't work anymore
Same goes for the topbar:
If I use any of the menu items for a p:commandLink which should be in a h:form (or if I just put the whole topbar in a form) everything breaks. This is between nothig gets displayed, if I put a form around everything, to an item that is not displayed anymore if I use it as commandLink with a form.
How can use Pandora to work with JSF widgets and not only JavaScript and <a href=".... ?
best
Thomas
Re: Modify menu and topbar with p:commandLink
Posted: 02 Aug 2020, 13:54
by mert.sincan
Interesting! I couldn't replicate these issues. When I change <a> tag with p:commandLink, everything works as expected (topbar menu, profile menu is opening) Could you please try them with our sample project? Also, could you please attach your changes and screenshots to replicate these issues?
Thanks a lot!
Best Regards,
Re: Modify menu and topbar with p:commandLink
Posted: 04 Aug 2020, 11:48
by tkernstock
Hi,
I'm using eclipse and payara and wasn't able to deploy the pandora-1.0.0 project. Neither directly in my workspace nor the compiled war file from the payara console. There are problems with webbeans and more.
Here is a screenshot of how my menu looks like after inderting the p:commandLink -> (I cannot upload attachments/pictures so here is a link)
https://www.dropbox.com/s/xmcq2htn7z12t ... u.jpg?dl=0
Addionally here is a screenshot with the webinspector showing, that there is no .css involved other than the original theme
https://www.dropbox.com/s/83t6dycile068 ... 2.jpg?dl=0
best
Thomas
Re: Modify menu and topbar with p:commandLink
Posted: 04 Aug 2020, 12:54
by mert.sincan
Hi,
Thanks a lot for the screenshot. In the second screenshot, commandlink is not in <span class="profile-image-icons"> and <span class="icons"> elements. Could you please check your xhtml page?
(Note: The sample code above is correct.)
Best Regards,
Re: Modify menu and topbar with p:commandLink
Posted: 04 Aug 2020, 18:17
by tkernstock
Hi,
well this is very interessting bcause the code is:
Code: Select all
<div class="menu-wrapper">
<div class="layout-menu-container">
<h:form id="menuform">
<div class="layout-profile">
<a class="layout-profile-button" href="#">
<span class="profile-image-icons">
<p:graphicImage id="portrait" value="#{personalstammBean.getFoto()}" stream="false" cache="true" />
<span class="icons">
<p:commandLink action="#{loginPage.logout}" immediate="true" class="fa fa-fw"><i class="fa fa-fw fa-sign-out" /></p:commandLink>
<i class="fa fa-fw fa-comment"></i>
<i class="fa fa-fw fa-bell-o"></i>
</span>
</span>
<span class="profile-info-button">
<span class="layout-profile-userinfo">
<span class="layout-profile-name">#{personalstammBean.getProfil().vorname} #{personalstammBean.getProfil().nachname}</span>
<span class="layout-profile-role">#{personalstammBean.getProfil().funktion}</span>
</span>
<i class="layout-profile-icon fa fa-angle-down"></i>
</span>
</a>
<ul class="layout-profile-menu">
<li class="info">
<div class="profile-info">
<div class="layout-profile-userinfo">
<span class="layout-profile-name">#{personalstammBean.getProfil().vorname} #{personalstammBean.getProfil().nachname}</span>
<span class="layout-profile-role">#{personalstammBean.getProfil().funktion}</span>
</div>
<div class="icons">
<i class="fa fa-fw fa-comment"></i>
<i class="fa fa-fw fa-bell-o"></i>
<i class="fa fa-fw fa-sign-out"></i>
</div>
</div>
</li>
<li>
<a href="#">
<i class="fa fa-fw fa-user"></i>
<span>Profile</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-fw fa-cog"></i>
<span>Settings</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-fw fa-envelope-o"></i>
<span>Messages</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-fw fa-bell-o"></i>
<span>Notifications</span>
</a>
</li>
</ul>
</div>
<ui:include src="#{guestPreferences.groupedMenu ? 'groupedMenu.xhtml' : 'ungroupedMenu.xhtml'}" />
</h:form>
</div>
</div>
I didn't change anything accept wrapping the <i class> with a commandLink. Addionally I wrapped everything in <h:form id="menuform"> to avoid errormessages. But removing the form has no impact on the position of link nor the layout.
best
Thomas
Re: Modify menu and topbar with p:commandLink
Posted: 04 Aug 2020, 18:31
by tkernstock
Hi,
I found the Problem. Since the picture and all the icons are surounded by a link the addional link doesn't work well. So I chenged the code to:
Code: Select all
<h:form id="menuform">
<div class="layout-profile">
<span class="layout-profile-button" > !! Changed
<span class="profile-image-icons">
<p:graphicImage id="portrait" value="#{personalstammBean.getFoto()}" stream="false" cache="true" />
<span class="icons">
<p:commandLink action="#{loginPage.logout}" immediate="true" class="fa fa-fw"><i class="fa fa-fw fa-sign-out" /></p:commandLink>
<i class="fa fa-fw fa-comment"></i>
<i class="fa fa-fw fa-bell-o"></i>
</span>
</span>
<a href="#"> !! Changed
<span class="profile-info-button">
<span class="layout-profile-userinfo">
<span class="layout-profile-name">#{personalstammBean.getProfil().vorname} #{personalstammBean.getProfil().nachname}</span>
<span class="layout-profile-role">#{personalstammBean.getProfil().funktion}</span>
</span>
<i class="layout-profile-icon fa fa-angle-down"></i>
</span>
</a>
</span>
<ul class="layout-profile-menu">
which is working fine now.
best Thomas
Re: Modify menu and topbar with p:commandLink
Posted: 04 Aug 2020, 20:01
by tkernstock
Another suggestion for the TOPBAR:
If I would like to have a form for an"icon commandLink" like
Code: Select all
<li class="topbar-item tags">
<p:commandLink action="#{loginPage.logout}" immediate="true" >
<i class="topbar-icon fa fa-fw fa-sign-out"></i>
</p:commandLink>
</li>
If I put the <h:form> right before the <p:commandLink> the icon is not shown at all (because it's blue instead of white and only hoovers in white)
If I put the <h:form> right before <li class="topbar-item tags"> I can see the icon, but its just 16px instead of 32 and I cannot find the style that is applyed or missing?!
The only solution I found is to remove all form tags and put just one before <div class="layout-topbar-right"> and wrap the whole topbar. This works but is probably not the best solution.
It would be great if I could use the icons in the Topbar with forms as needed without influencing the layout!
best Thomas
Re: Modify menu and topbar with p:commandLink
Posted: 12 Sep 2020, 15:03
by mert.sincan
Glad to hear, thanks a lot for the update!
Best Regards,
