diff --git a/code/modules/client/client_procs.dm b/code/modules/client/client_procs.dm index 85f8b908e35..df0059fe383 100644 --- a/code/modules/client/client_procs.dm +++ b/code/modules/client/client_procs.dm @@ -541,7 +541,7 @@ GLOBAL_LIST_INIT(blacklisted_builds, list( if(CONFIG_GET(flag/aggressive_changelog)) changelog() else - winset(src, "infowindow.changelog", "font-style=bold") + winset(src, "infobuttons.changelog", "font-style=bold") if(ckey in GLOB.clientmessages) for(var/message in GLOB.clientmessages[ckey]) diff --git a/code/modules/tgui_panel/external.dm b/code/modules/tgui_panel/external.dm index e48ddeb2239..ae8448a5d5f 100644 --- a/code/modules/tgui_panel/external.dm +++ b/code/modules/tgui_panel/external.dm @@ -19,19 +19,19 @@ // Failed to fix, using tgalert as fallback action = tgalert(src, "Did that work?", "", "Yes", "No, switch to old ui") if (action == "No, switch to old ui") - winset(src, "legacy_output_selector", "left=output_legacy") + winset(src, "output_selector.legacy_output_selector", "left=output_legacy") log_tgui(src, "Failed to fix.", context = "verb/fix_tgui_panel") /client/proc/nuke_chat() // Catch all solution (kick the whole thing in the pants) - winset(src, "legacy_output_selector", "left=output_legacy") + winset(src, "output_selector.legacy_output_selector", "left=output_legacy") if(!tgui_panel || !istype(tgui_panel)) log_tgui(src, "tgui_panel datum is missing", context = "verb/fix_tgui_panel") tgui_panel = new(src) tgui_panel.initialize(force = TRUE) // Force show the panel to see if there are any errors - winset(src, "legacy_output_selector", "left=output_browser") + winset(src, "output_selector.legacy_output_selector", "left=output_browser") /client/verb/refresh_tgui() set name = "Refresh TGUI" diff --git a/interface/interface.dm b/interface/interface.dm index c90abd9583c..fdc1048226a 100644 --- a/interface/interface.dm +++ b/interface/interface.dm @@ -108,7 +108,7 @@ if(prefs.lastchangelog != GLOB.changelog_hash) prefs.lastchangelog = GLOB.changelog_hash prefs.save_preferences() - winset(src, "infowindow.changelog", "font-style=;") + winset(src, "infobuttons.changelog", "font-style=;") /client/verb/hotkeys_help() set name = "Hotkeys Help" diff --git a/interface/skin.dmf b/interface/skin.dmf index ca10e14765b..2d964e241e5 100644 --- a/interface/skin.dmf +++ b/interface/skin.dmf @@ -79,7 +79,7 @@ window "mainwindow" anchor2 = 100,100 saved-params = "splitter" left = "mapwindow" - right = "infowindow" + right = "info_and_buttons" is-vert = true elem "asset_cache_browser" type = BROWSER @@ -99,7 +99,6 @@ window "mainwindow" saved-params = "" elem "commandbar_spy" type = BROWSER - is-default = false pos = 0,0 size = 200x200 anchor1 = -1,-1 @@ -124,7 +123,7 @@ window "mapwindow" anchor1 = 0,0 anchor2 = 100,100 font-family = "Grand9K Pixel" - font-size = 6pt + font-size = 6 is-default = true right-click = true saved-params = "zoom;letterbox;zoom-mode" @@ -145,137 +144,231 @@ window "mapwindow" pos = 0,464 size = 280x16 anchor1 = 0,100 - is-visible = true + anchor2 = -1,-1 + text-color = #ffffff + background-color = #222222 + border = line + saved-params = "" text = "" align = left - background-color = #222222 - text-color = #ffffff - border = line -window "infowindow" - elem "infowindow" +window "info_and_buttons" + elem "info_and_buttons" type = MAIN - pos = 281,0 + pos = 0,0 size = 640x480 - anchor1 = -1,-1 - anchor2 = -1,-1 - saved-params = "pos;size;is-minimized;is-maximized" - is-pane = true - elem "info" - type = CHILD - pos = 0,30 - size = 640x445 anchor1 = 0,0 anchor2 = 100,100 + saved-params = "pos;size;is-minimized;is-maximized" + is-pane = true + elem "info_button_child" + type = CHILD + pos = 0,0 + size = 640x477 + anchor1 = 0,0 + anchor2 = 100,100 + background-color = #ffc41f saved-params = "splitter" - left = "statwindow" - right = "outputwindow" + left = "infobuttons" + right = "infowindow" is-vert = false + splitter = 2 + show-splitter = false + +window "infobuttons" + elem "infobuttons" + type = MAIN + pos = 291,0 + size = 640x30 + anchor1 = 0,0 + anchor2 = 100,100 + saved-params = "pos;size;is-minimized;is-maximized" + is-pane = true elem "changelog" type = BUTTON pos = 0,5 - size = 87x20 + size = 87x25 anchor1 = 0,0 - anchor2 = 15,0 + anchor2 = 15,100 saved-params = "is-checked" text = "Changelog" command = "changelog" elem "rules" type = BUTTON pos = 92,5 - size = 87x20 + size = 88x25 anchor1 = 15,0 - anchor2 = 29,0 + anchor2 = 29,100 saved-params = "is-checked" text = "Rules" command = "rules" elem "wiki" type = BUTTON - pos = 184,5 - size = 87x20 + pos = 185,5 + size = 87x25 anchor1 = 29,0 - anchor2 = 43,0 + anchor2 = 43,100 saved-params = "is-checked" text = "Wiki" command = "wiki" elem "forum" type = BUTTON - pos = 276,5 - size = 87x20 + pos = 277,5 + size = 87x25 anchor1 = 43,0 - anchor2 = 57,0 + anchor2 = 57,100 saved-params = "is-checked" text = "Forum" command = "forum" elem "github" type = BUTTON - pos = 368,5 - size = 87x20 + pos = 369,5 + size = 87x25 anchor1 = 57,0 - anchor2 = 71,0 + anchor2 = 71,100 saved-params = "is-checked" - text = "Github" + text = "GitHub" command = "github" elem "report-issue" type = BUTTON - pos = 460,5 - size = 87x20 + pos = 461,5 + size = 87x25 anchor1 = 71,0 - anchor2 = 85,0 + anchor2 = 85,100 saved-params = "is-checked" text = "Report Issue" command = "report-issue" elem "fullscreen-toggle" type = BUTTON - pos = 552,5 - size = 88x20 + pos = 553,5 + size = 89x25 anchor1 = 85,0 - anchor2 = 100,0 + anchor2 = 99,100 saved-params = "is-checked" text = "Fullscreen" command = "fullscreen" +window "infowindow" + elem "infowindow" + type = MAIN + pos = 281,0 + size = 640x475 + anchor1 = -1,-1 + anchor2 = -1,-1 + saved-params = "pos;size;is-minimized;is-maximized" + is-pane = true + elem "info" + type = CHILD + pos = 0,5 + size = 640x475 + anchor1 = 0,0 + anchor2 = 100,100 + saved-params = "splitter" + left = "statwindow" + right = "outputwindow" + is-vert = false + window "outputwindow" elem "outputwindow" type = MAIN pos = 0,0 - size = 640x480 + size = 640x475 + anchor1 = -1,-1 + anchor2 = -1,-1 + saved-params = "pos;size;is-minimized;is-maximized" + is-pane = true + elem "output_input_child" + type = CHILD + pos = 0,0 + size = 640x475 + anchor1 = 0,0 + anchor2 = 100,100 + background-color = #ffc41f + saved-params = "splitter" + left = "output_selector" + right = "input_and_buttons" + is-vert = false + splitter = 96 + show-splitter = false + +window "output_selector" + elem "output_selector" + type = MAIN + pos = 0,0 + size = 640x475 + anchor1 = -1,-1 + anchor2 = -1,-1 + saved-params = "pos;size;is-minimized;is-maximized" + is-pane = true + elem "legacy_output_selector" + type = CHILD + pos = 0,0 + size = 640x475 + anchor1 = 0,0 + anchor2 = 100,100 + saved-params = "splitter" + left = "output_legacy" + is-vert = false + +window "input_and_buttons" + elem "input_and_buttons" + type = MAIN + pos = 291,0 + size = 640x20 + anchor1 = -1,-1 + anchor2 = -1,-1 + saved-params = "pos;size;is-minimized;is-maximized" + is-pane = true + elem "input_buttons_child" + type = CHILD + pos = 0,0 + size = 640x20 + anchor1 = 0,0 + anchor2 = 100,100 + background-color = #ffc41f + saved-params = "splitter" + left = "inputwindow" + right = "inputbuttons" + is-vert = true + splitter = 80 + show-splitter = false + +window "inputwindow" + elem "inputwindow" + type = MAIN + pos = 575,0 + size = 520x25 anchor1 = -1,-1 anchor2 = -1,-1 background-color = none saved-params = "pos;size;is-minimized;is-maximized" is-pane = true - outer-size = 656x538 - inner-size = 640x499 elem "input" type = INPUT - pos = 2,460 - size = 517x20 - anchor1 = 0,100 + pos = 0,0 + size = 805x20 + anchor1 = 0,0 anchor2 = 100,100 is-default = true border = line saved-params = "command" - elem "oocbutton" - type = BUTTON - pos = 599,460 - size = 40x20 - anchor1 = 100,100 - anchor2 = -1,-1 - background-color = none - border = line - saved-params = "is-checked" - text = "OOC" - command = ".winset \"oocbutton.is-checked=true ? input.command=\"!ooc \\\"\" : input.command=\"\"oocbutton.is-checked=true ? mebutton.is-checked=false\"\"oocbutton.is-checked=true ? saybutton.is-checked=false\"" - is-flat = true - button-type = pushbox + +window "inputbuttons" + elem "inputbuttons" + type = MAIN + pos = 291,0 + size = 120x25 + anchor1 = 0,0 + anchor2 = 100,100 + saved-params = "pos;size;is-minimized;is-maximized" + is-pane = true elem "saybutton" type = BUTTON - pos = 519,460 + pos = 0,0 size = 40x20 - anchor1 = 100,100 - anchor2 = -1,-1 - background-color = none + anchor1 = 0,0 + anchor2 = 33,100 + font-size = 4 border = line saved-params = "is-checked" text = "Say" @@ -284,26 +377,30 @@ window "outputwindow" button-type = pushbox elem "mebutton" type = BUTTON - pos = 559,460 + pos = 40,0 size = 40x20 - anchor1 = 100,100 - anchor2 = -1,-1 - background-color = none + anchor1 = 33,0 + anchor2 = 66,100 + font-size = 4 border = line saved-params = "is-checked" text = "Me" command = ".winset \"mebutton.is-checked=true ? input.command=\"!me \\\"\" : input.command=\"\"mebutton.is-checked=true ? saybutton.is-checked=false\"\"mebutton.is-checked=true ? oocbutton.is-checked=false\"" is-flat = true button-type = pushbox - elem "legacy_output_selector" - type = CHILD - pos = 0,0 - size = 640x456 - anchor1 = 0,0 + elem "oocbutton" + type = BUTTON + pos = 80,0 + size = 40x20 + anchor1 = 66,0 anchor2 = 100,100 - saved-params = "splitter" - left = "output_legacy" - is-vert = false + font-size = 4 + border = line + saved-params = "is-checked" + text = "OOC" + command = ".winset \"oocbutton.is-checked=true ? input.command=\"!ooc \\\"\" : input.command=\"\"oocbutton.is-checked=true ? mebutton.is-checked=false\"\"oocbutton.is-checked=true ? saybutton.is-checked=false\"" + is-flat = true + button-type = pushbox window "output_legacy" elem "output_legacy" @@ -312,7 +409,6 @@ window "output_legacy" size = 640x456 anchor1 = -1,-1 anchor2 = -1,-1 - background-color = none saved-params = "pos;size;is-minimized;is-maximized" is-pane = true elem "output" @@ -331,7 +427,6 @@ window "output_browser" size = 640x456 anchor1 = -1,-1 anchor2 = -1,-1 - background-color = none saved-params = "pos;size;is-minimized;is-maximized" is-pane = true elem "browseroutput" @@ -340,7 +435,6 @@ window "output_browser" size = 640x456 anchor1 = 0,0 anchor2 = 100,100 - background-color = none saved-params = "" window "popupwindow" diff --git a/tgui/packages/tgui-panel/index.tsx b/tgui/packages/tgui-panel/index.tsx index b91548094fa..242cf5d1990 100644 --- a/tgui/packages/tgui-panel/index.tsx +++ b/tgui/packages/tgui-panel/index.tsx @@ -72,7 +72,7 @@ function setupApp() { Byond.subscribe((type, payload) => store.dispatch({ type, payload })); // Unhide the panel - Byond.winset('legacy_output_selector', { + Byond.winset('output_selector.legacy_output_selector', { left: 'output_browser', }); diff --git a/tgui/packages/tgui-panel/settings/SettingsGeneral.tsx b/tgui/packages/tgui-panel/settings/SettingsGeneral.tsx index c1d43d98237..0d8f8121012 100644 --- a/tgui/packages/tgui-panel/settings/SettingsGeneral.tsx +++ b/tgui/packages/tgui-panel/settings/SettingsGeneral.tsx @@ -17,6 +17,7 @@ import { clearChat, saveChatToDisk } from '../chat/actions'; import { THEMES } from '../themes'; import { exportSettings, updateSettings } from './actions'; import { FONTS } from './constants'; +import { setEditPaneSplitters } from './scaling'; import { selectSettings } from './selectors'; import { importChatSettings } from './settingsImExport'; @@ -26,6 +27,8 @@ export function SettingsGeneral(props) { const dispatch = useDispatch(); const [freeFont, setFreeFont] = useState(false); + const [editingPanes, setEditingPanes] = useState(false); + return (
@@ -47,6 +50,20 @@ export function SettingsGeneral(props) { ))} + + + {!freeFont ? ( diff --git a/tgui/packages/tgui-panel/settings/middleware.ts b/tgui/packages/tgui-panel/settings/middleware.ts index 4c18cc4fa03..ca1df55a69b 100644 --- a/tgui/packages/tgui-panel/settings/middleware.ts +++ b/tgui/packages/tgui-panel/settings/middleware.ts @@ -17,6 +17,7 @@ import { updateSettings, } from './actions'; import { FONTS_DISABLED } from './constants'; +import { setDisplayScaling } from './scaling'; import { selectSettings } from './selectors'; import { exportChatSettings } from './settingsImExport'; @@ -88,6 +89,9 @@ export function settingsMiddleware(store) { if (!initialized) { initialized = true; + + setDisplayScaling(); + storage.get('panel-settings').then((settings) => { store.dispatch(loadSettings(settings)); }); diff --git a/tgui/packages/tgui-panel/settings/scaling.ts b/tgui/packages/tgui-panel/settings/scaling.ts new file mode 100644 index 00000000000..eba69b55238 --- /dev/null +++ b/tgui/packages/tgui-panel/settings/scaling.ts @@ -0,0 +1,47 @@ +// This is the elements from the skin.dmf that we need to adjust the fontsize of +const ELEMENTS_TO_ADJUST = [ + 'infobuttons.changelog', + 'infobuttons.rules', + 'infobuttons.wiki', + 'infobuttons.forum', + 'infobuttons.github', + 'infobuttons.report-issue', + 'infobuttons.fullscreen-toggle', + 'inputwindow.input', + 'inputbuttons.saybutton', + 'inputbuttons.mebutton', + 'inputbuttons.oocbutton', +]; + +const DEFAULT_BUTTON_FONT_SIZE = 4; + +export async function setDisplayScaling() { + if (window.devicePixelRatio === 1) { + return; + } + + const newSizes: { [element: string]: number } = {}; + + for (const element of ELEMENTS_TO_ADJUST) { + newSizes[`${element}.font-size`] = + DEFAULT_BUTTON_FONT_SIZE * window.devicePixelRatio; + } + + Byond.winset(null, newSizes); +} + +const PANE_SPLITTERS = [ + 'info_button_child', + 'input_buttons_child', + 'output_input_child', +]; + +export function setEditPaneSplitters(editing: boolean) { + const toSet: { [element: string]: any } = {}; + + for (const pane of PANE_SPLITTERS) { + toSet[`${pane}.show-splitter`] = editing; + } + + Byond.winset(null, toSet); +} diff --git a/tgui/packages/tgui-panel/themes.ts b/tgui/packages/tgui-panel/themes.ts index f169af07a77..b314b532b53 100644 --- a/tgui/packages/tgui-panel/themes.ts +++ b/tgui/packages/tgui-panel/themes.ts @@ -49,8 +49,11 @@ export const setClientTheme = (name) => { return Byond.winset({ // Main windows + 'infobuttons.background-color': themeColor.BG_BASE, + 'infobuttons.text-color': themeColor.TEXT, 'infowindow.background-color': themeColor.BG_BASE, 'infowindow.text-color': themeColor.TEXT, + 'info_and_buttons.background-color': themeColor.BG_BASE, 'info.background-color': themeColor.BG_BASE, 'info.text-color': themeColor.TEXT, 'browseroutput.background-color': themeColor.BG_BASE,