crimagify 0.0.3.6 → 0.0.3.8

data/app/assets/javascripts/crimagify/actions_cropper.js.erb

@@ -13,21 +13,44 @@ $(function(){
 
 	// Events only for crimagify without nested models
 	$(".uploader").on("change", function(evt){
-		//this variable is used for identify on what section pu the resultant image
 		var $this = $(this);
+		var $cropper =  $("#cropper_div");
 		var parent_element_id = $this.closest('.global_parent').attr("id");
 		var name_version = $this.closest('.global_parent').attr("name");
-		if (validate_image(evt) == true) {
-			var reader =  new FileReader();
-			reader.onloadend = function(e){
-				render_image_temporal(e.target.result, parent_element_id, name_version);
-				render_image = e.target.result;
-			};
-			reader.readAsDataURL(evt.target.files[0]);
+		
+		/**/
+		if($cropper.length){
+			$cropper.hide('slow', function(){
+				//$cropper.closest('div.global_parent').find('.uploader').val('');
+				$cropper.hide('slow', function(){
+					$cropper.remove();
+				});
+				
+				if (validate_image(evt) == true) {
+					var reader =  new FileReader();
+					reader.onloadend = function(e){
+						render_image_temporal(e.target.result, parent_element_id, name_version);
+						render_image = e.target.result;
+					};
+					reader.readAsDataURL(evt.target.files[0]);
+				}else{
+					$this.val('');
+				};
+			});
 		}else{
-			$this.val('');
-		};
-	});
+			if (validate_image(evt) == true) {
+				var reader =  new FileReader();
+				reader.onloadend = function(e){
+					render_image_temporal(e.target.result, parent_element_id, name_version);
+					render_image = e.target.result;
+				};
+				reader.readAsDataURL(evt.target.files[0]);
+			}else{
+				$this.val('');
+			};
+		}	
+		/**/
+	});	
 
 	// Events only for crimagify with nested models
 	$(".nested_crimagify_images").on("change",".nested_uploader",function(evt){
@@ -75,12 +98,12 @@ $(function(){
 		});
 		$(".nested_uploader").val('');			
 	});
