Page 1 of 1
Notification panel topbar.xhtml -> I need a action
Posted: 21 Sep 2018, 13:08
by vished
Hi all,
I would like to integrate a p:commandLink to execute an action in my bean.
It look currently like this
So for the following icon:
<i class="fa fa-dot-circle-o Fright" aria-hidden="true"></i> <br></br>
I need now a p:commandLink....
If i add here p:commandLink, than I got a second line with two different hovers elements and it´s now one anymore...
Here my current code:
Code: Select all
<p:commandLink id="notificationLink" global="false">
<i class="topbar-icon fa fa-fw fa-bell-o"></i>
<h:outputText id="notificationTopbar"
value="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf}"
rendered="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf != 0}"
styleClass="topbar-badge animated rubberBand" />
<h:outputText value="Benachrichtungen"
styleClass="topbar-item-name" />
</p:commandLink> <p:tooltip for="notificationLink" value="Benachrichtungen"
position="bottom" />
<ul class="animated">
<li role="menuitem"><a href="#" class="topbar-message"> <h:outputText
styleClass="shorten-long-text"
value="Keine Benachrichtungen vorhanden"
rendered="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf == 0}" />
</a></li>
</ul>
<ul class="animated">
<p:repeat
value="#{notificationRequestLast10EntriesNotLazyController.notificationList}"
rendered="#{notificationRequestLast10EntriesNotLazyController.notificationList != null}"
var="notification">
<li role="menuitem" style="#{notification.readPortalNotification == false ? 'background-color: #dff0d8;' : 'background-color: #ffffff;'}"><a
href="#{generateTextNotLazyController.generateLink(notification)}">
<h:outputText escape="false"
value="#{generateTextNotLazyController.generateString(notification)}" />
<i class="fa fa-dot-circle-o Fright" aria-hidden="true"></i> <br></br>
<h:outputText id="notificationTime" style="margin-left: 29px;"
styleClass="Fs6" value="#{notification.createDate}">
<f:converter converterId="prettyTimeCustomConverter" />
</h:outputText> <p:tooltip for="notificationTime" position="bottom"
value="#{notification.createDate}" />
</a></li>
</p:repeat>
<h:panelGroup styleClass="TexAlCenter">
<p:commandLink >
<i class="fa fa-caret-square-o-right" aria-hidden="true" style="margin-left: 5px;"></i>
<h:outputText value="Alle Benachrichtungen anzeigen" />
</p:commandLink>
</h:panelGroup>
</ul></li>
2) I need also about the whole panel (like this):
<li role="menuitem" style="#{notification.readPortalNotification == false ? 'background-color: #dff0d8;' : 'background-color: #ffffff;'}"><a
href="#{generateTextNotLazyController.generateLink(notification)}">
a link. So this mean: as soon someone pressed on the whole panel, I would like to execute a function in my bean, which modify the notifcation and set to "read"....
How can I do this?
Many thanks
Re: Notification panel topbar.xhtml -> I need a action
Posted: 24 Sep 2018, 14:43
by huseyinT
I'm sorry. Your issue is not understandable.
But I think if you want action 'fa-dot-circle-o'.
You could try this(this is just an example, I removed your bean codes.) :
xhtml:
Code: Select all
<li role="menuitem">
<a href="#">
<h:outputText escape="false" value="1231" />
<h:outputText id="notificationTime" style="margin-left: 29px;" styleClass="Fs6" value="Time"></h:outputText>
<p:tooltip for="notificationTime" position="bottom" value="createDate" />
</a>
<p:commandLink id="ajax" actionListener="#{buttonView.buttonAction}" style="margin-left: 200px;
margin-top: -32px;
width: auto;
padding-left: 20px;">
<i class="fa fa-dot-circle-o Fright" aria-hidden="true"></i>
</p:commandLink>
</li>
Screen:
https://ibb.co/bBjkxU
If I understood wrong your question. You may try to explain clearly. You may add a video.
Re: Notification panel topbar.xhtml -> I need a action
Posted: 24 Sep 2018, 18:31
by vished
It goes in the right direction, but I have the following issues:
1) If I hover about the first line (Test Test hast das Projekt...) I got only a hover for the first line, but I need it for the whole notification (inclusive the "vor 3 Tagen" text)
2) If I hover about the new commandLink than I got a ugly grey panel
3) The text is not 100% with the same height.... "Test Test" is under the "hat das"
4) There is a big space between first line (Test Test hast das Projekt...) and second line (vor 3 Tagen)
5) Last text ("Alle Benachrichtungen anzeigen") should be centered
6) In mobile I have a white space on the left side (please see picture)
Please note:
I´ve changed the width to 350px:
.layout-wrapper .topbar .topbar-menu > li > ul
width: 350px;
Pictures:
Here my code
Code: Select all
<ul class="animated">
<p:repeat
value="#{notificationRequestLast10EntriesNotLazyController.notificationList}"
rendered="#{notificationRequestLast10EntriesNotLazyController.notificationList != null}"
var="notification">
<li role="menuitem" style="#{notification.readPortalNotification == false ? 'background-color: #dff0d8;' : 'background-color: #ffffff;'}"><a
href="#{generateTextNotLazyController.generateLink(notification)}">
<h:outputText escape="false"
value="#{generateTextNotLazyController.generateString(notification)}" />
<p:commandLink id="ajax"
actionListener="#{buttonView.buttonAction}"
style="margin-left: 300px;
margin-top: -20px;
width: auto;
padding-left: 20px;">
<i class="fa fa-dot-circle-o Fright" aria-hidden="true"></i>
</p:commandLink>
<br></br>
<h:outputText id="notificationTime" style="margin-left: 42px;"
styleClass="Fs6" value="#{notification.createDate}">
<f:converter converterId="prettyTimeCustomConverter" />
</h:outputText> <p:tooltip for="notificationTime" position="bottom">
<h:outputText value="#{notification.createDate}">
<f:convertDateTime type="date"
pattern="#{loginBean.currentUser.dateFormat}" />
</h:outputText>
<h:outputText value=" um "
rendered="#{notification.createDate != null}" />
<h:outputText value="#{notification.createDate}">
<f:convertDateTime type="date"
pattern="#{loginBean.currentUser.timeFormat}" />
</h:outputText>
<h:outputText value=" Uhr"
rendered="#{notification.createDate != null}" />
</p:tooltip>
</a></li>
</p:repeat>
Many thanks for help
Re: Notification panel topbar.xhtml -> I need a action
Posted: 26 Sep 2018, 15:13
by mert.sincan
We'll check and get back to you.
Re: Notification panel topbar.xhtml -> I need a action
Posted: 26 Sep 2018, 16:32
by vished
thank you
Re: Notification panel topbar.xhtml -> I need a action
Posted: 27 Sep 2018, 08:38
by mert.sincan
Unfortunately, the attached code is not runnable code for us. Therefore, I tried to create a similar example to your code. Please see my example;
Code: Select all
//xhtml
<ul class="animated">
<li role="menuitem" class="custom-menuitem">
<div class="custom-menuitem-container">
<h:outputText escape="false" value="TEST TEST TEST" />
<p:commandLink id="ajax">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
</p:commandLink>
<br></br>
<h:outputText id="notificationTime" style="margin-left: 42px;" value="TEST TEST"></h:outputText>
</div>
</li>
....
Code: Select all
//CSS
<style type="text/css">
.layout-wrapper .topbar .topbar-menu > li > ul .custom-menuitem a.ui-commandlink .fa {
margin-right: auto;
}
.layout-wrapper .topbar .topbar-menu > li > ul .custom-menuitem a.ui-commandlink {
width: auto;
float: right;
}
.layout-wrapper .topbar .topbar-menu > li > ul .custom-menuitem > .custom-menuitem-container {
padding: 6px 12px;
width: 100%;
box-sizing: border-box;
}
/* FOR MOBILE */
@media (max-width: 1024px) {
.layout-wrapper .topbar .topbar-menu > li > ul {
padding: 0;
}
.layout-wrapper .topbar .topbar-menu > li > ul > li {
padding-left: 20px;
}
}
</style>
Re: Notification panel topbar.xhtml -> I need a action
Posted: 28 Sep 2018, 09:24
by vished
thank you.
I checked this, but it´s not really solved the issues which I had before...
Please see below my screenshots, can you have a look into it, please.
Hover is not correct, it should be the whole notification
Very ugly for mobile
Re: Notification panel topbar.xhtml -> I need a action
Posted: 04 Oct 2018, 15:08
by mert.sincan
It is very difficult for us to reproduce your issue with screenshots. If you attach topbar's dom structure, we can help you better. Please open inspector of browser and copy topbar element(<div class="topbar>") from "Elements" tab of browser's inspector and attach your next comment.