Notification panel topbar.xhtml -> I need a action

Post Reply
vished
Posts: 238
Joined: 02 Feb 2014, 17:38

21 Sep 2018, 13:08

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

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

24 Sep 2018, 14:43

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.

vished
Posts: 238
Joined: 02 Feb 2014, 17:38

24 Sep 2018, 18:31

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

User avatar
aragorn
Posts: 3164
Joined: 29 Jun 2013, 12:38

26 Sep 2018, 15:13

We'll check and get back to you.

vished
Posts: 238
Joined: 02 Feb 2014, 17:38

26 Sep 2018, 16:32

thank you

User avatar
aragorn
Posts: 3164
Joined: 29 Jun 2013, 12:38

27 Sep 2018, 08:38

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>

vished
Posts: 238
Joined: 02 Feb 2014, 17:38

28 Sep 2018, 09:24

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

User avatar
aragorn
Posts: 3164
Joined: 29 Jun 2013, 12:38

04 Oct 2018, 15:08

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.

Post Reply

Return to “Morpheus - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest