Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some UI improvements #161

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Some UI improvements #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c1c5354
UI Improvements on Add contact page
brullsker Jun 3, 2018
6240b42
UI improvements on AdvancedSettingsPage
brullsker Jun 3, 2018
ff3ef84
Another UI improvement on AdvancedSettingsPage
brullsker Jun 3, 2018
e9e4fb8
Added ReorderGridAnimation to GlobalSettingsPage
brullsker Jun 3, 2018
2e9bc88
UI fix NotificationSettingsPage
brullsker Jun 3, 2018
e5fad7e
UI improvement RegisterFinalizationPage
brullsker Jun 3, 2018
424928c
UI improvements RegisterPage
brullsker Jun 3, 2018
0bc8d9a
UI imprvements StartPage
brullsker Jun 3, 2018
6ad09ea
Improved UI of MainPage
brullsker Jun 3, 2018
178fd06
UI changes (improvements?) to MainPage and the Welcome control
brullsker Jun 3, 2018
5fde90d
Send bar disabled state doesnÄt look strange anymore - fix Issue #110
brullsker Jun 3, 2018
8242da7
fixed a ui failure made by me
brullsker Jun 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Signal-Windows/Controls/Conversation.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Name="InputTextBox" VerticalAlignment="Center" KeyDown="TextBox_KeyDown" PlaceholderText="Type a message" BorderBrush="{x:Null}" BorderThickness="0" TextWrapping="Wrap" TextChanged="InputTextBox_TextChanged" InputScope="Chat" Visibility="{x:Bind SendMessageVisible, Mode=OneWay}"/>
<TextBox Grid.Column="0" Name="InputTextBox" VerticalAlignment="Center" KeyDown="TextBox_KeyDown" PlaceholderText="Type a message" BorderBrush="{x:Null}" BorderThickness="0" TextWrapping="Wrap" TextChanged="InputTextBox_TextChanged" InputScope="Chat" Visibility="{x:Bind SendMessageVisible, Mode=OneWay}" Padding="10,15,6,15"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The previous (default) padding was 10,3,6,5. Do other chat apps on uwp also use such a big padding to north and south? If the input becomes multiline we might want to waste as little vertical space as possible

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, changing padding was the first thing coming to my mind...

<Button x:Name="SendMessageButton" Grid.Column="1" Click="SendMessageButton_Click" IsEnabled="{x:Bind SendButtonEnabled, Mode=OneWay}" Background="{x:Bind SendButtonBackground}" VerticalAlignment="Bottom" Width="50" VerticalContentAlignment="Stretch" MinHeight="50" Visibility="{x:Bind SendMessageVisible, Mode=OneWay}">
<SymbolIcon Symbol="Send"/>
</Button>
Expand Down
5 changes: 4 additions & 1 deletion Signal-Windows/Controls/Welcome.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
d:DesignWidth="400">

<Grid>
<Image Source="ms-appx:///Assets/logo-idea-2.png" Width="256"/>
<StackPanel Orientation="Vertical">
<Image Source="ms-appx:///Assets/logo-idea-2.png" Width="256"/>
<TextBlock Text="Choose a contact to start chatting" Grid.Row="1" HorizontalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}" Foreground="White" Margin="0,12,0,0"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Contact or group, maybe we should just say "conversation"?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, sounds better

</StackPanel>
</Grid>
</UserControl>
7 changes: 4 additions & 3 deletions Signal-Windows/Views/AddContactPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,14 @@
</Grid.RowDefinitions>

