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

style: improve RTL iconography and layout #505

Merged
merged 8 commits into from
Dec 22, 2024
Merged

style: improve RTL iconography and layout #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0babafa
improve icon behavior for RTL
United600 Dec 7, 2024
22be3e3
add RTL visual state group
United600 Dec 8, 2024
8f25398
add optional debugger settings
United600 Dec 10, 2024
0eea240
add time display tooltips
United600 Dec 12, 2024
d66e7f1
improve player controls RTL layout
United600 Dec 12, 2024
0e3b349
add font data
United600 Dec 13, 2024
47f3b5e
use state trigger for rtl visual state
United600 Dec 21, 2024
0c22a4a
remove unused OnNavigatedTo override
huynhsontung Dec 22, 2024
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
12 changes: 12 additions & 0 deletions Screenbox/App.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,18 @@ protected override void OnLaunched(LaunchActivatedEventArgs e)

// Ensure the current window is active
Window.Current.Activate();

#if DEBUG
if (System.Diagnostics.Debugger.IsAttached)
{
//DebugSettings.EnableFrameRateCounter = true;
//DebugSettings.EnableRedrawRegions = true;
//DebugSettings.FailFastOnErrors = true;
//DebugSettings.IsBindingTracingEnabled = true;
//DebugSettings.IsOverdrawHeatMapEnabled = true;
//DebugSettings.IsTextPerformanceVisualizationEnabled = true;
}
#endif
}

/// <summary>
Expand Down
Binary file modified Screenbox/Assets/Fonts/ScreenboxFluentIcons.ttf
View file
Open in desktop
Binary file not shown.
Binary file modified Screenbox/Assets/Fonts/ScreenboxMDL2Assets.ttf
View file
Open in desktop
Binary file not shown.
82 changes: 42 additions & 40 deletions Screenbox/Controls/PlayerControls.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:commands="using:Screenbox.Commands"
xmlns:contract13NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,13)"
xmlns:controls="using:Screenbox.Controls"
xmlns:converters="using:Screenbox.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
Expand Down Expand Up @@ -36,7 +35,7 @@
<converters:ToggleButtonCheckToRepeatModeConverter x:Key="ToggleButtonCheckToRepeatModeConverter" />
<toolkitConverters:BoolToObjectConverter
x:Key="ShuffleModeGlyphConverter"
FalseValue="&#xF83D;"
FalseValue="&#xF002A;"
TrueValue="&#xE8B1;" />

