x4js 2.0.33 → 2.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "x4js",
-    "version": "2.0.33",
+    "version": "2.0.34",
     "type": "module",
     "main": "src/x4.ts",
     "module": "src/x4.ts",

package/src/components/dialog/dialog.module.scss

@@ -28,6 +28,7 @@
 	position: absolute !important;
 	background-color: white;
 	border: 1px solid var( --border-dark );
+	max-width: 99vw;
 	
 	&> .caption {
 		padding: 8px;

package/src/components/messages/messages.module.scss

@@ -92,38 +92,55 @@
 
 
 .x4progressionbox {
-	width: 640px;
-	height: 200px;
+	min-height: 200px;
+	min-width: 500px;
+
 	&> .x4form {
 		min-height: unset;
 	}
 
-	& > .caption,
-	& > #btnbar {
-		display: none;
-	}
-
 	& .x4form {
 		min-width: 400px;
+		gap: 8px;
+
+		&> .x4hbox {
+			flex-grow: 1;
+			align-items: stretch;
+			.right {
+				flex-grow: 1;
+				gap: 8px;
+				display: grid;
+    			grid-template-rows: auto auto 1fr;
+			}
+		}
+
 		.x4icon {
 			    height: 64px;
 				animation: rotating 3s linear infinite;
 				fill: var(--accent-background);
+				align-self: center;
 		}
 
-		.x4label,
-		.x4simpletext {
-			padding: 16px 16px 0 16px;
+		#title {
+			padding: 4px 16px;
 			line-height: 1.8em;
 		}
 
 		.x4progress {
-			margin-left: 16px;
+			margin: 0 16px;
 		}
 
 		#sub-text {
-			max-height: 140px;
-			overflow-y: auto;
+			flex-grow: 1;
+			max-height: 400px;
+			overflow: auto;
+			background-color: #f5f5f5;
+			padding: 4px 8px;
+			margin: 0 16px;
+
+			.x4simpletext {
+				white-space: nowrap;
+			}
 		}
 	}
 }

package/src/components/messages/messages.ts

@@ -240,12 +240,13 @@ export class PromptBox extends Dialog<DialogProps>
 @class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
 
-	#log: (string | UnsafeHtml)[];
+	#has_errors = false;
 
 	constructor( title: string ) {
 		super( { 
 			modal: true,
 			title: null,
+			sizable: true,
 			movable: true,
 			form: new Form( {
 				content: [
@@ -255,26 +256,48 @@ export class ProgressionBox  extends Dialog {
 							new VBox( { flex: 1, cls: "right", content: [
 								new SimpleText( { id: "title", text: title } ),
 								new Progress( { id:"prog", min: 0, max: 100, value: 0 } ),
-								new SimpleText( { id: "sub-text", text: "" } ),
+								new VBox( { id: "sub-text" } ),
 							]})
 						]
 					}),
 				]
 			}),
-			buttons: [ "ok.outline.default","cancel.outline" ]
+			buttons: [ "ok.outline.default" ]
 		});
 
-		this.#log = [];
+		this.query("#btnbar").show( false );
+
+		this.on("btnclick", ( ) => this.show( false ) );
+	}
+
+	addText( text: string | UnsafeHtml, perc: number ) {
+		this.query<Label>( "#sub-text").appendContent( new SimpleText( { text } ) );
+		this.query<Progress>( "#prog").setValue( perc );
+	}
+
+	addError( text: string | UnsafeHtml, perc: number ) {
+		this.query<Label>( "#sub-text").appendContent( new SimpleText( { cls:"error", text } ) );
+		this.query<Progress>( "#prog").setValue( perc );
+
+		this.#has_errors = true;
 	}
 
 	setText( text: string | UnsafeHtml, perc: number ) {
-		this.#log.push( text );
-		this.query<Label>( "#sub-text").setText( unsafeHtml(this.#log.join("<br/>")) );
+		this.query<Label>( "#sub-text").setContent( new SimpleText( { text } ) );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
-	clearText( ) {
-		this.#log = [];
-		this.query<Label>( "#sub-text").setText( '' );
+	clear( ) {
+		this.#has_errors = true;
+		this.query<Label>( "#sub-text").clearContent( );
+	}
+
+	done( ) {
+		if( this.#has_errors ) {
+			this.query("#btnbar").show( true );
+		}
+		else {
+			this.setTimeout( "close", 5000, ( ) => { this.show(false);} );
+		}
 	}
 }