Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-07-23 15:23:42 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make the UI look better

Browse source
This commit is contained in:
Paul Rouget 2019-09-11 11:58:04 +02:00
parent 2f0dbc57a6
commit 19d961626b
8 changed files with 111 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
support/hololens/ServoApp/Assets/UI/back.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
support/hololens/ServoApp/Assets/UI/forward.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
support/hololens/ServoApp/Assets/UI/reload.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
support/hololens/ServoApp/Assets/UI/stop.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

6
support/hololens/ServoApp/BrowserPage.cpp
View file

@ -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);

92
support/hololens/ServoApp/BrowserPage.xaml
View file

@ -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>

4
support/hololens/ServoApp/ServoApp.vcxproj
View file

@ -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" />

15
support/hololens/ServoApp/ServoApp.vcxproj.filters
View file

@ -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" />
@ -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" />