PDA

View Full Version : [CLOSED] Image quality loss when collapsing a panel



RCN
Apr 16, 2013, 1:45 PM
I have a ViewPort with an image in West Region's Header, as shown below:
6030

But when the West Region is collapsed, a image quality loss happens, as show below:
6031

Any idea to overcome this issue?

1 - View


<!DOCTYPE html>
<html>
<head runat="server">
<style type="text/css">
#_pnlWest_header
{
background: url(../../Resources/Logo.png) no-repeat center;
}
#_pnlWest-placeholder_hd
{
background: url(../../Resources/Logo2.png) no-repeat center;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<%--WEST--%>
<ext:Panel ID="_pnlWest" Region="West" Layout="AccordionLayout" Width="225" Html="Ext.Js"
Collapsible="true" runat="server">
</ext:Panel>
<%--CENTER--%>
<ext:Panel Html="Ext.Net" Region="Center" runat="server" />
</Items>
</ext:Viewport>
</body>
</html>


2 - Resources

Logo 1
6028

Logo 2
6029

Tested against
6032

Daniil
Apr 16, 2013, 1:59 PM
Hi Raphael,

The issue is reproducible in IE9, but not in FireFox or Chrome.

For example, in Chrome the following rule is used to rotate the div:

-webkit-transform: rotate(90deg);
in IE the following:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=1), progid:DXImageTransform.Microsoft.Chroma(color=#cb ddf3)

And, probably, it doesn't carry out its mission well for the image. Maybe, there is some correction or an additional rule available to correct it, but I don't know of any at the moment.

RCN
Apr 16, 2013, 2:19 PM
Sorry for i did not mention that the issue was not reproducible on Chrome and FF.

On previous versions, the placeholder_hd should be delivered with a 90 degrees rotation. But after i updated from SVN, i realized that the rotation is performed automatically. Is it possible to get some steps back and delivery the image already rotated? Going further, do you think that it would be an acceptable approach?

Thank you once again

Daniil
Apr 17, 2013, 4:44 AM
On previous versions, the placeholder_hd should be delivered with a 90 degrees rotation. But after i updated from SVN, i realized that the rotation is performed automatically. Is it possible to get some steps back and delivery the image already rotated? Going further, do you think that it would be an acceptable approach?

Are you saying that when you rotated the image manually it was OK? Could you show the CSS rule you used?

Probably, you could override the new filter rule with none filter and still apply your CSS rule.

RCN
Apr 17, 2013, 5:52 AM
On previous versions of Ext.Net / Ext.Js the image used in placeholder_hd was a "physically" rotated one. If it's not possible to "roll back" this behaviour i am gonna try to override the filter rule.

Daniil
Apr 17, 2013, 9:00 AM
On previous versions of Ext.Net / Ext.Js the image used in placeholder_hd was a "physically" rotated one.

Could you, please, point me where it was done?

RCN
Apr 17, 2013, 1:01 PM
1 - View


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<style type="text/css">
#_pnlWest_header
{
background: url(../../Resources/Logo.png) no-repeat center;
}
#_pnlWest-placeholder_hd
{
background: url(../../Resources/LogoRotated.png) no-repeat center;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<%--WEST--%>
<ext:Panel ID="_pnlWest" Region="West" Layout="AccordionLayout" Width="225" Html="Ext.Js"
Collapsible="true" runat="server">
</ext:Panel>
<%--CENTER--%>
<ext:Panel ID="Panel1" Html="Ext.Net" Region="Center" runat="server" />
</Items>
</ext:Viewport>
</body>
</html>


2 - Resources

Logo
6040

Logo - Rotated
6041

3 - DLL's
I've just sent the DLL's to your email. The subject of the email is: DLL's for executing the source code - Image quality loss when collapsing a panel

Vladimir
Apr 17, 2013, 1:21 PM
For ExtJS 4.2.0 try this css rules


<style>
#WestPanel-placeholder-innerCt {
background : url(collapsed-west.png) no-repeat center;
}

#SouthPanel-placeholder-innerCt {
background : url(collapsed-south.png) no-repeat center;
}
</style>

RCN
Apr 17, 2013, 2:00 PM
Thank your for the suggestion Vladmir, but unfortunately it did not work properly. To make it work, it's necessary to declare #_pnlWest-placeholder_hd as shown below (Line 6 - to 9):



<style>
#_pnlWest_header
{
background: url(../Imagens/Principal/LogoVisions.png) no-repeat center;
}
#_pnlWest-placeholder_hd
{
background: url() no-repeat center;
}
#_pnlWest-placeholder-innerCt
{
background: url(../Imagens/Principal/LogoVisionsRotacionado.png) no-repeat center;
}
</style>


But i think that the approach presented above is not "correct". I would like to know why _pnlWest-placeholder-innerCt is absent in case of _pnlWest-placeholder_hd is not declared.

Daniil
Apr 18, 2013, 4:32 AM
The CSS rules suggested by Vladimir appears to be working for me.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<style>
#_pnlWest_header {
background: url(resources/images/Logo.png) no-repeat center;
}

#_pnlWest-placeholder-innerCt {
background: url(resources/images/LogoRotated.png) no-repeat center;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel
ID="_pnlWest"
runat="server"
Region="West"
Width="225"
Html="Ext.Js"
Collapsible="true" />

<ext:Panel runat="server" Html="Ext.Net" Region="Center" />
</Items>
</ext:Viewport>
</body>
</html>


I mean that I don't need to add this rule:

#_pnlWest-placeholder_hd {
background: url() no-repeat center;
}

Please try to clear the browser cache.