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

Redraw quick connect in v5's shape, auth word and all

Browse Source
This commit is contained in:
jaap-jan
2026-08-07 18:12:36 +02:00
parent 2ba7c14e35
commit dca2e888d6
2 changed files with 79 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/DodoSSH.Client.App/App.axaml
+36
View File
@@ -954,6 +954,42 @@
<Setter Property="Background" Value="{StaticResource Accent}" />
</Style>
<!--
Quick connect's own rows. In this file rather than QuickConnect.axaml, the same reason every other
list style is here: that view is the one caller, but what a selected row looks like is a palette
answer and belongs beside every other one.
Classes="tiles" on that ListBox clears the theme's own full-bleed selection wash first — see the
remark above "A LIST OF TILES" — for the same reason: a wash behind a 9-pixel-rounded row shows as
square corners peeking out from behind it. This is the one list in the application whose selected row
fills solid rather than tinting or carrying a strip, which is the mock's own choice and reads as
right here specifically: this palette is choosing a machine to connect to *now*, not one it is idly
browsing, and nothing else in the window asks to look this insistent.
-->
<Style Selector="Border.qcrow">
<Setter Property="Background" Value="Transparent" />
</Style>
<Style Selector="ListBoxItem:pointerover Border.qcrow">
<Setter Property="Background" Value="{StaticResource Hover}" />
</Style>
<Style Selector="ListBoxItem:selected Border.qcrow, ListBoxItem:selected:pointerover Border.qcrow">
<Setter Property="Background" Value="{StaticResource Accent}" />
</Style>
<Style Selector="TextBlock.qcrow-text">
<Setter Property="Foreground" Value="{StaticResource Text}" />
</Style>
<Style Selector="TextBlock.qcrow-subtext">
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
</Style>
<Style Selector="ListBoxItem:selected TextBlock.qcrow-text, ListBoxItem:selected TextBlock.qcrow-subtext">
<!--
AccentInk rather than a literal white: it is v5's name for "the colour text sits in on top of the
accent", which is what a filled row is. Naming it that way rather than #FFFFFF is what keeps this
rule true if the accent itself ever moves to a hue where white stops being the readable choice.
-->
<Setter Property="Foreground" Value="{StaticResource AccentInk}" />
</Style>
<!--
The group card a host is about to be dropped on. A wash rather than the accent strip a selection
carries, because it is not a selection: it says "let go here", it lasts as long as the pointer is over
src/DodoSSH.Client.App/Views/QuickConnect.axaml
+43 -19
View File
@@ -30,17 +30,23 @@
<!-- 80% of Canvas. Written out because a scrim is a brush with an alpha, and the palette holds no alpha
variant of a surface — see Palette.axaml, where the only pre-multiplied brushes are the accent washes. -->
<Border x:Name="Backdrop" Background="#CC0E1220" PointerPressed="OnBackdropPressed">
<Border Width="520" VerticalAlignment="Top" Margin="0,90,0,0"
<Border Width="640" VerticalAlignment="Top" Margin="0,160,0,0"
Background="{StaticResource Chrome}" BorderBrush="{StaticResource BorderMid}"
BorderThickness="1" CornerRadius="6">
BorderThickness="1" CornerRadius="14">
<StackPanel>
<Border Padding="12,10" BorderBrush="{StaticResource BorderSubtle}" BorderThickness="0,0,0,1">
<!--
">_" rather than the bare ">" v4 drew: the mock's own prompt glyph, and the underscore is what
reads as a cursor waiting for the first keystroke rather than a stray angle bracket. There is
still no drawn caret in the field beside it, for the reason TextBox.address in this file gives —
it already has a real one.
-->
<Border Padding="16,14" BorderBrush="{StaticResource BorderSubtle}" BorderThickness="0,0,0,1">
<Grid ColumnDefinitions="Auto,*">
<TextBlock Grid.Column="0" Classes="mono" Text="&gt;" FontSize="13"
<TextBlock Grid.Column="0" Classes="mono" Text="&gt;_" FontSize="14" FontWeight="Bold"
Foreground="{StaticResource Accent}" VerticalAlignment="Center" />
<TextBox Grid.Column="1" x:Name="Query" Text="{Binding SearchText}"
PlaceholderText="search hosts" Margin="8,0,0,0"
PlaceholderText="search hosts" Margin="10,0,0,0"
FontFamily="{StaticResource MonoFont}" FontSize="14"
Background="Transparent" BorderThickness="0" />
</Grid>
@@ -54,32 +60,50 @@
looks like it does — the keyboard route already treats choosing a row and connecting to it as one
act, and a pointer that only highlighted would leave the palette open over a choice already made.
The gesture is wired in the code-behind, as the sidebar's double-click is.
Classes="tiles" clears the theme's full-bleed hover and selection wash the way the hosts grid's own
cards do — see the remark on Border.qcrow in App.axaml, which is what paints every state here
instead. Rows rather than cards, but the same reason applies: a square wash behind a rounded shape
shows its corners.
-->
<ListBox x:Name="Results" MaxHeight="280" Focusable="False"
<ListBox x:Name="Results" Classes="tiles" MaxHeight="320" Focusable="False"
ItemsSource="{Binding SearchResults}"
SelectedItem="{Binding SelectedSearchResult}">
<ListBox.ItemTemplate>
<DataTemplate x:DataType="vm:HostRowViewModel">
<Grid ColumnDefinitions="Auto,*,Auto" Margin="0,8,12,8">
<Border Grid.Column="0" Classes="rowmark" />
<StackPanel Grid.Column="1" Spacing="1" Margin="12,0,0,0">
<TextBlock Classes="mono" Text="{Binding Label}" FontSize="13" FontWeight="Medium"
Foreground="{StaticResource Text}" />
<TextBlock Classes="mono" Text="{Binding Address}" FontSize="10.5"
Foreground="{StaticResource TextFaint}" />
</StackPanel>
<TextBlock Grid.Column="2" Classes="mono" Text="{Binding Authentication}" FontSize="10"
Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />
</Grid>
<Border Classes="qcrow" Height="44" CornerRadius="9" Padding="10,0" Margin="8,2">
<Grid ColumnDefinitions="Auto,*,Auto">
<!--
Green when this host has a terminal open right now, grey otherwise — the same two-state
dot the hosts grid draws, and the same reason: nothing here pings a machine, so a third
colour would be a claim this application never checks. See Ellipse.dot in App.axaml.
-->
<Ellipse Grid.Column="0" Classes="dot" Classes.live="{Binding IsConnected}"
Width="8" Height="8" VerticalAlignment="Center" />
<StackPanel Grid.Column="1" Spacing="1" Margin="10,0,0,0" VerticalAlignment="Center">
<TextBlock Classes="mono qcrow-text" Text="{Binding Label}" FontSize="13"
FontWeight="Medium" TextTrimming="CharacterEllipsis" />
<TextBlock Classes="mono qcrow-subtext" Text="{Binding Address}" FontSize="11.5"
TextTrimming="CharacterEllipsis" />
</StackPanel>
<!--
credential / key / password — never the mock's SSH/SFTP kind column. Every palette
connect here is SSH, so printing that word would be a constant dressed up as a reading;
see hosts-v5-design-spec.md's deviations and HostRowViewModel.Authentication.
-->
<TextBlock Grid.Column="2" Classes="mono qcrow-subtext" Text="{Binding Authentication}"
FontSize="11" Margin="10,0,0,0" VerticalAlignment="Center" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Classes="hint" FontSize="12" Margin="14,16"
<TextBlock Classes="hint" FontSize="12" Margin="18,16"
Text="No host matches that."
IsVisible="{Binding !HasSearchResults}" />
<Border Padding="12,7" BorderBrush="{StaticResource BorderSubtle}" BorderThickness="0,1,0,0">
<Border Padding="16,10" BorderBrush="{StaticResource BorderSubtle}" BorderThickness="0,1,0,0">
<TextBlock Classes="mono" FontSize="10" Foreground="{StaticResource TextFaint}"
Text="↑ ↓ to choose · ENTER or click to connect · ESC to close" />
</Border>