<StackPanel HorizontalAlignment="Center" Width="328">
<TextBlock Text="Add a manual contact" HorizontalAlignment="Center" Margin="0,16,0,0"/>
<TextBlock Text="Add contact manually" HorizontalAlignment="Center" Margin="0,16,0,0"/>
<TextBlock Text="Name"/>
<TextBox x:Name="ContactNameTextBox" Text="{x:Bind Vm.ContactName, Mode=TwoWay}" IsEnabled="{x:Bind Vm.UIEnabled, Mode=OneWay}" Margin="0,4,0,0" TextChanged="ContactNameTextBox_TextChanged" InputScope="PersonalFullName" />
<TextBlock Text="Number" Margin="0,16,0,0" />
<TextBox x:Name="ContactNumberTextBox" Text="{x:Bind Vm.ContactNumber, Mode=TwoWay}" IsEnabled="{x:Bind Vm.UIEnabled, Mode=OneWay}" Margin="0,4,0,0" TextChanged="ContactNumberTextBox_TextChanged" InputScope="TelephoneNumber" />
<Button x:Name="AddButton" Content="Add" IsEnabled="{x:Bind Vm.AddEnabled, Mode=OneWay}" HorizontalAlignment="Stretch" Margin="0,16" Click="AddButton_Click" />
<AutoSuggestBox x:Name="searchBox" VerticalAlignment="Stretch" QueryIcon="Find" TextChanged="searchBox_TextChanged" IsEnabled="{x:Bind Vm.UIEnabled, Mode=OneWay}"/>
<Button x:Name="AddButton" Content="Add" IsEnabled="{x:Bind Vm.AddEnabled, Mode=OneWay}" HorizontalAlignment="Stretch" Margin="0,16,0,6" Click="AddButton_Click" />
<MenuFlyoutSeparator/>
<AutoSuggestBox x:Name="searchBox" VerticalAlignment="Stretch" QueryIcon="Find" TextChanged="searchBox_TextChanged" IsEnabled="{x:Bind Vm.UIEnabled, Mode=OneWay}" Margin="0,6,0,0"/>
</StackPanel>
<Grid Grid.Row="1" Visibility="{x:Bind Vm.ContactsVisible, Mode=OneWay}">
<toolbox:PullToRefreshListView x:Name="ContactsList" ItemClick="ContactsList_ItemClick" ItemsSource="{x:Bind Vm.Contacts, Mode=OneWay}" IsItemClickEnabled="True" HorizontalAlignment="Center" IsEnabled="{x:Bind Vm.UIEnabled, Mode=OneWay}"
Expand Down
48 changes: 24 additions & 24 deletions Signal-Windows/Views/AdvancedSettingsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<Page
x:Class="Signal_Windows.Views.AdvancedSettingsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Signal_Windows.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding AdvancedSettingsPageInstance, Source={StaticResource Locator}}">

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="8*"/>
</Grid.RowDefinitions>
<TextBlock Text="Advanced" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}"/>
<StackPanel Grid.Row="1" Margin="32,0,0,0">
<Button x:Name="ExportDebugLogButton" Content="Export debug log" Click="ExportDebugLogButton_Click"/>
<Button x:Name="SyncButton" Content="Request contact and group sync" Margin="0,8,0,0" Click="SyncButton_Click"/>
<Button x:Name="TestCrashButton" Content="Intentionally crash the app to test its debug log export" Click="TestCrashButton_Click"/>
</StackPanel>
</Grid>
</Page>
<Page
x:Class="Signal_Windows.Views.AdvancedSettingsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Signal_Windows.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding AdvancedSettingsPageInstance, Source={StaticResource Locator}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="8*"/>
</Grid.RowDefinitions>
<TextBlock Text="Advanced" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}"/>
<StackPanel Grid.Row="1" Margin="32,0,0,0" HorizontalAlignment="Left">
<HyperlinkButton x:Name="ExportDebugLogButton" Content="Export debug log" Click="ExportDebugLogButton_Click" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"/>
<HyperlinkButton x:Name="SyncButton" Content="Request contact and group sync" Margin="0,8,0,0" Click="SyncButton_Click" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"/>
<HyperlinkButton x:Name="TestCrashButton" Content="Intentionally crash the app to test its debug log export" Click="TestCrashButton_Click" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why HyperlinkButtons? Do they behave/look different here?

</StackPanel>
</Grid>
</Page>
3 changes: 2 additions & 1 deletion Signal-Windows/Views/GlobalSettingsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
xmlns:local="using:Signal_Windows.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
mc:Ignorable="d"
DataContext="{Binding GlobalSettingsPageInstance, Source={StaticResource Locator}}">

Expand All @@ -29,7 +30,7 @@
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock Text="Settings" Style="{StaticResource HeaderTextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<VariableSizedWrapGrid x:Name="WrapGrid" HorizontalAlignment="Left" MaximumRowsOrColumns="1" VerticalAlignment="Top" Orientation="Horizontal" ItemWidth="250" ItemHeight="80" Grid.Row="1" Margin="32,0,32,0">
<VariableSizedWrapGrid x:Name="WrapGrid" HorizontalAlignment="Left" MaximumRowsOrColumns="1" VerticalAlignment="Top" Orientation="Horizontal" ItemWidth="250" ItemHeight="80" Grid.Row="1" Margin="32,0,32,0" animations:ReorderGridAnimation.Duration="300">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This animation seems to not work for me.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also don't notice a difference on my W10 desktop.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, seems to not work... Sorry

