Skip to content

Feature: Improved the tooltip when hovering over drives #10242

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

Merged
merged 3 commits into from
Oct 20, 2022
Merged

Feature: Improved the tooltip when hovering over drives #10242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6dec95
New DriveItem tooltip
cinqmilleans Oct 17, 2022
fd9b6ae
fix visual
cinqmilleans Oct 17, 2022
826506e
remove padding fix
cinqmilleans Oct 20, 2022
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
41 changes: 24 additions & 17 deletions src/Files.App/DataModels/NavigationControlItems/DriveItem.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,23 @@ public string Path
public bool IsNetwork => Type == DriveType.Network;
public bool IsPinned => App.SidebarPinnedController.Model.FavoriteItems.Contains(path);

public string MaxSpaceText => MaxSpace.ToSizeString();
public string FreeSpaceText => FreeSpace.ToSizeString();
public string UsedSpaceText => SpaceUsed.ToSizeString();

private ByteSize maxSpace;
public ByteSize MaxSpace
{
get => maxSpace;
set => SetProperty(ref maxSpace, value);
set
{
if (SetProperty(ref maxSpace, value))
{
ToolTipText = GetSizeString();
OnPropertyChanged(nameof(MaxSpaceText));
OnPropertyChanged(nameof(ShowDriveDetails));
}
}
}

private ByteSize freeSpace;
Expand All @@ -59,8 +71,11 @@ public ByteSize FreeSpace
get => freeSpace;
set
{
SetProperty(ref freeSpace, value);
ToolTipText = GetSizeString();
if (SetProperty(ref freeSpace, value))
{
ToolTipText = GetSizeString();
OnPropertyChanged(nameof(FreeSpaceText));
}
}
}

Expand All @@ -70,24 +85,16 @@ public ByteSize SpaceUsed
get => spaceUsed;
set
{
SetProperty(ref spaceUsed, value);
if (SetProperty(ref spaceUsed, value))
{
OnPropertyChanged(nameof(UsedSpaceText));
}
}
}

public bool ShowDriveDetails
{
get => MaxSpace.Bytes > 0d ? true : false;
}
public bool ShowDriveDetails => MaxSpace.Bytes > 0d;

private DriveType type;
public DriveType Type
{
get => type;
set
{
type = value;
}
}
public DriveType Type { get; set; }

private string text;
public string Text
Expand Down
183 changes: 167 additions & 16 deletions src/Files.App/UserControls/SidebarControl.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
<NavigationView.Resources>
<ResourceDictionary>
<mconv:BoolNegationConverter x:Key="BoolNegationConverter" />
<mconv:StringFormatConverter x:Key="StringFormatConverter" />
<vc:ColorModelToColorConverter x:Key="ColorModelToColorConverter" />

<DataTemplate x:Key="LocationNavItem" x:DataType="navigationcontrolitems:LocationItem">
Expand All @@ -67,7 +68,7 @@
<NavigationViewItem.Icon>
<ImageIcon Source="{x:Bind Icon, Mode=OneWay}" />
</NavigationViewItem.Icon>
<!-- WINUI3 missing some styles -->
<!-- WINUI3 missing some styles -->
<!--<NavigationViewItem.InfoBadge>
<InfoBadge Style="{ThemeResource CautionIconInfoBadgeStyle}" Visibility="{x:Bind IsInvalid, Mode=OneWay}" />
</NavigationViewItem.InfoBadge>-->
Expand All @@ -92,33 +93,165 @@
Visibility="{x:Bind ItemVisibility}">
<ToolTipService.ToolTip>
<ToolTip>
<Grid>
<Grid
x:Name="DriveTooltip"
Padding="0"
HorizontalAlignment="Stretch"
ColumnSpacing="8"
CornerRadius="4"
RowSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="72" />
<ColumnDefinition
Width="Auto"
MinWidth="100"
MaxWidth="140" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<!-- Displays the drive name, this is hidden when the extended details are shown -->
<TextBlock
x:Name="DriveNameTextBlock"
x:Load="{x:Bind ShowDriveDetails, Converter={StaticResource BoolNegationConverter}}"
Text="{x:Bind Text, Mode=OneWay}" />

<!-- Displays the drive name and extended details -->
<!-- Label -->
<TextBlock
x:Name="DriveLabel"
Grid.ColumnSpan="3"
Padding="8,8,0,0"
VerticalAlignment="Center"
x:Load="{x:Bind ShowDriveDetails}"
FontSize="14"
FontWeight="Medium"
Text="{x:Bind Text, Mode=OneWay}" />