-	$("#cancel_crop").on("click",function(evt){
+	$(".parent_image").on("click",'.cancel_crop',function(evt){
 		evt.preventDefault();
 		$("#cropper_div").hide("slow", function(){
 			$("#cropper_div").remove();
 		});
-		$(".nested_uploader").val('');			
+		$(".uploader").val('');			
 	});
 	/*====== Crop Image ========*/
 	
@@ -89,7 +112,7 @@ $(function(){
 		parameters($(this));
 	});
 
-	$("#crop_image").on("click",function(){
+	$(".parent_image").on("click",'.crop_image',function(){
 		//parent_element_id is filled with the value of DIV parent closest: "imgA","imgB","imgZ"
 		parameters($(this));
 	});
@@ -219,7 +242,6 @@ function load_partial_nested(parent_tag_id, name_version, type_img){
 	if (max_height_box == "") {
 		max_height_box = 500;
 	}
-	console.log(max_width_box+"   "+max_height_box)
 	select = [0,0,ratio_vals.width,ratio_vals.height];
 	var ratio = ratio_vals.width/ratio_vals.height;
 
@@ -268,7 +290,7 @@ function parameters($crop){
 				"parent_element_id" : parent_tag_id
 		};
 		array_names.push(parent_tag_id);
-	}	
+	}
 	$.ajax({
 		url: "/crimagify/params_cropper",
 		type: "POST",

data/app/assets/stylesheets/crimagify/{cropper.css.scss → cropify_cropper.css.scss}

@@ -1,4 +1,4 @@
-@import 'mixin.css.scss';
+@import 'cropify_mixin.css.scss';
 div.parent_image,
 div#parent_image{
 	position:relative !important;
@@ -68,4 +68,4 @@ div#cropper_div{
 }
 .refresh_image{
 	position: relative !important;
-}
+}

data/app/assets/stylesheets/crimagify/cropify_mixin.css.scss

@@ -0,0 +1,85 @@
+@mixin opacity($n:1,$ie:100){
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity="$n")";
+	moz-opacity:$n;
+	filter: alpha(opacity=$ie);
+	opacity:$n;
+}
+@mixin textShadow($px:2px 1px 1px,$color:#000000){
+	text-shadow: $px $color;
+	filter: dropshadow(color=$color, offx=2, offy=2);
+}
+@mixin rounded($rounded:5px){
+	-webkit-border-radius:$rounded;
+	-khtml-border-radius:$rounded;
+	-moz-border-radius:$rounded;
+	-o-border-radius:$rounded;
+	border-radius:$rounded;
+}
+@mixin spriteImages($padding:10px,$position:-10px -10px,$color:transparent){
+	padding:$padding;
+	background:$color url('/assets/sprite.png') $position no-repeat;
+}
+
+@mixin sampleSprite($x){
+	background:transparent image-url('/assets/sprite.png') $x no-repeat;
+}
+
+/**/
+@mixin backgroundImage($imageName:no-logo,$format:png, $repeat:no-repeat,$color:transparent){
+	background:$color url(/assets/system/$imageName$format) $repeat !important;
+}
+/*store.scc.scss*/
+@mixin tableCell(){
+	display:table-cell;
+	vertical-align:middle;
+	text-align:center;
+}
+@mixin animation($position:all, $time:0.5s, $move:ease-in-out){
+  -webkit-transition: $position $time $move;
+  -moz-transition: $position $time $move;
+  -o-transition: $position $time $move;
+  -ms-transition: $position $time $move;
+  transition: $position $time $move;
+}
+@mixin transformAnimation($scale:1.2){
+	-webkit-transform: scale($scale);
+	-moz-transform: scale($scale);
+	-o-transform: scale($scale);
+	-ms-transform: scale($scale);
+	transform: scale($scale);
+}
+@mixin animationdelay($time:0.1s){
+	-webkit-transition-delay: $time;
+	-moz-transition-delay: $time;
+	-o-transition-delay: $time;
+	-ms-transition-delay: $time;
+	transition-delay: $time;
+
+}
+@mixin boxShadow($size:1px 1px 1px, $color:#333){
+	-webkit-box-shadow: $size $color;
+	-moz-box-shadow: $size $color;
+	box-shadow: $size $color;
+}
+@mixin rotate($rotate:-180deg){
+	-webkit-transform:rotate($rotate);
+	-moz-transform:rotate($rotate);
+	-o-transform:rotate($rotate);
+	-ms-transform:rotate($rotate);
+	transform:rotate($rotate);
+}
+@mixin boderRadius($rad){
+	-webkit-border-radius:$rad;
+	-moz-border-radius:$rad;
+	border-radius:$rad;
+}
+@mixin dropShadow($size:2px 2px 12px,$op:0.8){
+	filter: drop-shadow($size rgba(0,0,0,$op));
+	-webkit-filter: drop-shadow($size rgba(0,0,0,$op));
+	-moz-filter: drop-shadow($size rgba(0,0,0,$op));
+	-o-filter: drop-shadow($size rgba(0,0,0,$op));
+	ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,"$op")')";
+	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=135,Color='rgba(0,0,0,$op)');
+	//filter: url(#drop-shadow);
+}
+/*Degradiants*/

data/app/helpers/crimagify/application_helper.rb

@@ -1,19 +1,26 @@
 module Crimagify
 	module ApplicationHelper
 
-	  	def image_cropper(object, options, image_options = {})
+  	def image_cropper(object, options, image_options = {})
 			image_options[:class] = "#{image_options[:class]} img_start"
 			img = object.crimagify_images.where("image_name=?", options[:image_name])
 			version_name = options[:ratio]
