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

Give the desktop the second design too, and the window the size it now needs

Browse Source 
The desktop v2 design is the other half of the one the phone took last commit, and this is its chrome: a
190-pixel labelled sidebar where the 54-pixel icon rail was, a titlebar with the search box centred in it,
and session tabs drawn as pills. The palette was already here — it is shared, and moved when the phone's
did — so what this changes is shape rather than colour.

**The window's minimum grew, and by exactly what v2 added.** The sidebar is 136 wider and the chrome 14
taller, so 880x560 became 1016x574. That is not a round number somebody liked: it leaves every screen the
same 826x464 it was designed against, which is the arithmetic the layout suite is built on. Four of the
tables stop fitting at 690 wide, so widening the sidebar and leaving the window alone would have broken
them somewhere no test was looking. LayoutHarness carries the new constants and the suite still passes at
the minimum, which is the whole reason it exists.

The rail's five-character abbreviations are gone with the width that caused them — PINS and SNIPS are Pins
and Snippets again — and each row gains a glyph and a count. A count is drawn only where one is real, so
SFTP, Logs and Preferences show nothing rather than a zero: a transfer queue's depth is not how many files
a screen holds, and a log has no total until it is read. The count beside Pins is the vault's own, not the
Pins screen's VisiblePins, which is the filtered list and would have made the sidebar count whatever
somebody had just typed into a filter box on another screen. Teams has no count for a related reason: they
are read from the server when that screen is opened rather than on unlock, so a number there would read 0
until somebody had already been to look.

One colour moved with it, finishing what the repalette started: the live-session summaries on the unlock and
sign-out cards were Info, so the two heads disagreed about a fact the phone paints green. They match again.

**Buckets became a destination rather than a mode**, which is what the design draws and what the phone
already does. The HOST / BUCKET pair inside the files screen is gone; ShellScreen.Buckets draws the same
TransfersScreen with the other picker, and the sidebar entry is what sets it. That also settles an old
disagreement rather than merely moving it: TotalItemCount is keys plus passwords and excludes buckets, so
the number beside the keychain used to disagree with the list under it, and now counts what that screen
shows.

There is one session behind both file destinations, so asking for the other kind while something is open is
refused rather than obeyed — and refusing means staying put. An earlier turn of this had it move anyway and
only decline to switch the picker, which put the S3 entry in the sidebar over a screen still listing an
SFTP host: two pieces of chrome disagreeing about where you are, which is worse than the navigation simply
not happening. The message that says so goes to Transfers.Status, which turned out to be drawn in the same
grid cell as the connected chip — survivable while it was mostly read before connecting, and not once a
refusal reports itself there. It has its own column now.

The design has nine entries' worth of screens and draws five. Pins, Teams, Import and Preferences are
built, working screens, so they keep their entries — the sidebar is labelled now and has the room, and
dropping an entry would have stranded a screen rather than simplified anything. The Team vault card the
design pins to the foot is not drawn: it is a second route to a screen already in the list, carrying a seat
count nothing here produces.

**The status bar survives the design that deletes it**, cut down to one thing. Two of the three facts it
carried moved into the titlebar with v2 — the sync word is beside its dot and the shortcut hint is inside
the box that uses it — so those are gone from it rather than printed twice. The third is Vault.Status, the
only channel this application has for saying a save failed or a merge picked a winner. The design is a
mock-up of an afternoon that goes well and has nowhere to put a sentence like that; dropping the bar would
have meant dropping the sentence or repeating it on nine screens.

What v2 draws and this does not is in docs/design-import-gaps.md, and it is the same list as the phone's
for the same reasons: the forwarding screen and both its chips, the host detail's fingerprint, tags and
last-session cards, the keychain's rotate button, the logs' FOLLOW pill and severity filters, and the
session footer's latency. The terminal is not inset behind a rounded frame either — it is a native child
window that composites above everything Avalonia paints, so the frame would clip nothing, which is the same
answer the phone gave.

**The light theme is not built.** Its accent is #6D5AE6, a different hue rather than a tint of the dark
one, so it needs every colour doubled, a variant to switch on, the renderer's own page switching with it,
and contrast checked twice. That is a piece of work rather than a setting, and it is separable from the
layout — which is why this commit is the layout.

The screens themselves are restyled through the shared vocabulary rather than rebuilt: corner radii,
chips, cards and the accent's ink, all in App.axaml, so every screen moves at once. Their layouts are left
alone deliberately. The design draws read-only detail panes and these screens carry the editors and forms
it has no equivalent of, so replacing a layout with the mock-up's would have lost the half that is
actually used.

