Merge pull request #3511 from wowsims/rotation-tab-updates

Rotation tab updates

ui/core/components/individual_sim_ui/apl_actions.ts

@@ -245,13 +245,16 @@ function actionListFieldConfig(field: string): AplHelpers.APLPickerBuilderFieldC
 			setValue: (eventID: EventID, player: Player<any>, newValue: Array<APLAction>) => {
 				config.setValue(eventID, player, newValue.map(val => val || APLAction.create()));
 			},
-
 			itemLabel: 'Action',
 			newItem: APLAction.create,
 			copyItem: (oldValue: APLAction) => oldValue ? APLAction.clone(oldValue) : oldValue,
 			newItemPicker: (parent: HTMLElement, listPicker: ListPicker<Player<any>, APLAction>, index: number, config: ListItemPickerConfig<Player<any>, APLAction>) => new APLActionPicker(parent, player, config),
-			horizontalLayout: true,
 			allowedActions: ['create', 'delete', 'move'],
+			actions: {
+				create: {
+					useIcon: true,
+				}
+			}
 		}),
 	};
 }

ui/core/components/individual_sim_ui/apl_helpers.ts

@@ -227,7 +227,6 @@ export class APLUnitPicker extends UnitPicker<Player<any>> {
 	private readonly unitSet: UNIT_SET;
 
 	constructor(parent: HTMLElement, player: Player<any>, config: APLUnitPickerConfig) {
-		config.hideLabelWhenDefaultSelected = true;
 		const targetUI = !!unitSets[config.unitSet].targetUI;
 		super(parent, player, {
 			...config,
@@ -351,44 +350,37 @@ export class APLPickerBuilder<T> extends Input<Player<any>, T> {
 		super(parent, 'apl-picker-builder-root', modObject, config);
 		this.config = config;
 
-		if (config.fields.length > 0) {
-			const openSpan = document.createElement('span');
-			openSpan.textContent = '(';
-			this.rootElem.appendChild(openSpan);
-		}
-
 		this.fieldPickers = config.fields.map(fieldConfig => APLPickerBuilder.makeFieldPicker(this, fieldConfig));
 
-		if (config.fields.length > 0) {
-			const closeSpan = document.createElement('span');
-			closeSpan.textContent = ')';
-			this.rootElem.appendChild(closeSpan);
-		}
-
 		this.init();
 	}
 
 	private static makeFieldPicker<T, F extends keyof T>(builder: APLPickerBuilder<T>, fieldConfig: APLPickerBuilderFieldConfig<T, F>): APLPickerBuilderField<T, F> {
 		const field: F = fieldConfig.field
+		const picker = fieldConfig.factory(builder.rootElem, builder.modObject, {
+			label: fieldConfig.label,
+			labelTooltip: fieldConfig.labelTooltip,
+			changedEvent: (player: Player<any>) => player.rotationChangeEmitter,
+			getValue: () => {
+				const source = builder.getSourceValue();
+				if (!source[field]) {
+					source[field] = fieldConfig.newValue();
+				}
+				return source[field];
+			},
+			setValue: (eventID: EventID, player: Player<any>, newValue: any) => {
+				builder.getSourceValue()[field] = newValue;
+				player.rotationChangeEmitter.emit(eventID);
+			},
+		}, () => builder.getSourceValue())
+
+		if (field === 'vals') {
+			picker.rootElem.classList.add('apl-picker-builder-multi')
+		}
+
 		return {
 			...fieldConfig,
-			picker: fieldConfig.factory(builder.rootElem, builder.modObject, {
-				label: fieldConfig.label,
-				labelTooltip: fieldConfig.labelTooltip,
-				inline: true,
-				changedEvent: (player: Player<any>) => player.rotationChangeEmitter,
-				getValue: () => {
-					const source = builder.getSourceValue();
-					if (!source[field]) {
-						source[field] = fieldConfig.newValue();
-					}
-					return source[field];
-				},
-				setValue: (eventID: EventID, player: Player<any>, newValue: any) => {
-					builder.getSourceValue()[field] = newValue;
-					player.rotationChangeEmitter.emit(eventID);
-				},
-			}, () => builder.getSourceValue()),
+			picker: picker,
 		};
 	}
 

ui/core/components/individual_sim_ui/apl_values.ts

@@ -332,13 +332,16 @@ export function valueListFieldConfig(field: string): AplHelpers.APLPickerBuilder
 			setValue: (eventID: EventID, player: Player<any>, newValue: Array<APLValue | undefined>) => {
 				config.setValue(eventID, player, newValue.map(val => val || APLValue.create()));
 			},
-
 			itemLabel: 'Value',
 			newItem: APLValue.create,
 			copyItem: (oldValue: APLValue | undefined) => oldValue ? APLValue.clone(oldValue) : oldValue,
 			newItemPicker: (parent: HTMLElement, listPicker: ListPicker<Player<any>, APLValue | undefined>, index: number, config: ListItemPickerConfig<Player<any>, APLValue | undefined>) => new APLValuePicker(parent, player, config),
-			horizontalLayout: true,
 			allowedActions: ['create', 'delete'],
+			actions: {
+				create: {
+					useIcon: true,
+				},
+			},
 		}),
 	};
 }