+			if options[:label_title].nil?
+				options[:label_title] == "Image"
+			end
 			if img == []
-				url_image = "rails.png"
+				url_image = "crimagify/no_selected_image.jpg"
 			else
 				url_image = img.first.image_url(options[:ratio]).to_s rescue ""
 			end
 			if url_image == ""
-				url_image = "rails.png"
+				if ENV['DEFAULT_IMAGE'].nil?
+					url_image = "crimagify/no_selected_image.jpg"
+				else
+					url_image = ENV['DEFAULT_IMAGE'].to_s
+				end
 			end
-			render(:partial => "crimagify/crop_partials/fields_cropper", :locals => { id_image: options[:image_name], url_image: url_image, image_options: image_options, version_name: version_name })
+			render(:partial => "crimagify/crop_partials/fields_cropper", :locals => { id_image: options[:image_name], url_image: url_image, image_options: image_options, version_name: version_name, label_title: options[:label_title] })
 		end
 
 		def images_id(object)
@@ -28,9 +35,12 @@ module Crimagify
 			image_options[:class] = "#{image_options[:class]} img_start"
 			img = object.crimagify_images.where("image_name=?", options[:image_name])
 			version_name = options[:ratio]
+			if options[:label_title].nil?
+				options[:label_title] == "Image"
+			end
 			if img == []
 				if ENV['DEFAULT_IMAGE'].nil?
-					url_image = "crimagify/no_selected.png"
+					url_image = "crimagify/no_selected_image.jpg"
 				else
 					url_image = ENV['DEFAULT_IMAGE'].to_s
 				end						
@@ -39,13 +49,12 @@ module Crimagify
 			end
 			if url_image == ""
 				if ENV['DEFAULT_IMAGE'].nil?
-					url_image = "crimagify/no_selected.png"
+					url_image = "crimagify/no_selected.jpg"
 				else
 					url_image = ENV['DEFAULT_IMAGE'].to_s
 				end
 			end
-			puts "esto tiene la variable ENV_IMAGE #{ENV['DEFAULT_IMAGE']}"
-			render(:partial => "crimagify/crop_partials/nested_cropper", :locals => { id_image: options[:image_name], url_image: url_image, image_options: image_options, version_name: version_name })
+			render(:partial => "crimagify/crop_partials/nested_cropper", :locals => { id_image: options[:image_name], url_image: url_image, image_options: image_options, version_name: version_name, label_title: options[:label_title] })
 		end
 
 		def nested_images_id(object)

data/app/views/crimagify/crop_partials/_fields_cropper.html.erb

@@ -3,13 +3,13 @@
   url_image ||= ''
   image_options ||= {}
   version_name ||= {}
-
+  label_title ||= "Image"
 %>
-<fieldset>
+<div class="crimagify_item">
     <div id="<%= id_image %>" class="global_parent" name="<%= version_name %>">
       <%= hidden_field_tag "image_temporal_#{id_image}", {}, :class => "image_temporal", :value => "" %>
       <div class="number input optional numeric stringish refresh_image">
-        <%= label_tag :image %><br>
+        <label class="crimagify_label"><%= label_title %></label><br/>
         <div id="parent_image" class="parent_image" style="display:block;float:left"></div>
         <%= image_tag url_image, image_options %>
         <div class="clear"></div>
@@ -19,4 +19,4 @@
         <%= file_field_tag :image, :id => "uploader", :class => "uploader" %>
       </div>
     </div>
-</fieldset>
+</div>

data/app/views/crimagify/crop_partials/_nested_cropper.html.erb

@@ -3,12 +3,13 @@
   url_image ||= ''
   image_options ||= {}
   version_name ||= {}
+  label_title ||= "Image"
 %>
