ui: reskin terminal window shell, navigation tabs, and home page

src/Decentralized/CandleChart.cs

@@ -212,17 +212,20 @@ namespace Decentralized
             }
         }
 
-        /// <summary>把一个币的图放进界面：说明一行、图、图例一行。</summary>
+        /// <summary>把一个币的图放进界面：说明一行、黑框包裹的图、图例一行。</summary>
         public static void Add(CustomUIBuilder b, string key, string asset, double threshold = 0)
         {
             var all = Session.Data.Candles.Of(asset);
-            b.AddLabel(Caption(asset, all));
+            b.AddLabel(Caption(asset, all), "chart_caption_dim");
+            b.BeginPanel(W * Scale + 4f, H * Scale + 4f, TextAnchor.MiddleCenter, 2f, 0f, "chart_bezel");
+            PledgerSkin.Slice(b.Last.image, "ui_hw_bezel", 5);
             b.AddImage(Render(key, all, threshold), W * Scale, H * Scale);
-            b.AddLabel(L.T(threshold > 0 ? "chart.legend.thr" : "chart.legend"));
+            b.End();
+            b.AddLabel(L.T(threshold > 0 ? "chart.legend.thr" : "chart.legend"), "chart_legend_dim");
         }
 
-        /// <summary>带币种切换的图：上面一排币种按钮（选中的加方括号），切换后重画。</summary>
+        /// <summary>带币种切换的图：上面一排币种按钮（选中项带准星角标），切换后重画。</summary>
-        public static void AddPicker(CustomUIBuilder b, string key, string fallback, Action refresh)
+        public static void AddPicker(CustomUIBuilder b, string key, string fallback, Action refresh, ICollection<GameObject> picked = null)
         {
             var list = ChartAssets.Where(a => a != Assets.Ponero || Unlock.BlackUnlocked).ToList();
             if (!Picked.TryGetValue(key, out var cur) || !list.Contains(cur)) cur = fallback;
@@ -230,7 +233,7 @@ namespace Decentralized
             foreach (var a in list)
             {
                 string asset = a;
-                b.AddButton(asset == cur ? "[" + asset + "]" : asset, () => { Picked[key] = asset; refresh(); });
+                PledgerSkin.Pick(b, asset, asset == cur, () => { Picked[key] = asset; refresh(); }, picked);
             }
             b.End();
             Add(b, key, cur);

src/Decentralized/TerminalWindow.cs

@@ -1,7 +1,9 @@
 using System;
+using System.Collections.Generic;
 using System.Globalization;
 using System.Linq;
 using UnityEngine;
+using UnityEngine.UI;
 using Decentralized.Domain;
 
 namespace Decentralized
@@ -13,6 +15,8 @@ namespace Decentralized
     public static class TerminalWindow
     {
         public const string Id = "pd_terminal";
+        private const float WinW = 828f, WinH = 680f, ScreenW = 768f, ScreenH = 578f, Bezel = 6f;
+        private const float LeftW = 420f, RightW = 310f;
         private enum Page { Home, Bank, Poinbase, Web3, Wallets }
 
         private static Page _page = Page.Home;
@@ -22,22 +26,34 @@ namespace Decentralized
         private static string _amount = "";
         private static string _message;
 
+        private static readonly List<GameObject> _picked = new List<GameObject>();
+        private static readonly List<Image> _clear = new List<Image>();
+        private static readonly List<PledgerSkin.RowDef> _rows = new List<PledgerSkin.RowDef>();
+
         public static void Open()
         {
             if (Session.Data == null) return;
             var b = CustomUIManager.Window(Id, L.T("term.title"));
             if (b == null) return;
-            b.SetSize(780, 660).SetDraggable(true).SetCloseOnEscape(true).UseMachineryStyle();
+            _picked.Clear(); _clear.Clear(); _rows.Clear();
-            b.BeginRow();
+            b.SetSize(WinW, WinH).SetDraggable(true).SetCloseOnEscape(true).UseMachineryStyle();
+            // 黑色外边框包裹墨水屏
+            b.BeginPanel(ScreenW + Bezel * 2, ScreenH + Bezel * 2, TextAnchor.MiddleCenter, Bezel + 3f, 0f);
+            var bezel = b.Last.image;
+            b.BeginPanel(ScreenW, ScreenH, TextAnchor.UpperLeft, 12f, 4f);
+            var screen = b.CurrentContainer;
+            var paper = b.Last.image;
+            b.BeginRow(4f, TextAnchor.MiddleLeft);
             foreach (Page p in Enum.GetValues(typeof(Page)))
             {
                 var page = p;
                 string name = L.T("tab." + p.ToString().ToLowerInvariant());
-                b.AddButton(page == _page ? $"[{name}]" : name, () => { _page = page; _message = null; _edit = null; Open(); });
+                PledgerSkin.Pick(b, name, page == _page, () => { _page = page; _message = null; _edit = null; Open(); }, _picked);
             }
             b.End();
             b.AddSeparator();
-            b.BeginScroll(540);
+            b.BeginScroll(ScreenH - 52f);
+            _clear.Add(b.Last.image);
             switch (_page)
             {
                 case Page.Home: HomePage(b); break;
@@ -48,8 +64,11 @@ namespace Decentralized
                 default: break;
             }
             b.End();
-            if (!string.IsNullOrEmpty(_message)) b.AddLabel(_message);
+            if (!string.IsNullOrEmpty(_message)) b.AddLabel(_message, "term_note");
-            b.Show();
+            b.End();
+            b.End();
+            var win = b.Show();
+            Log.Guard("交易终端外观", () => PledgerSkin.Apply(win, screen, bezel, paper, _picked, _clear, _rows));
         }
 
         private static void Go(Page p) { _page = p; _message = null; _edit = null; Open(); }
@@ -63,11 +82,14 @@ namespace Decentralized
 
         private static void Entry(CustomUIBuilder b, string icon, string name, string line1, string line2, Page target)
         {
-            b.BeginPanel(220f, 250f, TextAnchor.UpperCenter, 10f, 6f);
+            b.BeginPanel(230f, 250f, TextAnchor.UpperCenter, 10f, 6f);
+            var cardImg = b.Last.image;
+            cardImg.sprite = MachineryStyle.White;
+            cardImg.color = PledgerSkin.RowNormal;
             b.AddImage(ModInfo.Id + ":" + icon, 96f, 96f);
             b.AddHeader(name);
             b.AddLabel(line1);
-            if (line2 != null) b.AddLabel(line2);
+            if (line2 != null) b.AddLabel(line2, "entry_l2_dim");
             b.AddFlexibleSpace();
             b.AddButton(L.T("home.enter"), () => Go(target));
             b.End();
@@ -87,40 +109,61 @@ namespace Decentralized
             b.AddSpace(8f);
             b.AddSeparator();
             var r = d.LastNight;
-            b.AddLabel(r == null ? L.T("report.none") : L.T("home.lastnight", r.Day, Fmt.Num(r.Mined), r.PoweredRigs, r.Rigs));
+            b.AddLabel(r == null ? L.T("report.none") : L.T("home.lastnight", r.Day, Fmt.Num(r.Mined), r.PoweredRigs, r.Rigs), "report_dim");
         }
 
-        private const float LeftW = 430f, RightW = 300f;
+        private static void Cell(CustomUIBuilder b, float w, string text, bool header = false, TextAnchor align = TextAnchor.MiddleLeft)
-
-        private static void Cell(CustomUIBuilder b, float w, string text, bool header = false)
         {
-            b.BeginPanel(w, 30f, TextAnchor.MiddleLeft, 6f, 0f);
+            b.BeginPanel(w, 26f, align, 0f, 0f);
+            _clear.Add(b.Last.image);
             b.AddLabel(header ? "<b>" + text + "</b>" : text);
             b.End();
         }
 
-        private static void TableRow(CustomUIBuilder b, float[] widths, params string[] cells)
+        private static void TableRow(CustomUIBuilder b, float totalW, float[] widths, TextAnchor[] aligns, string[] cells, bool selected = false, Action onClick = null)
         {
-            b.BeginRow(2f);
+            b.BeginPanel(totalW, 28f, TextAnchor.MiddleLeft, 4f, 0f);
-            for (int i = 0; i < widths.Length; i++) Cell(b, widths[i], i < cells.Length ? cells[i] : "");
+            _rows.Add(new PledgerSkin.RowDef { Root = b.Last.root, Image = b.Last.image, Selected = selected, OnClick = onClick });
+            b.BeginRow(0f, TextAnchor.MiddleLeft);
+            for (int i = 0; i < widths.Length; i++)
+            {
+                var align = (aligns != null && i < aligns.Length) ? aligns[i] : (i == 0 ? TextAnchor.MiddleLeft : TextAnchor.MiddleRight);
+                Cell(b, widths[i], i < cells.Length ? cells[i] : "", false, align);
+            }
+            b.End();
             b.End();
         }
 
-        private static void TableHeader(CustomUIBuilder b, float[] widths, params string[] cells)
+        private static void TableRow(CustomUIBuilder b, float[] widths, params string[] cells) =>
+            TableRow(b, widths.Sum() + 8f, widths, null, cells, false, null);
+
+        private static void TableHeader(CustomUIBuilder b, float totalW, float[] widths, TextAnchor[] aligns, params string[] cells)
         {
-            b.BeginRow(2f);
+            b.BeginPanel(totalW, 26f, TextAnchor.MiddleLeft, 4f, 0f);
-            for (int i = 0; i < widths.Length; i++) Cell(b, widths[i], cells[i], true);
+            _clear.Add(b.Last.image);
+            b.BeginRow(0f, TextAnchor.MiddleLeft);
+            for (int i = 0; i < widths.Length; i++)
+            {
+                var align = (aligns != null && i < aligns.Length) ? aligns[i] : (i == 0 ? TextAnchor.MiddleLeft : TextAnchor.MiddleRight);
+                Cell(b, widths[i], i < cells.Length ? cells[i] : "", true, align);
+            }
+            b.End();
             b.End();
         }
 
+        private static void TableHeader(CustomUIBuilder b, float[] widths, params string[] cells) =>
+            TableHeader(b, widths.Sum() + 8f, widths, null, cells);
+
         /// <summary>左右分栏：左边是账户与持仓表格，右边是操作区。</summary>
         private static void Columns(CustomUIBuilder b, Action<CustomUIBuilder> left, Action<CustomUIBuilder> right)
         {
             b.BeginRow(10f);
-            b.BeginPanel(LeftW, -1f, TextAnchor.UpperLeft, 8f, 4f);
+            b.BeginPanel(LeftW, -1f, TextAnchor.UpperLeft, 4f, 4f);
+            _clear.Add(b.Last.image);
             left(b);
             b.End();
-            b.BeginPanel(RightW, -1f, TextAnchor.UpperLeft, 8f, 6f);
+            b.BeginPanel(RightW, -1f, TextAnchor.UpperLeft, 4f, 6f);
+            _clear.Add(b.Last.image);
             right(b);
             b.End();
             b.End();
@@ -129,7 +172,8 @@ namespace Decentralized
         private static void AmountRow(CustomUIBuilder b)
         {
             b.AddLabel(L.T("trade.amount"));
-            b.BeginPanel(RightW - 30f, -1f, TextAnchor.MiddleCenter, 0f, 0f);   // 给输入框一个固定宽度，容得下大额数字
+            b.BeginPanel(RightW - 30f, -1f, TextAnchor.MiddleCenter, 0f, 0f);
+            _clear.Add(b.Last.image);
             b.AddInput("0", _amount, s => _amount = s, "amount", s => _amount = s);
             b.End();
         }