x4js 2.3.23 → 2.3.24

package/aicontext.md

@@ -285,6 +285,9 @@ static instance<P extends Application>(): P
 setEnv(name: string, value: any): void
 getEnv(name: string, def_value?: any): any
 static fireGlobal(msg: string, params?: any): void
+static setTheme(name: string): void         // the class x4theme-<name> on <html>: "" the light theme (default, no class),
+                                            // "dark" the dark theme of x4, another name a theme of the application
+static getTheme(): string                   // "" for the light theme, "dark", or the name given to setTheme
 focusNext(next: boolean): boolean
 addShortcut(keys: string | string[], callback: (ev: KeyboardEvent) => void, options?: ShortcutOptions): void   // see Shortcuts
 setupSocketMessaging(path?: string, looseCallback?: () => void): void
@@ -1510,6 +1513,24 @@ isLanguage(name: string): boolean
 
 ---
 
+## Theme (`themes.scss`)
+
+```css
+--color-primary-a0 … --color-primary-a100     /* the scale: a0 the background, a100 the text, the accent between */
+/* the globals the components use: --background-primary / -secondary / -ternary / -hover / -active / -input,
+   --text-primary / -secondary / -ternary, --border / -light / -hover / -focus, --accent-background / -hover /
+   -focus / -active / -light, --accent-color (the text on the accent), --disabled-*, --icon-color / -active,
+   --alert-*, --warning-*, --success-* */
+```
+// The greys are mixes of a0 and a100: a theme that reverses the scale gets them light on dark.
+// Each component reads its own variables (the @cssvar of its class), which point to these globals:
+//   a theme redefines the globals, or one variable of a component.
+// Themes: Application.setTheme(name) puts the class x4theme-<name> on <html>. "" is the light theme (by default),
+//   "dark" the dark theme of x4 (the colours of VS Code Dark Modern). An application adds its own theme in its css,
+//   html.x4theme-pink { --color-primary-a0: ...; ... }, then Application.setTheme("pink").
+
+---
+
 ## Utilities (`core_tools`)
 
 ```ts

package/package.json

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

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

@@ -17,8 +17,8 @@
 @use "../shared";
 
 :root {
-	--color-dialog-caption: var( --color-primary-a80 );
-	--color-dialog-caption-text: var( --color-primary-a0 );
+	--color-dialog-caption: var( --accent-background-active );
+	--color-dialog-caption-text: var( --accent-color );
 	--color-dialog-background: var( --background-primary );
 }
 

package/src/components/dockingview/dockingview.module.scss

@@ -221,7 +221,6 @@
 		width: 16px;
 		height: 16px;
 		line-height: 16px;
-		border-radius: 3px;
 		text-align: center;
 		font-weight: 400;
 		cursor: pointer;
@@ -269,7 +268,6 @@
 
 		background: var( --dock-float-background );
 		border: 1px solid var( --dock-line );
-		border-radius: 4px;
 		box-shadow: var( --dock-float-shadow );
 	}
 
@@ -282,7 +280,6 @@
 
 		background: var( --dock-preview-background );
 		border: 1px solid var( --dock-accent );
-		border-radius: 3px;
 	}
 
 	// It holds the pointer during a drag: its cursor is the one that shows.

package/src/components/keyboard/keyboard.ts

@@ -284,7 +284,10 @@ export class Keyboard extends HBox<KeyboardProps>
 	keyboard: Box;
 	visible: boolean;
 	input: HTMLInputElement;
-		
+
+	// the pointerdown handled last (see handleKeyEvent)
+	private handled: UIEvent = null;
+
     constructor( props: KeyboardProps )  {
         super( { ...props, id: 'v-keyboard' } );
 
@@ -355,6 +358,13 @@ export class Keyboard extends HBox<KeyboardProps>
 	 */
 
     private handleKeyEvent( e: UIEvent ) {
+		// the key backspace listens to pointerdown too (its autorepeat): this handler is
+		// called for its node and for the keyboard, the same event twice; one key only
+		if( e===this.handled ) {
+			return;
+		}
+		this.handled = e;
+
         let target = e.target as HTMLElement;
         let key;
 

package/src/components/label/label.module.scss

@@ -30,8 +30,8 @@
 	background-color: var( --label-background );
 	gap: 0.2em;
 
-	&.al-right
-	&.right  {
+	&.al-right,
+	&.right {
 		text-align: right;
 		justify-content: end;
 	}

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

@@ -126,21 +126,22 @@
 			line-height: 1.8em;
 		}
 
+		// on the right, the bar and the lines end where the button OK does: the bar of
+		// buttons has a padding of 20px and the button a margin of 2px, the form 16px
 		.x4progress {
-			margin: 0 16px;
+			margin: 0 6px 0 16px;
 		}
 
+		// the lines: a textarea read only, 10 lines high at least, a line is not wrapped
 		#sub-text {
 			flex-grow: 1;
+			min-height: calc( 10lh + 10px );	// its padding and its border too
 			max-height: 400px;
 			overflow: auto;
+			white-space: pre;
 			background-color: var( --msgbox-log-background );
 			padding: 4px 8px;
-			margin: 0 16px;
-
-			.x4simpletext {
-				white-space: nowrap;
-			}
+			margin: 0 6px 0 16px;
 		}
 	}
 }

package/src/components/messages/messages.ts

@@ -11,6 +11,8 @@ import { Dialog, DialogProps } from "../dialog/dialog"
 import { Form } from '../form/form';
 import { BtnGroupItem } from '../btngroup/btngroup';
 import { Input } from '../input/input';
+import { SimpleTextArea } from '../textarea/textarea';
+import { Button } from '../button/button';
 import { Component } from '../../core/component';
 import { Progress } from '../components.js';
 
@@ -275,6 +277,13 @@ export class PromptBox extends Dialog<DialogProps>
 
 // :: PROGRESS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
+/**
+ * a modal box that follows a long task: a title, a bar, and the lines of what is done
+ * in a textarea read only (they are text: a markup is shown as it is written).
+ * done( ) shows its button OK: after an error it waits for it, else it closes the box
+ * after 5s, the seconds left in the button.
+ */
+
 @class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
 
@@ -294,7 +303,7 @@ 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 VBox( { id: "sub-text" } ),
+								new SimpleTextArea( { id: "sub-text", readonly: true, trim: false } ),
 							]})
 						]
 					}),
@@ -305,37 +314,80 @@ export class ProgressionBox  extends Dialog {
 
 		this.query("#btnbar").show( false );
 
-		this.on("btnclick", ( ) => this.show( false ) );
+		// OK: closed at once, the countdown stopped
+		this.on("btnclick", ( ) => {
+			this.clearInterval( "close" );
+			this.show( false );
+		} );
 	}
 
+	/** a line at the end */
+
 	addText( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").appendContent( new SimpleText( { text } ) );
+		this._addLine( text );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
+	/** a line at the end: done( ) then waits for the button OK */
+
 	addError( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").appendContent( new SimpleText( { cls:"error", text } ) );
+		this._addLine( text );
 		this.query<Progress>( "#prog").setValue( perc );
 
 		this.#has_errors = true;
 	}
 
+	/** the text in place of all the lines */
+
 	setText( text: string | UnsafeHtml, perc: number ) {
-		this.query<Label>( "#sub-text").setContent( new SimpleText( { text } ) );
+		this.query<SimpleTextArea>( "#sub-text" ).setText( text.toString( ) );
 		this.query<Progress>( "#prog").setValue( perc );
 	}
 
+	/** as at the start: no line, no error, no button OK */
+
 	clear( ) {
-		this.#has_errors = true;
-		this.query<Label>( "#sub-text").clearContent( );
+		this.#has_errors = false;
+		this.clearInterval( "close" );
+		this.query( "#btnbar" ).show( false );
+		this.query<SimpleTextArea>( "#sub-text" ).setText( "" );
+	}
+
+	// the line after the others, the last one shown
+	private _addLine( text: string | UnsafeHtml ) {
+		const log = this.query<SimpleTextArea>( "#sub-text" );
+		const lines = log.getText( );
+
+		log.setText( lines ? lines + "\n" + text : text.toString( ) );
+		log.scrollToBottom( );
 	}
 
+	/**
+	 * the task is over: the button OK is shown. After an error it waits for a click;
+	 * without one it counts the seconds left, "OK (5s)", and closes the box at 0
+	 */
+
 	done( ) {
+		const ok = this.query<Button>( "#ok" );
+		this.query( "#btnbar" ).show( true );
+
 		if( this.#has_errors ) {
-			this.query("#btnbar").show( true );
-		}
-		else {
-			this.setTimeout( "close", 5000, ( ) => { this.show(false);} );
+			ok.setText( _tr.global.ok );
+			return;
 		}
+
+		let left = 5;
+		ok.setText( `${_tr.global.ok} (${left}s)` );
+
+		this.setInterval( "close", 1000, ( ) => {
+			left--;
+			if( left>0 ) {
+				ok.setText( `${_tr.global.ok} (${left}s)` );
+			}
+			else {
+				this.clearInterval( "close" );
+				this.show( false );
+			}
+		} );
 	}
 }

package/src/components/settingsview/settingsview.module.scss

@@ -36,7 +36,6 @@
 			margin: 0;
 			padding: 6px 10px;
 			border: 1px solid var( --border );
-			border-radius: 4px;
 
 			&:focus {
 				border-color: var( --settingsview-marker );
@@ -100,7 +99,6 @@
 		max-width: 900px;
 		padding: 0 8px 10px;
 		border: 1px solid var( --border );
-		border-radius: 8px;
 		background: var( --settingsview-section-background );
 		overflow: hidden;
 		scroll-margin-top: 20px;	// brought to the top: below the padding of the view
@@ -144,7 +142,6 @@
 		gap: 4px;
 		padding: 10px 8px 12px;
 		border-left: 2px solid transparent;
-		border-radius: 4px;
 
 		&:hover {
 			background: var( --settingsview-hover-background );

package/src/components/themes.scss

@@ -100,4 +100,58 @@ $color--interval: 8.4%;
 	--success-background: var(--color-success-a50);
 	--success-background-active: var(--color-success-a60);
 	--success-color: #ffffff;
+}
+
+// :: dark theme :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+// Application.setTheme( "dark" ): the class x4theme-dark on <html>, like the theme Dark
+// Modern of VS Code. Its colours are taken in the sources of VS Code:
+// extensions/theme-defaults/themes/dark_modern.json, and for the lists the defaults of
+// src/vs/platform/theme/common/colors/listColors.ts; the values marked "chosen" are not
+// in VS Code. A theme of an application is written the same way, under html.x4theme-<name>.
+
+html.x4theme-dark {
+	// the scale: a0 the background, a100 the text, the surfaces between them, then the blues
+	--color-primary-a0: #1f1f1f;		// editor.background
+	--color-primary-a5: #252526;		// chosen
+	--color-primary-a10: #2a2d2e;		// list.hoverBackground
+	--color-primary-a20: #37373d;		// list.inactiveSelectionBackground
+	--color-primary-a30: #3c3c3c;		// input.border
+	--color-primary-a40: #04395e;		// list.activeSelectionBackground
+	--color-primary-a50: #0078d4;		// button.background, focusBorder
+	--color-primary-a55: #026ec1;		// button.hoverBackground
+	--color-primary-a60: #0078d4;
+	--color-primary-a70: #026ec1;
+	--color-primary-a80: #04395e;
+	--color-primary-a90: #cccccc;
+	--color-primary-a100: #cccccc;		// foreground
+
+	// what the scale does not give
+	--background-ternary: #181818;		// sideBar.background
+	--background-hover: #2b2b2b;		// button.secondaryHoverBackground
+	--background-active: #37373d;		// list.inactiveSelectionBackground
+	--background-input: #313131;		// input.background
+
+	--text-secondary: #9d9d9d;			// descriptionForeground
+	--text-ternary: #bbbbbb;			// chosen: between the description and the text
+
+	--border: #3c3c3c;					// input.border
+	--border-light: #2b2b2b;			// panel.border
+	--border-hover: #616161;			// chosen (badge.background)
+
+	--disabled-background: #313131;		// chosen
+	--disabled-color: #6e6e6e;			// chosen
+	--disabled-color-dark: #6e6e6e;		// chosen
+	--disabled-color-light: #4f4f4f;	// chosen
+
+	--accent-color: #ffffff;			// button.foreground: the text on the accent
+	--accent-color-hover: #ffffff;
+	--accent-color-focus: #ffffff;
+	--accent-color-active: #ffffff;
+
+	// the title bar of a Dialog: the one of the window of VS Code
+	--color-dialog-caption: #181818;			// titleBar.activeBackground
+	--color-dialog-caption-text: #cccccc;		// titleBar.activeForeground
+	--color-dialog-background: #202020;			// editorWidget.background
+
+	color-scheme: dark;		// the native parts: select, scroll bars, number spinners
 }

package/src/components/tooltips/tooltips.scss

@@ -18,9 +18,9 @@
 
 :root {
 	--tooltip-caption-background: var( --color-primary-a70 );
-	--tooltip-caption-color: var( --color-primary-a0 );
+	--tooltip-caption-color: var( --accent-color );
 
-	--tooltip-icon-background: var( --color-primary-a0 );
+	--tooltip-icon-background: var( --accent-color );
 	--tooltip-icon-color: var( --color-primary-a70 );
 
 	--tooltip-background: var( --color-primary-a10 );	//white;

package/src/core/core_application.ts

@@ -42,6 +42,9 @@ export interface ApplicationEvents extends EventMap {
 // singleton
 let main_app: Application = null;
 
+// the class of a theme on <html>: x4theme-<name> (see Application.setTheme)
+const THEME_PREFIX = "x4theme-";
+
 /**
  * Provides information about the user's device and browser capabilities.
  */
@@ -201,6 +204,50 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		Application.instance().fire( "global", { msg, params } );
 	}
 
+	/**
+	 * Selects the theme of the page: the class `x4theme-<name>` on `<html>`, in place
+	 * of the one of the theme before.
+	 * - `""`: the light theme of x4, the one by default: no class.
+	 * - `"dark"`: the dark theme of x4, like the theme Dark Modern of VS Code
+	 *   (`html.x4theme-dark` in themes.scss).
+	 * - any other name: a theme of the application, defined in its own css under
+	 *   `html.x4theme-<name>`, with the variables of themes.scss it changes.
+	 * @param name - the name of the theme; "" for the light theme.
+	 * @example
+	 * Application.setTheme( "dark" );		// the dark theme of x4
+	 * Application.setTheme( "pink" );		// html.x4theme-pink { --color-primary-a0: ...; } in the css of the application
+	 * Application.setTheme( "" );			// back to the light theme
+	 */
+
+	static setTheme( name: string ) {
+		const classes = document.documentElement.classList;
+
+		const current = Application.getTheme( );
+		if( current ) {
+			classes.remove( THEME_PREFIX + current );
+		}
+
+		if( name ) {
+			classes.add( THEME_PREFIX + name );
+		}
+	}
+
+	/**
+	 * The name of the theme of the page, as setTheme got it: `""` for the light theme
+	 * of x4, `"dark"` for its dark theme, or the name of a theme of the application.
+	 */
+
+	static getTheme( ): string {
+		const classes = document.documentElement.classList;
+		for( let i = 0; i < classes.length; i++ ) {
+			if( classes[i].startsWith( THEME_PREFIX ) ) {
+				return classes[i].replace( THEME_PREFIX, "" );
+			}
+		}
+
+		return "";
+	}
+
 	/**
 	 * 
 	 */