8.1.0 Sorter UI Enhancements

Author: egorantonov

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbg-enhanced",
-  "version": "8.0.2",
+  "version": "8.1.0",
   "description": "<h1 align=\"center\"><img src=\"https://github.com/egorantonov/sbg-enhanced/raw/master/assets/script/64.png\" width=\"32px\" /> SBG Enhanced UI</h1>",
   "private": true,
   "scripts": {

src/colorScheme/index.js

@@ -1,4 +1,4 @@
-import { ClientData, CUI, EUI, Elements, Events, GetLocale, IsPrivate, Modifiers, Nodes, Proposed, SBG, Themes, t, Translations as i18n } from '../constants'
+import { ClientData, CUI, EUI, Elements, Events, GetLocale, Modifiers, Nodes, Proposed, SBG, Themes, t, Translations as i18n } from '../constants'
 import monoStyles from './styles/mono.min.css'
 import ingressStyles from './styles/ingress.min.css'
 import primeStyles from './styles/prime.min.css'
@@ -219,7 +219,7 @@ export default function AddColorScheme() {
 	const cuiRefsOnMap = Nodes.GetSelector('button.sbgcui_show_viewer')
 	if (cuiRefsOnMap) {
 		cuiRefsOnMap.innerText = '🌍'
-		cuiRefsOnMap.style.minWidth = '40px'
+		cuiRefsOnMap.style.minWidth = '45px'
 	}
 
 	const cuiSortOrder = document.querySelector('button.sbgcui_refs-sort-button')

src/colorScheme/styles/eui.css

@@ -583,6 +583,54 @@ button.inventory__ic-repair {
   color: var(--sbgcui-branding-color, var(--selection));
 }
 
+.inventory__sorter {
+  justify-content: flex-end;
+  backdrop-filter: blur(10px);
+}
+
+.inventory__sorter .popup-buttons {
+  margin: 10px 0 0;
+  border-radius: var(--radius10);
+  overflow: hidden;
+  gap: 0.1em;
+}
+
+.inventory__sorter .popup-buttons button {
+  min-height: 45px;
+}
+
+.inventory__sorter fieldset {
+  border-radius: var(--radius10);
+  gap: 10px;
+}
+
+.inventory__sorter fieldset legend {
+  margin: 0 auto;
+}
+
+.inventory__sorter fieldset label {
+  padding: 10px 0 10px 10px;
+  background-color: #7773;
+  border-radius: var(--radius5);
+  border: 1px solid var(--border-transp);
+}
+
+.inventory__sorter fieldset label input {
+  margin: 0 6px 0 0;
+}
+
+.inventory__sorter fieldset label span[data-i18n="inventory.sorter.direction.asc"]::before {
+  content: '↗ ';
+}
+
+.inventory__sorter fieldset label span[data-i18n="inventory.sorter.direction.desc"]::before {
+  content: '↘ '
+}
+
+.team-g, .team-b, .team-r, .team-n {
+  font-weight: bold;
+}
+
 /* SETTINGS */
 .settings-section__item input[type="checkbox"],
 .sbgcui_settings input[type="checkbox"] { /* CUI compatibility */

src/colorScheme/styles/eui.min.css

@@ -434,6 +434,10 @@ input[type='range']::-webkit-slider-thumb {
   color: var(--i-btn-color);
 }
 
+.inventory__sorter .popup-buttons button {
+  color: var(--text) !important;
+}
+
 #settings-telegram>span {
   color: var(--text) !important;
 }

src/colorScheme/styles/mono.css

@@ -15,7 +15,7 @@ export const Backend = {
 export const SBG = {
   OutboundLinksLimit: 30,
   DefaultCloseButtonText: '[x]',
-  CompatibleVersion: '0.5.3',
+  CompatibleVersion: '0.6.0',
   Settings: 'settings',
   DefaultLang: 'en',
   GooglePhoto: 'https://lh3.googleusercontent.com/',

src/colorScheme/styles/mono.min.css

@@ -1140,24 +1140,29 @@ input[type="range"][name^="mapFilters_"]::after {
   font-weight: bolder;
 }
 
-.inventory__sorter input[type="radio"] {
+.inventory__sorter input[type="radio"]:checked {
   accent-color: var(--sbgcui-branding-color, var(--selection));
+  filter: drop-shadow(0 0 6px var(--sbgcui-branding-color, var(--selection)));
 }
 
-input[type="checkbox"][name="t"][value="0"] {
+input[type="checkbox"][name="t"][value="0"]:checked:not(:disabled) {
   accent-color: var(--team-0);
+  filter: drop-shadow(0 0 6px var(--team-0));
 }
 
-input[type="checkbox"][name="t"][value="1"] {
+input[type="checkbox"][name="t"][value="1"]:checked:not(:disabled) {
   accent-color: var(--team-1);
+  filter: drop-shadow(0 0 6px var(--team-1));
 }
 
-input[type="checkbox"][name="t"][value="2"] {
+input[type="checkbox"][name="t"][value="2"]:checked:not(:disabled) {
   accent-color: var(--team-2);
+  filter: drop-shadow(0 0 6px var(--team-2));
 }
 
-input[type="checkbox"][name="t"][value="3"] {
+input[type="checkbox"][name="t"][value="3"]:checked:not(:disabled) {
   accent-color: var(--team-3);
+  filter: drop-shadow(0 0 6px var(--team-3));
 }
 
 /* Animation */