DodoTech-Public/DodoSSH
Public Access
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity
Files
3c8c0980c24cd58ab77c04ca8fb05ae44da4c486
DodoSSH/src/DodoSSH.Client.Android/Views/TerminalScreen.axaml
T
jaap-jan 5b32c76c95
ci / build and test (push) Successful in 3m49s
Details
ci / android head (push) Successful in 3m55s
Details
ci / api image (push) Successful in 6s
Details
ci / desktop nightly (push) Successful in 1m22s
Details
Android: the redesign — a Vaults tab with hosts, keychain and snippets, card lists, a keychain that can add, and files that act on what is chosen 
The bottom bar is Vaults · Connections · Settings, drawn as Material 3 pills with icons from the embedded
Material font and a count of open sessions on Connections, which replaces the strip of shells above the
bar. Vaults is the open vault: its header carries the name as a switch to the vaults screen, the sync
light and a lock icon, and a Hosts · Keychain · Snippets segmented control sits under it. The keychain
and snippets move there from Settings (IsVaultSurface lights the tab; IsMoreSurface no longer lists
them), and back from either goes to the hosts. Settings becomes an account card and grouped sections:
security, vaults and history, files, this app.

Host rows are cards with a terminal tile and the live dot on its corner. The connect sheet names the
host and its address, labels its box, focuses it as it opens, reveals the password on request, and puts
CANCEL left and CONNECT right; every two-button row on the head now confirms on the right. While a
hosts-screen sheet is up the header and bar are dimmed too and a tap on them lowers it, and the bar
stands down while the software keyboard is up.

The keychain gains a floating + and a sheet of the desktop's five adds (generate a key, paste a key, a
password, a bucket, a tag) over the editors VaultViewModel already had, drawn as a full-screen page with
labels above the boxes; a chosen item gets EDIT and COPY PUBLIC KEY beside MOVE and DELETE. Snippets get
a floating + and cards that say RUNS or INSERTS. Files trade the seven-button block for a selection bar
(save, and a ⋮ sheet with rename, move, permissions and a red delete), folder and file tiles, an upload
button, and header actions for a terminal on the same host, refresh and close; a terminal's + sheet
opens SFTP on that terminal's own host.

