Ide: fix error status bar

bin/style.css

@@ -97,57 +97,6 @@ body {
   color: red;
   border: 1px solid #C00;
 }
-.error-panel {
-  position: absolute;
-  width: 100%;
-  z-index: 999;
-  bottom: 0px;
-  left: 0px;
-  padding: 1px;
-}
-.error-panel .error-banner {
-  text-align: center;
-  z-index: 999;
-  padding: 1px;
-  width: 100%;
-  background: #ff5555;
-  color: #191A21;
-  border: 1px solid #ff5555;
-  display: inline-block;
-}
-.error-panel .error-banner button {
-  height: 100%;
-  background: #ff5555;
-  color: #191A21;
-  float: left;
-  margin-left: 5px;
-  border: none;
-  font-size: 9pt;
-}
-.error-panel .error-banner button i {
-  margin-right: 3px;
-}
-.error-panel .error-banner button:hover {
-  background: #FA6868;
-  color: white;
-}
-.error-panel .error-log {
-  display: flex;
-  flex-direction: column-reverse;
-  height: 150px;
-  width: 100%;
-  background-color: #111111;
-  overflow-y: scroll;
-}
-.error-panel .error-log.hidden {
-  display: none;
-}
-.error-panel .error-log p {
-  font-family: var(--default-font), serif;
-  margin: 0px;
-  padding-top: 5px;
-  padding-left: 5px;
-}
 :root {
   --default-font: 'Inter';
   --default-font-size: 10pt;
@@ -4161,6 +4110,7 @@ hide-popover hide-content {
   overflow: clip;
 }
 .hide-root > .status-bar {
+  overflow-x: hidden;
   padding-left: 4px;
   padding-right: 4px;
   height: 16px;
@@ -4170,10 +4120,41 @@ hide-popover hide-content {
   display: flex;
   font-family: var(--default-font);
 }
+.hide-root > .status-bar.error {
+  background-color: #ee6666;
+  color: black;
+}
 .hide-root > .status-bar .build {
   margin-left: auto;
+  flex-grow: 0;
+}
+.hide-root > .status-bar .error-suppressed {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 4px;
+  padding-right: 4px;
+  color: black;
+  border-radius: 3px;
+}
+.hide-root > .status-bar .error-suppressed button {
+  margin-right: 10px;
+  border: none;
+  background-color: #ee6666;
+}
+.hide-root > .status-bar .error-suppressed button .ico {
+  margin-right: 5px;
+}
+.hide-root > .status-bar .error-suppressed button:hover {
+  cursor: pointer;
+  background-color: #ff8a8a;
+  color: white;
 }
 .hide-root > .status-bar #status-icons {
+  flex-grow: 0;
   display: flex;
   align-items: center;
   gap: 4px;
@@ -4199,13 +4180,6 @@ hide-popover hide-content {
 .hide-root > .status-bar #status-icons button:hover {
   background-color: #ddd;
 }
-.hide-root > .status-bar #status-icons .error-suppressed {
-  padding-left: 4px;
-  padding-right: 4px;
-  background-color: hsl(359, 68%, 71%);
-  color: black;
-  border-radius: 3px;
-}
 /* Spline inspector */
 .spline-editor .points-inspector {
   width: 100%;

bin/style.less

@@ -113,67 +113,6 @@ body {
 	border : 1px solid #C00;
 }
 
-
-
-.error-panel {
-	position : absolute;
-	width: 100%;
-	z-index : 999;
-	bottom:0px;
-	left:0px;
-	padding : 1px;
-
-	.error-banner {
-		text-align: center;
-		z-index : 999;
-		padding : 1px;
-		width: 100%;
-		background: #ff5555;
-		color : #191A21;
-		border : 1px solid #ff5555;
-		display: inline-block;
-
-		button {
-			i {
-				margin-right: 3px;
-			}
-
-			height: 100%;
-			background: #ff5555;
-			color : #191A21;
-			float: left;
-			margin-left: 5px;
-			border: none;
-			font-size : 9pt;
-		}
-
-		button:hover {
-			background:#FA6868;
-			color:white;
-		}
-	}
-
-	.error-log {
-		&.hidden {
-			display: none;
-		}
-
-		p {
-			font-family : var(--default-font), serif;
-			margin: 0px;
-			padding-top: 5px;
-			padding-left: 5px;
-		}
-
-		display: flex;
-		flex-direction: column-reverse;
-		height: 150px;
-		width: 100%;
-		background-color: #111111;
-		overflow-y: scroll;
-	}
-}
-
 //:focus { outline: none; }
 
 :root {
@@ -4917,6 +4856,7 @@ hide-popover {
 	}
 
 	> .status-bar {
+		overflow-x: hidden;
 
 		padding-left: 4px;
 		padding-right: 4px;
@@ -4931,11 +4871,46 @@ hide-popover {
 		font-family: var(--default-font);
 
 
+		&.error {
+			background-color: #ee6666;
+			color: black;
+		}
+
 		.build {
 			margin-left: auto;
+			flex-grow: 0;
+		}
+
+		.error-suppressed {
+			button {
+				.ico {
+					margin-right: 5px;
+				}
+				margin-right: 10px;
+				border: none;
+				background-color: #ee6666;
+
+				&:hover {
+					cursor: pointer;
+					background-color: #ff8a8a;
+					color: white
+				}
+			}
+
+			flex-grow: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-left: auto;
+			margin-right: auto;
+			padding-left: 4px;
+			padding-right: 4px;
+			color: black;
+			border-radius: 3px;
 		}
 
 		#status-icons {
+			flex-grow: 0;
 			display: flex;
 			align-items: center;
 
@@ -4964,14 +4939,6 @@ hide-popover {
 					background-color: #ddd;
 				}
 			}
-
-			.error-suppressed {
-				padding-left: 4px;
-				padding-right: 4px;
-				background-color: hsl(359deg, 68%, 71%);
-				color: black;
-				border-radius: 3px;
-			}
 		}
 
 

hide/Ide.hx

@@ -619,32 +619,21 @@ class Ide extends hide.tools.IdeData {
 
 		if (!showErrors) {
 			if (errorWindow == null) {
-				errorWindow = new Element('
-					<span class="error-suppressed">
-						<button class="reload"><i class="icon ico ico-refresh"></i>Reload</button>
-						Errors are currently suppressed in the editor. Please save your work and reload.
-					</span>
-				');
+				statusBar.toggleClass("error");
 
-				addStatusIcon(errorWindow);
+				errorWindow = new Element('<div class="error-suppressed">
+					<button class="reload"><i class="icon ico ico-refresh"></i>Reload</button>
+					<span>Errors are currently suppressed in the editor. Please save your work and reload.</span>
+					</div>
+				');
 
-				var errorLog = errorWindow.find(".error-log");
+				errorWindow.insertAfter(statusIcons);
 
 				var btnSaveReload = errorWindow.find(".reload");
 				btnSaveReload.click(function(_) {
 					this.reload();
 				});
-
-				var btnShowErrors = errorWindow.find(".show-errors");
-				btnShowErrors.click(function(_) {
-					if (errorLog.hasClass("hidden"))
-						errorLog.removeClass("hidden");
-					else
-						errorLog.addClass("hidden");
-				});
 			}
-
-			errorWindow.find(".error-log").append(new Element('<p>${e}</p>'));
 		}
 
 		js.Browser.console.error(e);