Verified by the whole suite: 1309 tests over nineteen projects, none failing, including the 68 layout cases
that stand up real Avalonia and measure every screen at the new minimum. Both heads build. Not run on a
machine with a display — see docs/manual-checks.md for what wants looking at.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AZE3u99BNt6LzgTC5jhbz2
This commit is contained in:
jaap-jan
2026-08-02 19:29:21 +02:00
co-authored by Claude Opus 5
parent 5593f337b6
commit 3627021420
17 changed files with 381 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/DodoSSH.Client.App/App.axaml
+78 -37
View File
@@ -48,7 +48,7 @@
<Setter Property="Background" Value="{StaticResource Chrome}" />
<Setter Property="BorderBrush" Value="{StaticResource Border}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Padding" Value="24" />
<Setter Property="MaxWidth" Value="520" />
<Setter Property="VerticalAlignment" Value="Center" />
@@ -87,7 +87,7 @@
<Style Selector="Border.chip">
<Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="3" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="Padding" Value="6,2" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
@@ -101,8 +101,12 @@
<Style Selector="Border.chip.accent">
<Setter Property="BorderBrush" Value="{StaticResource AccentSoft}" />
</Style>
<!--
AccentText rather than Accent, which is the v2 split: the fill colour is too saturated to read as
small text on a dark surface, and a chip is small text. See the remark on the pair in Palette.axaml.
-->
<Style Selector="Border.chip.accent > TextBlock">
<Setter Property="Foreground" Value="{StaticResource Accent}" />
<Setter Property="Foreground" Value="{StaticResource AccentText}" />
</Style>
<Style Selector="Border.chip.warn">
<Setter Property="BorderBrush" Value="{StaticResource WarnSoft}" />
@@ -124,7 +128,7 @@
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="3" />
<Setter Property="CornerRadius" Value="7" />
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
</Style>
<Style Selector="Button.ghost:pointerover /template/ ContentPresenter#PART_ContentPresenter">
@@ -141,13 +145,13 @@
<Style Selector="Button.accent /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{StaticResource Accent}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="3" />
<Setter Property="Foreground" Value="{StaticResource Canvas}" />
<Setter Property="CornerRadius" Value="7" />
<Setter Property="Foreground" Value="{StaticResource AccentInk}" />
</Style>
<Style Selector="Button.accent:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{StaticResource Accent}" />
<Setter Property="Opacity" Value="0.85" />
<Setter Property="Foreground" Value="{StaticResource Canvas}" />
<Setter Property="Foreground" Value="{StaticResource AccentInk}" />
</Style>
<!--
A disabled accent button keeps its shape and loses its fill. Fluent's disabled state greys the
@@ -164,7 +168,7 @@
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{StaticResource DangerSoft}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="3" />
<Setter Property="CornerRadius" Value="7" />
<Setter Property="Foreground" Value="{StaticResource Danger}" />
</Style>
<Style Selector="Button.danger:pointerover /template/ ContentPresenter#PART_ContentPresenter">
@@ -242,71 +246,108 @@
behind it, which is the design's whole idiom for "you are here" — the same two marks a selected list
row carries, so the window has one vocabulary for selection rather than one per control.
-->
<!--
A destination in the sidebar. v2 turns these from 54-pixel stacked labels into 32-pixel rows with a
glyph, a word and a count, and the active one becomes a filled rounded row rather than a label with an
accent bar down its left edge. The bar is gone because a filled row at this width already reads as
chosen, and the bar was carrying that on its own when there was no room for a fill.
-->
<Style Selector="Button.nav">
<Setter Property="Padding" Value="0,15" />
<Setter Property="Height" Value="32" />
<Setter Property="Padding" Value="10,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="9" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="LetterSpacing" Value="1" />
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
</Style>
<Style Selector="Button.nav /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="2,0,0,0" />
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="8" />
</Style>
<Style Selector="Button.nav:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{StaticResource Text}" />
<Setter Property="Background" Value="{StaticResource Hover}" />
</Style>
<Style Selector="Button.nav.active /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{StaticResource Text}" />
<Setter Property="Background" Value="{StaticResource AccentWash}" />
<Setter Property="BorderBrush" Value="{StaticResource Accent}" />
<Setter Property="Foreground" Value="{StaticResource AccentText}" />
<Setter Property="Background" Value="{StaticResource Active}" />
</Style>
<!--
A terminal tab. The active one is marked along its top edge rather than its left, because the strip
runs horizontally and a left bar on a row of tabs reads as a divider between them.
The three parts of a sidebar row. Separate classes rather than inline setters because nine rows draw
them and the day one of the three moves is the day eight of them would not have.
The glyph and the label inherit the row's own foreground, so they light with it; the count does not,
because a number that lit with its row would compete with the word beside it for the same emphasis.
-->
<Style Selector="TextBlock.navicon">
<Setter Property="FontSize" Value="13" />
<Setter Property="Width" Value="20" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="TextBlock.navlabel">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
</Style>
<Style Selector="TextBlock.navcount">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="10" />
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<!--
A terminal tab, and since v2 a pill rather than a filing-cabinet tab: 30 tall inside a 42 strip, its
own rounded outline, and the active one filled instead of marked along an edge. The edge mark is gone
because a pill has no edge to share with its neighbour — the gap between two of them is the divider
the old top-and-right border was standing in for.
-->
<Style Selector="Button.tab">
<!-- Less on the right than the left: the close box lives inside the tab and brings its own margin. -->
<Setter Property="Padding" Value="12,0,7,0" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontSize" Value="10.5" />
<Setter Property="Padding" Value="12,0,8,0" />
<Setter Property="Height" Value="30" />
<Setter Property="Margin" Value="0,0,6,0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="8" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Medium" />
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
</Style>
<!--
The button that opens a connection. A tab in every respect but the marks a tab carries: no active
state, because it is never the thing showing, and no right border, because it is not separating
itself from anything.
state, because it is never the thing showing, and no outline, because it is not one of the things
being chosen between.
-->
<Style Selector="Button.tab.plus">
<Setter Property="Padding" Value="0" />
<Setter Property="Width" Value="28" />
<Setter Property="Height" Value="28" />
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
</Style>
<Style Selector="Button.tab.plus /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderThickness" Value="0,2,0,0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="8" />
</Style>
<Style Selector="Button.tab.plus:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{StaticResource Text}" />
<Setter Property="Background" Value="{StaticResource Raised}" />
<Setter Property="Background" Value="{StaticResource Hover}" />
</Style>
<Style Selector="Button.tab /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
<Setter Property="BorderBrush" Value="{StaticResource BorderSubtle}" />
<Setter Property="BorderThickness" Value="0,2,1,0" />
<Setter Property="Background" Value="{StaticResource Panel}" />
<Setter Property="BorderBrush" Value="{StaticResource Border}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="8" />
</Style>
<Style Selector="Button.tab.active /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{StaticResource Canvas}" />
<Setter Property="Background" Value="{StaticResource Active}" />
<Setter Property="Foreground" Value="{StaticResource Text}" />
<Setter Property="BorderBrush" Value="{StaticResource Accent}" />
<Setter Property="BorderThickness" Value="0,2,0,0" />
<Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
</Style>
<!--
src/DodoSSH.Client.App/Views/MainWindow.axaml
+21 -3
View File
@@ -8,16 +8,23 @@
Title="DodoSSH"
Width="1180"
Height="760"
MinWidth="880"
MinHeight="560"
MinWidth="1016"
MinHeight="574"
Background="{StaticResource Canvas}"
SystemDecorations="BorderOnly"
Focusable="True">
<!--
The shell window: a titlebar it draws itself, a nav rail, a tab strip, one surface at a time, and a
The shell window: a titlebar it draws itself, a sidebar, a tab strip, one surface at a time, and a
status bar.
THE MINIMUM GREW, and it grew by exactly what v2 added rather than by a round number somebody liked.
The sidebar went from 54 pixels to 190 and the chrome from 72 tall to 86, so 880x560 became 1016x574 —
which leaves every screen the same 826x464 it was designed against. That is the whole point of moving
it: the layout suite's premise is that everything fits at the minimum, and four of the tables stop
fitting at 690 wide. Widening the sidebar without widening the window would have quietly broken them
somewhere nobody was looking.
Windows is asked for a resize border and nothing else, so TitleBar does the dragging, the maximising and
the closing. That is a real cost, and the reason it is paid is that a stock grey system bar above a
near-black application is the one part of the window that would look borrowed.
@@ -105,6 +112,17 @@
<views:TransfersScreen DataContext="{Binding Transfers}" />
</Panel>
<!-- ============ S3 ============ -->
<!--
The same screen as FILES above, over the same view model, because an object store and an
SFTP host are both an IRemoteFileStore and everything below the picker was written once.
What differs is which picker is offered, and that is decided by the destination rather than
by a toggle inside the screen — see ShowFiles, and the sidebar entry that calls it.
-->
<Panel IsVisible="{Binding IsBucketsScreen}">
<views:TransfersScreen DataContext="{Binding Transfers}" />
</Panel>
<!-- ============ KEYCHAIN ============ -->
<!--
Wrapped rather than bound directly, for the reason the vault column always was: this
src/DodoSSH.Client.App/Views/NavRail.axaml
+131 -33
View File
@@ -5,13 +5,28 @@
x:DataType="vm:MainWindowViewModel">
<!--
Six destinations down the left edge.
The window's destinations, down the left edge.
One of them — TEAM — reaches a screen that says it is not built. It is in the rail anyway rather than
dropped, and the reasoning is in ShellScreen: the milestones are public, the screen behind it says
plainly what is missing, and a rail that quietly had four entries would make sharing look like a change
of product rather than the next milestone. It is recorded in docs/design-import-gaps.md. FILES was the
other one until M2 built it.
Still called NavRail although v2 makes it 190 pixels wide and gives every entry a word: the type is
named in MainWindow and in the layout suite, and "the list of places this window goes" is what it was
called when it was 54 pixels and is what it still is. The width is the thing that changed, not the job.
── v2 ────────────────────────────────────────────────────────────────────────────────────────────────
Three things the extra 136 pixels buy, and they are why the design widened it rather than a matter of
taste. The five-character abbreviations are gone — PINS and SNIPS were a width constraint and are now
Pins and Snippets. Each entry carries a glyph, so the list can be scanned by shape as well as read. And
each carries a count, which is the one genuinely new fact: how many hosts, how many keys, how many pins
is a question you would otherwise have to open the screen to answer.
A count is drawn only where one is real. SFTP, Logs and Preferences have none — a transfer queue's depth
is not "how many files this screen holds", a log has no total until it is read, and preferences are not
counted — so those three show nothing rather than a zero. The design draws a number on every row; a zero
beside Logs would be a fact this application never computed.
One of the destinations — TEAM — reaches a screen that says it is not built. It is in the list anyway
rather than dropped, and the reasoning is in ShellScreen: the milestones are public, the screen behind it
says plainly what is missing, and a list that quietly had fewer entries would make sharing look like a
change of product rather than the next milestone. FILES was the other one until M2 built it.
Buttons rather than a TabStrip or a ListBox, for the same reason the vault's category rail is: all three
of those hold the selection themselves, so a click moves the highlight before the shell can decide
@@ -19,57 +34,140 @@
Lit from IsXShowing and not from IsXScreen, which are different questions now that the tab strip spans
every screen. A terminal opened from here leaves Screen on Hosts — deliberately, so closing the tab comes
back — and a rail entry lit while a terminal filled the window would be pointing at a screen that is not
back — and an entry lit while a terminal filled the window would be pointing at a screen that is not
showing. So nothing here is lit at all while a terminal is up: the selected tab already carries that
mark, in the strip, and two "you are here" marks is one too many.
The design pins a "Team vault" card to the foot of this list, beside a Team entry in the list itself.
Two routes to one screen, one of them carrying a seat count nothing here can produce, so what sits at
the foot is Preferences — which is where it already was, and which is the one entry that is about the
machine rather than about the keychain.
-->
<Border Width="54" Background="{StaticResource Chrome}"
<Border Width="190" Background="{StaticResource Sidebar}"
BorderBrush="{StaticResource Border}" BorderThickness="0,0,1,0">
<DockPanel LastChildFill="False">
<StackPanel DockPanel.Dock="Top" Margin="0,8,0,0">
<Button Classes="flat nav" Content="HOSTS" Classes.active="{Binding IsHostsShowing}"
<StackPanel DockPanel.Dock="Top" Margin="8,10,8,0" Spacing="2">
<Button Classes="flat nav" Classes.active="{Binding IsHostsShowing}"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Hosts}"
ToolTip.Tip="Your hosts, and what is known about the one you have selected" />
<Button Classes="flat nav" Content="FILES" Classes.active="{Binding IsTransfersShowing}"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Transfers}"
ToolTip.Tip="Move files to and from a host over SFTP" />
<Button Classes="flat nav" Content="KEYS" Classes.active="{Binding IsVaultShowing}"
ToolTip.Tip="Your hosts, and what is known about the one you have selected">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="▤" />
<TextBlock Grid.Column="1" Classes="navlabel" Text="Hosts" />
<TextBlock Grid.Column="2" Classes="navcount" Text="{Binding Vault.Hosts.Count}" />
</Grid>
</Button>
<Button Classes="flat nav" Classes.active="{Binding IsTransfersShowing}"
Command="{Binding ShowFilesCommand}"
CommandParameter="{x:Static vm:RemoteKind.Host}"
ToolTip.Tip="Move files to and from a host over SFTP">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="⇅" />
<TextBlock Grid.Column="1" Classes="navlabel" Text="SFTP" />
</Grid>
</Button>
<!--
Buckets are their own destination now, as they are on the phone, rather than a toggle inside the
files screen. Same screen behind both — an object store and an SFTP host are both an
IRemoteFileStore — and the entry chosen is what decides which picker is offered. See ShowFiles.
-->
<Button Classes="flat nav" Classes.active="{Binding IsBucketsShowing}"
Command="{Binding ShowFilesCommand}"
CommandParameter="{x:Static vm:RemoteKind.Bucket}"
ToolTip.Tip="Objects in an S3-compatible bucket from your keychain">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="◳" />
<TextBlock Grid.Column="1" Classes="navlabel" Text="S3" />
<TextBlock Grid.Column="2" Classes="navcount" Text="{Binding Vault.ObjectStores.Count}" />
</Grid>
</Button>
<!--
TotalItemCount is keys plus passwords and deliberately excludes buckets, which used to disagree
with the list under it. It no longer does: buckets have their own entry above, so this number and
this screen now count the same things.
-->
<Button Classes="flat nav" Classes.active="{Binding IsVaultShowing}"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Vault}"
ToolTip.Tip="Your keychain: SSH keys, stored passwords, and the host keys you have approved" />
<!--
PINS, not HOST KEYS. The rail is 54 pixels wide at mono FontSize 9, which is five characters —
and "pins" is what this codebase calls them everywhere else anyway.
-->
<Button Classes="flat nav" Content="PINS" Classes.active="{Binding IsKnownHostsShowing}"
ToolTip.Tip="Your keychain: SSH keys and stored passwords">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="⚿" />
<TextBlock Grid.Column="1" Classes="navlabel" Text="Keychain" />
<TextBlock Grid.Column="2" Classes="navcount" Text="{Binding Vault.TotalItemCount}" />
</Grid>
</Button>
<Button Classes="flat nav" Classes.active="{Binding IsKnownHostsShowing}"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.KnownHosts}"
ToolTip.Tip="Host keys you have approved, and how to withdraw one" />
<!-- SNIPS, for the same five-character reason as PINS above. -->
<Button Classes="flat nav" Content="SNIPS" Classes.active="{Binding IsSnippetsShowing}"
ToolTip.Tip="Host keys you have approved, and how to withdraw one">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="◈" />
<TextBlock Grid.Column="1" Classes="navlabel" Text="Pins" />
<!--
The vault's pins, not the screen's VisiblePins — that one is the filtered list, so a sidebar
bound to it would count what the Pins screen's own filter box happens to match and would
change as somebody typed in it. Every other count here is a total; this one has to be too.
-->
<TextBlock Grid.Column="2" Classes="navcount"
Text="{Binding Vault.KnownHostPins.Count}" />
</Grid>
</Button>
<Button Classes="flat nav" Classes.active="{Binding IsSnippetsShowing}"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Snippets}"
ToolTip.Tip="Commands you have saved, and how to put one into a terminal" />
<!-- LOGS, four characters, so it needs no abbreviating at all. -->
<Button Classes="flat nav" Content="LOGS" Classes.active="{Binding IsLogsShowing}"
ToolTip.Tip="Commands you have saved, and how to put one into a terminal">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="❯" />
<TextBlock Grid.Column="1" Classes="navlabel" Text="Snippets" />
<TextBlock Grid.Column="2" Classes="navcount" Text="{Binding Vault.Snippets.Count}" />
</Grid>
</Button>
<Button Classes="flat nav" Classes.active="{Binding IsLogsShowing}"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Logs}"
ToolTip.Tip="What has been connected to, and what has been changed in this keychain" />
<Button Classes="flat nav" Content="TEAM" Classes.active="{Binding IsTeamShowing}"
ToolTip.Tip="What has been connected to, and what has been changed in this keychain">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="≡" />
<TextBlock Grid.Column="1" Classes="navlabel" Text="Logs" />
</Grid>
</Button>
<Button Classes="flat nav" Classes.active="{Binding IsTeamShowing}"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Team}"
ToolTip.Tip="Shared keychains and the people in them. Not built yet — see the screen for what is missing." />
ToolTip.Tip="Shared keychains and the people in them">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="◎" />
<!--
No count. Teams are read from the server when the screen is opened, not on unlock, so this
would read 0 until somebody had already been there — which is the one number on this list
that would be a statement rather than a blank.
-->
<TextBlock Grid.Column="1" Classes="navlabel" Text="Teams" />
</Grid>
</Button>
</StackPanel>
<Button DockPanel.Dock="Bottom" Classes="flat nav" Content="PREFS"
<Button DockPanel.Dock="Bottom" Classes="flat nav" Margin="8,0,8,10"
Classes.active="{Binding IsPreferencesShowing}"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Preferences}"
ToolTip.Tip="Preferences, and this machine's device key" />
ToolTip.Tip="Preferences, and this machine's device key">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="navicon" Text="⚙" />
<TextBlock Grid.Column="1" Classes="navlabel" Text="Preferences" />
</Grid>
</Button>
</DockPanel>
</Border>
src/DodoSSH.Client.App/Views/SignOutCard.axaml
+3 -1
View File
@@ -34,7 +34,9 @@
BorderThickness="1" CornerRadius="4" Padding="10,8"
IsVisible="{Binding HasLiveSessions, FallbackValue=False}">
<StackPanel Spacing="4">
<TextBlock Text="{Binding LiveSessionSummary}" Foreground="{StaticResource Info}"
<!-- Live, not Info: this counts shells that are still running, which is the fact the host list,
the tab strip and the phone's own lock screen all paint green. -->
<TextBlock Text="{Binding LiveSessionSummary}" Foreground="{StaticResource Live}"
FontWeight="SemiBold" TextWrapping="Wrap" />
<TextBlock Classes="hint" FontSize="11" TextWrapping="Wrap"
Text="Signing out does not close them, exactly as locking does not. Quit DodoSSH to end them." />
src/DodoSSH.Client.App/Views/StatusBar.axaml
+11 -9
View File
@@ -15,11 +15,21 @@
The last message is the load-bearing one, and it is why this bar is worth having at all: the vault's
status line used to be a cramped label in the account bar, and everything the application has to say
about a save, a sync, a refusal or a conflict goes through it.
── v2 ────────────────────────────────────────────────────────────────────────────────────────────────
The design has no status bar. Two of the three things this one carried moved into the titlebar with it —
the sync word is up there beside its dot, and the shortcut hint is inside the search box that uses it —
so those two are gone from here rather than printed twice.
The third did not move, and is why this bar survives the design that deletes it. Vault.Status is the one
channel this application has for saying that a save failed, that a sync was refused, that a merge picked
a winner. The design is a mock-up of a working afternoon and has nowhere for a sentence like that to go;
dropping the bar would have meant dropping the sentence, or repeating it on six screens.
-->
<Border Height="24" Background="{StaticResource Chrome}"
BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0">
<Grid ColumnDefinitions="Auto,*,Auto,Auto" Margin="12,0">
<Grid ColumnDefinitions="Auto,*" Margin="14,0">
<!-- What is connected, and where. Absent rather than empty when nothing is. -->
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="5" VerticalAlignment="Center"
@@ -37,14 +47,6 @@
Foreground="{StaticResource TextDim}" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis" />
<TextBlock Grid.Column="2" Classes="mono" Text="{Binding SyncLabel}" FontSize="9.5"
Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" Margin="14,0,0,0"
IsVisible="{Binding IsUnlocked}" />
<TextBlock Grid.Column="3" Classes="mono" Text="CTRL K SEARCH" FontSize="9.5"
Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" Margin="14,0,0,0"
IsVisible="{Binding IsUnlocked}" />
</Grid>
</Border>
src/DodoSSH.Client.App/Views/TerminalTabs.axaml
+9 -1
View File
@@ -23,9 +23,17 @@
An ItemsControl of buttons rather than a TabStrip, because the selection lives on the shell — a tab
outlives the vault that opened it — and a strip that owned its own selection would be a second copy of
that state.
── v2 ────────────────────────────────────────────────────────────────────────────────────────────────
Tabs became pills: taller, rounded, each with its own outline, on the sidebar's surface rather than the
chrome's. The design also puts a "Hosts" pill at the head of this strip and hides the sidebar while a
session is showing, so that pill is the only way back. This window keeps the sidebar up instead — it is
beside both surfaces rather than inside one — so the way back from a terminal is every destination at
once rather than a single pill leading to one of them. That makes the design's pill redundant, and a
redundant control on a strip this narrow is one the user has to rule out before finding the tabs.
-->
<Border Height="34" Background="{StaticResource Chrome}"
<Border Height="42" Background="{StaticResource Sidebar}"
BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1">
<!--
src/DodoSSH.Client.App/Views/TitleBar.axaml
+30 -15
View File
@@ -17,20 +17,28 @@
overlapping it would be painted underneath and its close button would not be clickable.
-->
<Border Height="38" Background="{StaticResource Chrome}"
<Border Height="44" Background="{StaticResource Chrome}"
BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1"
PointerPressed="OnDrag" DoubleTapped="OnToggleMaximised">
<Grid ColumnDefinitions="Auto,*,Auto" Margin="12,0,10,0">
<Grid ColumnDefinitions="Auto,*,Auto" Margin="14,0,10,0">
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
<Border Width="20" Height="20" BorderBrush="{StaticResource Accent}" BorderThickness="1">
<TextBlock Classes="mono" Text="&gt;_" FontSize="9" FontWeight="SemiBold"
Foreground="{StaticResource Accent}"
<!--
Filled rather than outlined since v2, and rounded. The same mark the phone's header draws and the
same one the launcher icon carries, so the three cannot drift.
-->
<Border Width="20" Height="20" CornerRadius="6" Background="{StaticResource Accent}">
<TextBlock Classes="mono" Text="&gt;_" FontSize="9" FontWeight="Bold"
Foreground="{StaticResource AccentInk}"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<TextBlock Classes="mono" Text="DodoSSH" FontSize="12" FontWeight="SemiBold"
LetterSpacing="0.5" Foreground="{StaticResource Text}" VerticalAlignment="Center" />
<!--
The product's name is the one string in this bar that is not machine-shaped, so v2 sets it in the
sans face while the address, the account and the fingerprint beside it stay monospaced.
-->
<TextBlock Text="DodoSSH" FontSize="13" FontWeight="SemiBold"
Foreground="{StaticResource Text}" VerticalAlignment="Center" />
<!--
The design puts an organisation here — "dodotech / platform". There are no organisations: the
server has team tables and no endpoint that reads them, so the only name this application can
@@ -50,18 +58,25 @@
command", and there is no snippet or saved-command item type for it to run. Clicking it is the same
as Ctrl+K, which is what the window binds; the design says ⌘K, and this is a Windows build.
-->
<Button Grid.Column="1" Classes="flat" MaxWidth="420" Height="24" Margin="16,0"
HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
<Button Grid.Column="1" Classes="flat" MaxWidth="380" Height="28" Margin="16,0"
HorizontalAlignment="Center" HorizontalContentAlignment="Stretch"
Command="{Binding ToggleSearchCommand}" IsEnabled="{Binding IsUnlocked}">
<Border Background="{StaticResource Field}" BorderBrush="{StaticResource Border}"
BorderThickness="1" CornerRadius="4" Padding="8,0">
<Border Background="{StaticResource Field}" BorderBrush="{StaticResource BorderMid}"
BorderThickness="1" CornerRadius="8" Padding="10,0" Width="380">
<Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" Classes="mono" Text="&gt;" FontSize="10"
<TextBlock Grid.Column="0" Text="⌕" FontSize="12"
Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Classes="mono" Text="search hosts" FontSize="10.5" Margin="8,0"
<!--
"Search or connect…", which is what it does: the palette connects on Enter. Not the design's
wider promise of running a command — a snippet is inserted from its own screen, and a box that
offered to run one would be offering something this palette does not do.
-->
<TextBlock Grid.Column="1" Text="Search or connect…" FontSize="12" Margin="8,0"
Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />
<Border Grid.Column="2" Classes="chip" Padding="5,1">
<TextBlock Text="CTRL K" FontSize="9" Foreground="{StaticResource TextFaint}" />
<Border Grid.Column="2" BorderBrush="{StaticResource BorderMid}" BorderThickness="1"
CornerRadius="4" Padding="5,1" VerticalAlignment="Center">
<TextBlock Classes="mono" Text="CTRL K" FontSize="9"
Foreground="{StaticResource TextFaint}" />
</Border>
</Grid>
</Border>
src/DodoSSH.Client.App/Views/TransfersScreen.axaml
+21 -16
View File
@@ -77,25 +77,24 @@
<Border Grid.Row="0" Padding="14,0" BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1">
<Grid ColumnDefinitions="Auto,Auto,180,Auto,Auto,Auto,*" VerticalAlignment="Center">
<TextBlock Grid.Column="0" Classes="mono" Text="FILES" FontSize="11" FontWeight="SemiBold"
<!--
The screen names whichever remote it is offering, because since v2 it is reached as two
destinations rather than one: SFTP and S3 are separate entries in the sidebar and this control
draws both. A single "FILES" heading over a bucket picker would name neither of them.
-->
<TextBlock Grid.Column="0" Classes="mono" Text="SFTP" FontSize="11" FontWeight="SemiBold"
LetterSpacing="1" Foreground="{StaticResource Text}" VerticalAlignment="Center"
Margin="0,0,12,0" />
Margin="0,0,12,0" IsVisible="{Binding ShowsHostPicker}" />
<TextBlock Grid.Column="0" Classes="mono" Text="S3" FontSize="11" FontWeight="SemiBold"
LetterSpacing="1" Foreground="{StaticResource Text}" VerticalAlignment="Center"
Margin="0,0,12,0" IsVisible="{Binding ShowsBucketPicker}" />
<!--
Which sort of remote. Two buttons rather than one picker holding hosts and buckets together, and
the reason is that the two are not interchangeable: a host brings a password box, a host key
prompt and a mismatch refusal with it, and a bucket has no equivalent of any of them. One picker
would mean half this bar appearing and disappearing with the selection.
The HOST / BUCKET pair that used to sit here is gone: which sort of remote this screen offers is
now the destination you chose in the sidebar, and a toggle that silently moved you to the other
one would leave the lit sidebar entry naming a screen you are no longer on. What sets it is
ShowFiles on the shell, which is what the sidebar calls.
-->
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="2" Margin="0,0,8,0"
IsVisible="{Binding !IsConnected}">
<Button Classes="flat cat" Content="HOST" Classes.active="{Binding ShowsHostPicker}"
Command="{Binding ShowRemoteCommand}"
CommandParameter="{x:Static vm:RemoteKind.Host}" />
<Button Classes="flat cat" Content="BUCKET" Classes.active="{Binding ShowsBucketPicker}"
Command="{Binding ShowRemoteCommand}"
CommandParameter="{x:Static vm:RemoteKind.Bucket}" />
</StackPanel>
<ComboBox Grid.Column="2" ItemsSource="{Binding Hosts}"
SelectedItem="{Binding SelectedHost}"
@@ -155,7 +154,13 @@
<TextBlock Text="{Binding ConnectedTo}" />
</Border>
<TextBlock Grid.Column="5" Classes="hint" Text="{Binding Status}" FontSize="10.5"
<!--
Column 6, not 5, which is where it used to be — sharing a cell with the connected chip, so the two
drew over each other for as long as anything was open. That was survivable while the status was
mostly read before connecting; it is not now, because refusing to switch between SFTP and S3 while
a session is live reports itself here, which is precisely when the chip is on screen.
-->
<TextBlock Grid.Column="6" Classes="hint" Text="{Binding Status}" FontSize="10.5"
Margin="12,0,0,0" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
src/DodoSSH.Client.App/Views/UnlockCard.axaml
+3 -1
View File
@@ -70,7 +70,9 @@
BorderThickness="1" CornerRadius="4" Padding="10,8"
IsVisible="{Binding HasLiveSessions, FallbackValue=False}">
<StackPanel Spacing="4">
<TextBlock Text="{Binding LiveSessionSummary}" Foreground="{StaticResource Info}"
<!-- Live, not Info: this counts shells that are still running, which is the fact the host list,
the tab strip and the phone's own lock screen all paint green. -->
<TextBlock Text="{Binding LiveSessionSummary}" Foreground="{StaticResource Live}"
FontWeight="SemiBold" TextWrapping="Wrap" />
<TextBlock Classes="hint" FontSize="11" TextWrapping="Wrap"
Text="Locking closes the keychain, not your terminals: a job you started keeps running, and its output is waiting behind this screen. It also means this machine still holds an open, authenticated channel to those hosts — locked describes the keychain, not the connections. Quit DodoSSH to end them." />