I just grabbed a current snapshot with the media module integration and I'm loving it!
#1218746: Add Support for Media Module Widget

I am not able to make a patch, but I did have a few suggestions to make the interface more like core's vertical tabs.

First, in "epsacrop.module" move

  $out .='<div class="epsacrop-image-crop">' . "\n";
  $out .='<img id="epsacrop-target" />' . "\n";
  $out .='</div>' . "\n";

to below...

  foreach ($styles['styles'] as $style_name) {
    $style = _epsacrop_load_style($style_name);
    $effect = _epsacrop_get_effect($style);
    $id = 'epsacrop-' . $effect['ieid'] . '-' . $effect['isid'];
    $out .='<li class="epsacrop-presets-menu-li"><a data-bgcolor="' . $effect['data']['jcrop_settings']['bgcolor'] . '" data-bgopacity="' . $effect['data']['jcrop_settings']['bgopacity'] . '" data-aspect-ratio="' . $effect['data']['jcrop_settings']['aspect_ratio'] . '" id="' . $id . '" href="javascript:Drupal.EPSACrop.crop(\'' . $id . '\');" rel="' . $effect['data']['width'] . 'x' . $effect['data']['height'] . '"' . ($i++ == 0 ? ' class="selected"' : '') . '>' . $style['name'] . '</a></li>';
  }
  $out .='</ul>' . "\n";
  $out .='</div>' . "\n";

Then add the following CSS to "epsacrop.css" (http://pastebin.com/dyfnLP5k)

CommentFileSizeAuthor
#8 1493236-6-epsacrop-seven.jpg32.04 KBmilesw
#6 1493236-6-epsacrop-theming.patch13.74 KBmilesw
#6 1493236-6-epsacrop-seven.jpg32.04 KBmilesw
#6 1493236-6-epsacrop-stark.jpg33.89 KBmilesw
#3 Edit Page Lorem ipsum dolor sit amet consectetur adipiscing elit Playground10 - 2.png71.21 KBbryancasler
#1 gfocZj.png64.76 KBbryancasler

Comments

bryancasler’s picture

bryancasler commented
Issue summary: View changes

Correction

bryancasler’s picture

bryancasler commented
StatusFileSize
new gfocZj.png64.76 KB

Here is a screenshot of the output...
Screenshot

bryancasler’s picture

bryancasler commented
Title: CSS Suggestions » Style Suggestions
bryancasler’s picture

bryancasler commented
StatusFileSize
new Edit Page Lorem ipsum dolor sit amet consectetur adipiscing elit Playground10 - 2.png71.21 KB

Made a few changes to the CSS http://pastebin.com/eGfMyjaL

Result
Screenshot

It's not perfect, for example it looks funky if you have more style tabs than the image is tall.

yvmarques’s picture

yvmarques commented

I like the second option, expect the gray in the right of image, is that possible to have it in white but with teethe gray block ?

Thanks.

bryancasler’s picture

bryancasler commented

I agree, but this is the best I can do with CSS. The actual output would need to change if we really wanted to emulate the vertical tabs look. Here is some sample output of vertical tabs that has been lightly modified to simplify it for this use case.

<div class="vertical-tabs clearfix">

	<ul class="vertical-tabs-list">
		<li class="vertical-tab-button first selected" tabindex="-1">
			<a href="#">
				<strong>Thumbnail</strong>
			</a>
		</li>
		<li class="vertical-tab-button last" tabindex="-1">
			<a href="#">
				<strong>Large</strong>
			</a>
		</li>
	</ul>

	<div class="vertical-tabs-panes">
		###IMAGE###
	</div>
	
</div>
milesw’s picture

milesw commented
StatusFileSize
new 1493236-6-epsacrop-stark.jpg33.89 KB
new 1493236-6-epsacrop-seven.jpg32.04 KB
new 1493236-6-epsacrop-theming.patch13.74 KB

In this patch I've overhauled the EPSA Crop theming for dialogs and the links that open dialogs. Taking a cue from @animelion, I reused core CSS classes for vertical tabs. See attached screenshots -- one with the Seven theme, the other with Stark (core CSS only).

Details:

  • Two new theme functions: theme_epsacrop_dialog and theme_epsacrop_link
  • Dialog is now built as a render array, which is rendered by theme_epsacrop_dialog. This gives themers an opportunity to completely customize the dialog.
  • Adjusted JS to remove some hardcoded elements/classes, so that functionality is less dependent on theming. Only the links for style presets need to be themed with specific attributes.
  • Removed custom module CSS
  • Retained previously-used CSS classes to try and maintain backwards compatibility with custom themes.

If we can get this in, I'd also be happy to update the README with some theming instructions. :)

milesw’s picture

milesw commented
Title: Style Suggestions » Improve theming options for crop dialog
Status: Active » Needs review

Changing title and status

milesw’s picture

milesw commented
StatusFileSize
new 1493236-6-epsacrop-seven.jpg32.04 KB

Hmm, the screenshot for Seven is broken. Trying again.

milesw’s picture

milesw commented
Issue summary: View changes

Correction