<Flyout x:Key="VolumeControlFlyout">
Expand Down Expand Up @@ -224,7 +223,8 @@
<MenuFlyoutItem
AccessKey="{strings:KeyboardResources Key=MenuItemCastKey}"
Click="CastMenuFlyoutItem_OnClick"
Icon="{ui:FontIcon Glyph=&#xEC15;}"
Icon="{ui:FontIcon Glyph=&#xEC15;,
MirroredWhenRightToLeft=True}"
IsEnabled="{x:Bind IsCastButtonEnabled(ViewModel.HasActiveItem), Mode=OneWay}"
KeyTipPlacementMode="Left"
Text="{x:Bind strings:Resources.Cast}">
Expand Down Expand Up @@ -345,7 +345,6 @@
Padding="{x:Bind Padding, Mode=OneWay}"
Background="{x:Bind Background, Mode=OneWay}"
BackgroundTransition="{x:Bind BackgroundTransition, Mode=OneWay}"
FlowDirection="LeftToRight"
KeyTipPlacementMode="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
Expand Down Expand Up @@ -381,40 +380,42 @@
AutomationProperties.Name="{x:Bind PlayPauseButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
Command="{x:Bind ViewModel.PlayPauseCommand}"
Style="{StaticResource PlayerButtonStyle}">
<FontIcon Glyph="{x:Bind ViewModel.IsPlaying, Converter={StaticResource PlayPauseGlyphConverter}, Mode=OneWay}" />
<FontIcon FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}" Glyph="{x:Bind ViewModel.IsPlaying, Converter={StaticResource PlayPauseGlyphConverter}, Mode=OneWay}" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="P" Invoked="{x:Bind ViewModel.PlayPauseKeyboardAccelerator_OnInvoked}" />
<KeyboardAccelerator Key="K" Invoked="{x:Bind ViewModel.PlayPauseKeyboardAccelerator_OnInvoked}" />
<KeyboardAccelerator Key="Space" Invoked="{x:Bind ViewModel.PlayPauseKeyboardAccelerator_OnInvoked}" />
</Button.KeyboardAccelerators>
</Button>
<!-- Previous/Next -->
<Button
x:Name="PreviousButton"
controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Previous}"
AccessKey="{strings:KeyboardResources Key=PlayerPreviousKey}"
AutomationProperties.Name="{x:Bind PreviousButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
Command="{x:Bind ViewModel.Playlist.PreviousCommand}"
CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
Style="{StaticResource PlayerButtonStyle}">
<FontIcon Glyph="&#xE892;" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="PageUp" />
</Button.KeyboardAccelerators>
</Button>
<Button
x:Name="NextButton"
controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Next}"
AccessKey="{strings:KeyboardResources Key=PlayerNextKey}"
AutomationProperties.Name="{x:Bind NextButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
Command="{x:Bind ViewModel.Playlist.NextCommand}"
CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}"
Style="{StaticResource PlayerButtonStyle}">
<FontIcon Glyph="&#xE893;" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="PageDown" />
</Button.KeyboardAccelerators>
</Button>
<StackPanel FlowDirection="LeftToRight" Orientation="Horizontal">
<Button
x:Name="PreviousButton"
controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Previous}"
AccessKey="{strings:KeyboardResources Key=PlayerPreviousKey}"
AutomationProperties.Name="{x:Bind PreviousButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
Command="{x:Bind ViewModel.Playlist.PreviousCommand}"
CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
Style="{StaticResource PlayerButtonStyle}">
<FontIcon Glyph="&#xE892;" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="PageUp" />
</Button.KeyboardAccelerators>
</Button>
<Button
x:Name="NextButton"
controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Next}"
AccessKey="{strings:KeyboardResources Key=PlayerNextKey}"
AutomationProperties.Name="{x:Bind NextButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
Command="{x:Bind ViewModel.Playlist.NextCommand}"
CornerRadius="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource RightCornerRadiusFilterConverter}}"
Style="{StaticResource PlayerButtonStyle}">
<FontIcon Glyph="&#xE893;" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="PageDown" />
</Button.KeyboardAccelerators>
</Button>
</StackPanel>
<!-- Time & Chapter -->
<controls:TimeDisplay
x:Name="TimeDisplay"
Expand All @@ -440,12 +441,11 @@
controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.Volume}"
AccessKey="{strings:KeyboardResources Key=PlayerVolumeButtonSliderKey}"
AutomationProperties.Name="{x:Bind VolumeButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
FlowDirection="{x:Bind FlowDirection}"
Flyout="{StaticResource VolumeControlFlyout}"
IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
Style="{StaticResource PlayerButtonStyle}"
Visibility="Collapsed">
<FontIcon Glyph="{x:Bind VolumeControl.ViewModel.VolumeGlyph, Mode=OneWay}" />
<FontIcon Glyph="{x:Bind VolumeControl.ViewModel.VolumeGlyph, Mode=OneWay}" MirroredWhenRightToLeft="True" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="M" />
</Button.KeyboardAccelerators>
Expand Down Expand Up @@ -482,7 +482,7 @@
IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
IsThreeState="True"
Style="{StaticResource PlayerToggleButtonStyle}">
<FontIcon contract13NotPresent:FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}" Glyph="{x:Bind GetRepeatModeGlyph(ViewModel.Playlist.RepeatMode), Mode=OneWay}" />
<FontIcon FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}" Glyph="{x:Bind GetRepeatModeGlyph(ViewModel.Playlist.RepeatMode), Mode=OneWay}" />
<ToggleButton.KeyboardAccelerators>
<KeyboardAccelerator Key="R" Modifiers="Control" />
</ToggleButton.KeyboardAccelerators>
Expand All @@ -494,10 +494,9 @@
controls:AcceleratorService.ToolTip="{x:Bind strings:Resources.AudioAndCaption}"
AccessKey="{strings:KeyboardResources Key=PlayerAudioAndCaptionsKey}"
AutomationProperties.Name="{x:Bind AudioAndCaptionButton.(controls:AcceleratorService.ToolTip), Mode=OneWay}"
FlowDirection="{x:Bind FlowDirection}"
IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
Style="{StaticResource PlayerButtonStyle}">
<FontIcon Glyph="&#xED1F;" />
<FontIcon Glyph="&#xED1F;" MirroredWhenRightToLeft="True" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="C" Invoked="{x:Bind ViewModel.ToggleSubtitle}" />
<KeyboardAccelerator
Expand Down Expand Up @@ -531,8 +530,9 @@
Visibility="{x:Bind helpers:SystemInformation.IsDesktop}">
<FontIcon
x:Name="CompactOverlayButtonIcon"
contract13NotPresent:FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}"
Glyph="&#xEE49;" />
FontFamily="{StaticResource ScreenboxSymbolThemeFontFamily}"
Glyph="&#xEE49;"
MirroredWhenRightToLeft="True" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="M" Modifiers="Control" />
<KeyboardAccelerator Key="Escape" IsEnabled="{x:Bind ViewModel.IsCompact, Mode=OneWay}" />
Expand All @@ -548,7 +548,10 @@
Command="{x:Bind ViewModel.ToggleFullscreenCommand}"
Style="{StaticResource PlayerButtonStyle}"
Visibility="{x:Bind helpers:SystemInformation.IsDesktop}">
<FontIcon x:Name="FullscreenButtonIcon" Glyph="&#xE740;" />
<FontIcon
x:Name="FullscreenButtonIcon"
Glyph="&#xE740;"
MirroredWhenRightToLeft="True" />
<Button.KeyboardAccelerators>
<KeyboardAccelerator Key="F" />
<KeyboardAccelerator Key="Escape" IsEnabled="{x:Bind ViewModel.IsFullscreen, Mode=OneWay}" />
Expand All @@ -559,7 +562,6 @@
x:Name="MoreButton"
AccessKey="{strings:KeyboardResources Key=PlayerMoreKey}"
AutomationProperties.Name="{x:Bind MoreButton.(ToolTipService.ToolTip)}"
FlowDirection="{x:Bind FlowDirection}"
Flyout="{StaticResource NormalPlayerContextMenu}"
IsAccessKeyScope="True"
IsEnabled="{x:Bind IsEnabled, Mode=OneWay}"
Expand Down
16 changes: 8 additions & 8 deletions Screenbox/Controls/PlayerControls.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,11 +102,11 @@ private string GetRepeatModeGlyph(MediaPlaybackAutoRepeatMode repeatMode)
switch (repeatMode)
{
case MediaPlaybackAutoRepeatMode.None:
return "\uf5e7";
return App.IsRightToLeftLanguage ? "\U000F0127" : "\uF5E7";
case MediaPlaybackAutoRepeatMode.List:
return "\ue8ee";
return App.IsRightToLeftLanguage ? "\U000F004E" : "\uE8EE";
case MediaPlaybackAutoRepeatMode.Track:
return "\ue8ed";
return App.IsRightToLeftLanguage ? "\U000F004D" : "\uE8ED";
default:
throw new ArgumentOutOfRangeException(nameof(repeatMode), repeatMode, null);
}
Expand Down Expand Up @@ -136,11 +136,11 @@ private string GetPlaybackSpeedGlyph(double playbackSpeed)
{
return playbackSpeed switch
{
>= 1.75 => "\ueb24",
> 1.01 => "\uec4a",
<= 0.25 => "\uec48",
< 0.99 => "\uf823",
_ => "\uec49"
>= 1.75 => "\uEB24",
> 1.01 => "\uEC4A",
<= 0.25 => "\uEC48",
< 0.99 => "\U000F00A4",
_ => "\uEC49"
};
}

