Merge pull request #41 from wowsims/close-buttons

Add back close buttons

ui/core/components/base_modal.ts → ui/core/components/base_modal.tsx

@@ -1,10 +1,17 @@
 import { Modal } from 'bootstrap';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { element, ref } from 'tsx-vanilla';
 
 import { Component } from './component';
 
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
 type BaseModalConfig = {
+	closeButton?: {
+		// When true, the button will be rendered in a fixed position on the screen.
+		// Primarily used for the raid sim's embedded player editors
+		fixed?: boolean;
+	};
 	// Whether or not to add a modal-footer element
 	footer?: boolean;
 	// Whether or not to add a modal-header element
@@ -39,47 +46,42 @@ export class BaseModal extends Component {
 		super(parent, 'modal');
 		this.modalConfig = { ...DEFAULT_CONFIG, ...config };
 
+		const dialogRef = ref<HTMLDivElement>();
+		const headerRef = ref<HTMLDivElement>();
+		const bodyRef = ref<HTMLDivElement>();
+		const footerRef = ref<HTMLDivElement>();
+
 		const modalSizeKlass = this.modalConfig.size && this.modalConfig.size != 'md' ? `modal-${this.modalConfig.size}` : '';
 
 		this.rootElem.classList.add('fade');
-		this.rootElem.innerHTML = `
-			<div class="modal-dialog ${cssClass} ${modalSizeKlass}">
-				<div class="modal-content"></div>
-			</div>
-		`;
-
-		this.dialog = this.rootElem.querySelector('.modal-dialog') as HTMLElement;
-
-		if (this.modalConfig.scrollContents) {
-			this.dialog.classList.add('modal-overflow-scroll');
-		}
-
-		const container = this.rootElem.querySelector('.modal-content') as HTMLElement;
-
-		if (this.modalConfig.header) {
-			this.header = document.createElement('div');
-			this.header.classList.add('modal-header');
-			container.appendChild(this.header);
-
-			if (this.modalConfig.title) {
-				this.header.insertAdjacentHTML('afterbegin', `<h5 class="modal-title">${this.modalConfig.title}</h5>`);
-			}
-		}
-
-		this.body = document.createElement('div');
-		this.body.classList.add('modal-body');
-		container.appendChild(this.body);
-
-		if (this.modalConfig.footer) {
-			this.footer = document.createElement('div');
-			this.footer.classList.add('modal-footer');
-			container.appendChild(this.footer);
-		}
+		this.rootElem.appendChild(
+			<div className={`modal-dialog ${cssClass} ${modalSizeKlass} ${this.modalConfig.scrollContents ? 'modal-overflow-scroll' : ''}`} ref={dialogRef}>
+				<div className="modal-content">
+					<div className={`modal-header ${this.modalConfig.header ? '' : 'p-0 border-0'}`} ref={headerRef}>
+						{this.modalConfig.title && <h5 className="modal-title">${this.modalConfig.title}</h5>}
+						<button
+							type="button"
+							className={`btn-close ${this.modalConfig.closeButton?.fixed ? 'position-fixed' : ''}`}
+							onclick={() => this.close()}
+							attributes={{ 'aria-label': 'Close' }}>
+							<i className="fas fa-times fa-2xl"></i>
+						</button>
+					</div>
+					<div className="modal-body" ref={bodyRef} />
+					{this.modalConfig.footer && <div className="modal-footer" />}
+				</div>
+			</div>,
+		);
+
+		this.dialog = dialogRef.value!;
+		this.header = headerRef.value!;
+		this.body = bodyRef.value!;
+		this.footer = footerRef.value!;
 
 		this.modal = new Modal(this.rootElem, { keyboard: true });
 		this.open();
 
-		this.rootElem.addEventListener('hidden.bs.modal', event => {
+		this.rootElem.addEventListener('hidden.bs.modal', _ => {
 			this.rootElem.remove();
 			this.dispose();
 		});

ui/core/components/encounter_picker.ts

@@ -192,7 +192,7 @@ class AdvancedEncounterModal extends BaseModal {
 
 		new EnumPicker<Encounter>(this.header as HTMLElement, this.encounter, {
 			label: 'Encounter',
-			extraCssClasses: ['encounter-picker', 'mb-0', 'pe-2'],
+			extraCssClasses: ['encounter-picker', 'mb-0', 'pe-2', 'order-first'],
 			values: [{ name: 'Custom', value: -1 }].concat(
 				presetEncounters.map((pe, i) => {
 					return {

ui/core/sim_ui.ts

@@ -61,7 +61,7 @@ export abstract class SimUI extends Component {
 		this.rootElem.innerHTML = `
 			<div class="sim-root">
 				<div class="sim-bg"></div>
-				${config.noticeText ? `<div class="notices-banner alert border-bottom mb-0 text-center">${config.noticeText}</div>` : ''}
+				${config.noticeText ? `<div class="notices-banner alert border-bottom mb-0 text-center within-raid-sim-hide">${config.noticeText}</div>` : ''}
 				<div class="sim-container">
 					<aside class="sim-sidebar">
 						<div class="sim-title"></div>

ui/raid/raid_picker.ts

@@ -593,7 +593,10 @@ export class PlayerPicker extends Component {
 
 class PlayerEditorModal<SpecType extends Spec> extends BaseModal {
 	constructor(player: Player<SpecType>) {
-		super(document.body, 'player-editor-modal', { header: false });
+		super(document.body, 'player-editor-modal', {
+			closeButton: { fixed: true },
+			header: false,
+		});
 
 		this.rootElem.id = 'playerEditorModal';
 		this.body.insertAdjacentHTML(

ui/scss/core/components/_encounter_picker.scss

@@ -110,3 +110,11 @@
 		}
 	}
 }
+
+@include media-breakpoint-down(sm) {
+	.advanced-encounter-picker-modal {
+		.encounter-picker {
+			width: 50%;
+		}
+	}
+}

ui/scss/index.scss

@@ -1,47 +1,49 @@
 // Bootstrap functions & variables
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
 
 // Custom Bootstrap variable overrides
-@import "shared/variables";
+@import 'shared/variables';
 
 // Bootstrap configuration
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/utilities';
 
 // Bootstrap layout & components
-@import "bootstrap/scss/root";
-@import "bootstrap/scss/reboot";
-@import "bootstrap/scss/type";
-@import "bootstrap/scss/containers";
-@import "bootstrap/scss/grid";
-@import "bootstrap/scss/forms";
-@import "bootstrap/scss/buttons";
-@import "bootstrap/scss/transitions";
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-
-@import "bootstrap/scss/helpers";
+@import 'bootstrap/scss/root';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/type';
+@import 'bootstrap/scss/containers';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/forms';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/badge';
+@import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/modal';
+@import 'bootstrap/scss/tooltip';
+@import 'bootstrap/scss/popover';
+@import 'bootstrap/scss/carousel';
+
+@import 'bootstrap/scss/helpers';
 
 // Bootstrap Utilities API
-@import "./bootstrap/scss/utilities/api";
+@import './bootstrap/scss/utilities/api';
 
 // Custom shared styles
-@import "shared/mixins";
-@import "shared/global";
-@import "shared/global_old";
-@import "shared/modal";
+@import 'shared/mixins';
+@import 'shared/global';
+@import 'shared/global_old';
+@import 'shared/modal';
 
 // Custom Bootstrap style overrides
-@import "shared/bootstrap_style_overrides";
+@import 'shared/bootstrap_style_overrides';
 
 // Import other plugin styles
-@import "tippy.js/dist/tippy";
+@import 'tippy.js/dist/tippy';

ui/scss/shared/_bootstrap_style_overrides.scss

@@ -16,6 +16,18 @@
 	--bs-body-line-height: 1.25;
 }
 
+.btn-close {
+	background: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: $link-transition;
+
+	&:hover {
+		color: white;
+	}
+}
+
 .container {
 	height: 100%;
 	display: flex;
@@ -96,6 +108,18 @@
 	}
 }
 
+.modal-header {
+	.btn-close {
+		margin-right: -1 * map-get($spacers, 1);
+		z-index: 1000;
+
+		&.position-fixed {
+			top: calc(var(--bs-modal-margin) + 1px + $gap-width);
+			right: calc(2.5vw + 1px + $gap-width);
+		}
+	}
+}
+
 .navbar {
 	.navbar-toggler {
 		border: 0;

ui/scss/shared/_variables.scss

@@ -142,6 +142,10 @@ $link-hover-color: white;
 $link-transition: color 0.15s ease-in-out;
 
 // Component variable overrides
+$btn-close-color: $link-color;
+$btn-close-focus-shadow: none;
+$btn-close-hover-opacity: 1;
+$btn-close-opacity: 1;
 $btn-hover-bg-shade-amount: 30%;
 $btn-font-size: 0.875rem;
 $btn-padding-y: 0.5rem;