ui/core/components/list_picker.ts

@@ -6,13 +6,22 @@ import { Input, InputConfig } from './input.js';
 
 export type ListItemAction = 'create' | 'delete' | 'move' | 'copy';
 
+export interface ListPickerActionsConfig {
+	create?: {
+		// Whether or not to use an icon for the create action button
+		// defaults to FALSE
+		useIcon?: boolean	
+	}
+}
+
 export interface ListPickerConfig<ModObject, ItemType> extends InputConfig<ModObject, Array<ItemType>> {
-	title?: string,
-	titleTooltip?: string,
 	itemLabel: string,
 	newItem: () => ItemType,
 	copyItem: (oldItem: ItemType) => ItemType,
 	newItemPicker: (parent: HTMLElement, listPicker: ListPicker<ModObject, ItemType>, index: number, config: ListItemPickerConfig<ModObject, ItemType>) => Input<ModObject, ItemType>,
+	actions?: ListPickerActionsConfig
+	title?: string,
+	titleTooltip?: string,
 	inlineMenuBar?: boolean,
 	hideUi?: boolean,
 	horizontalLayout?: boolean,
@@ -21,6 +30,14 @@ export interface ListPickerConfig<ModObject, ItemType> extends InputConfig<ModOb
 	allowedActions?: Array<ListItemAction>,
 }
 
+const DEFAULT_CONFIG = {
+	actions: {
+		create: {
+			useIcon: false,
+		}
+	}
+}
+
 export interface ListItemPickerConfig<ModObject, ItemType> extends InputConfig<ModObject, ItemType> {
 }
 
@@ -45,7 +62,7 @@ export class ListPicker<ModObject, ItemType> extends Input<ModObject, Array<Item
 
 	constructor(parent: HTMLElement, modObject: ModObject, config: ListPickerConfig<ModObject, ItemType>) {
 		super(parent, 'list-picker-root', modObject, config);
-		this.config = config;
+		this.config = {...DEFAULT_CONFIG, ...config};
 		this.itemPickerPairs = [];
 
 		this.rootElem.innerHTML = `
@@ -75,7 +92,7 @@ export class ListPicker<ModObject, ItemType> extends Input<ModObject, Array<Item
 		if (this.actionEnabled('create')) {
 			let newItemButton = null;
 			let newButtonTooltip: Tooltip | null = null;
-			if (this.config.horizontalLayout) {
+			if (this.config.actions?.create?.useIcon) {
 				newItemButton = ListPicker.makeActionElem('link-success', `New ${config.itemLabel}`, 'fa-plus')
 				newButtonTooltip = Tooltip.getOrCreateInstance(newItemButton);
 			} else {

ui/scss/core/components/_content_block.scss

@@ -1,10 +1,13 @@
 @use "sass:map";
 
 .content-block {
-  margin-bottom: 2 * map.get($spacers, 3);
   display: flex;
   flex-direction: column;
 
+  &:not(:last-child) {
+    margin-bottom: 2 * map.get($spacers, 3);
+  }
+
   .content-block-header {
     border-bottom: $border-default;
     margin-bottom: $block-spacer;

ui/scss/core/components/_icon_picker.scss

@@ -94,8 +94,22 @@
   }
 }
 
-.picker-group.icon-group {
-  &> :not(:last-child) {
-    margin-right: map.get($spacers, 1);
+.picker-group {
+  &.icon-group {
+    display: flex;
+    flex-wrap: wrap;
+
+    &> :not(:last-child) {
+      margin-right: map.get($spacers, 1);
+    }
+
+    &> * {
+      margin-bottom: $block-spacer;
+      flex: 0;
+
+      &:not(:last-child) {
+        margin-right: $block-spacer;
+      }
+    }
   }
 }

ui/scss/core/components/_list_picker.scss

@@ -4,11 +4,17 @@
 	flex-direction: column;
 	align-items: center;
 
+	&:not(:last-child) {
+		margin-bottom: 2 * map.get($spacers, 3);
+	}
+
 	.list-picker-title {
 		width: 100%;
-		padding-bottom: $block-spacer;
+		padding-bottom: map-get($spacers, 2);
 		border-bottom: $border-default;
 		margin-bottom: $block-spacer;
+		font-size: 1rem;
+		font-weight: bold;
 	}
 
 	.list-picker-items {
@@ -53,7 +59,7 @@
 				}
 
 				.list-picker-item-action {
-					margin-left: map.get($spacers, 3);
+					margin-left: map.get($spacers, 2);
 				}
 			}
 		}

ui/scss/core/components/individual_sim_ui/_apl_helpers.scss

@@ -1,4 +1,3 @@
-
 .apl-actionid-item-icon {
     display: inline-block;
     width: 1rem;
@@ -9,6 +8,5 @@
 
 .apl-picker-builder-root {
     flex-direction: row;
-    align-items: center;
     width: auto;
 }