Public Access
Redraw quick connect in v5's shape, auth word and all
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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=">" FontSize="13"
|
<TextBlock Grid.Column="0" Classes="mono" Text=">_" 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}" />
|
-->
|
||||||
|
<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>
|
</StackPanel>
|
||||||
<TextBlock Grid.Column="2" Classes="mono" Text="{Binding Authentication}" FontSize="10"
|
<!--
|
||||||
Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />
|
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>
|
</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>
|
||||||
|
|||||||
Reference in New Issue
Block a user