Liferay 7 : The animated portlet topper and Documents

[Armaz Mellati, modificado 7 Anos atrás.]

Hi,

We find the new animated portlet-topper in the new classic theme of Liferay 7 pretty annoying. So that is the first thing that goes out in our themes using the display: none; on ".portlet > .portlet-topper "

.portlet > .portlet-topper {
display: none;
}

However the Document and Media portlet, as the only portlet I have seen so far, has its most-important actions hidden inside the portlet-header !!!

Is there any way around it ? What is the simplest way of making the Document and Media portlet to have buttons as in the Messageboards portlet (see the attached screenshots)

Best regards,
Armaz Mellati

[Jorge Ferrer, modificado 7 Anos atrás.]

Hi Armaz,

I don't think it is a good idea to remove the portlet topper, since it's the place where the portlet specific actions live. Note that it is already smart in that it only shows to users who are able to perform any action. Regular users should not see it.

My suggestion if you don't like the animation is to disable it. Also, if you don't like the fact that it's visible and takes much space you can also style it to make it smaller.

[Armaz Mellati, modificado 7 Anos atrás.]

Hi Jorge

Thanks for your reply.
Yes, I think we will be have to at least disable the animation and make them less subtle.

However, I still think the Documents and Media portlet kind of, breaks with the other portlets when it comes to the add-content-actions. They should not be in the header. Those actions are the first thing users using the portlet will need and they must find it behind a little +sign. in the header. That is at least my opinion.

I will then probably be have to make a hook to add add-buttons the way they were in 6.2
Unnless there is any better way ?

Best regards,
Armaz Mellati

[Marcos Castro, modificado 7 Anos atrás.]

Hey Armaz,

You can freeze the animation adding the class "focus" in <section class="portlet focus"> inside your portlet.ftl
Or moving the .portlet:hover styles to .portlet, they are in the file /css/portlet/_topper.scss

Regards

[Marcos Castro, modificado 7 Anos atrás.]

You could add the class focus and some SASS lines to see something like this:

.portlet-topper {
	border-style: hidden;

	.portlet-title-default {
		display: none;
	}

	menu {
		background-color: #869CAD;
		border-radius: 4px;
		position: absolute;
		right: 20px;
		top: 10px;

		&:nth-of-type(2) {
			right: 60px;
		}
	}
}

[Armaz Mellati, modificado 7 Anos atrás.]

Thanks, that definitely looks much better