p:slideout like intercom / zendesk

[vished]

Hi all,

How is it possible to have a widget like intercom or zendesk?
I have currently the following issue that the icon is on top the panel as soon I expand it:


Please see also in showcase: "Contact" is than on top from the panel...

But I need it like this that the Icon is still on bottom.

bild hochladen link

How can I do this? Also the icon should be change than to "X" .... if if´s not expanded, it´s a "?"...

Any ideas?

[Melloware]

Are you trying to combine Floating Action Button and Slideout?

I am having trouble telling what you issue is can you create me a small reproducible example using PrimeFaces Test that shows the issue?
https://github.com/primefaces/primefaces-test

That would help me see and debug your issue,

[vished]

Oh, I was not aware about the Floating Action Button. Currently I have adjusted the CSS as a "floating action button" as in my first screenshot...
But yes, I would like to combine both of them.
I need this kind of button, but instead of a p:menuitem I need a p:panel (like in Slideout).

Is this possible?

[Melloware]

Well the slideout was specifically designed to look like a Tab. I suppose you could hack the CSS to make it not look like a tab?

The Floating Action Button was meant as a Menu like Google Android specifications recommend. So this ZenDesk component you want almost sounds like it would need to be Slideout but with the CSS hacked.

But it sounds like you tried that and your CSS is having issues floating?

[vished]

Yes, here my code:

Code: Select all

/* Custom styles for the SlideOut */  
.feedback-panel {  
    border-color: DeepPink;  
    border-width: 1px;  
}  
/*  Handle defaults and "closed" state */  
.feedback-handle {  
    z-index: 2147483000 !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    pointer-events: auto !important;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px !important;
    border-radius: 50% !important;
    background: rgb(183, 152, 109) !important;
    animation: 250ms ease 0s 1 normal none running animation-bhegco !important;
    transition: box-shadow 80ms ease-in-out 0s !important;
    font-size: 25px !important;
    text-align: center !important;
     color: white !important;  
}  
/*  Style applied to handle "open" state */  
.ui-slideouttab-open>.feedback-handle {  
    color: white !important;  
    background-color: DeepPink;  
}  

Code: Select all

<pe:slideout id="slideoutContact"  icon="fa fa-envelope"
		location="bottom" widgetVar="slideout"
		 handleStyleClass="feedback-handle" panelStyleClass="feedback-panel"
		offset="10px" handleOffsetReverse="true" bounceTimes="5"
		offsetReverse="true" bounceDistance="100px">
		<p:panelGrid styleClass="ui-noborder">
			<p:row>
				<p:column styleClass="ui-widget-header">
					<p:outputLabel for="txtMessage" value="Message"></p:outputLabel>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:inputTextarea id="txtMessage" rows="5" cols="43"
						autoResize="false" />
					<p:watermark for="txtMessage"
						value="Send us a message if you have something to say." />
				</p:column>
			</p:row>
			<p:row>
				<p:column styleClass="ui-widget-header">
					<p:outputLabel for="txtEmail" value="Email address (optional)"></p:outputLabel>
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:inputText id="txtEmail" size="40" />
					<p:watermark for="txtEmail" value="Email address (optional)" />
				</p:column>
			</p:row>
			<p:row>
				<p:column style="font-style: italic;">  
             If you provide your email address above, then by submitting<br />  
             this form you agree that we may contact you by email<br />  
             to follow up on your feedback.<br />
				</p:column>
			</p:row>
			<p:row>
				<p:column>
					<p:outputPanel style="text-align:right;">
						<p:commandButton value="Send" type="button"
							onclick="PF('slideout').close();" />
					</p:outputPanel>
				</p:column>
			</p:row>
		</p:panelGrid>
	</pe:slideout>

Now I have this:


And when it´s open the icon is on top.... I need it still on the bottom as the Floating Action Button....
Is there any way to do this?

[Melloware]

I think you are close, probably just a little more CSS tweaking? If you could make me a runnable sample that would help me try and fix it.

[vished]

The whole code is in my last comment. This should work...
I´m using Morpheus as template...

Many thanks for your support.

[Melloware]

OK I will look at this on Monday and see if I can see anything obvious.

[vished]

great, many thanks

[Melloware]

OK I see what you want to do but I think trying to make the slideout work like you want is tough.

What you really need is a combination of Floating Action Button which handles the open and close and changes icons and the slideout. You may have to write just some custom CSS and JS to make this happen borrowing from both of those components.