DodoTech-Public/DodoSSH
Public Access
2
0
Fork 0
Code Issues Pull Requests 2 Actions 2 Packages Projects Releases 2 Wiki Activity

Restyle the drawer, pin folders on a host, and say when it was last connected

Browse Source
This commit is contained in:
jaap-jan
2026-08-07 18:12:31 +02:00
parent c3ef4bd8b4
commit 2ba7c14e35
8 changed files with 1392 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/DodoSSH.Client.App/App.axaml
+71 -9
View File
@@ -585,6 +585,30 @@
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
</Style>
<!--
◆ THE ADDRESS FIELD, the one input the host drawer draws with an accent border rather than the
ordinary grey hairline — the mock's own choice, kept, because it is the one field a session cannot be
opened without. Taller than the drawer's other fields too, at 42 rather than the TextBox default.
No drawn caret: the mock blinks one inside the field's own text, but this is a real TextBox with a real
one already, so painting a second would either fight the true caret for the same pixel or lie about
where typing lands. See HostDrawer.axaml's ADDRESS section, on both the pane and the editor.
Declared after the base TextBox rules — including :pointerover and :focus — for the reason this file
states three times already for Button.tab, Border.rowmark and the tiles list: Avalonia has no
specificity, and a rule declared before an exception it overrides does nothing at all. Placed here
rather than beside them so both still read as one un-interrupted block of "what every TextBox looks
like" with the one exception after it, not threaded through the middle.
-->
<Style Selector="TextBox.address">
<Setter Property="Height" Value="42" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
</Style>
<Style Selector="TextBox.address /template/ Border#PART_BorderElement">
<Setter Property="BorderBrush" Value="{StaticResource Accent}" />
<Setter Property="BorderThickness" Value="1.5" />
</Style>
<!--
Lists. The rows in this design are drawn by their own templates and marked as selected with an accent
strip down the left edge, so the theme's rounded blue selection block has to go — it would sit behind
@@ -642,16 +666,18 @@
into a grid: equal columns, and a card that grew a third line of tags is taller than its neighbours
rather than narrower.
◆ 232 IS DERIVED, and the arithmetic is written out because getting it wrong is invisible. The grid's
column at the window's minimum is 1016 less the rail's 190 and the drawer's 304, which is 522. The
◆ 224 IS DERIVED, and the arithmetic is written out because getting it wrong is invisible. The grid's
column at the window's minimum is 1016 less the rail's 190 and the drawer's 320, which is 506. The
scrolling stack inside it takes 16 of margin on each side, and the vertical scrollbar takes its own —
call the usable width 490. A WrapPanel fits floor(490 / (Width + 10)) per row, so two columns needs
Width no more than 235.
call the usable width 474. A WrapPanel fits floor(474 / (Width + 10)) per row, so two columns needs
Width no more than 227.
The first number here was 248, from the same reasoning with the two margins left out. It laid out
cleanly and the layout harness passed it, because the harness asks whether a control is inside the
window and not how many of them fit on a line — so the grid quietly became one column wide at exactly
the size this application guarantees, which is the shape the cards exist to avoid.
the size this application guarantees, which is the shape the cards exist to avoid. The second was 232,
derived the same way against the drawer's own 304; v5 widened the drawer to 320 for the ADDRESS field's
breathing room, which narrowed the budget this number is drawn from and had to move it down in step.
-->
<Style Selector="Border.tile">
<Setter Property="Background" Value="{StaticResource Raised}" />
@@ -659,7 +685,7 @@
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Padding" Value="12,10" />
<Setter Property="Width" Value="232" />
<Setter Property="Width" Value="224" />
<Setter Property="Margin" Value="0,0,10,10" />
</Style>
<Style Selector="ListBoxItem:pointerover Border.tile">
@@ -749,8 +775,9 @@
The hosts drawer is a column of grouped fields rather than a run of labelled controls — address here,
the general facts here, the connection and its credentials here — which is what the design draws and
what a 304-pixel column needs to stay readable: three cards is three things to find, where fourteen
stacked controls is fourteen.
what a 320-pixel column needs to stay readable: three cards is three things to find, where fourteen
stacked controls is fourteen. v5 widened the column from 304 to 320 for the ADDRESS field's own
breathing room, and moved every affected number in this file and its neighbours with it.
Raised on Sidebar, which is the one pairing that works in this column. Panel and Chrome are the same
value as each other and near enough Sidebar to vanish against it. Field no longer reads as a well
@@ -769,8 +796,12 @@
<!--
A card's heading, and deliberately not TextBlock.label. That style is the small tracked-out capitals
this design uses for a *section of a screen* — GROUPS, HOSTS, the vault's categories — and three of
them inside a 304-pixel column would claim the same weight as the screen headings beside it. These are
them inside a 320-pixel column would claim the same weight as the screen headings beside it. These are
captions on a card, so they are sentence case at the body size.
Still what the group editor's two cards use — GROUP, and what its hosts inherit — because that editor
is not the mock this file's ADDRESS/GENERAL/CONNECTION/QUICK ACCESS labels were drawn from and nothing
asked it to match a screen it is not on.
-->
<Style Selector="TextBlock.sectionhead">
<Setter Property="FontSize" Value="13" />
@@ -778,6 +809,24 @@
<Setter Property="Foreground" Value="{StaticResource Text}" />
</Style>
<!--
◆ THE OTHER CARD HEADING, v5's own, and the two are not interchangeable.
TextBlock.sectionhead above is sentence case at the body size — a caption on a card, the same weight
the design's own prose is drawn at. This is the v5 mock's own idiom for the same job, on the one screen
it was drawn for: ADDRESS, GENERAL, CONNECTION and QUICK ACCESS in the host drawer, tracked-out capitals
at a third the size. Both exist because the group editor's cards were not restyled to the v5 mock — see
the remark above — so the drawer now carries a heading in each of the two idioms depending on which
panel is showing, and a single class could not have been both.
-->
<Style Selector="TextBlock.sectionlabel">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="LetterSpacing" Value="1.2" />
<Setter Property="Foreground" Value="{StaticResource TextGhost}" />
</Style>
<!--
◆ A ROW IN THE DETAIL PANE, AND IT IS A BUTTON THAT LOOKS LIKE A FIELD.
@@ -817,6 +866,19 @@
<Setter Property="BorderBrush" Value="{StaticResource BorderHover}" />
</Style>
<!--
The detail pane's own ADDRESS row, matched to TextBox.address above: taller, and bordered in accent
rather than the ordinary hairline even under the pointer — declared after the :pointerover rule for the
reason that class's own remark gives, so it wins in both states rather than only the resting one.
-->
<Style Selector="Button.fieldrow.address">
<Setter Property="MinHeight" Value="42" />
</Style>
<Style Selector="Button.fieldrow.address /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{StaticResource Accent}" />
<Setter Property="BorderThickness" Value="1.5" />
</Style>
<!--
The glyph at the head of such a row. A fixed width so that four rows in a card line their text up, and
the faintest step in the ramp because it is a mark to skip rather than a fact to read: what the row