-<fieldset>
+<div class="crimagify_item">
   <div data-img="<%= id_image %>" class="global_parent <%= id_image %>" name="<%= version_name %>">
     <%= hidden_field_tag "image_temporal_#{id_image}", {}, :value => "", :name => "image_temporal_#{id_image}", :class => "image_temporal image_temporal_#{id_image}" %>
       <div class="number input optional numeric stringish refresh_image">
-        <%= label_tag :image %><br>
+        <label class="crimagify_label"><%= label_title %></label><br/>
         <div class="parent_image"></div>
         <%= image_tag url_image, image_options %>
         <div class="clear"></div>
@@ -18,4 +19,4 @@
         <%= file_field_tag :image, :id => "nested_uploader", :class => "nested_uploader" %>
       </div>
   </div>
-</fieldset>
+</div>

data/app/views/crimagify/cropper/params_cropper.js.erb

@@ -1,4 +1,3 @@
-console.dir($.parseJSON("<%=j @img.to_json.html_safe %>"));	
 <% if @img.has_key?(:parent_fieldset)  %>	
 	if ($("#<%=j @img[:parent_fieldset] %>").find(".<%=j @img[:parent_element_id] %>").find(".parent_image").length) {
 		var $fieldset = $("#<%=j @img[:parent_fieldset] %>");
@@ -31,11 +30,11 @@ console.dir($.parseJSON("<%=j @img.to_json.html_safe %>"));
 	}
 <% else %>
 	var $parent = $("#<%=j @img[:parent_element_id] %>");	