Expand Down
19 changes: 18 additions & 1 deletion Screenbox/Controls/PlaylistView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
x:Class="Screenbox.Controls.PlaylistView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:class="using:Screenbox"
xmlns:commands="using:Screenbox.Commands"
xmlns:controls="using:Screenbox.Controls"
xmlns:ctAnimations="using:CommunityToolkit.WinUI.Animations"
Expand Down Expand Up @@ -142,7 +143,10 @@
KeyTipPlacementMode="Bottom"
XYFocusLeft="{x:Bind ClearButton}">
<StackPanel Orientation="Horizontal">
<FontIcon Margin="{StaticResource IconButtonStandardIconMargin}" Glyph="&#xE762;" />
<FontIcon
x:Name="MultiSelectToggleIcon"
Margin="{StaticResource IconButtonStandardIconMargin}"
Glyph="&#xE762;" />
<TextBlock
x:Name="MultiSelectToggleLabel"
Margin="8,0,0,0"
Expand Down Expand Up @@ -365,6 +369,19 @@
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="FlowDirectionStates">
<VisualState x:Name="LeftToRight" />

<VisualState x:Name="RightToLeft">
<VisualState.StateTriggers>
<StateTrigger IsActive="{x:Bind class:App.IsRightToLeftLanguage}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MultiSelectToggleIcon.Glyph" Value="&#xEA98;" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>
2 changes: 1 addition & 1 deletion Screenbox/Controls/SeekBar.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</ResourceDictionary>
</UserControl.Resources>

<Grid>
<Grid FlowDirection="LeftToRight">
<controls:ChapterProgressBar
x:Name="PlayerProgressBar"
HorizontalAlignment="Stretch"
Expand Down
55 changes: 39 additions & 16 deletions Screenbox/Controls/TimeDisplay.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,58 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
xmlns:strings="using:Screenbox.Strings"
d:DesignHeight="32"
d:DesignWidth="256"
mc:Ignorable="d">

