Skip to content

Commit

Permalink
Auto merge of #24126 - paulrouget:ui++, r=jdm
Browse files Browse the repository at this point in the history 
Make the HoloLens UI look better

Throbber, icons, tooltips, alignment, etc...

Based on top of #24125

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/24126)
<!-- Reviewable:end -->
  • Loading branch information
bors-servo committed Sep 11, 2019
2 parents 86ad841 + 19d9616 commit f69fe45
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 6 deletions.
Binary file added support/hololens/ServoApp/Assets/UI/back.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added support/hololens/ServoApp/Assets/UI/forward.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added support/hololens/ServoApp/Assets/UI/reload.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added support/hololens/ServoApp/Assets/UI/stop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions support/hololens/ServoApp/BrowserPage.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,18 @@ void BrowserPage::BindServoEvents() {
forwardButton().IsEnabled(forward);
});
servoControl().OnLoadStarted([=] {
throbber().IsActive(true);
reloadButton().IsEnabled(false);
reloadButton().Visibility(Visibility::Collapsed);
stopButton().IsEnabled(true);
stopButton().Visibility(Visibility::Visible);
});
servoControl().OnLoadEnded([=] {
throbber().IsActive(false);
reloadButton().IsEnabled(true);
reloadButton().Visibility(Visibility::Visible);
stopButton().IsEnabled(false);
stopButton().Visibility(Visibility::Collapsed);
});
servoControl().OnCaptureGesturesStarted([=] {
servoControl().Focus(FocusState::Programmatic);
Expand Down
92 changes: 86 additions & 6 deletions support/hololens/ServoApp/BrowserPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,105 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="NavigationBarButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
<Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="10,2"/>
<Setter Property="MinWidth" Value="30"/>
<Setter Property="MinHeight" Value="30"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
<Setter Property="FocusVisualMargin" Value="-3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" CornerRadius="{TemplateBinding CornerRadius}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/>
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Opacity">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.2"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>

<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="navigationBar">
<Grid Grid.Row="0" x:Name="navigationBar" Background="{ThemeResource InkToolbarButtonBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<Button x:Name="backButton" IsTabStop="true" IsEnabled="false" Content="Back" Click="OnBackButtonClicked"/>
<Button x:Name="forwardButton" IsTabStop="true" IsEnabled="false" Content="Forward" Click="OnForwardButtonClicked"/>
<Button x:Name="reloadButton" IsTabStop="true" IsEnabled="false" Content="reload" Click="OnReloadButtonClicked"/>
<Button x:Name="stopButton" IsTabStop="true" IsEnabled="false" Content="stop" Click="OnStopButtonClicked"/>
<Button Style="{StaticResource NavigationBarButton}" x:Name="backButton" IsTabStop="true" IsEnabled="false" Click="OnBackButtonClicked" AutomationProperties.Name="Back">
<Image Source="Assets/UI/back.png" Height="12"></Image>
</Button>
<Button Style="{StaticResource NavigationBarButton}" x:Name="forwardButton" IsTabStop="true" IsEnabled="false" Click="OnForwardButtonClicked" AutomationProperties.Name="Forward">
<Image Source="Assets/UI/forward.png" Height="12"></Image>
</Button>
<Button Style="{StaticResource NavigationBarButton}" x:Name="reloadButton" IsTabStop="true" IsEnabled="false" Visibility="Visible" Click="OnReloadButtonClicked" AutomationProperties.Name="Reload">
<Image Source="Assets/UI/reload.png" Height="12"></Image>
</Button>
<Button Style="{StaticResource NavigationBarButton}" x:Name="stopButton" IsTabStop="true" IsEnabled="false" Visibility="Collapsed" Click="OnStopButtonClicked" AutomationProperties.Name="Stop">
<Image Source="Assets/UI/stop.png" Height="12"></Image>
</Button>
</StackPanel>
<TextBox Text="" IsTabStop="true" InputScope="Url" PlaceholderText="Type a URL" x:Name="urlTextbox" Grid.Column="1" KeyUp="OnURLEdited"/>
<TextBox Text="" IsTabStop="true" InputScope="Url" PlaceholderText="Type a URL" x:Name="urlTextbox" Grid.Column="1" KeyUp="OnURLEdited" IsSpellCheckEnabled="False" Margin="3,0"/>
<ProgressRing x:Name="throbber" Grid.Column="2" Margin="10,0"/>
</Grid>
<local:ServoControl TabIndex="0" x:Name="servoControl" Grid.Row="1"/>
</Grid>
Expand Down
4 changes: 4 additions & 0 deletions support/hololens/ServoApp/ServoApp.vcxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -948,6 +948,10 @@
<Image Include="Assets\StoreLogo.scale-100.png" />
<Image Include="Assets\StoreLogo.scale-200.png" />
<Image Include="Assets\StoreLogo.scale-400.png" />
<Image Include="Assets\UI\back.png" />
<Image Include="Assets\UI\forward.png" />
<Image Include="Assets\UI\reload.png" />
<Image Include="Assets\UI\stop.png" />
<Image Include="Assets\Wide310x150Logo.scale-100.png" />
<Image Include="Assets\Wide310x150Logo.scale-200.png" />
<Image Include="Assets\Wide310x150Logo.scale-400.png" />
Expand Down
15 changes: 15 additions & 0 deletions support/hololens/ServoApp/ServoApp.vcxproj.filters
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,18 @@
<Image Include="Assets\StoreLogo.scale-400.png">
<Filter>Assets</Filter>
</Image>
<Image Include="Assets\UI\back.png">
<Filter>Assets\UI</Filter>
</Image>
<Image Include="Assets\UI\forward.png">
<Filter>Assets\UI</Filter>
</Image>
<Image Include="Assets\UI\reload.png">
<Filter>Assets\UI</Filter>
</Image>
<Image Include="Assets\UI\stop.png">
<Filter>Assets\UI</Filter>
</Image>
</ItemGroup>
<ItemGroup>
<AppxManifest Include="Package.appxmanifest" />
Expand Down Expand Up @@ -876,6 +888,9 @@
<Filter Include="ServoControl">
<UniqueIdentifier>{d21a959c-19d1-4a54-b942-692c27e5b3a6}</UniqueIdentifier>
</Filter>
<Filter Include="Assets\UI">
<UniqueIdentifier>{d49fe329-5e22-4470-8310-5b925419e6f8}</UniqueIdentifier>
</Filter>
</ItemGroup>
<ItemGroup>
<None Include="PropertySheet.props" />
Expand Down

0 comments on commit f69fe45

Please sign in to comment.