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

Image

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:
Image
Image


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 aragorn
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 aragorn
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.

Image

Hover is not correct, it should be the whole notification
Image

Very ugly for mobile
Image

Re: Notification panel topbar.xhtml -> I need a action

Posted: 04 Oct 2018, 15:08
by aragorn
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.