<!-- Space used progress -->
<ProgressRing
x:Name="SpaceUserProgressRing"
Grid.Row="1"
Grid.RowSpan="3"
Grid.Column="0"
Width="60"
Height="60"
HorizontalAlignment="Left"
x:Load="{x:Bind ShowDriveDetails}"
IsIndeterminate="False"
Value="{x:Bind PercentageUsed, Mode=OneWay}">

<ProgressRing.Template>
<ControlTemplate TargetType="ProgressRing">
<Grid x:Name="LayoutRoot" Background="Transparent">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock
Margin="0"
FontWeight="SemiBold"
Text="{Binding Value, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:0}%', Mode=OneWay}"
TextAlignment="Center" />
</StackPanel>

<!-- AnimatedVisualPlayer for Lottie -->
<AnimatedVisualPlayer
x:Name="LottiePlayer"
AutoPlay="false"
Opacity="1"
Stretch="fill" />

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Inactive">
<VisualState.Setters>
<Setter Target="LayoutRoot.Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="DeterminateActive" />
<VisualState x:Name="Active" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</ProgressRing.Template>
</ProgressRing>

<!-- Disk used space -->
<StackPanel
x:Name="DriveDetailsStackPanel"
Padding="8"
x:Name="UsedSpaceDrivePanel"
Grid.Row="1"
Grid.Column="1"
x:Load="{x:Bind ShowDriveDetails}"
Spacing="8">
Orientation="Horizontal">
<Rectangle
Width="15"
Height="15"
Margin="0,0,10,0"
Fill="{ThemeResource SystemAccentColorLight2}"
RadiusX="2"
RadiusY="2"
Stroke="{ThemeResource TextControlElevationBorderBrush}" />
<TextBlock
VerticalAlignment="Center"
FontSize="14"
FontWeight="Medium"
Text="{x:Bind Text, Mode=OneWay}" />

<ProgressBar
VerticalAlignment="Stretch"
VerticalContentAlignment="Stretch"
Maximum="{x:Bind MaxSpace.GigaBytes}"
Value="{x:Bind SpaceUsed.GigaBytes}" />
FontWeight="Bold"
Text="{helpers:ResourceString Name=PropertiesDriveUsedSpace/Text}" />
</StackPanel>
<TextBlock
x:Name="UsedSpaceDriveValue"
Grid.Row="1"
Grid.Column="2"
x:Load="{x:Bind ShowDriveDetails}"
Style="{StaticResource PropertyValueTextBlock}"
Text="{x:Bind UsedSpaceText, Mode=OneWay}" />

<TextBlock Text="{x:Bind ToolTipText, Mode=OneWay}" />
<!-- Disk free space -->
<StackPanel
x:Name="FreeSpaceDrivePanel"
Grid.Row="2"
Grid.Column="1"
x:Load="{x:Bind ShowDriveDetails}"
Orientation="Horizontal">
<Rectangle
Width="15"
Height="15"
Margin="0,0,10,0"
Fill="{ThemeResource ProgressRingBackgroundThemeBrush}"
RadiusX="2"
RadiusY="2"
Stroke="{ThemeResource TextControlElevationBorderBrush}" />
<TextBlock
VerticalAlignment="Center"
FontWeight="Bold"
Text="{helpers:ResourceString Name=PropertiesDriveFreeSpace/Text}" />
</StackPanel>
<TextBlock
x:Name="FreeSpaceDriveValue"
Grid.Row="2"
Grid.Column="2"
x:Load="{x:Bind ShowDriveDetails}"
Style="{StaticResource PropertyValueTextBlock}"
Text="{x:Bind FreeSpaceText, Mode=OneWay}" />

<!-- Drive capacity -->
<TextBlock
x:Name="MaxSpaceDriveLabel"
Grid.Row="3"
Grid.Column="1"
Padding="25,0,0,0"
x:Load="{x:Bind ShowDriveDetails}"
Style="{StaticResource PropertyName}"
Text="{helpers:ResourceString Name=PropertiesDriveCapacity/Text}" />
<TextBlock
x:Name="MaxSpaceDriveValue"
Grid.Row="3"
Grid.Column="2"
x:Load="{x:Bind ShowDriveDetails}"
Style="{StaticResource PropertyValueTextBlock}"
Text="{x:Bind MaxSpaceText, Mode=OneWay}" />
</Grid>
</ToolTip>
</ToolTipService.ToolTip>
Expand Down Expand Up @@ -1067,6 +1200,24 @@
</Setter.Value>
</Setter>
</Style>

<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///ResourceDictionaries/PropertiesStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ProgressRingBackgroundThemeBrush" Color="#c3c3c3" />
</ResourceDictionary>

<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="ProgressRingBackgroundThemeBrush" Color="#191919" />
</ResourceDictionary>

<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="ProgressRingBackgroundThemeBrush" Color="#c3c3c3" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

</ResourceDictionary>
</NavigationView.Resources>

Expand Down