[ide] New Info/Error Quick Messages

bin/style.css

@@ -11,27 +11,61 @@ body {
   background-color: black;
   user-select: none;
 }
-.quickMessage {
+#message-container {
+  pointer-events: none;
+  z-index: 9999;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   display: flex;
-  position: absolute;
-  z-index: 999;
-  bottom: 50px;
-  left: 800px;
-  border: 1px solid #686868;
+  flex-direction: column;
+  justify-content: end;
+  align-content: center;
+  align-items: center;
+  padding-bottom: 8px;
+}
+#message-container .message {
+  transition: all 1s;
+  margin-top: 0px;
+  display: flex;
+  overflow: hidden;
+  outline: 1px solid;
+  outline-color: #68686800;
   border-radius: 5px;
+  flex-shrink: 1;
+  max-height: 0px;
 }
-.quickMessage .icon {
-  border: 0px solid #686868;
+#message-container .message .icon {
+  outline: 0px solid #686868;
   border-radius: 4px 0px 0px 4px;
   padding: 5px 5px 3px 5px;
   background: #666666;
 }
-.quickMessage .text {
-  border: 0px solid #686868;
+#message-container .message .text {
+  outline: 0px solid #686868;
   border-radius: 0px 4px 4px 0px;
   background: #222222;
   padding: 3px 10px 3px 3px;
 }
+#message-container .message.show {
+  outline-color: #686868;
+  margin-top: 4px;
+  max-height: 26px;
+  transition: all 1s;
+}
+#message-container .message.error {
+  background-color: #39221d;
+}
+#message-container .message.error .text,
+#message-container .message.error .icon {
+  outline-color: #b64f37;
+  color: #fefefe;
+}
+#message-container .message.error .icon {
+  background: #b64f37;
+}
 .globalErrorMessage {
   position: absolute;
   z-index: 999;

bin/style.less

@@ -15,27 +15,65 @@ body {
 	user-select:none;
 }
 
-.quickMessage {
+#message-container {
+	pointer-events: none;
+	z-index: 9999;
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+
 	display: flex;
-	position : absolute;
-	z-index : 999;
-	bottom:50px;
-	left:800px;
-	border : 1px solid #686868;
-	border-radius : 5px;
-
-	.icon {
-		border : 0px solid #686868;
-		border-radius : 4px 0px 0px 4px;
-		padding: 5px 5px 3px 5px;
-		background: #666666;
-	}
-
-	.text {
-		border : 0px solid #686868;
-		border-radius : 0px 4px 4px 0px;
-		background: #222222;
-		padding: 3px 10px 3px 3px;
+	flex-direction: column;
+	justify-content: end;
+	align-content: center;
+	align-items: center;
+	padding-bottom: 8px;
+
+	.message {
+		transition: all 1.0s;
+		margin-top: 0px;
+		display: flex;
+		overflow: hidden;
+		outline : 1px solid;
+		outline-color: #68686800;
+		border-radius : 5px;
+		flex-shrink: 1;
+
+		max-height: 0px;
+
+		.icon {
+			outline : 0px solid #686868;
+			border-radius : 4px 0px 0px 4px;
+			padding: 5px 5px 3px 5px;
+			background: #666666;
+		}
+
+		.text {
+			outline : 0px solid #686868;
+			border-radius : 0px 4px 4px 0px;
+			background: #222222;
+			padding: 3px 10px 3px 3px;
+		}
+
+		&.show {
+			outline-color: #686868;
+			margin-top: 4px;
+			max-height: 26px;
+			transition: all 1.0s;
+		}
+
+		&.error {
+			background-color: #39221d;
+			.text, .icon {
+				outline-color: #b64f37;
+				color: #fefefe;
+			}
+			.icon {
+				background: #b64f37;
+			}
+		}
 	}
 }
 

hide/Ide.hx

@@ -588,10 +588,16 @@ class Ide extends hide.tools.IdeData {
 		js.Browser.console.error(e);
 	}
 
-	public function quickError( e : Dynamic ) {
-		var e = new Element('<div class="globalErrorMessage">${StringTools.htmlEscape(Std.string(e))}</div>');
-		e.appendTo(window.window.document.body);
-		haxe.Timer.delay(() -> e.remove(), 5000);
+	public function quickError( msg : Dynamic, timeoutSeconds : Float = 5.0 ) {
+		var e = new Element('
+		<div class="message error">
+			<div class="icon ico ico-warning"></div>
+			<div class="text">${StringTools.htmlEscape(Std.string(msg))}</div>
+		</div>');
+
+		js.Browser.console.error(msg);
+
+		globalMessage(e, timeoutSeconds);
 	}
 
 	override function setProject( dir : String ) {
@@ -1268,17 +1274,42 @@ class Ide extends hide.tools.IdeData {
 			target.addChild(config, index);
 	}
 
-	public function quickMessage( text : String ) {
+	public function globalMessage(element: Element, timeoutSeconds : Float = 5.0) {
+		var body = new Element('body');
+		var messages = body.find("#message-container");
+		if (messages.length == 0) {
+			messages = new Element('<div id="message-container"></div>');
+			body.append(messages);
+		}
+
+		messages.append(element);
+		// envie de prendre le raccourci vers le rez de chaussée la
+
+		haxe.Timer.delay(() -> {
+			element.addClass("show");
+		}, 10);
+
+		if (timeoutSeconds > 0.0) {
+			haxe.Timer.delay(() -> {
+				element.get(0).ontransitionend = function(_){
+					element.remove();
+				};
+				element.removeClass("show");
+
+			}, Std.int(timeoutSeconds * 1000.0));
+		}
+	}
+
+	public function quickMessage( text : String, timeoutSeconds : Float = 5.0 ) {
 		var e = new Element('
-		<div class="quickMessage">
+		<div class="message">
 			<div class="icon ico ico-info-circle"></div>
 			<div class="text">${text}</div>
 		</div>');
 
-		e.appendTo(window.window.document.body);
-		e.css({'left':'${(this.window.width / 2.0) - e.width() / 2}px'});
+		js.Browser.console.log(text);
 
-		haxe.Timer.delay(() -> e.remove(), 5000);
+		globalMessage(e, timeoutSeconds);
 	}
 
 	public function message( text : String ) {