From e42f63583b45672ca3fcea107b9c4a07790f7fa8 Mon Sep 17 00:00:00 2001
From: eoineoineoin <helloworld@eoinrul.es>
Date: Sat, 17 May 2025 18:20:11 +0100
Subject: [PATCH] Improve fax machine UI (#33825)

* fax upgraded

* improve resizable

* move Paper type settings & change margins

* change margins & Aling of text

* Rearrange Fax UI

Group paper-type with print-file.
Group refresh button with destination list.

Add some panels to differenciate functionality for faxing an inserted
sheet of paper and printing a local file to a new paper.

* Whitespace

* Remove unnecessary style definition

* Remove whitespace

---------

Co-authored-by: VideoKompany <135313844+VlaDOS1408@users.noreply.github.com>
---
 Content.Client/Fax/UI/FaxWindow.xaml          | 155 +++++++++++++-----
 Content.Client/Stylesheets/StyleNano.cs       |   4 +
 Resources/Locale/en-US/fax/fax.ftl            |   2 +-
 .../Interface/Nano/circular_arrow.svg         |  55 +++++++
 .../Nano/circular_arrow.svg.96dpi.png         | Bin 0 -> 449 bytes
 .../Nano/circular_arrow.svg.96dpi.png.yml     |   2 +
 6 files changed, 176 insertions(+), 42 deletions(-)
 create mode 100644 Resources/Textures/Interface/Nano/circular_arrow.svg
 create mode 100644 Resources/Textures/Interface/Nano/circular_arrow.svg.96dpi.png
 create mode 100644 Resources/Textures/Interface/Nano/circular_arrow.svg.96dpi.png.yml

diff --git a/Content.Client/Fax/UI/FaxWindow.xaml b/Content.Client/Fax/UI/FaxWindow.xaml
index ce22b0e412..04b297ab92 100644
--- a/Content.Client/Fax/UI/FaxWindow.xaml
+++ b/Content.Client/Fax/UI/FaxWindow.xaml
@@ -1,43 +1,116 @@
-<DefaultWindow xmlns="https://spacestation14.io"
-               Title="{Loc 'fax-machine-ui-window'}"
-               MinWidth="250">
-    <BoxContainer Orientation="Vertical" VerticalExpand="True">
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
-            <Label Text="{Loc 'fax-machine-ui-paper'}" />
-            <Control MinWidth="4" />
-            <Label Name="PaperStatusLabel" />
-        </BoxContainer>
-        <Control HorizontalExpand="True" MinHeight="20" />
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
-            <Label Text="{Loc 'fax-machine-ui-from'}" />
-            <Control MinWidth="4" />
-            <Label Name="FromLabel" />
-        </BoxContainer>
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
-            <Label Text="{Loc 'fax-machine-ui-to'}" />
-            <Control MinWidth="4" />
-            <OptionButton Name="PeerSelector" HorizontalExpand="True" />
-        </BoxContainer>
-        <Control HorizontalExpand="True" MinHeight="20" />
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
-            <Button Name="FileButton"
-                    Text="{Loc 'fax-machine-ui-file-button'}"
-                    HorizontalExpand="False"/>
-            <Button Name="PaperButton"
-                    Text="{Loc 'fax-machine-ui-paper-button-normal'}"
-                    HorizontalExpand="False"/>
-        </BoxContainer>
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
-            <Button Name="CopyButton"
-                    Text="{Loc 'fax-machine-ui-copy-button'}"
-                    HorizontalExpand="False"
-                    Disabled="True" />
-            <Button Name="SendButton"
-                    Text="{Loc 'fax-machine-ui-send-button'}"
-                    HorizontalExpand="True"
-                    Disabled="True" />
-            <Button Name="RefreshButton"
-                    Text="{Loc 'fax-machine-ui-refresh-button'}" />
-        </BoxContainer>
+<DefaultWindow
+    xmlns="https://spacestation14.io"
+    Title="{Loc 'fax-machine-ui-window'}"
+    MinSize="380 220">
+    <BoxContainer Orientation="Vertical"
+        SeparationOverride="2"
+        VerticalExpand="True">
+
+        <PanelContainer StyleClasses="PanelBackgroundBaseDark" HorizontalExpand="True">
+            <BoxContainer Orientation="Vertical"
+                Margin="0 0 0 2">
+
+                <!-- From Line -->
+                <BoxContainer Orientation="Horizontal">
+
+                    <!-- From Value Name -->
+                    <Label Text="{Loc 'fax-machine-ui-from'}"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Bottom"/>
+
+                    <Control HorizontalExpand="True"
+                        MinWidth="8"
+                        HorizontalAlignment="Center"/>
+
+                    <!-- From Value -->
+                    <Label Name="FromLabel"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Align="Right"/>
+                </BoxContainer>
+
+                <!-- To Line -->
+                <BoxContainer
+                    Orientation="Horizontal">
+
+                    <!-- To Label -->
+                    <Label Text="{Loc 'fax-machine-ui-to'}"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Bottom"/>
+
+                    <Control HorizontalExpand="True"
+                        MinWidth="8"
+                        HorizontalAlignment="Center"/>
+
+                    <BoxContainer Orientation="Horizontal">
+                        <!-- To Value -->
+                        <OptionButton Name="PeerSelector"
+                            StyleClasses="OpenRight" />
+
+                        <!-- Refresh Fax Recipients -->
+                        <Button StyleClasses="OpenLeft"
+                            Name="RefreshButton"
+                            ToolTip="{Loc 'fax-machine-ui-refresh-button'}">
+                            <TextureButton
+                                MouseFilter="Ignore"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                Scale="0.9 0.9"
+                                StyleClasses="Refresh" />
+                         </Button>
+                   </BoxContainer>
+                </BoxContainer>
+
+                <PanelContainer StyleClasses="LowDivider" Margin="0 4 0 4"/>
+
+                <!-- Send & Copy -->
+                <BoxContainer Orientation="Vertical">
+
+                    <!-- Paper Status -->
+                    <Label Name="PaperStatusLabel"
+                        HorizontalAlignment="Center" />
+
+                    <BoxContainer>
+                        <Button Name="CopyButton"
+                            Text="{Loc 'fax-machine-ui-copy-button'}"
+                            StyleClasses="OpenRight"
+                            HorizontalExpand="True"
+                            Disabled="True" />
+                        <Button Name="SendButton"
+                            Text="{Loc 'fax-machine-ui-send-button'}"
+                            StyleClasses="OpenLeft"
+                            HorizontalExpand="True"
+                            Disabled="True" />
+                    </BoxContainer>
+                </BoxContainer>
+            </BoxContainer>
+
+        </PanelContainer>
+
+        <PanelContainer StyleClasses="PanelBackgroundBaseDark"
+            HorizontalExpand="True" Margin="0 10 0 0"
+            VerticalExpand="True" VerticalAlignment="Bottom">
+            <BoxContainer Orientation="Vertical"
+                VerticalExpand="True">
+
+                <!-- Other actions -->
+                <BoxContainer Margin="0 4 0 4">
+
+                    <Button Name="PaperButton"
+                        Text="{Loc 'fax-machine-ui-paper-button-normal'}"
+                        StyleClasses="OpenRight"
+                        HorizontalExpand="True"/>
+
+                    <Button Name="FileButton"
+                        Text="{Loc 'fax-machine-ui-file-button'}"
+                        StyleClasses="OpenLeft"
+                        HorizontalExpand="True"/>
+
+                </BoxContainer>
+
+                <!-- It would be cool to add a display of the inserted file here. -->
+            </BoxContainer>
+        </PanelContainer>
+
     </BoxContainer>
 </DefaultWindow>
diff --git a/Content.Client/Stylesheets/StyleNano.cs b/Content.Client/Stylesheets/StyleNano.cs
index 1e96d0ee4e..2d55accd3e 100644
--- a/Content.Client/Stylesheets/StyleNano.cs
+++ b/Content.Client/Stylesheets/StyleNano.cs
@@ -1617,6 +1617,10 @@ namespace Content.Client.Stylesheets
 
                 Element<TextureButton>().Class("CrossButtonRed").Pseudo(TextureButton.StylePseudoClassHover)
                     .Prop(Control.StylePropertyModulateSelf, Color.FromHex("#753131")),
+
+                //
+                Element<TextureButton>().Class("Refresh")
+                    .Prop(TextureButton.StylePropertyTexture, resCache.GetTexture("/Textures/Interface/Nano/circular_arrow.svg.96dpi.png")),
                 // ---
 
                 // Profile Editor
diff --git a/Resources/Locale/en-US/fax/fax.ftl b/Resources/Locale/en-US/fax/fax.ftl
index 412f3d7f43..86587b88ed 100644
--- a/Resources/Locale/en-US/fax/fax.ftl
+++ b/Resources/Locale/en-US/fax/fax.ftl
@@ -11,7 +11,7 @@ fax-machine-dialog-field-name = Name
 
 fax-machine-ui-window = Fax Machine
 fax-machine-ui-file-button = Print File
-fax-machine-ui-paper-button-normal = Normal Paper
+fax-machine-ui-paper-button-normal = Plain Paper
 fax-machine-ui-paper-button-office = Office Paper
 fax-machine-ui-copy-button = Copy
 fax-machine-ui-send-button = Send
diff --git a/Resources/Textures/Interface/Nano/circular_arrow.svg b/Resources/Textures/Interface/Nano/circular_arrow.svg
new file mode 100644
index 0000000000..d68dea0440
--- /dev/null
+++ b/Resources/Textures/Interface/Nano/circular_arrow.svg
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="circular_arrow.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   inkscape:export-filename="circular_arrow.svg.96dpi.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="36.59352"
+     inkscape:cx="7.6926188"
+     inkscape:cy="5.4927758"
+     inkscape:window-width="1916"
+     inkscape:window-height="1052"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     style="fill:none;stroke:#ffffff;stroke-width:1.88594;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     id="path1"
+     sodipodi:type="arc"
+     sodipodi:cx="7.9993391"
+     sodipodi:cy="7.9987197"
+     sodipodi:rx="6.5130019"
+     sodipodi:ry="6.5130019"
+     sodipodi:start="0"
+     sodipodi:end="5.4159597"
+     sodipodi:open="true"
+     sodipodi:arc-type="arc"
+     d="M 14.512341,7.9987197 A 6.5130019,6.5130019 0 0 1 9.4003633,14.359248 6.5130019,6.5130019 0 0 1 2.0890911,10.73517 6.5130019,6.5130019 0 0 1 4.0555857,2.8154772 6.5130019,6.5130019 0 0 1 12.212891,3.0323148" />
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.942969px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 12.014511,2.7028302 C 11.498189,3.2130834 9.1989617,4.6865508 9.1989617,4.6865508 L 14.507321,5.8461445 13.605416,0.58932093 c 0,0 -1.074584,1.60325607 -1.590905,2.11350927 z"
+     id="path2"
+     sodipodi:nodetypes="zcccz" />
+</svg>
diff --git a/Resources/Textures/Interface/Nano/circular_arrow.svg.96dpi.png b/Resources/Textures/Interface/Nano/circular_arrow.svg.96dpi.png
new file mode 100644
index 0000000000000000000000000000000000000000..98f7d325d956d9a376843019d36f3934ccf955c1
GIT binary patch
literal 449
zcmV;y0Y3hTP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000id
z000id0mpBsWB>pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10ZvIo
zK~y-6mD52>RZ$cL;O|{+(&dQ}VGu!R4T_*<QIa^)8q_aS^j8E8B8{NN^#=+XglI^^
zAOd|xlUfblxpCAh+JeowoO|}(Yn`>vAc-Cf@etQAfgQZVsQkZ(?;uGXQ%Tm7jB*?Y
zN!F6wOtR7C3@QfK@usW?*u*FN#$7x`i(e%!)C{JRY?n?ilUzE&Op>J}`xT=rN&XdB
zFPkrtG(E|WlKeO#X}Oco;v4>8u6*}l61Q<5_ln%-k~}UIpY?P;HJWm1@Zp5ceRzPc
zSZL7MF!+xGi@1tgjq#8$w(6|7Q`Rq%w8frLl9@B;o+(4MpQP<JSIR|hoM2-Y6G=A9
z+0}XurjmTFiu5tLoa9wGvz27n%|WMY7H@F_Kk*tL(HQ&x1n04ZW$dE&F|8)q%W;f~
r)M1@dGpNyG-uOA6!#3U*W{2<>fxFlc$>Jz700000NkvXXu0mjf8hgdK

literal 0
HcmV?d00001

diff --git a/Resources/Textures/Interface/Nano/circular_arrow.svg.96dpi.png.yml b/Resources/Textures/Interface/Nano/circular_arrow.svg.96dpi.png.yml
new file mode 100644
index 0000000000..5c43e23305
--- /dev/null
+++ b/Resources/Textures/Interface/Nano/circular_arrow.svg.96dpi.png.yml
@@ -0,0 +1,2 @@
+sample:
+  filter: true