-	if ($parent.find("#parent_image").length) {
+	if ($parent.find(".parent_image").length) {
 		if ($parent.find(".image_profile").length) {
 			$parent.find(".image_profile").remove();
 			$parent.find(".parent_image").append("<%=j render :partial => 'crimagify/crop_partials/img_final', :object => @img, :locals => { :f => 'f' } %>");
-			$parent.find(".image_temporal_<%=j @img[:parent_element_id] %>").attr("value", "<%= @img[:path_image] %>");
+			$parent.find(".image_temporal").attr("value", "<%= @img[:path_image] %>");
 			$("#id_images").attr("value", array_names);
 			$parent.find("#<%=j @img[:parent_element_id] %>_crop_x").attr("value", "<%= @img[:crop_x] %>");
 			$parent.find("#<%=j @img[:parent_element_id] %>_crop_y").attr("value", "<%= @img[:crop_y] %>");
@@ -43,14 +42,14 @@ console.dir($.parseJSON("<%=j @img.to_json.html_safe %>"));
 			$parent.find("#<%=j @img[:parent_element_id] %>_crop_h").attr("value", "<%= @img[:crop_h] %>");
 		} else{
 			$parent.find(".img_start").hide("slow", function(){});	
-			$parent.find("#parent_image").append("<%=j render :partial => 'crimagify/crop_partials/img_final', :object => @img, :locals => { :f => 'f' } %>");
-			$parent.find(".image_temporal_<%=j @img[:parent_element_id] %>").attr("value", "<%= @img[:path_image] %>");
+			$parent.find(".parent_image").append("<%=j render :partial => 'crimagify/crop_partials/img_final', :object => @img, :locals => { :f => 'f' } %>");
+			$parent.find(".image_temporal").attr("value", "<%= @img[:path_image] %>");
 			$("#id_images").attr("value", array_names);
 			$parent.find("#parent_image").append("<input id='<%=j @img[:parent_element_id] %>_crop_x' name='<%=j @img[:parent_element_id] %>_crop_x' type='hidden' value='<%= @img[:crop_x] %>'>");
 			$parent.find("#parent_image").append("<input id='<%=j @img[:parent_element_id] %>_crop_y' name='<%=j @img[:parent_element_id] %>_crop_y' type='hidden' value='<%= @img[:crop_y] %>'>");
 			$parent.find("#parent_image").append("<input id='<%=j @img[:parent_element_id] %>_crop_w' name='<%=j @img[:parent_element_id] %>_crop_w' type='hidden' value='<%= @img[:crop_w] %>'>");
 			$parent.find("#parent_image").append("<input id='<%=j @img[:parent_element_id] %>_crop_h' name='<%=j @img[:parent_element_id] %>_crop_h' type='hidden' value='<%= @img[:crop_h] %>'>");
 		}
-		$parent.find("#uploader").val('');
+		$parent.find(".uploader").val('');
 	}
 <% end %>

data/lib/crimagify/engine.rb

@@ -11,7 +11,6 @@ module Crimagify
 
 		config.before_configuration do
 			config_setting_app = File.join(Rails.root, 'config', 'crimagify_settings.yml')
-			puts config_setting_app
 			YAML.load(File.open(config_setting_app)).each do |key, value|
 				ENV[key.to_s] = value.to_s
 			end if File.exists?(config_setting_app)

data/lib/crimagify/image_functions.rb

@@ -16,9 +16,6 @@ module Crimagify
 		    	path = "#{Rails.root}/app/assets/images/tmps_cropper/#{parent_type}/image_temporal/#{parent_id}/#{parent_fieldset}/#{image_name}"
 		    end
 
-		    puts "ruta creada para guardar"
-		    puts path
-
 		    if !File.exist?(path)
 		      FileUtils.mkdir_p(path)
 		    end
@@ -120,7 +117,6 @@ module Crimagify
 			else
 				if params[:id_images] != ""
 					id_array = params[:id_images].split(",")
-
 					id_array.map { |image_name|
 						path = params["image_temporal_#{image_name}"]
 						if !(path.to_s == "") && File.exist?(path.to_s)
@@ -128,22 +124,23 @@ module Crimagify
 							if !(image == [])
 								image.map { |img|  
 									img.update_attributes(:image => File.open(path.to_s),
-																				:crop_x => params["#{image_name}_crop_x"],
-																				:crop_y => params["#{image_name}_crop_y"],
-																				:crop_w => params["#{image_name}_crop_w"],
-																				:crop_h => params["#{image_name}_crop_h"])
+														  :crop_x => params["#{image_name}_crop_x"],
+														  :crop_y => params["#{image_name}_crop_y"],
+														  :crop_w => params["#{image_name}_crop_w"],
+														  :crop_h => params["#{image_name}_crop_h"])
 									img.crop_avatar_real
 								}
 							else
 								img = save_new_image(path,
-																		 params["#{image_name}_crop_x"],
-																		 params["#{image_name}_crop_y"],
-																		 params["#{image_name}_crop_w"],
-																		 params["#{image_name}_crop_h"],
-																		 object.class.name,
-																		 object.id,
-																		 image_name,
-																		 false)
+
+													 params["#{image_name}_crop_x"],
+													 params["#{image_name}_crop_y"],
+													 params["#{image_name}_crop_w"],
+													 params["#{image_name}_crop_h"],
+													 object.class.name,
+													 object.id,
+													 image_name,
+													 false)
 								img.save!
 								img.crop_avatar_real
 							end

data/lib/crimagify/version.rb

@@ -1,3 +1,3 @@
 module Crimagify
-  VERSION = "0.0.3.6"
+  VERSION = "0.0.3.8"
 end

data/lib/generators/crimagify/install/install_generator.rb

@@ -7,9 +7,9 @@ module Crimagify
 			def copy_config_file
 				copy_file "crimagify_versions.yml", "config/crimagify_versions.yml"
 				copy_file "crimagify_settings.yml", "config/crimagify_settings.yml"
-				copy_file "cropper.css.scss", "app/assets/stylesheets/cropper.css.scss"
-				copy_file "jquery.Jcrop.css", "app/assets/stylesheets/jquery.Jcrop.css"
-				copy_file "mixin.css.scss", "app/assets/stylesheets/mixin.css.scss"
+				copy_file "cropify_cropper.css.scss", "app/assets/stylesheets/cropify_cropper.css.scss"
+				copy_file "jquery.cropify.Jcrop.css", "app/assets/stylesheets/jquery.cropify.Jcrop.css"
+				copy_file "cropify_mixin.css.scss", "app/assets/stylesheets/cropify_mixin.css.scss"
 			end
 
 			def copy_migrations