<Button x:Name="NotificationsButton" Background="{x:Null}" Width="250" HorizontalContentAlignment="Left" Click="NotificationsButton_Click">
<StackPanel Orientation="Horizontal">
<FontIcon Glyph="&#xEA8F;" FontSize="36"/>
Expand Down
21 changes: 12 additions & 9 deletions Signal-Windows/Views/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,22 @@
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
<Border Grid.Row="0" Background="Black" Opacity="0.25"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The blue color was exactly the same blue the official signal clients use at that position - do we want to diverge color-wise? I think we should keep the general look so that S-W feels like an official signal client

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think it would look better without that black-transparent border?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't know tbh, let's just stick with Signal-Android/Desktops color schemes

<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Center" Grid.Column="0" Text="Signal" FontSize="34" FontWeight="Light" Margin="0,16" Foreground="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
<Button Grid.Column="1" x:Name="AddContactButton" Background="{x:Null}" Click="AddContactButton_Click">
<SymbolIcon Symbol="AddFriend" Foreground="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
</Button>
<Button Grid.Column="2" x:Name="GlobalSettingsButton" Background="{x:Null}" Click="GlobalSettingsButton_Click">
<SymbolIcon Symbol="Setting" Foreground="{ThemeResource ApplicationPageBackgroundThemeBrush}" />
</Button>
<TextBlock Grid.Column="0" Text="Signal" FontSize="34" FontWeight="Light" Margin="6,16" Foreground="White" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Button x:Name="AddContactButton" Background="{x:Null}" Click="AddContactButton_Click">
<SymbolIcon Symbol="AddFriend" Foreground="White" />
</Button>
<Button x:Name="GlobalSettingsButton" Background="{x:Null}" Click="GlobalSettingsButton_Click">
<SymbolIcon Symbol="Setting" Foreground="White" />
</Button>
</StackPanel>
</Grid>
<AutoSuggestBox Grid.Row="1" Margin="16"/>
<ListView Grid.Row="2" Name="ContactsList" ItemsSource="{x:Bind Vm.Conversations, Mode=TwoWay}" SelectionMode="Single" SelectionChanged="Vm.ConversationsList_SelectionChanged" SelectedItem="{x:Bind Vm.SelectedConversation, Mode=TwoWay}">
Expand All @@ -67,7 +70,7 @@
</Grid>
</SplitView.Pane>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<controls:Welcome Grid.Row="0" Visibility="{x:Bind Vm.WelcomeVisibility, Mode=OneWay}" />
<controls:Welcome Grid.Row="0" Visibility="{x:Bind Vm.WelcomeVisibility, Mode=OneWay}" VerticalAlignment="Center"/>
<controls:Conversation Grid.Row="0" Visibility="{x:Bind Vm.ThreadVisibility, Mode=OneWay}" x:Name="ConversationControl" />
</Grid>
</SplitView>
Expand Down
6 changes: 3 additions & 3 deletions Signal-Windows/Views/NotificationSettingsPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel>
<TextBlock Text="Show" Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,6"/>
<TextBlock Text="Show..." Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,6"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ellipsis isn't needed. I tried to match the text from the Signal app, which doesn't use an ellipsis here.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, didn't know that

<RadioButton Content="Name and message" Tag="{x:Bind Vm.NameAndMessageTag}" Margin="0,6" IsChecked="{x:Bind Vm.NameAndMessageChecked, Mode=TwoWay}" Checked="ShowNotificationText_Checked"/>
<RadioButton Content="Name only" Tag="{x:Bind Vm.NameOnlyTag}" Margin="0,6" IsChecked="{x:Bind Vm.NameOnlyChecked, Mode=TwoWay}" Checked="ShowNotificationText_Checked"/>
<RadioButton Content="No name or message" Tag="{x:Bind Vm.NoNameOrMessageTag}" Margin="0,6" IsChecked="{x:Bind Vm.NoNameOrMessageChecked, Mode=TwoWay}" Checked="ShowNotificationText_Checked"/>
<RadioButton Content="No name or message" Tag="{x:Bind Vm.NoNameOrMessageTag}" Margin="0,6" IsChecked="{x:Bind Vm.NoNameOrMessageChecked, Mode=TwoWay}" Checked="ShowNotificationText_Checked"/><!--Does this mean that no notif will be shown?-->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, this means that if you get a message you'll still get a notification but the person who sent it or the message they sent won't be in the notification.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, thanks

