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

@@ -1,43 +1,116 @@
-<DefaultWindow xmlns="https://spacestation14.io"
+<DefaultWindow
-               Title="{Loc 'fax-machine-ui-window'}"
+    xmlns="https://spacestation14.io"
-               MinWidth="250">
+    Title="{Loc 'fax-machine-ui-window'}"
-    <BoxContainer Orientation="Vertical" VerticalExpand="True">
+    MinSize="380 220">
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
+    <BoxContainer Orientation="Vertical"
-            <Label Text="{Loc 'fax-machine-ui-paper'}" />
+        SeparationOverride="2"
-            <Control MinWidth="4" />
+        VerticalExpand="True">
-            <Label Name="PaperStatusLabel" />
+
-        </BoxContainer>
+        <PanelContainer StyleClasses="PanelBackgroundBaseDark" HorizontalExpand="True">
-        <Control HorizontalExpand="True" MinHeight="20" />
+            <BoxContainer Orientation="Vertical"
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
+                Margin="0 0 0 2">
-            <Label Text="{Loc 'fax-machine-ui-from'}" />
+
-            <Control MinWidth="4" />
+                <!-- From Line -->
-            <Label Name="FromLabel" />
+                <BoxContainer Orientation="Horizontal">
-        </BoxContainer>
+
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
+                    <!-- From Value Name -->
-            <Label Text="{Loc 'fax-machine-ui-to'}" />
+                    <Label Text="{Loc 'fax-machine-ui-from'}"
-            <Control MinWidth="4" />
+                        HorizontalAlignment="Left"
-            <OptionButton Name="PeerSelector" HorizontalExpand="True" />
+                        VerticalAlignment="Bottom"/>
-        </BoxContainer>
+
-        <Control HorizontalExpand="True" MinHeight="20" />
+                    <Control HorizontalExpand="True"
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
+                        MinWidth="8"
-            <Button Name="FileButton"
+                        HorizontalAlignment="Center"/>
-                    Text="{Loc 'fax-machine-ui-file-button'}"
+
-                    HorizontalExpand="False"/>
+                    <!-- From Value -->
-            <Button Name="PaperButton"
+                    <Label Name="FromLabel"
-                    Text="{Loc 'fax-machine-ui-paper-button-normal'}"
+                        HorizontalAlignment="Right"
-                    HorizontalExpand="False"/>
+                        VerticalAlignment="Center"
-        </BoxContainer>
+                        Align="Right"/>
-        <BoxContainer Orientation="Horizontal" HorizontalExpand="True">
+                </BoxContainer>
-            <Button Name="CopyButton"
+
-                    Text="{Loc 'fax-machine-ui-copy-button'}"
+                <!-- To Line -->
-                    HorizontalExpand="False"
+                <BoxContainer
-                    Disabled="True" />
+                    Orientation="Horizontal">
-            <Button Name="SendButton"
+
-                    Text="{Loc 'fax-machine-ui-send-button'}"
+                    <!-- To Label -->
-                    HorizontalExpand="True"
+                    <Label Text="{Loc 'fax-machine-ui-to'}"
-                    Disabled="True" />
+                        HorizontalAlignment="Left"
-            <Button Name="RefreshButton"
+                        VerticalAlignment="Bottom"/>
-                    Text="{Loc 'fax-machine-ui-refresh-button'}" />
+
-        </BoxContainer>
+                    <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>

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

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

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>

Resources/Textures/Interface/Nano/circular_arrow.svg.96dpi.png.yml

@@ -0,0 +1,2 @@
+sample:
+  filter: true