data/lib/generators/crimagify/install/templates/{cropper.css.scss → cropify_cropper.css.scss}

@@ -1,4 +1,4 @@
-@import 'mixin.css.scss';
+@import 'cropify_mixin.css.scss';
 div#parent_image{
 	position:relative !important;
 	z-index:500 !important;
@@ -65,4 +65,5 @@ div#cropper_div{
 }
 .refresh_image{
 	position: relative !important;
-}
+}
+

data/lib/generators/crimagify/install/templates/cropify_mixin.css.scss

@@ -0,0 +1,107 @@
+@mixin opacity($n:1,$ie:100){
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity="$n")";
+	moz-opacity:$n;
+	filter: alpha(opacity=$ie);
+	opacity:$n;
+}
+@mixin textShadow($px:2px 1px 1px,$color:#000000){
+	text-shadow: $px $color;
+	filter: dropshadow(color=$color, offx=2, offy=2);
+}
+@mixin rounded($rounded:5px){
+	-webkit-border-radius:$rounded;
+	-khtml-border-radius:$rounded;
+	-moz-border-radius:$rounded;
+	-o-border-radius:$rounded;
+	border-radius:$rounded;
+}
+@mixin spriteImages($padding:10px,$position:-10px -10px,$color:transparent){
+	padding:$padding;
+	background:$color url('/assets/sprite.png') $position no-repeat;
+}
+
+@mixin sampleSprite($x){
+	background:transparent image-url('/assets/sprite.png') $x no-repeat;
+}
+
+/**/
+@mixin backgroundImage($imageName:no-logo,$format:png, $repeat:no-repeat,$color:transparent){
+	background:$color url(/assets/system/$imageName$format) $repeat !important;
+}
+/*store.scc.scss*/
+@mixin tableCell(){
+	display:table-cell;
+	vertical-align:middle;
+	text-align:center;
+}
+@mixin animation($position:all, $time:0.5s, $move:ease-in-out){
+  -webkit-transition: $position $time $move;
+  -moz-transition: $position $time $move;
+  -o-transition: $position $time $move;
+  -ms-transition: $position $time $move;
+  transition: $position $time $move;
+}
+@mixin transformAnimation($scale:1.2){
+	-webkit-transform: scale($scale);
+	-moz-transform: scale($scale);
+	-o-transform: scale($scale);
+	-ms-transform: scale($scale);
+	transform: scale($scale);
+}
+@mixin animationdelay($time:0.1s){
+	-webkit-transition-delay: $time;
+	-moz-transition-delay: $time;
+	-o-transition-delay: $time;
+	-ms-transition-delay: $time;
+	transition-delay: $time;
+
+}
+@mixin boxShadow($size:1px 1px 1px, $color:#333){
+	-webkit-box-shadow: $size $color;
+	-moz-box-shadow: $size $color;
+	box-shadow: $size $color;
+}
+@mixin rotate($rotate:-180deg){
+	-webkit-transform:rotate($rotate);
+	-moz-transform:rotate($rotate);
+	-o-transform:rotate($rotate);
+	-ms-transform:rotate($rotate);
+	transform:rotate($rotate);
+}
+@mixin boderRadius($rad){
+	-webkit-border-radius:$rad;
+	-moz-border-radius:$rad;
+	border-radius:$rad;
+}
+@mixin dropShadow($size:2px 2px 12px,$op:0.8){
+	filter: drop-shadow($size rgba(0,0,0,$op));
+	-webkit-filter: drop-shadow($size rgba(0,0,0,$op));
+	-moz-filter: drop-shadow($size rgba(0,0,0,$op));
+	-o-filter: drop-shadow($size rgba(0,0,0,$op));
+	ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,"$op")')";
+	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=135,Color='rgba(0,0,0,$op)');
+	//filter: url(#drop-shadow);
+}
+/*Degradiants*/
+
+@mixin blue_skye_to_blue_hard_vert(){
+	background: #3399ff; /* Old browsers */
+	background: -moz-linear-gradient(top,  #3399ff 0%, #2268ff 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3399ff), color-stop(100%,#2268ff)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  #3399ff 0%,#2268ff 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #3399ff 0%,#2268ff 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  #3399ff 0%,#2268ff 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  #3399ff 0%,#2268ff 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3399ff', endColorstr='#2268ff',GradientType=0 ); /* IE6-9 */
+}
+
+@mixin black_easy_to_black_dark(){
+	background: #828c95; /* Old browsers */
+	background: -moz-linear-gradient(top,  #828c95 0%, #28343b 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  #828c95 0%,#28343b 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #828c95 0%,#28343b 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  #828c95 0%,#28343b 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  #828c95 0%,#28343b 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#828c95', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
+}

data/lib/generators/crimagify/install/templates/{jquery.Jcrop.css → jquery.cropify.Jcrop.css}

@@ -15,7 +15,7 @@
 /* Selection Border */
 .jcrop-vline,
 .jcrop-hline {
-  background: #ffffff url("Jcrop.gif");
+  background: #ffffff url("crimagify/Jcrop.gif");
   font-size: 0;
   position: absolute;
 }

data/test/dummy/app/assets/stylesheets/application.css

@@ -9,6 +9,6 @@
  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
- *= require crimagify/application
+ * require crimagify/application
  *= require_tree .
  */

data/test/dummy/app/assets/stylesheets/cropify_cropper.css.scss

@@ -0,0 +1,69 @@
+@import 'cropify_mixin.css.scss';
+div#parent_image{
+	position:relative !important;
+	z-index:500 !important;
+}
+div#cropper_div{
+	position: absolute !important;
+	top: 0 !important;
+	left: 0 !important;
+	//display: none !important;
+	padding:0 0 85px 0 !important;
+	z-index:500 !important;
+	div.cropper_container{
+		position:relative !important;
+		div.image_cropper{
+			@include rounded(3px 3px 0 3px);
+			background:#FFF !important;
+			//@include boxShadow(0px 0px 6px,#222) !important;
+			z-index: 1000 !important;
+			@include dropShadow();
+			border:1px solid #777 !important;
+			padding:10px !important;
+			z-index:10 !important;
+			position:relative !important;
+		}
+		div.actions{
+			padding:8px 0 !important;
+			background:#FFF !important;
+			padding:10px !important;
+			margin-top:0 !important;
+			border:1px solid #777 !important;
+			border-top:none !important;
+			@include rounded(0 0 3px 3px);
+			//@include boxShadow(1px 4px 6px,#666) !important;
+			position:absolute !important;
+			right:-1px !important;
+			bottom:-57px !important;
+			z-index:15 !important;
+			a{
+				text-decoration:none !important;
+				font-size:12px !important;
+				font-weight:bold !important;
+				@include rounded(5px);
+				margin:0 10px 0 0  !important;
+				float:right !important;
+			}
+			a#crop_image{
+				color:#FFFFFF !important;
+				padding:7px 10px !important;
+				@include blue_skye_to_blue_hard_vert;
+				@include boxShadow(1px 1px 4px,#000);
+			}
+			a#cancel_crop{
+				color:#FFFFFF !important;
+				padding:7px 10px !important;
+				@include black_easy_to_black_dark;
+				@include boxShadow(1px 1px 4px,#000);
+				margin:0 !important;
+			}
+		}
+	}
+}
+.cropper_element{
+	position: relative !important;
+}
+.refresh_image{
+	position: relative !important;
+}
+