The theme takes the audit's visual findings: Fluent's ClipToBounds is cleared on glowing buttons so the
glow is no longer cut to a square (the desktop's Button.accent too), prose is Montserrat with mono kept
for addresses and code, disabled secondary buttons are quieter than enabled ones, Fluent's dropdown,
checkbox, switch, focus and selection brushes come from the palette, touch no longer leaves hover fills
behind, and lists, nav entries and icon buttons carry names for TalkBack.

Builds clean; checked on the emulator end to end: unlock, the three vault views, adding and deleting a
password, connecting through the new sheet, files on the terminal's host with the selection bar and
its sheet. App tests 727 of 733 pass with 5 skipped; the one failure, TheCountsAPhoneShows_
FollowEveryForwardsState, passes three runs of three alone and is untouched here. Layout tests pass.
2026-10-04 15:50:09 +02:00

1081 lines
66 KiB
XML
Raw Blame History

<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:DodoSSH.Client.Shell.ViewModels"
xmlns:views="using:DodoSSH.Client.Android.Views"
x:Class="DodoSSH.Client.Android.Views.TerminalScreen"
x:DataType="vm:MainWindowViewModel"
Background="{StaticResource Canvas}">
<!--
Design 03 — TERMINAL.
One WebView for every session, exactly as on the desktop and for the same reason: each session is a pane
inside the one page, so switching tabs is a single frame rather than a second browser. On a phone the
argument is stronger — a WebView per tab would be several hundred megabytes on a device that will
reclaim them.
The tab strip is horizontal-scrolling rather than wrapping. Wrapping would reflow the terminal every
time a tab opened, which is the one thing a terminal must not do while output is arriving.
── the screen a shell gets ───────────────────────────────────────────────────────────────────────────
A connected phone shows one bar and then the terminal. The vault header, the shells strip and the
three-entry bottom bar are all collapsed by PhoneShell while a shell is showing, and what replaces them
is the row below: back, the sessions, and the way to open another one.
With nothing running it is only the header and the strip. This surface is then the connect page below —
a box and the machines connected to before — which is not what the screen was being cleared for, and is
the one screen reachable by closing your last tab, so the nav stays. See PhoneShell.RefreshChrome.
That is a trade, and the thing bought is the only one a terminal really wants. At 360dp the chrome this
screen used to sit inside came to 254 pixels of a roughly 780-pixel display — a third of it — and every
one of those rows was about somewhere the user was not. What is given up is the bottom bar's one-tap
reach to Hosts, Keychain and MORE; back and the + between them lead to all of it, and the system back
gesture does the same thing the arrow does.
-->
<UserControl.Styles>
<!--
── the connecting step list ─────────────────────────────────────────────────────────────────────
The same five rows the desktop's ConnectingCard draws, from the same reported phases, in this head's
own sizes. Kept here rather than in Phone.axaml because nothing else on this head has a step list —
the theme file is for what more than one screen shares, and a rule that exists for one control is
easier to read beside it.
Amber for the step in flight, green behind it, red where it stopped. That is the palette's rule
rather than an exception to it: green is what is true and purple is what you can press, and a step
still happening is neither. See ConnectingCard.axaml for the longer version of this argument, and
Palette.axaml for the rule itself.
A phone needs this more than a desktop does, which is the same thing the connecting block below
already says about itself: mobile links are slower and drop more often, so the stretch this describes
is longer here and more likely to end badly.
-->
<!--
Its own FontFamily rather than the row also carrying the mono class, which is this head's convention
and not a stylistic preference: Phone.axaml's mono sets a colour and a size along with the family, so
a caption wearing both classes would be asking two rules for one Foreground and settling it on style
ordering. Every other text class here — body, label, title, detail — names its own family for exactly
that reason. The desktop's mono sets the family alone, which is why ConnectingCard composes the two
and this does not.
-->
<Style Selector="TextBlock.stepcaption">
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
<Setter Property="FontSize" Value="11" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="TextBlock.stepcaption.done">
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
</Style>
<Style Selector="TextBlock.stepcaption.running">
<Setter Property="Foreground" Value="{StaticResource WarnText}" />
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
<Style Selector="TextBlock.stepcaption.stopped">
<Setter Property="Foreground" Value="{StaticResource DangerText}" />
</Style>
<!-- Fixed width and centred: four different characters on a ragged edge is a list that looks broken. -->
<Style Selector="TextBlock.stepmark">
<Setter Property="Foreground" Value="{StaticResource BorderMid}" />
<Setter Property="FontSize" Value="11" />
<Setter Property="Width" Value="13" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="TextBlock.stepmark.done">
<Setter Property="Foreground" Value="{StaticResource Live}" />
</Style>
<Style Selector="TextBlock.stepmark.running">
<Setter Property="Foreground" Value="{StaticResource Warn}" />
</Style>
<Style Selector="TextBlock.stepmark.stopped">
<Setter Property="Foreground" Value="{StaticResource Danger}" />
</Style>
<!--
4 rather than the desktop's 5, which is the only deliberate difference between the two heads here:
this bar sits in a column 24 from each edge of a 360dp screen rather than under a 460-wide card, so
the same height reads as a heavier rule across a narrower span.
-->
<Style Selector="ProgressBar.steptrack">
<Setter Property="Height" Value="4" />
<Setter Property="MinHeight" Value="4" />
<Setter Property="CornerRadius" Value="2" />
<Setter Property="Background" Value="{StaticResource Chip}" />
<Setter Property="Foreground" Value="{StaticResource Warn}" />
</Style>
<Style Selector="ProgressBar.steptrack.stopped">
<Setter Property="Foreground" Value="{StaticResource Danger}" />
</Style>
<!--
── the forwards ──────────────────────────────────────────────────────────────────────────────────────
The desktop sidebar's state word, in the same three colours: green only while listening, the danger
text colour for a forward that could not start, faint for OFF and STARTING. The bar's ⇄ follows the
same rule for the failed case and is otherwise the colour of the icons beside it. Mono and 9.5, which
is this head's label lettering rather than the desktop's Montserrat, and its own family for the reason
the step captions above give.
-->
<Style Selector="TextBlock.fwdstate">
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="9.5" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style Selector="TextBlock.fwdstate.live">
<Setter Property="Foreground" Value="{StaticResource Live}" />
</Style>
<Style Selector="TextBlock.fwdstate.failed">
<Setter Property="Foreground" Value="{StaticResource DangerText}" />
</Style>
<Style Selector="TextBlock.fwdglyph">
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
</Style>
<Style Selector="TextBlock.fwdglyph.failed">
<Setter Property="Foreground" Value="{StaticResource DangerText}" />
</Style>
</UserControl.Styles>
<Panel>
<!--
Four rows since the disconnect strip arrived. It is Auto and empty except while the selected tab's shell
has stopped, so an ordinary session pays nothing for it — and when it is up it takes its height off the
renderer rather than drawing over it, which on this head is not optional either: the renderer is a native
child view composited above everything Avalonia draws, so a banner over its rectangle would be invisible.
-->
<Grid RowDefinitions="Auto,*,Auto,Auto">
<!-- ============ the bar ============ -->
<!--
Everything the phone draws above a shell. It is a bar rather than a strip because it now carries the
two controls the collapsed chrome took with it, one at each end, with the sessions between them.
Both are outside the ScrollViewer deliberately. They are the way out of this surface and the way to
another host, and a tenth tab must not be able to push either of them off the right-hand edge.
35 tall, a third off the 52 it opened at. Every height inside it came down with it — the icon squares
to 34, the pills to 30 — because a bar that shrank around controls that did not would only have moved
the clipping somewhere harder to see.
-->
<!-- DeepChrome rather than Chrome, since v5: this bar is what the vault header, the strip and the
bottom bar collapse into while a shell is showing, so it takes their surface along with their
job — see the remark on the header in PhoneShell.axaml. -->
<Border Grid.Row="0" Height="35" Background="{StaticResource DeepChrome}"
BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1">
<Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto">
<!--
Back, and it goes to the page this terminal was opened over rather than to Hosts by name. The
system back gesture already does exactly that — see PhoneShell.axaml.cs — and an arrow that
landed somewhere else would be the second of two answers to one question.
Height overridden and width left alone. Button.icon is a 44 square, which is taller than this bar;
the 44 that matters is the horizontal one, since nothing in a row of this shape is hard to hit
above or below.
-->
<Button Grid.Column="0" Classes="icon" Height="34" Margin="4,0,0,0" AutomationProperties.Name="Back"
Command="{Binding ShowScreenCommand}" CommandParameter="{Binding Screen}">
<TextBlock Classes="icon" Text="&#xE5C4;" FontSize="20" />
</Button>
<!--
v2 draws these as pills rather than as a segmented strip, so the row is transparent and each
session carries its own outline. The close cross moved inside the pill with the name, which is
what makes it read as one object you can dismiss rather than as two adjacent targets.
-->
<ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<ItemsControl ItemsSource="{Binding Tabs}" Margin="6,0" VerticalAlignment="Center">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate><StackPanel Orientation="Horizontal" Spacing="6" /></ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:TerminalTabViewModel">
<!--
30 tall, in a bar of 35. It was 44, and the argument for 44 was that a pill you only
select can be chip-sized while one containing the control that ends a shell cannot — the
close cross is the one control on this head that is both destructive and has neither
confirmation nor undo. That argument is now carried by width rather than by height: the
cross keeps its full 44-pixel column, and what it lost is 14 pixels of vertical slack in a
row where nothing sits above or below it to be hit by mistake.
-->
<Border Background="{StaticResource Panel}" BorderBrush="{StaticResource BorderMid}"
BorderThickness="1" CornerRadius="10" Height="30">
<StackPanel Orientation="Horizontal">
<Button Classes="row" MinHeight="28" Padding="11,0" CornerRadius="10"
VerticalContentAlignment="Center" AutomationProperties.Name="{Binding Label}"
Command="{Binding $parent[views:TerminalScreen].((vm:MainWindowViewModel)DataContext).SelectTabCommand}"
CommandParameter="{Binding}">
<StackPanel Orientation="Horizontal" Spacing="7" VerticalAlignment="Center">
<!--
Green only while there is a shell behind it, amber while one is being made, and
red where a connection broke rather than a shell exiting; see the same dot in
PhoneShell, and Phone.axaml for why neither of the last two is a rule broken.
-->
<Ellipse Classes="dot" Classes.live="{Binding IsLive}"
Classes.connecting="{Binding IsConnecting}"
Classes.dropped="{Binding IsDropped}" Width="6" Height="6"
VerticalAlignment="Center" />
<TextBlock Classes="mono" FontSize="12" FontWeight="SemiBold"
Text="{Binding Label}" />
</StackPanel>
</Button>
<!--
The close cross is inside the tab, which the plan calls out: a strip-level close would
act on whichever tab happened to be selected, and on a phone that is a mis-tap away from
killing the wrong shell.
The hairline down its left edge is not decoration. The two targets are flush inside one
pill, so without a visible seam there is nothing telling a thumb where "switch to this
shell" stops and "end it" starts.
Both alignments are stated, and the vertical one is not decoration either: Button.row
sets HorizontalContentAlignment and says nothing about the other axis, so the cross
was sitting against the top of its own column rather than in the middle of the pill.
It reads as a misprint, which for the control that ends a session is the wrong thing
to look like.
-->
<Button Classes="row" MinHeight="28" Width="44" Padding="0" CornerRadius="0,10,10,0"
AutomationProperties.Name="{Binding Label, StringFormat='Close {0}'}"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
BorderBrush="{StaticResource BorderMid}" BorderThickness="1,0,0,0"
Command="{Binding $parent[views:TerminalScreen].((vm:MainWindowViewModel)DataContext).CloseTabCommand}"
CommandParameter="{Binding}">
<TextBlock Classes="icon" Text="&#xE5CD;" Foreground="{StaticResource TextFaint}"
FontSize="16" />
</Button>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<!--
Another connection, and the three kinds this application can make. A menu rather than a straight
jump to Hosts because SFTP and S3 used to be two taps through the bottom bar's MORE, and the bar
is not on screen here — so the control that replaces it has to lead to all three or it has quietly
removed two of them.
The desktop's own + refuses a flyout on this reasoning, in TerminalTabs.axaml: a popup dropping
into the renderer's rectangle may or may not composite above a native child window, and that is
not a claim to make without a screenshot. It is answered here rather than dodged — this is a sheet
at the bottom of the screen and opening it collapses the renderer outright, exactly as the
palette does on the desktop. Nothing is drawn over the WebView.
Plain Button.icon, the same as the arrow across from it, rather than the accent variant. The two
are a matched pair at either end of one bar — one leaves this surface, one adds to it — and an
accented + would rank itself above the way out. The accent fill belongs to the floating + on
HOSTS, which is the only action on its screen; this one is not.
Click as well as Command, and the handler does one thing the command cannot: put the software
keyboard away. See OnSheetRequested.
-->
<!--
The selected tab's forwards, which is what lets this head start them at all: a phone opening
listeners it never shows you is worse than one opening none. Drawn only for a tab that has some, so
a host without forwards pays nothing for the feature in a 35-pixel bar.
The count beside the arrows is the listening ones, in the green that means "running" everywhere
else; the arrows themselves turn the danger colour when one could not start. The desktop can leave a
refusal in its sidebar for the eye to find, because the sidebar is always drawn. The sheet this opens
is not, so the button has to say it first.
Outside the ScrollViewer with +, for the reason both ends are: a tenth tab must not push it away.
Width is not pinned to Button.icon's 44, because "⇄ 12" is wider than that; 44 is its minimum.
-->
<Button Grid.Column="2" Classes="icon" Height="34" Width="NaN" MinWidth="44" Padding="8,0"
Click="OnSheetRequested"
Command="{Binding OpenForwardsSheetCommand}"
IsVisible="{Binding SelectedTab.HasForwards, FallbackValue=False}">
<StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center">
<TextBlock Classes="fwdglyph" Classes.failed="{Binding SelectedTab.HasFailedForward, FallbackValue=False}"
Text="⇄" FontSize="16" VerticalAlignment="Center" />
<TextBlock Classes="mono" FontSize="12" FontWeight="SemiBold" Foreground="{StaticResource Live}"
VerticalAlignment="Center"
Text="{Binding SelectedTab.ListeningForwardCount, FallbackValue=''}"
IsVisible="{Binding SelectedTab.HasListeningForward, FallbackValue=False}" />
</StackPanel>
</Button>
<Button Grid.Column="3" Classes="icon" Height="34" Margin="0,0,4,0"
AutomationProperties.Name="Connect, or open this host's files"
Click="OnSheetRequested"
Command="{Binding OpenConnectSheetCommand}">
<TextBlock Classes="icon" Text="&#xE145;" FontSize="22" />
</Button>
<!--
The wide screen's side panel, shown and hidden — the quick-access keyboard beside the terminal
rather than under it. Here rather than at the start of the key bar, which is where a phone keeps
its toggle: on a tablet the bar is not drawn while the panel is open, and the control that brings
the panel back cannot live inside the thing the panel replaced. Lit while open, like a latched key.
-->
<Button Grid.Column="4" Classes="icon" Height="34" Margin="0,0,4,0"
Classes.accent="{Binding Keyboard.IsSidePanelOpen}"
AutomationProperties.Name="Keys, snippets and history"
IsVisible="{Binding $parent[views:TerminalScreen].IsWide}"
Command="{Binding Keyboard.ToggleSidePanelCommand}">
<TextBlock FontFamily="{StaticResource IconFont}" FontSize="18" Text="&#xF114;"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
</Border>
<!-- ============ the renderer, and the wide screen's side panel ============ -->
<!--
Two columns, and the second is collapsed except on a wide screen with the panel open. Beside the
renderer rather than over it, for the reason nothing on this head is drawn over it: the WebView is a
native child composited above everything Avalonia paints, so a panel laid on top would be invisible.
Taking its width off the terminal refits the grid and tells the remote, exactly as the software
keyboard taking its height does.
-->
<Grid Grid.Row="1" ColumnDefinitions="*,Auto">
<Panel Grid.Column="0">
<!--
============ nothing open ============
Not an empty state any more, and that is what the bottom bar's word change is about: with no shell
running this surface is where a connection is made rather than a page apologising for having
nothing on it. Two things are offered, in the order somebody reaches for them.
A box, because the case this application had no answer for is the address somebody has just been
given. Everything else here starts from a keychain item, which is right for a machine used twice and
is several screens of work for one used once.
And the machines already connected to, under it, because that is the commoner half by far: the
thing most likely to be wanted is the thing that was wanted yesterday. They come out of the vault's
own connection log — see MainWindowViewModel.RecentConnections — so they survive a restart and
arrive on a new phone with the keychain, which a list kept in this process would not.
-->
<ScrollViewer IsVisible="{Binding !HasTabs}">
<StackPanel Margin="20,18,20,24" Spacing="10">
<TextBlock Classes="title" FontSize="13" Text="CONNECT TO A MACHINE" />
<!--
The manual target. One box in the grammar people already have — user@host, or user@host:port —
rather than three, because three boxes on a phone is three taps between three keyboards for
something that arrives as one string.
-->
<TextBox Classes="field" Text="{Binding Vault.ManualTarget}"
PlaceholderText="user@host or user@host:port">
<TextBox.KeyBindings>
<KeyBinding Gesture="Enter" Command="{Binding Vault.ConnectManuallyCommand}" />
</TextBox.KeyBindings>
</TextBox>
<!--
A typed password and nothing else. Offering the keychain's keys here would be a second binding
resolution beside the one the connect path already has, and a key is the reason to save the
machine as a host rather than dial it from a box.
Classes="secret" and not merely PasswordChar: the class is what also tells the software keyboard
this is not prose, which is the difference between dots on screen and dots on screen with the
password in the IME's dictionary. See Theme/Phone.axaml.
-->
<TextBox Classes="field secret" Text="{Binding Vault.ManualPassword}"
PlaceholderText="password">
<TextBox.KeyBindings>
<KeyBinding Gesture="Enter" Command="{Binding Vault.ConnectManuallyCommand}" />
</TextBox.KeyBindings>
</TextBox>
<Button Classes="primary" Content="CONNECT" Command="{Binding Vault.ConnectManuallyCommand}" />
<!--
Beside the box rather than on the shell's status line. What fails here is about what was typed —
a missing account, a port that is not a number — and a sentence about a text box belongs under
the text box.
-->
<TextBlock Classes="detail" TextWrapping="Wrap" Foreground="{StaticResource WarnText}"
Text="{Binding Vault.ManualStatus}"
IsVisible="{Binding Vault.ManualStatus, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" />
<TextBlock Classes="body"
Text="Nothing typed here is saved. A machine worth keeping belongs on HOSTS, where it can carry a key, a group's defaults and a name." />
<!-- ============ where you have been ============ -->
<StackPanel Spacing="2" Margin="0,14,0,0" IsVisible="{Binding HasRecentConnections}">
<TextBlock Classes="label" Text="RECENT" Margin="0,0,0,4" />
<ItemsControl ItemsSource="{Binding RecentConnections}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:ConnectionLogRowViewModel">
<!--
Tapping one does not connect, and that is deliberate rather than a missing step. A row
that names a keychain host goes to that host with its connect bar — which is where its
key, or its password box, or its refusal lives — and one that names only an address goes
back into the box above, without the password, which was never stored. Either way what
happens next is visible before anything is dialled. See ConnectToRecentCommand.
-->
<Button Classes="row" MinHeight="52" Padding="12,8" CornerRadius="10"
Command="{Binding $parent[views:TerminalScreen].((vm:MainWindowViewModel)DataContext).ConnectToRecentCommand}"
CommandParameter="{Binding}">
<Grid ColumnDefinitions="*,Auto">
<StackPanel Grid.Column="0" Spacing="2" VerticalAlignment="Center">
<TextBlock Classes="mono" FontSize="13" FontWeight="SemiBold"
Text="{Binding HostLabel}" TextTrimming="CharacterEllipsis" />
<TextBlock Classes="detail code" FontSize="10.5" Text="{Binding Address}"
TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
</StackPanel>
<TextBlock Grid.Column="1" Classes="detail" FontSize="10"
VerticalAlignment="Center" Text="{Binding Started}" />
</Grid>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<TextBlock Classes="body" Margin="0,10,0,0"
Text="A shell opened here keeps running while the app is in the background, and keeps running after the keychain is locked — a notification says so for as long as one is alive." />
</StackPanel>
</ScrollViewer>
<!--
A tab with no pane behind it: one still connecting, or one that was refused. The desktop head draws
the same thing in its own ConnectingCard, and it exists for the same reason — connecting does not
hold the application still any more, so there is a stretch in which a tab is selected and there is
nothing yet to render in it. A phone needs it more than a desktop does: mobile links are slower, and
the alternative is a black rectangle.
It carries the address, which is where that fact went when the connection line was folded into the
bar above. This is the moment it is worth reading — what is being dialled, before anything has
answered — and once a shell is open its own prompt says the same thing more accurately than a header
derived from the keychain ever did.
-->
<StackPanel IsVisible="{Binding IsConnectingShowing}" VerticalAlignment="Center" Margin="24"
Spacing="10">
<TextBlock Classes="title" FontSize="13" Text="{Binding SelectedTab.Label}" />
<TextBlock Classes="detail" FontSize="11" Foreground="{StaticResource TextDim}"
TextWrapping="Wrap" Text="{Binding SelectedTab.Address}" />
<!--
Where a single unchanging "connecting…" used to be. The track counts steps that really finished
against the five there are — StepsDone over StepCount, never a percentage, because the arithmetic
that makes a percentage is the arithmetic that starts inventing one. See TerminalTabViewModel.
Drawn for both states rather than once per state: a refused connection has the same five rows and
the same track, and the only differences are that one row is red and the track stops where it got
to. Two templates kept identical for the sake of a colour is how the two drift apart.
-->
<ProgressBar Classes="steptrack" Classes.stopped="{Binding SelectedTab.IsFailed}"
Minimum="0" Maximum="{Binding SelectedTab.StepCount}"
Value="{Binding SelectedTab.StepsDone, Mode=OneWay}" />
<ItemsControl ItemsSource="{Binding SelectedTab.Steps}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Spacing="6" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:ConnectionStepViewModel">
<StackPanel Orientation="Horizontal" Spacing="9">
<TextBlock Classes="stepmark"
Classes.done="{Binding IsDone}"
Classes.running="{Binding IsRunning}"
Classes.stopped="{Binding IsStopped}"
Text="{Binding Mark}" />
<TextBlock Classes="stepcaption"
Classes.done="{Binding IsDone}"
Classes.running="{Binding IsRunning}"
Classes.stopped="{Binding IsStopped}"
Text="{Binding Caption}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!--
Only for a refusal now. While a connection is being made this used to be the whole of what this
screen said, and it is now the step list's running row said twice — so it is shown for the one
state the list cannot put into words: why it stopped.
-->
<TextBlock Classes="body" Text="{Binding SelectedTab.Status}"
Foreground="{StaticResource Danger}"
IsVisible="{Binding SelectedTab.IsFailed}" />
<!--
Two 44-high targets side by side rather than one, and the second is the logs: the step list is
this attempt and the log is every other one, which is the question a connection that is taking too
long on a mobile link actually raises — has this machine ever worked from here. Reached the
ordinary way, through ShowScreenCommand, exactly as the rail and MORE reach it.
-->
<StackPanel Orientation="Horizontal" Spacing="8" HorizontalAlignment="Left">
<!--
Only for a refusal, and it runs the same command the disconnect strip below the renderer does —
the vault's own connect path, back into this same tab. Worth more on a phone than on a desk: the
commonest refusal here is a mobile link that was not up yet, and the alternative is going back
to the hosts screen to find a machine whose name is already on this card.
-->
<Button Classes="row" MinHeight="44" Padding="14,0"
Command="{Binding ReconnectTabCommand}" CommandParameter="{Binding SelectedTab}"
IsEnabled="{Binding CanReconnectSelectedTab, FallbackValue=False}"
IsVisible="{Binding SelectedTab.IsFailed}">
<TextBlock Classes="label" FontSize="9" Text="TRY AGAIN" />
</Button>
<Button Classes="row" MinHeight="44" Padding="14,0"
Command="{Binding CloseTabCommand}" CommandParameter="{Binding SelectedTab}">
<TextBlock Classes="label" FontSize="9" Text="CLOSE THIS TAB" />
</Button>
<Button Classes="row" MinHeight="44" Padding="14,0"
Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Logs}">
<TextBlock Classes="label" FontSize="9" Text="SHOW LOGS" />
</Button>
</StackPanel>
</StackPanel>
<!--
Collapsed rather than merely covered when there is no pane to show. On Windows this control is a
native child view that composites above everything Avalonia draws, which is why the desktop head
hides it explicitly; whether Android's WebView does the same is recorded as unverified in
docs/android-port.md. Hiding it either way costs nothing and is correct under both answers.
IsTerminalShowing rather than HasTabs, which are no longer the same question: a tab that is still
connecting has no pane, and showing the renderer for it would show the previous session's output
under the name of a machine nothing has connected to yet. It is also what the connect sheet turns
off — see MainWindowViewModel.IsTerminalShowing.
v2 insets this behind a 14-pixel radius. Not done, and not an oversight: this is a native child view
composited above everything Avalonia draws, so a rounded Border behind it clips nothing — the
corners would stay square over a frame pretending otherwise. What the design was really after is
that the terminal reads as the lit surface, and that comes from its own background, which now is the
design's #171A26. See WebAssets/terminal.css.
-->
<NativeWebView x:Name="Renderer" IsVisible="{Binding IsTerminalShowing, FallbackValue=False}" />
<!--
============ the keyboard ============
One pixel in the corner, drawn never, and it is where every character typed into a shell on this
phone arrives. ADR 0015 has the whole argument; the short of it is that a software keyboard over a
terminal has to be told to stop autocorrecting, and on Android the only setting that works is an
inputType on a native input connection — which a page inside a WebView cannot reach and an Avalonia
control can, on the version already pinned here.
Not stretched over the renderer, which would be the obvious shape and is wrong three times: the
WebView composites above everything Avalonia paints so it would be invisible, it would never see the
touches the WebView consumes first, and it would sit over the connect page that shares this Panel
whenever no session is open. Focus does not need area. Taps on the terminal are noticed by
RendererFocus, where they actually land.
Collapsed with the renderer, on the same binding and for a reason of its own: a focusable control is
a tab stop and a focus candidate wherever it lives, and this Panel is also the connect page when no
session is open. Left always-visible it would be a stray target on a screen with a real text box on
it, offering a keyboard configured for a shell to somebody typing a hostname.
-->
<views:TerminalInputSurface x:Name="Input"
IsVisible="{Binding IsTerminalShowing, FallbackValue=False}" />
</Panel>
<!--
The quick-access keyboard as a side panel: additional keys, snippets, history and appearance in view
while the terminal is worked in, which is what a tablet's width is for. 320 wide, which at the 600dp
where this head turns wide leaves the terminal 280 — a narrow terminal, and a panel somebody can close
from the bar above; at a tablet's 900 it is a third.
ShowsBarGroup, because the bar under the terminal stands down while this is open and the keys someone
put on it have to go somewhere they can still be reached.
-->
<Border Grid.Column="1" Width="320" BorderBrush="{StaticResource Border}" BorderThickness="1,0,0,0"
IsVisible="{Binding $parent[views:TerminalScreen].ShowsSidePanel}">
<views:QuickAccessKeyboard x:Name="SidePanel" ShowsBarGroup="True" />
</Border>
</Grid>
<!-- ============ what a terminal says once its shell has stopped ============ -->
<!--
The phone's half of SessionEndedBar, and it needs it more than the desk does: a mobile link drops on
its own, the screen goes off, and the tab that went quiet is discovered later with no idea whether the
shell was exited or cut off. So it names which, prints the sentence that came with it, and offers the
one useful answer.
Two lines rather than the desktop's one, because 360dp cannot hold a word, a sentence and two buttons
across. The word and the buttons share the top line — the buttons are where a thumb already is — and
the sentence wraps underneath at two lines maximum, which is enough for anything sshd or a socket
error actually says and short of a strip that eats the terminal.
RECONNECT is disabled rather than hidden when there is nothing to dial: a machine typed in by hand has
no keychain entry to redial, and a control visibly refusing answers "why not" better than an absent one.
See MainWindowViewModel.CanReconnectSelectedTab.
-->
<Border Grid.Row="2" Background="{StaticResource DeepChrome}"
BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0" Padding="16,8"
IsVisible="{Binding SessionEndedText, Converter={x:Static StringConverters.IsNotNullOrEmpty}, FallbackValue=False}">
<StackPanel Spacing="6">
<Grid ColumnDefinitions="*,Auto">
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="7" VerticalAlignment="Center">
<Ellipse Classes="dot" Classes.dropped="{Binding IsSessionDropped}" Width="7" Height="7"
VerticalAlignment="Center" />
<TextBlock Classes="label" FontSize="9" Text="{Binding SessionEndedText}" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="8">
<Button Classes="row" MinHeight="40" Padding="12,0"
Command="{Binding ReconnectTabCommand}" CommandParameter="{Binding SelectedTab}"
IsEnabled="{Binding CanReconnectSelectedTab, FallbackValue=False}">
<TextBlock Classes="label" FontSize="9" Text="RECONNECT" />
</Button>
<Button Classes="row" MinHeight="40" Padding="12,0"
Command="{Binding CloseTabCommand}" CommandParameter="{Binding SelectedTab}">
<TextBlock Classes="label" FontSize="9" Text="CLOSE" />
</Button>
</StackPanel>
</Grid>
<TextBlock Classes="detail" FontSize="10.5" Foreground="{StaticResource TextDim}"
TextWrapping="Wrap" MaxLines="2" TextTrimming="CharacterEllipsis"
Text="{Binding SessionEndedDetail}"
IsVisible="{Binding SessionEndedDetail, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" />
</StackPanel>
</Border>
<!-- ============ the keys ============ -->
<!--
The keys a software keyboard does not have, and the way to all the others.
── the bar ──────────────────────────────────────────────────────────────────────────────────────────
The row every Android SSH client ships, and the reason is not preference: a software keyboard has no
Ctrl, no Esc, no Tab and no arrows, and without them a phone cannot interrupt a process, complete a
path, or reach the previous command. Ctrl and Alt latch — pressed once they apply to the next key, from
the bar or from the phone's own keyboard, and then release — because holding a modifier while typing is
not possible one-thumbed.
It is somebody's own now: which keys, in what order, set on the customise screen and kept on this
device. What did not change is the shape the old fixed keypad argued its way to, and the argument still
holds. Nothing here scrolls — a horizontally scrollable strip reads a thumb coming down at an angle as
the start of a pan, and the key never sees the press. Every key gets an equal share of its row's width,
so "ctrl" and "|" are the same target. At most eight to a row and two rows, which keeps a key at about
41dp on a 360dp phone; anything past sixteen belongs on the quick-access keyboard. The first eight are
the top row, so a person arranging their bar decides the rows by the order alone.
As shipped: modifiers and punctuation on top, cursor keys underneath, nearest the thumb, because they
are the keys pressed repeatedly and in sequence — history, then along the line.
── the grid button ──────────────────────────────────────────────────────────────────────────────────
At the bar's left-hand end, outside the rows, and the one key nobody can remove: it is the way to the
quick-access keyboard and from there to the customise screen, so a bar arranged to nothing is still a
bar with a way back. Lit while the panel is up, as a latched modifier is, because it is a state.
── the panel ────────────────────────────────────────────────────────────────────────────────────────
The quick-access keyboard, in the software keyboard's place: the code-behind puts the phone's keyboard
away as this opens and gives this the height that keyboard last had, so the bar does not move between
the two. Tapping the terminal brings the phone's keyboard back and puts this away again.
The five pixels above the whole thing are a gap and not a border. The renderer is a native child view,
so nothing Avalonia draws can sit on top of it — a hairline between the two would have to be a row of its
own — and a terminal whose last line is flush against a row of grey keys reads as one surface gone wrong.
-->
<StackPanel Grid.Row="3" IsVisible="{Binding $parent[views:TerminalScreen].ShowsKeys}">
<Grid ColumnDefinitions="Auto,*" Margin="8,5,8,4">
<!--
Focusable="False", for the reason every key carries it — see the remark on Button.hotkey's use in
QuickAccessKeyboard. A button here that took focus would take it off the terminal's input surface,
and the keyboard would go with it.
-->
<Button Grid.Column="0" Classes="hotkey" Width="44" Focusable="False" VerticalAlignment="Bottom"
Margin="0,0,4,0"
Classes.latched="{Binding Keyboard.IsQuickAccessOpen}"
AutomationProperties.Name="Keys, snippets and history"
IsVisible="{Binding !$parent[views:TerminalScreen].IsWide}"
Click="OnQuickAccessToggled">
<TextBlock FontFamily="{StaticResource IconFont}" FontSize="18" Text="&#xE5C3;"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
<ItemsControl Grid.Column="1" ItemsSource="{Binding Keyboard.BarRows}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate><StackPanel Spacing="4" /></ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:KeyRowViewModel">
<ItemsControl ItemsSource="{Binding Keys}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate><UniformGrid Rows="1" /></ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:KeyButtonViewModel">
<Button Classes="hotkey" Focusable="False" Classes.latched="{Binding IsLatched}"
Content="{Binding Label}" AutomationProperties.Name="{Binding Hint}"
Command="{Binding PressCommand}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<Border BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0"
Height="{Binding $parent[views:TerminalScreen].QuickAccessHeight}"
IsVisible="{Binding $parent[views:TerminalScreen].ShowsQuickAccessPanel}">
<views:QuickAccessKeyboard x:Name="BottomPanel" />
</Border>
</StackPanel>
</Grid>
<!-- ============ the connect sheet ============ -->
<!--
Follows the add sheet on HostsScreen, which follows HostKeySheet: a scrim, a bottom-aligned panel with
the top two corners rounded, and a grab handle that is decoration. Dismissible, like the add sheet and
unlike the host-key one — "which kind of connection" has no wrong answer and no answer at all is one
of them.
It lives here rather than in PhoneShell for the reason the add sheet lives in its own screen: nothing
but this surface raises it. The scrim reaching only the screen area is the full display while a shell
is showing, because the bottom bar is collapsed for it. Raised from the connect page it is not, and
that lands on the add sheet's own answer: the three destinations under the scrim stay tappable, and for
a menu of places to connect from, navigating away is a perfectly good way to decide not to.
Every row navigates away from the terminal. That is not a side effect of the menu, it is the menu:
each of the three destinations is a picker, and the shell they open lands back on this surface as a
new tab in the bar above.
-->
<Panel IsVisible="{Binding IsConnectSheetOpen}">
<!--
Declared before the sheet so the sheet draws over it: a Panel stacks its children in declaration
order. See the .scrim style for why a tap on it must not light anything up.
-->
<Button Classes="scrim" Command="{Binding CloseConnectSheetCommand}" />
<Border VerticalAlignment="Bottom" Background="{StaticResource Panel}"
BorderBrush="{StaticResource BorderMid}" BorderThickness="0,1,0,0"
CornerRadius="22,22,0,0" Padding="20,18,20,16">
<StackPanel Spacing="0">
<Border Width="38" Height="4" CornerRadius="2" Background="{StaticResource BorderMid}"
HorizontalAlignment="Center" Margin="0,0,0,16" />
<TextBlock Classes="title" Text="CONNECT" FontSize="13" />
<!--
◆ This shell's own host's files, first: the redesign draws a session's terminal and its files as
two views of one thing, and this is the nearest this application comes. It opens SFTP to the host
the selected tab is on — the desktop sidebar's "Open SFTP", through the same command — so the
listing lands on the right machine without choosing it again from a picker. It is a second
connection, which is why it is offered rather than switched to; see
MainWindowViewModel.SelectFilesHostAsync.
-->
<Button Classes="row" Margin="0,10,0,0" Command="{Binding OpenOtherSurfaceCommand}"
IsVisible="{Binding SelectedTab, Converter={x:Static ObjectConverters.IsNotNull}}"
AutomationProperties.Name="Files on this host">
<Grid ColumnDefinitions="Auto,14,*">
<TextBlock Grid.Column="0" Classes="icon" Text="&#xE2C7;" FontSize="22"
Foreground="{StaticResource AccentText}" />
<StackPanel Grid.Column="2" Spacing="3" VerticalAlignment="Center">
<TextBlock FontSize="14.5" FontWeight="SemiBold" Text="Files on this host" />
<TextBlock Classes="detail code" Text="{Binding SelectedTab.Address, FallbackValue=''}"
TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
</StackPanel>
</Grid>
</Button>
<Button Classes="row" Command="{Binding ShowScreenCommand}"
CommandParameter="{x:Static vm:ShellScreen.Hosts}">
<StackPanel Spacing="3" VerticalAlignment="Center">
<TextBlock FontSize="14.5" FontWeight="SemiBold" Foreground="{StaticResource Text}" Text="Connect" />
<TextBlock Classes="detail" FontSize="10.5"
Text="Another shell, on this host or any other in the keychain." />
</StackPanel>
</Button>
<!--
These two go through ShowFiles rather than ShowScreen, as the MORE hub's own rows do: one screen
over one view model, and which kind of remote it offers is the thing being chosen. It can refuse
— there is a single transfer session behind both — and refusing lands on the screen the open one
belongs to with a sentence saying why, which is a better place to read it than a sheet that has
just closed.
-->
<Button Classes="row" Command="{Binding ShowFilesCommand}"
CommandParameter="{x:Static vm:RemoteKind.Host}">
<StackPanel Spacing="3" VerticalAlignment="Center">
<TextBlock FontSize="14.5" FontWeight="SemiBold" Foreground="{StaticResource Text}" Text="Connect via SFTP" />
<TextBlock Classes="detail" FontSize="10.5" Text="Browse a host's files." />
</StackPanel>
</Button>
<Button Classes="row" Command="{Binding ShowFilesCommand}"
CommandParameter="{x:Static vm:RemoteKind.Bucket}">
<StackPanel Spacing="3" VerticalAlignment="Center">
<TextBlock FontSize="14.5" FontWeight="SemiBold" Foreground="{StaticResource Text}" Text="Connect via S3" />
<TextBlock Classes="detail" FontSize="10.5"
Text="Objects in an S3-compatible bucket from the keychain." />
</StackPanel>
</Button>
<Button Classes="secondary" Content="CANCEL" Margin="0,12,0,0"
Command="{Binding CloseConnectSheetCommand}" />
</StackPanel>
</Border>
</Panel>
<!-- ============ the forwards sheet ============ -->
<!--
The desktop sidebar's FORWARDS section, as a sheet: the selected tab's forwards as they run over its
session, bound to the same rows. Each row is its own switch, as there — tap a listening one to stop it,
an off or failed one to start it, a failed one being a retry because the port may have been freed.
The route is written under the notation rather than left to a tooltip, which is where the desktop
keeps it: a phone has no hover, and which end each port is on is exactly what people get backwards
about -L and -R. The reason a row failed sits under that again, as the desktop draws it.
The same shape as the connect sheet above, raised from the bar the same way, collapsing the renderer
the same way — see MainWindowViewModel.IsForwardsSheetOpen. It scrolls, capped at most of the display,
because a host may carry more forwards than fit, and a sheet that grew past the top of the screen would
put its own title out of reach.
Nothing here edits a forward, and there is no add row: this head's host editor has no PORT FORWARDS
section yet, and the desktop's Add forward row leads to one. The footer says where they are edited.
-->
<Panel IsVisible="{Binding IsForwardsSheetOpen}">
<Button Classes="scrim" Command="{Binding CloseForwardsSheetCommand}" />
<Border VerticalAlignment="Bottom" Background="{StaticResource Panel}"
BorderBrush="{StaticResource BorderMid}" BorderThickness="0,1,0,0"
CornerRadius="22,22,0,0" Padding="20,18,20,16">
<StackPanel Spacing="0">
<Border Width="38" Height="4" CornerRadius="2" Background="{StaticResource BorderMid}"
HorizontalAlignment="Center" Margin="0,0,0,16" />
<TextBlock Classes="title" Text="FORWARDS" FontSize="13" />
<TextBlock Classes="detail" FontSize="10.5" Margin="0,3,0,0"
Text="{Binding SelectedTab.Label, FallbackValue=''}" />
<ScrollViewer Margin="0,10,0,0" MaxHeight="420" HorizontalScrollBarVisibility="Disabled">
<ItemsControl ItemsSource="{Binding SelectedTab.Forwards}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:PortForwardViewModel">
<Button Classes="row" Padding="12,8" Command="{Binding ToggleCommand}">
<Grid ColumnDefinitions="*,Auto">
<StackPanel Grid.Column="0" Spacing="3" VerticalAlignment="Center">
<TextBlock Classes="mono" FontSize="13.5" FontWeight="SemiBold"
Text="{Binding Notation}" TextTrimming="CharacterEllipsis" />
<TextBlock Classes="detail" FontSize="10.5" TextWrapping="Wrap"
Text="{Binding Route}" />
<TextBlock Classes="detail" FontSize="10.5" TextWrapping="Wrap"
Foreground="{StaticResource TextDim}" Text="{Binding Detail}"
IsVisible="{Binding Detail, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" />
</StackPanel>
<TextBlock Grid.Column="1" Classes="fwdstate" Margin="12,0,0,0"
Text="{Binding StateText}"
Classes.live="{Binding IsListening}" Classes.failed="{Binding IsFailed}" />
</Grid>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<TextBlock Classes="body" Margin="0,10,0,0"
Text="Tap a forward to switch it off or on. Local and SOCKS forwards listen on this phone's localhost, where any app on it can connect, and every forward stops with this tab's connection. Forwards are saved on the host and edited in the desktop app; a change starts with the next connection." />
<Button Classes="secondary" Content="DONE" Margin="0,12,0,0"
Command="{Binding CloseForwardsSheetCommand}" />
</StackPanel>
</Border>
</Panel>
<!-- ============ the customise sheet ============ -->
<!--
Reached from CUSTOMIZE at the top of the quick-access keyboard's KEYS tab: which keys are on the bar
and in what order, which groups the KEYS tab shows and in what order, and keys of one's own.
Taller than the other two sheets, nearly the whole display, because it is a page of settings rather
than a menu — and it scrolls for the same reason. It takes the screen the way they do too: opening it
collapses the renderer (see MainWindowViewModel.IsTerminalShowing), so nothing is drawn over the
WebView and the boxes on it can have the keyboard.
Every change applies the moment it is made, to the bar and to the settings file, which is why there is
DONE and no SAVE. See TerminalKeyboardViewModel.
↑ and ↓ rather than drag handles. A drag inside a scrolling sheet is the same gesture as a scroll and
has to be told apart by a long press nobody can see; two buttons are slower and never wrong.
-->
<Panel IsVisible="{Binding Keyboard.IsCustomizing}">
<Button Classes="scrim" Command="{Binding Keyboard.CloseCustomizeCommand}" />
<Border Margin="0,40,0,0" Background="{StaticResource Panel}"
BorderBrush="{StaticResource BorderMid}" BorderThickness="0,1,0,0"
CornerRadius="22,22,0,0" Padding="20,18,20,0">
<Grid RowDefinitions="Auto,Auto,*">
<Border Grid.Row="0" Width="38" Height="4" CornerRadius="2" Background="{StaticResource BorderMid}"
HorizontalAlignment="Center" Margin="0,0,0,12" />
<Grid Grid.Row="1" ColumnDefinitions="*,Auto" Margin="0,0,0,8">
<TextBlock Grid.Column="0" Classes="title" Text="CUSTOMIZE KEYS" FontSize="13"
VerticalAlignment="Center" />
<Button Grid.Column="1" Classes="row" MinHeight="40" Padding="14,0"
Command="{Binding Keyboard.CloseCustomizeCommand}">
<TextBlock Classes="label" FontSize="9" Text="DONE" />
</Button>
</Grid>
<ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Disabled">
<StackPanel Spacing="6" Margin="0,0,0,24">
<!-- ── the bar ── -->
<Grid ColumnDefinitions="*,Auto" Margin="0,4,0,0">
<TextBlock Grid.Column="0" Classes="label" Text="THE BAR" />
<TextBlock Grid.Column="1" Classes="detail" FontSize="10" Text="{Binding Keyboard.BarCountText}" />
</Grid>
<TextBlock Classes="body" TextWrapping="Wrap"
Text="The first eight keys are the top row and the rest the second. Tap a key in a group below to put it on the bar or take it off." />
<ItemsControl ItemsSource="{Binding Keyboard.BarEditor}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:BarEditorRowViewModel">
<Border BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1" Padding="0,4">
<Grid ColumnDefinitions="64,*,Auto,Auto,Auto">
<TextBlock Grid.Column="0" Classes="mono" FontSize="13" FontWeight="SemiBold"
Text="{Binding Label}" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis" />
<StackPanel Grid.Column="1" Spacing="1" VerticalAlignment="Center">
<TextBlock Classes="detail" FontSize="10.5" Text="{Binding Hint}"
TextTrimming="CharacterEllipsis" />
<TextBlock Classes="detail" FontSize="9" Foreground="{StaticResource TextFaint}"
Text="{Binding Row}" />
</StackPanel>
<Button Grid.Column="2" Classes="icon" Height="40" Width="40"
AutomationProperties.Name="Move earlier" Command="{Binding MoveUpCommand}">
<TextBlock FontFamily="{StaticResource IconFont}" FontSize="18" Text="&#xE5D8;" />
</Button>
<Button Grid.Column="3" Classes="icon" Height="40" Width="40"
AutomationProperties.Name="Move later" Command="{Binding MoveDownCommand}">
<TextBlock FontFamily="{StaticResource IconFont}" FontSize="18" Text="&#xE5DB;" />
</Button>
<Button Grid.Column="4" Classes="icon" Height="40" Width="40"
AutomationProperties.Name="Take off the bar" Command="{Binding RemoveCommand}">
<TextBlock FontFamily="{StaticResource IconFont}" FontSize="18" Text="&#xE5CD;"
Foreground="{StaticResource TextFaint}" />
</Button>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Classes="body" TextWrapping="Wrap" IsVisible="{Binding !Keyboard.HasBar}"
Text="The bar is empty, so only the grid button is drawn above the keyboard." />
<!-- ── the groups ── -->
<TextBlock Classes="label" Text="GROUPS" Margin="0,16,0,0" />
<TextBlock Classes="body" TextWrapping="Wrap"
Text="The quick-access keyboard shows the ticked groups, in this order. A lit key is on the bar." />
<ItemsControl ItemsSource="{Binding Keyboard.GroupEditor}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:GroupEditorRowViewModel">
<Border BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1" Padding="0,6,0,10">
<StackPanel Spacing="6">
<Grid ColumnDefinitions="*,Auto,Auto">
<CheckBox Grid.Column="0" IsChecked="{Binding IsShown}" MinHeight="40">
<TextBlock Classes="mono" FontSize="12.5" FontWeight="SemiBold" Text="{Binding Title}" />
</CheckBox>
<Button Grid.Column="1" Classes="icon" Height="40" Width="40"
AutomationProperties.Name="Move up" Command="{Binding MoveUpCommand}">
<TextBlock FontFamily="{StaticResource IconFont}" FontSize="18" Text="&#xE5D8;" />
</Button>
<Button Grid.Column="2" Classes="icon" Height="40" Width="40"
AutomationProperties.Name="Move down" Command="{Binding MoveDownCommand}">
<TextBlock FontFamily="{StaticResource IconFont}" FontSize="18" Text="&#xE5DB;" />
</Button>
</Grid>
<ItemsControl ItemsSource="{Binding Keys}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate><WrapPanel /></ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:KeyChoiceViewModel">
<Button Classes="chiptoggle" Classes.worn="{Binding IsOnBar}" Margin="0,0,6,6"
Command="{Binding ToggleCommand}">
<TextBlock Classes="mono" FontSize="12" Text="{Binding Label}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!-- ── keys of one's own ── -->
<TextBlock Classes="label" Text="ADD A KEY" Margin="0,16,0,0" />
<ItemsControl ItemsSource="{Binding Keyboard.CustomKeyEditor}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="vm:CustomKeyRowViewModel">
<Border BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1" Padding="0,4">
<Grid ColumnDefinitions="64,*,Auto">
<TextBlock Grid.Column="0" Classes="mono" FontSize="13" FontWeight="SemiBold"
Text="{Binding Label}" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis" />
<TextBlock Grid.Column="1" Classes="detail code" FontSize="10.5" Text="{Binding Sequence}"
VerticalAlignment="Center" TextTrimming="CharacterEllipsis" />
<Button Grid.Column="2" Classes="icon" Height="40" Width="40"
AutomationProperties.Name="Delete this key" Command="{Binding DeleteCommand}">
<TextBlock FontFamily="{StaticResource IconFont}" FontSize="18" Text="&#xE872;"
Foreground="{StaticResource DangerText}" />
</Button>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!--
ShowSuggestions off on both boxes, for the reason the terminal's own input surface turns it off:
an autocorrecting keyboard capitalises the e in \e and puts a full stop after ^C, and the key
then sends something nobody typed.
-->
<TextBox Classes="field" Text="{Binding Keyboard.NewKeyLabel}" MaxLength="10"
TextInputOptions.ShowSuggestions="False"
PlaceholderText="Label, as it appears on the key" />
<TextBox Classes="field" Text="{Binding Keyboard.NewKeySequence}"
TextInputOptions.ShowSuggestions="False"
PlaceholderText="What it sends, e.g. \e:wq\r or ^C" />
<TextBlock Classes="body" TextWrapping="Wrap"
Text="\e is Escape, \r is Enter, \t is Tab, and ^ before a letter is Ctrl; \^ is a plain caret. Keys are kept on this phone in plain text, so this is no place for a password." />
<Button Classes="primary" Content="ADD KEY" Command="{Binding Keyboard.AddCustomKeyCommand}" />
<TextBlock Classes="detail" TextWrapping="Wrap" Foreground="{StaticResource WarnText}"
Text="{Binding Keyboard.CustomizeStatus}"
IsVisible="{Binding Keyboard.CustomizeStatus, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" />
<Button Classes="secondary" Content="RESET TO DEFAULTS" Margin="0,16,0,0"
Command="{Binding Keyboard.ResetLayoutCommand}" />
<TextBlock Classes="detail" TextWrapping="Wrap"
Text="Puts the bar and the groups back as they shipped. Keys you added are kept." />
</StackPanel>
</ScrollViewer>
</Grid>
</Border>
</Panel>
</Panel>
</UserControl>
Reference in new issue View Git Blame Copy Permalink