</StackPanel>
<HyperlinkButton Grid.Row="1" Margin="0,16,0,0" NavigateUri="ms-settings:notifications" Content="More notification settings"/>
<HyperlinkButton Grid.Row="1" Margin="0,12,0,0" NavigateUri="ms-settings:notifications" Content="More notification settings"/>
</Grid>
</ScrollViewer>
<StackPanel Grid.Row="1">
Expand Down
2 changes: 1 addition & 1 deletion Signal-Windows/Views/RegisterFinalizationPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
<TextBlock x:Name="TitleTextBlock" Grid.Row="0" Foreground="White" FontSize="34" HorizontalAlignment="Center" FontWeight="Light" Text="Connect with Signal" VerticalAlignment="Center"/>
<StackPanel Grid.Row="1">
<TextBlock Foreground="White" HorizontalAlignment="Center" Text="Enter your SMS verification code" FontSize="24" FontWeight="SemiLight"/>
<TextBox Width="200" Text="{x:Bind Vm.VerificationCode, Mode=TwoWay}" IsEnabled="{x:Bind Vm.UIEnabled, Mode=OneWay}" Margin="0,16,0,0" InputScope="Number"/>
<TextBox Width="200" BorderThickness="0,0,0,2" Text="{x:Bind Vm.VerificationCode, Mode=TwoWay}" IsEnabled="{x:Bind Vm.UIEnabled, Mode=OneWay}" Margin="0,16,0,0" InputScope="Number"/>
<Button Background="White" Foreground="#2190EA" HorizontalAlignment="Center" Width="200" Margin="20 20 20 20" Click="FinishButton_Click" IsEnabled="{x:Bind Vm.UIEnabled, Mode=OneWay}" Content="Finish Registration"/>
</StackPanel>
</Grid>
Expand Down
7 changes: 4 additions & 3 deletions Signal-Windows/Views/RegisterPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,14 @@
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="+" Foreground="White" FontSize="20"/>
<TextBox Grid.Column="1" Text="{x:Bind Vm.PhonePrefix, Mode=TwoWay}" MinWidth="32" InputScope="TelephoneCountryCode"/>
<Border Background="{ThemeResource TextBoxBorderThemeBrush}" Opacity="0.65"/>
<TextBlock Grid.Column="0" Text="+" Foreground="White" FontSize="20" HorizontalAlignment="Center"/>
<TextBox Grid.Column="1" BorderThickness="0,2,2,2" Text="{x:Bind Vm.PhonePrefix, Mode=TwoWay}" MinWidth="32" InputScope="TelephoneCountryCode"/>
<TextBox Grid.Column="3" Text="{x:Bind Vm.PhoneSuffix, Mode=TwoWay}" PlaceholderText="Phone number" InputScope="TelephoneNumber"/>
</Grid>
</StackPanel>
<TextBlock x:Name="VerifyTextBlock" Text="Verify your phone number to connect with Signal." FontSize="20" Foreground="White" HorizontalAlignment="Center" Margin="0,16,0,0" TextAlignment="Center" TextWrapping="Wrap"/>
<Button x:Name="RegisterButton" Background="White" Foreground="#2190EA" HorizontalAlignment="Center" Content="Register" Click="RegisterButton_Click" Margin="0,16,0,0" Width="256"/>
<Button x:Name="RegisterButton" Background="White" Foreground="#2190EA" HorizontalAlignment="Center" Content="Register" Click="RegisterButton_Click" Margin="0,16,0,0" Width="300"/>
</StackPanel>
</Grid>
</Page>
4 changes: 2 additions & 2 deletions Signal-Windows/Views/StartPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="ms-appx:///Assets/logo-idea-2.png" Width="256"/>
<TextBlock x:Name="TitleTextBlock" Text="Welcome to Signal for Windows" Foreground="White" FontSize="24" FontWeight="Light" HorizontalAlignment="Center" Margin="0,50,0,0"/>
<Button x:Name="RegisterButton" HorizontalAlignment="Center" Foreground="#2190EA" Background="White" Content="Register a new Signal account" Margin="0,50,0,0" Click="RegisterButton_Click"/>
<Button x:Name="LinkButton" HorizontalAlignment="Center" Foreground="#2190EA" Background="White" Content="Link to an existing Signal account" Margin="0,20,0,0" Click="LinkButton_Click"/>
<Button x:Name="RegisterButton" Width="320" HorizontalAlignment="Center" Foreground="#2190EA" Background="White" Content="Register a new Signal account" Margin="0,50,0,0" Click="RegisterButton_Click"/>
<Button x:Name="LinkButton" HorizontalAlignment="Center" Width="320" Foreground="#2190EA" Background="White" Content="Link to an existing Signal account" Margin="0,20,0,0" Click="LinkButton_Click"/>
</StackPanel>
</Grid>
</Page>