Improve UI around max paper length (Fixes #32344)

* Display a "fill progress" indicator so users know how close they are to filling it * Don't allow users to save a paper which went over the limit, to avoid them losing data they want to keep.
space-wizards · Sep 23, 2024 · 6269b23 · 6269b23
1 parent 35de668
commit 6269b23
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 6 deletions.
diff --git a/Content.Client/Paper/UI/PaperBoundUserInterface.cs b/Content.Client/Paper/UI/PaperBoundUserInterface.cs
@@ -2,6 +2,7 @@
 using Robust.Client.UserInterface;
 using Robust.Client.UserInterface.Controls;
 using Robust.Shared.Utility;
+using Content.Shared.Paper;
 using static Content.Shared.Paper.PaperComponent;
 
 namespace Content.Client.Paper.UI;
@@ -23,6 +24,10 @@ protected override void Open()
         _window = this.CreateWindow<PaperWindow>();
         _window.OnSaved += InputOnTextEntered;
 
+        if (EntMan.TryGetComponent<PaperComponent>(Owner, out var paper))
+        {
+            _window.MaxInputLength = paper.ContentSize;
+        }
         if (EntMan.TryGetComponent<PaperVisualsComponent>(Owner, out var visuals))
         {
             _window.InitVisuals(Owner, visuals);

diff --git a/Content.Client/Paper/UI/PaperWindow.xaml b/Content.Client/Paper/UI/PaperWindow.xaml
@@ -15,10 +15,13 @@
                         <Control Name="TextAlignmentPadding" VerticalAlignment="Top"/>
                         <RichTextLabel Name="BlankPaperIndicator" StyleClasses="LabelSecondaryColor" VerticalAlignment="Top" HorizontalAlignment="Center"/>
                         <RichTextLabel StyleClasses="PaperWrittenText" Name="WrittenTextLabel" VerticalAlignment="Top"/>
-                        <PanelContainer Name="InputContainer" StyleClasses="TransparentBorderedWindowPanel" MinHeight="100"
-                                        VerticalAlignment="Stretch" VerticalExpand="True" HorizontalExpand="True">
-                            <TextEdit Name="Input" StyleClasses="PaperLineEdit" Access="Public" />
-                        </PanelContainer>
+                        <BoxContainer Name="InputContainer" Orientation="Vertical" VerticalExpand="True" VerticalAlignment="Stretch">
+                            <PanelContainer StyleClasses="TransparentBorderedWindowPanel" MinHeight="100"
+                                VerticalAlignment="Stretch" VerticalExpand="True" HorizontalExpand="True">
+                                <TextEdit Name="Input" StyleClasses="PaperLineEdit" Access="Public" />
+                            </PanelContainer>
+                            <Label Name="FillStatus" StyleClasses="LabelSecondaryColor"/>
+                        </BoxContainer>
                     </BoxContainer>
                     <paper:StampCollection Name="StampDisplay" VerticalAlignment="Bottom" Margin="6"/>
 

diff --git a/Content.Client/Paper/UI/PaperWindow.xaml.cs b/Content.Client/Paper/UI/PaperWindow.xaml.cs
@@ -48,6 +48,20 @@ public sealed partial class PaperWindow : BaseWindow
 
         public event Action<string>? OnSaved;
 
+        private int _MaxInputLength = -1;
+        public int MaxInputLength
+        {
+            get
+            {
+                return _MaxInputLength;
+            }
+            set
+            {
+                _MaxInputLength = value;
+                UpdateFillState();
+            }
+        }
+
         public PaperWindow()
         {
             IoCManager.InjectDependencies(this);
@@ -63,11 +77,21 @@ public PaperWindow()
             {
                 if (args.Function == EngineKeyFunctions.MultilineTextSubmit)
                 {
-                    RunOnSaved();
-                    args.Handle();
+                    // SaveButton is disabled when we hit the max input limit. Just check
+                    // that flag instead of trying to calculate the input length again
+                    if (!SaveButton.Disabled)
+                    {
+                        RunOnSaved();
+                        args.Handle();
+                    }
                 }
             };
 
+            Input.OnTextChanged += args =>
+            {
+                UpdateFillState();
+            };
+
             SaveButton.OnPressed += _ =>
             {
                 RunOnSaved();
@@ -126,6 +150,7 @@ public void InitVisuals(EntityUid entity, PaperVisualsComponent visuals)
 
             PaperContent.ModulateSelfOverride = visuals.ContentImageModulate;
             WrittenTextLabel.ModulateSelfOverride = visuals.FontAccentColor;
+            FillStatus.ModulateSelfOverride = visuals.FontAccentColor;
 
             var contentImage = visuals.ContentImagePath != null ? _resCache.GetResource<TextureResource>(visuals.ContentImagePath) : null;
             if (contentImage != null)
@@ -296,5 +321,25 @@ private void RunOnSaved()
         {
             OnSaved?.Invoke(Rope.Collapse(Input.TextRope));
         }
+
+        private void UpdateFillState()
+        {
+            if (MaxInputLength != -1)
+            {
+                var inputLength = Input.TextLength;
+
+                FillStatus.Text = Loc.GetString("paper-ui-fill-level",
+                    ("currentLength", inputLength),
+                    ("maxLength", MaxInputLength));
+
+                // Disable the save button if we've gone over the limit
+                SaveButton.Disabled = inputLength > MaxInputLength;
+            }
+            else
+            {
+                FillStatus.Text = "";
+                SaveButton.Disabled = false;
+            }
+        }
     }
 }
diff --git a/Resources/Locale/en-US/paper/paper-component.ftl b/Resources/Locale/en-US/paper/paper-component.ftl
@@ -11,6 +11,9 @@ paper-component-examine-detail-stamped-by = {CAPITALIZE(THE($paper))} {CONJUGATE
 paper-component-action-stamp-paper-other = {CAPITALIZE(THE($user))} stamps {THE($target)} with {THE($stamp)}.
 paper-component-action-stamp-paper-self = You stamp {THE($target)} with {THE($stamp)}.
 
+# Indicator to show how full a paper is
+paper-ui-fill-level = {$currentLength}/{$maxLength}
+
 paper-ui-save-button = Save ({$keybind})
 
 paper-tamper-proof-modified-message = This page was written using tamper-proof ink.