<StackPanel Orientation="Horizontal">
<StackPanel VerticalAlignment="Center" Orientation="Horizontal">
<StackPanel
VerticalAlignment="Center"
FlowDirection="LeftToRight"
Orientation="Horizontal"
Tapped="TimeDisplay_OnTapped">
<TextBlock
x:Name="TimeText"
Margin="0,0,4,0"
Style="{x:Bind TextBlockStyle, Mode=OneWay}">
<Run Text="{x:Bind Time, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}" /><Run Text=" /" />
</TextBlock>
d:Text="43:21"
Style="{x:Bind TextBlockStyle, Mode=OneWay}"
Text="{x:Bind Time, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}"
ToolTipService.ToolTip="{strings:Resources Key=TimeElapsed}"
Typography.NumeralAlignment="Tabular" />
<TextBlock
x:Name="RemainingText"
Margin="0,0,4,0"
d:Text="-58:39"
Style="{x:Bind TextBlockStyle, Mode=OneWay}"
Text="{x:Bind GetRemainingTime(Time), Mode=OneWay}"
ToolTipService.ToolTip="{strings:Resources Key=TimeRemaining}"
Typography.NumeralAlignment="Tabular"
Visibility="Collapsed" />
<TextBlock
Margin="2,0"
Style="{x:Bind TextBlockStyle, Mode=OneWay}"
Text="/" />
<TextBlock
d:Text="1:23:45"
Style="{x:Bind TextBlockStyle, Mode=OneWay}"
Visibility="Collapsed">
<Run Text="{x:Bind GetRemainingTime(Time), Mode=OneWay}" /><Run Text=" /" />
</TextBlock>
<TextBlock Style="{x:Bind TextBlockStyle, Mode=OneWay}" Text="{x:Bind Length, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}" />
Text="{x:Bind Length, Mode=OneWay, Converter={StaticResource HumanizedDurationConverter}}"
ToolTipService.ToolTip="{strings:Resources Key=TimeLength}"
Typography.NumeralAlignment="Tabular" />
</StackPanel>

<TextBlock
x:Name="SeparatorText"
d:Visibility="Visible"
Style="{x:Bind TextBlockStyle, Mode=OneWay}"
Text=" •"
Visibility="Collapsed" />

<TextBlock
x:Name="NameText"
MinWidth="0"
Margin="4,0,0,0"
VerticalAlignment="Center"
Margin="2,0,0,0"
d:Visibility="Visible"
Style="{x:Bind TextBlockStyle, Mode=OneWay}"
Visibility="Collapsed">
<Run Text="• " /><Run Text="{x:Bind TitleName, Mode=OneWay}" /><Run x:Name="Separator" Text=": " /><Run Text="{x:Bind ChapterName, Mode=OneWay}" />
<Run d:Text="Title" Text="{x:Bind TitleName, Mode=OneWay}" /><Run x:Name="Separator" Text=": " /><Run d:Text="Chapter 1" Text="{x:Bind ChapterName, Mode=OneWay}" />
</TextBlock>

<VisualStateManager.VisualStateGroups>
Expand All @@ -48,15 +68,18 @@
</VisualState.Setters>
</VisualState>
</VisualStateGroup>

<VisualStateGroup x:Name="NameStates">
<VisualState x:Name="None" />
<VisualState x:Name="Both">
<VisualState.Setters>
<Setter Target="SeparatorText.Visibility" Value="Visible" />
<Setter Target="NameText.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Either">
<VisualState.Setters>
<Setter Target="SeparatorText.Visibility" Value="Visible" />
<Setter Target="NameText.Visibility" Value="Visible" />
<Setter Target="Separator.Text" Value="{x:Null}" />
</VisualState.Setters>
Expand Down
5 changes: 4 additions & 1 deletion Screenbox/Controls/VolumeControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,10 @@
AutomationProperties.Name="{Binding ElementName=VolumeToggleButton, Path=(ToolTipService.ToolTip), Mode=OneWay}"
IsChecked="{x:Bind ViewModel.IsMute, Mode=TwoWay}"
Style="{x:Bind VolumeToggleButtonStyle, Mode=OneWay}">
<FontIcon d:Glyph="&#xE994;" Glyph="{x:Bind ViewModel.VolumeGlyph, Mode=OneWay}" />
<FontIcon
d:Glyph="&#xE994;"
Glyph="{x:Bind ViewModel.VolumeGlyph, Mode=OneWay}"
MirroredWhenRightToLeft="True" />
<ToggleButton.KeyboardAccelerators>
<KeyboardAccelerator Key="M" />
</ToggleButton.KeyboardAccelerators>
Expand Down
Loading