Fix image component issue on render

src/asset_manager/config/config.js

@@ -7,11 +7,11 @@ define(function () {
 		// Style prefix
 		stylePrefix: 'am-',
 
-		// Url where uploads will be send
+		// Url where uploads will be send, set false to disable upload
 		upload: 'http://localhost/assets/upload',
 
 		// Text on upload input
 		uploadText: 'Drop files here or click to upload',
 
 	};
-});
+});

src/code_manager/model/CodeMirrorEditor.js

@@ -23,11 +23,12 @@ define(['backbone',
 			init: function(el)
 			{
 				this.editor	= CodeMirror.fromTextArea(el, {
-					dragDrop		: false,
-					lineNumbers		: this.get('lineNumbers'),
-					readOnly		: this.get('readOnly'),
-				    mode			: this.get('codeName'),
-				    theme			: this.get('theme'),
+					dragDrop: false,
+          lineWrapping: true,
+					lineNumbers: this.get('lineNumbers'),
+					readOnly: this.get('readOnly'),
+				  mode: this.get('codeName'),
+				  theme: this.get('theme'),
 				});
 
 				return this;
@@ -47,4 +48,4 @@ define(['backbone',
 			},
 
         });
-	});
+	});

src/dom_components/view/ComponentImageView.js

@@ -58,8 +58,9 @@ define(['backbone', './ComponentView'],
 			this.updateAttributes();
 			this.updateClasses();
 
+			var actCls = this.$el.attr('class');
 			if(!this.model.get('src'))
-				this.$el.attr('class', this.classEmpty);
+				this.$el.attr('class', (actCls + ' ' + this.classEmpty).trim());
 
 			// Avoid strange behaviours while try to drag
 			this.$el.attr('onmousedown', 'return false');

src/editor/config/config.js

@@ -170,7 +170,11 @@ define(function () {
 					id: 'image',
 	        label: 'Image',
 	        attributes: {class:'gjs-fonts gjs-f-image'},
-	        content: { type:'image',  activeOnRender: 1},
+	        content: {
+						style: {color: 'black'},
+						type:'image',
+						activeOnRender: 1
+					},
 	      },{
 					id: 'quo',
 	        label: 'Quote',

styles/css/main.css

@@ -3155,7 +3155,7 @@ ol.example li.placeholder:before {
   box-sizing: border-box; }
 
 .gjs-field-colorp {
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-left: 1px solid rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
   height: 100%;
   padding: 2px;
@@ -3779,6 +3779,7 @@ ol.example li.placeholder:before {
 
 .gjs-mdl-dialog {
   text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
+  animation: gjs-slide-down 0.215s;
   margin: 30px auto 0;
   max-width: 850px;
   width: 90%;
@@ -4053,10 +4054,18 @@ ol.example li.placeholder:before {
 .gjs-hidden {
   display: none; }
 
-@keyframes gjs--slide-down {
+@keyframes gjs-slide-down {
   0% {
-    margin-top: -3rem;
+    transform: translate(0, -3rem);
     opacity: 0; }
   100% {
-    margin-top: 0;
+    transform: translate(0, 0);
     opacity: 1; } }
+
+@keyframes gjs-slide-up {
+  0% {
+    transform: translate(0, 0);
+    opacity: 1; }
+  100% {
+    transform: translate(0, -3rem);
+    opacity: 0; } }

styles/scss/_gjs_inputs.scss

@@ -86,7 +86,7 @@ $colorpSize: 22px;
 }
 
 .#{$app-prefix}field-colorp {
-  border-left: 1px solid $mainDklColor;
+  border-left: 1px solid $mainDkColor;
   box-sizing: border-box;
   height: 100%;
   padding: 2px;

styles/scss/main.scss

@@ -1195,6 +1195,7 @@ $paddElClm: 5px 6px;
   	@extend .#{$app-prefix}bg-main;
     @extend .#{$app-prefix}color-main;
   	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
+    animation: #{$app-prefix}slide-down 0.215s;
   	margin: 30px auto 0;
   	max-width: 850px;
   	width: 90%;
@@ -1502,15 +1503,28 @@ $uploadPadding:	150px 10px;
 }
 
 
-.#{$app-prefix}hidden{ display: none; }
+.#{$app-prefix}hidden {
+  display: none;
+}
 
-@keyframes #{$app-prefix}-slide-down {
+@keyframes #{$app-prefix}slide-down {
   0% {
-      margin-top: -3rem;
+      transform: translate(0, -3rem);
       opacity: 0;
   }
   100% {
-      margin-top: 0;
+      transform: translate(0, 0);
       opacity: 1;
   }
 }
+
+@keyframes #{$app-prefix}slide-up {
+  0% {
+    transform: translate(0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, -3rem);
+    opacity: 0;
+  }
+}