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

This commit is contained in:
2026-08-07 18:12:36 +02:00
parent 2ba7c14e35
commit dca2e888d6
2 changed files with 79 additions and 19 deletions
+36
View File
@@ -954,6 +954,42 @@
<Setter Property="Background" Value="{StaticResource Accent}" /> <Setter Property="Background" Value="{StaticResource Accent}" />
</Style> </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 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 carries, because it is not a selection: it says "let go here", it lasts as long as the pointer is over
+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 <!-- 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. --> 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 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}" Background="{StaticResource Chrome}" BorderBrush="{StaticResource BorderMid}"
BorderThickness="1" CornerRadius="6"> BorderThickness="1" CornerRadius="14">
<StackPanel> <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,*"> <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" /> Foreground="{StaticResource Accent}" VerticalAlignment="Center" />
<TextBox Grid.Column="1" x:Name="Query" Text="{Binding SearchText}" <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" FontFamily="{StaticResource MonoFont}" FontSize="14"
Background="Transparent" BorderThickness="0" /> Background="Transparent" BorderThickness="0" />
</Grid> </Grid>
@@ -54,32 +60,50 @@
looks like it does — the keyboard route already treats choosing a row and connecting to it as one 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. 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. 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}" ItemsSource="{Binding SearchResults}"
SelectedItem="{Binding SelectedSearchResult}"> SelectedItem="{Binding SelectedSearchResult}">
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
<DataTemplate x:DataType="vm:HostRowViewModel"> <DataTemplate x:DataType="vm:HostRowViewModel">
<Grid ColumnDefinitions="Auto,*,Auto" Margin="0,8,12,8"> <Border Classes="qcrow" Height="44" CornerRadius="9" Padding="10,0" Margin="8,2">
<Border Grid.Column="0" Classes="rowmark" /> <Grid ColumnDefinitions="Auto,*,Auto">
<StackPanel Grid.Column="1" Spacing="1" Margin="12,0,0,0"> <!--
<TextBlock Classes="mono" Text="{Binding Label}" FontSize="13" FontWeight="Medium" Green when this host has a terminal open right now, grey otherwise — the same two-state
Foreground="{StaticResource Text}" /> dot the hosts grid draws, and the same reason: nothing here pings a machine, so a third
<TextBlock Classes="mono" Text="{Binding Address}" FontSize="10.5" colour would be a claim this application never checks. See Ellipse.dot in App.axaml.
Foreground="{StaticResource TextFaint}" /> -->
</StackPanel> <Ellipse Grid.Column="0" Classes="dot" Classes.live="{Binding IsConnected}"
<TextBlock Grid.Column="2" Classes="mono" Text="{Binding Authentication}" FontSize="10" Width="8" Height="8" VerticalAlignment="Center" />
Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" /> <StackPanel Grid.Column="1" Spacing="1" Margin="10,0,0,0" VerticalAlignment="Center">
</Grid> <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> </DataTemplate>
</ListBox.ItemTemplate> </ListBox.ItemTemplate>
</ListBox> </ListBox>
<TextBlock Classes="hint" FontSize="12" Margin="14,16" <TextBlock Classes="hint" FontSize="12" Margin="18,16"
Text="No host matches that." Text="No host matches that."
IsVisible="{Binding !HasSearchResults}" /> 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}" <TextBlock Classes="mono" FontSize="10" Foreground="{StaticResource TextFaint}"
Text="↑ ↓ to choose · ENTER or click to connect · ESC to close" /> Text="↑ ↓ to choose · ENTER or click to connect · ESC to close" />
</Border> </Border>