reverse direction of filters menu checkboxes

wowsims · Mar 17, 2024 · b89d775 · b89d775
1 parent ee88517
commit b89d775
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 138 deletions.
diff --git a/ui/core/components/filters_menu.ts b/ui/core/components/filters_menu.ts
@@ -45,6 +45,7 @@ export class FiltersMenu extends BaseModal {
 			new BooleanPicker<Sim>(section, player.sim, {
 				label: sourceNames.get(source),
 				inline: true,
+				reverse: true,
 				changedEvent: (sim: Sim) => sim.filtersChangeEmitter,
 				getValue: (sim: Sim) => sim.getFilters().sources.includes(source),
 				setValue: (eventID: EventID, sim: Sim, newValue: boolean) => {
@@ -66,6 +67,7 @@ export class FiltersMenu extends BaseModal {
 			new BooleanPicker<Sim>(section, player.sim, {
 				label: raidNames.get(raid),
 				inline: true,
+				reverse: true,
 				changedEvent: (sim: Sim) => sim.filtersChangeEmitter,
 				getValue: (sim: Sim) => sim.getFilters().raids.includes(raid),
 				setValue: (eventID: EventID, sim: Sim, newValue: boolean) => {
@@ -91,6 +93,7 @@ export class FiltersMenu extends BaseModal {
 					new BooleanPicker<Sim>(section, player.sim, {
 						label: armorTypeNames.get(armorType),
 						inline: true,
+						reverse: true,
 						changedEvent: (sim: Sim) => sim.filtersChangeEmitter,
 						getValue: (sim: Sim) => sim.getFilters().armorTypes.includes(armorType),
 						setValue: (eventID: EventID, sim: Sim, newValue: boolean) => {
@@ -114,6 +117,7 @@ export class FiltersMenu extends BaseModal {
 				new BooleanPicker<Sim>(weaponTypeSection, player.sim, {
 					label: weaponTypeNames.get(weaponType),
 					inline: true,
+					reverse: true,
 					changedEvent: (sim: Sim) => sim.filtersChangeEmitter,
 					getValue: (sim: Sim) => sim.getFilters().weaponTypes.includes(weaponType),
 					setValue: (eventID: EventID, sim: Sim, newValue: boolean) => {
@@ -196,6 +200,7 @@ export class FiltersMenu extends BaseModal {
 				new BooleanPicker<Sim>(rangedWeaponTypeSection, player.sim, {
 					label: rangedWeaponTypeNames.get(rangedWeaponType),
 					inline: true,
+					reverse: true,
 					changedEvent: (sim: Sim) => sim.filtersChangeEmitter,
 					getValue: (sim: Sim) => sim.getFilters().rangedWeaponTypes.includes(rangedWeaponType),
 					setValue: (eventID: EventID, sim: Sim, newValue: boolean) => {

diff --git a/ui/scss/shared/_bootstrap_style_overrides.scss b/ui/scss/shared/_bootstrap_style_overrides.scss
@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 
 @font-face {
 	font-family: SimDefaultFont;
@@ -12,199 +12,203 @@
 }
 
 :root {
-  --bs-body-font-family: SimDefaultFont;
-  --bs-body-line-height: 1.25;
+	--bs-body-font-family: SimDefaultFont;
+	--bs-body-line-height: 1.25;
 }
 
 .container {
-  height: 100%;
-  display: flex;
+	height: 100%;
+	display: flex;
 }
 
 .dropdown-menu {
-  &[data-bs-popper] {
-    margin: 0 !important;
-  }
+	&[data-bs-popper] {
+		margin: 0 !important;
+	}
 }
 
 .form-check {
-  padding: 0;
+	padding: 0;
 
-  &.form-check-reverse {
-    text-align: left;
+	&.form-check-reverse {
+		justify-content: flex-start;
 
-    .form-check-input {
-      margin: 0;
-    }
-  }
+		.form-check-input {
+			margin: 0;
+		}
+
+		.form-label {
+			margin-left: map-get($spacers, 1);
+		}
+	}
 }
 
 .form-check-input {
-  width: $form-check-input-width !important;
-  height: $form-check-input-width !important;
+	width: $form-check-input-width !important;
+	height: $form-check-input-width !important;
 
-  &:focus {
-    box-shadow: 0 0 .25rem var(--bs-primary);
-  }
+	&:focus {
+		box-shadow: 0 0 0.25rem var(--bs-primary);
+	}
 
-  &:checked[type="checkbox"] {
-    background-color: var(--bs-primary);
-    background-image: var(--bs-form-check-box-bg-image);
-  }
+	&:checked[type='checkbox'] {
+		background-color: var(--bs-primary);
+		background-image: var(--bs-form-check-box-bg-image);
+	}
 
-  &:checked[type="radio"] {
-    background-color: var(--bs-primary);
-    background-image: var(--bs-form-check-radio-bg-image);
-  }
+	&:checked[type='radio'] {
+		background-color: var(--bs-primary);
+		background-image: var(--bs-form-check-radio-bg-image);
+	}
 }
 
 .link-warning {
-  color: $link-warning-color !important;
+	color: $link-warning-color !important;
 }
 
 .link-danger {
-  color: $link-danger-color !important;
+	color: $link-danger-color !important;
 }
 
 .link-success {
-  color: $success !important;
+	color: $success !important;
 }
 
 .modal {
-  .modal-dialog {
-    .modal-header,
-    .modal-footer {
-      padding-left: 0;
-      padding-right: 0;
-      margin-left: $modal-header-padding;
-      margin-right: $modal-header-padding;
-    }
-
-    .modal-header {
-      align-items: flex-start;
-    }
-
-    .modal-body {
-      display: flex;
-      flex-direction: column;
-    }
-  }
+	.modal-dialog {
+		.modal-header,
+		.modal-footer {
+			padding-left: 0;
+			padding-right: 0;
+			margin-left: $modal-header-padding;
+			margin-right: $modal-header-padding;
+		}
+
+		.modal-header {
+			align-items: flex-start;
+		}
+
+		.modal-body {
+			display: flex;
+			flex-direction: column;
+		}
+	}
 }
 
 .navbar {
-  .navbar-toggler {
-    border: 0;
-    box-shadow: none;
-    color: white;
-  }
+	.navbar-toggler {
+		border: 0;
+		box-shadow: none;
+		color: white;
+	}
 
-  .nav-link {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-  }
+	.nav-link {
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+	}
 }
 
 .nav-tabs {
-  .nav-item {
-    display: flex;
-    align-items: center;
-
-    .nav-link {
-      height: 100%;
-      margin-bottom: 0;
-      border: 0;
-      display: flex;
-      align-items: center;
-      font-weight: bold;
-      white-space: nowrap;
-
-      &.active {
-        position: relative;
-
-        &::after {
-          content: "";
-          position: absolute;
-          height: 2px;
-          background: $nav-tabs-link-active-color;
-          bottom: 0;
-          left: 0;
-          right: 0;
-        }
-      }
-    }
-  }
+	.nav-item {
+		display: flex;
+		align-items: center;
+
+		.nav-link {
+			height: 100%;
+			margin-bottom: 0;
+			border: 0;
+			display: flex;
+			align-items: center;
+			font-weight: bold;
+			white-space: nowrap;
+
+			&.active {
+				position: relative;
+
+				&::after {
+					content: '';
+					position: absolute;
+					height: 2px;
+					background: $nav-tabs-link-active-color;
+					bottom: 0;
+					left: 0;
+					right: 0;
+				}
+			}
+		}
+	}
 }
 
 .tooltip {
-  .tooltip-inner {
-    border: 1px solid $link-color;
-  }
+	.tooltip-inner {
+		border: 1px solid $link-color;
+	}
 }
 
 .popover-arrow,
 .tooltip-arrow {
-  display: none !important;
+	display: none !important;
 }
 
 @each $color, $value in $class-colors {
-  // Dampened class themes
-  .bg-#{$color}-dampened {
-    background: mix(black, $value, 75%);
-  }
+	// Dampened class themes
+	.bg-#{$color}-dampened {
+		background: mix(black, $value, 75%);
+	}
 }
 
 @include media-breakpoint-down(xl) {
-  .tooltip {
-    --bs-tooltip-max-width: #{$tooltip-max-width-lg};
-  }
+	.tooltip {
+		--bs-tooltip-max-width: #{$tooltip-max-width-lg};
+	}
 }
 
 @include media-breakpoint-down(lg) {
-  .container {
-    width: 100%;
-    max-width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-  }
+	.container {
+		width: 100%;
+		max-width: 100%;
+		margin-left: 0;
+		margin-right: 0;
+	}
 }
 
 @include media-breakpoint-down(md) {
-  .navbar {
-    .navbar-collapse {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 1rem;
-      background: rgba(0,0,0,.9);
-      z-index: 1000;
-
-      .navbar-nav {
-        position: relative;
-        align-items: flex-start;
-
-        .navbar-toggler {
-          position: absolute;
-          top: 0;
-          right: 0;
-        }
-
-        .nav-link {
-          padding-bottom: map-get($spacers, 3);
-
-          &:first-of-type {
-            padding-top: map-get($spacers, 2);
-          }
-        }
-      }
-    }
-  }
+	.navbar {
+		.navbar-collapse {
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			padding: 1rem;
+			background: rgba(0, 0, 0, 0.9);
+			z-index: 1000;
+
+			.navbar-nav {
+				position: relative;
+				align-items: flex-start;
+
+				.navbar-toggler {
+					position: absolute;
+					top: 0;
+					right: 0;
+				}
+
+				.nav-link {
+					padding-bottom: map-get($spacers, 3);
+
+					&:first-of-type {
+						padding-top: map-get($spacers, 2);
+					}
+				}
+			}
+		}
+	}
 }
 
 @include media-breakpoint-down(md) {
-  .tooltip {
-    --bs-tooltip-max-width: #{$tooltip-max-width-sm};
-  }
+	.tooltip {
+		--bs-tooltip-max-width: #{$tooltip-max-width-sm};
+	}
 }