Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
ChingYen  
#1 Posted : Tuesday, January 25, 2011 3:23:20 AM(UTC)
ChingYen

Rank: Advanced Member

Groups: Member
Joined: 3/3/2008(UTC)
Posts: 185

Thanks: 8 times
Hi,

We would like to make the UI for the side panel. We manage to get the "format" button, and the "apply crop" and "cancel crop" skin as what we want. But, we are not manage to get the button for Orientation. Both of the button will always just follow the CSS for the "format" button.

Is that any possibility for us to archive the UI as below?

Please advise.
ChingYen attached the following image(s):
Panel.jpg
Dmitry.Obukhov  
#2 Posted : Wednesday, January 26, 2011 4:01:34 AM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups:
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
Hello Ching-Yen,

Yes, it is possible to get the UI like in the attachment model image. To perform it you need to:
  1. replace crop button images – But.gif, and ButPressed.gif with your ones. They are located in the Images/ folder of project.
  2. add new images for orientation buttons. There are orientation buttons are the same as crop buttons - But.gif, and ButPressed.gif in standard sample project.
  3. replace buttons for “Apply crop”, and “Cancel crop” – PhotoEditorButton.gif, and PhotoEditorButtonDisabled.gif in the Images/ folder.
  4. replace small icons which show a sample of cropping and orientation, and add new ones. They are located in the Images/Effects/Crop/ catalog.
Please let me know if you have any additional questions or problems with preparing new UI.

Edited by user Wednesday, January 26, 2011 11:22:20 PM(UTC)  | Reason: Not specified

Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
ChingYen  
#3 Posted : Wednesday, January 26, 2011 5:01:49 PM(UTC)
ChingYen

Rank: Advanced Member

Groups: Member
Joined: 3/3/2008(UTC)
Posts: 185

Thanks: 8 times
Dmitry.Obukhov wrote:
  • add new images for orientation buttons. There are orientation buttons are the same as crop buttons - But.gif, and ButPressed,gif in standard sample project.
    [/list]


  • Hi, as mentioned, we already did the above changes. Everything works fine beside the Orietation button. Where it will always pickup the CSS from the "format button". You mentioned create new Image But.gif and ButPressed.gif for the orientation button, but, If we copy over the file, it will overwrite the format button.

    Kindly advise.
    Dmitry.Obukhov  
    #4 Posted : Thursday, January 27, 2011 1:05:23 AM(UTC)
    Dmitry.Obukhov

    Rank: Advanced Member

    Groups:
    Joined: 5/29/2010(UTC)
    Posts: 1,310

    Thanks: 8 times
    Was thanked: 111 time(s) in 111 post(s)
    Hello Ching-Yen,

    Here is the code snippet of \PhotoEditor\Styles\PhotoEditor.css file, which allow to edit But.gif, ButPressed.gif buttons, and their contains:
    Code:
    .SimpleEffectControl
    {
    	position: relative;
    	display: block;
    	font-family: Arial, Tahoma, Geneva, sans-serif;
    	font-weight: bold;
    	color: #000000;
    	text-align: left;
    	float: left;
    	width: 201px;
    	height: 45px;
    	font-size: 15pt;
    }
    
    .SimpleEffectControl a:link, .SimpleEffectControl a:visited
    {
    	position: absolute;
    	color: #FFFFFF;
    	text-decoration: none;
    	top: 15px;
    	height: 17px;
    	left: 45px;
    	width: 161px;
    }
    
    .SimpleEffectButton
    {
    	background: url(../Images/but.gif) 12px 0px !important;
    	filter:Alpha(opacity=70);-moz-opacity: 0.7;opacity:0.7;
    }
    .SimpleEffectSelectButton
    {
    	background: url(../Images/butPressed.gif) 0px 0px !important;
    	filter:Alpha(opacity=70);-moz-opacity: 0.7;opacity:0.7;
    }
    
    .SimpleEffectButton, .SimpleEffectSelectButton
    {
    	position: absolute;
    	display: block;
    	width: 201px;
    	margin: 5px 12px 5px 12px;
    	height: 35px;
    	overflow: visible;
    }
    
    .SimpleEffectButton .Content, .SimpleEffectSelectButton .Content
    {
    	border: 1px solid black;
    	position: absolute;
    	width: 32px;
    	height: 32px;
    	overflow: hidden;
    }
    
    .SimpleEffectButton .Content
    {
    	top: 9px;
    	left: 8px;
    	width: 16px;
    	height: 16px;
    }
    
    .SimpleEffectSelectButton .Content
    {
    	top: 12px;
    	left: 8px;
    	width: 16px;
    	height: 16px;
    }

    Quote:
    add new images for orientation buttons. There are orientation buttons are the same as crop buttons - But.gif, and ButPressed.gif in standard sample project.

    I have meant that you need to add your own images of orientation buttons. Then you will need to add new CSS classes for the new buttons like in the code I listed above.
    Best regards,
    Dmitry Obukhov
    Technical Support. Aurigma, Inc.
    ChingYen  
    #5 Posted : Thursday, January 27, 2011 1:13:17 AM(UTC)
    ChingYen

    Rank: Advanced Member

    Groups: Member
    Joined: 3/3/2008(UTC)
    Posts: 185

    Thanks: 8 times
    ChingYen wrote:
    Dmitry.Obukhov wrote:
  • add new images for orientation buttons. There are orientation buttons are the same as crop buttons - But.gif, and ButPressed,gif in standard sample project.
    [/list]


  • Hi, as mentioned, we already did the above changes. Everything works fine beside the Orietation button. Where it will always pickup the CSS from the "format button". You mentioned create new Image But.gif and ButPressed.gif for the orientation button, but, If we copy over the file, it will overwrite the format button.

    Kindly advise.



    I think we didn't the question well..May be it should be how can we set Orientation button CSS different from the Format button? As all of them were being generated by the control. I can't find any place that I could chage the Orientation Button CSS to something like class="myOrientation_Design"
    Dmitry.Obukhov  
    #6 Posted : Friday, January 28, 2011 4:18:59 AM(UTC)
    Dmitry.Obukhov

    Rank: Advanced Member

    Groups:
    Joined: 5/29/2010(UTC)
    Posts: 1,310

    Thanks: 8 times
    Was thanked: 111 time(s) in 111 post(s)
    Hello Ching-Yen,

    Sorry for the misunderstanding.

    Please open PhotoEditor\App_Code\PhotoEditor\Effects\Crop\CropEffect.cs. You need to add condition of checking orientation buttons in the RenderSimpleElement() method, and add new classes for orientation buttons style. If you have some problems with it, please let me know.
    Best regards,
    Dmitry Obukhov
    Technical Support. Aurigma, Inc.
    thanks 1 user thanked Dmitry.Obukhov for this useful post.
    ChingYen on 1/28/2011(UTC)
    Users browsing this topic
    Forum Jump  
    You cannot post new topics in this forum.
    You cannot reply to topics in this forum.
    You cannot delete your posts in this forum.
    You cannot edit your posts in this forum.
    You cannot create polls in this forum.
    You cannot vote in polls in this forum.