Skip to content

Enhanced Attachment Overlay #158

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

Open
GID0317 wants to merge 8 commits into
base: redesign
Choose a base branch
from
Open

Enhanced Attachment Overlay #158

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
708c426
Update AttachmentOverlayPage.xaml
GID0317 Dec 23, 2025
783eb8f
Update AttachmentOverlayPage.xaml.cs
GID0317 Dec 23, 2025
63c13da
Update SunValley.xaml
GID0317 Dec 23, 2025
d36f0f5
Added localization strings
GID0317 Dec 23, 2025
0486406
Added public ViewModelBase Parent { get; } property and set it in the…
GID0317 Jan 23, 2026
94950bf
Add missing logic for images to prevent the attached image that viewe…
GID0317 Jan 23, 2026
d20eeb4
Add menu flyout right click on attachment viewer item
GID0317 Jan 23, 2026
48030e1
Set RequestedTheme to Dark in AttachmentOverlayPage
GID0317 Jan 23, 2026
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
49 changes: 44 additions & 5 deletions Unicord.Universal/Controls/ScaledContentControl.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,15 @@ public bool ForceSize
public static readonly DependencyProperty ForceSizeProperty =
DependencyProperty.Register("ForceSize", typeof(bool), typeof(ScaledContentControl), new PropertyMetadata(false, OnWidthHeightPropertyChanged));

public bool UseFullscreen
{
get { return (bool)GetValue(UseFullscreenProperty); }
set { SetValue(UseFullscreenProperty, value); }
}

public static readonly DependencyProperty UseFullscreenProperty =
DependencyProperty.Register("UseFullscreen", typeof(bool), typeof(ScaledContentControl), new PropertyMetadata(false, OnWidthHeightPropertyChanged));

private static void OnWidthHeightPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = (ScaledContentControl)d;
Expand All @@ -58,21 +67,51 @@ protected override Size MeasureOverride(Size constraint)
double width = TargetWidth;
double height = TargetHeight;

if (double.IsNaN(width) || double.IsNaN(height))
if (double.IsNaN(width) || double.IsNaN(height) || width <= 0 || height <= 0)
return base.MeasureOverride(constraint);

var maxWidth = Math.Min(root.Bounds.Width, Math.Min(MaxWidth, constraint.Width));
var maxHeight = Math.Min(root.Bounds.Height - 32, Math.Min(MaxHeight, constraint.Height));
var horizontalMargin = UseFullscreen ? 0 : 80;
var verticalMargin = UseFullscreen ? 0 : 160;

var maxWidth = Math.Min(root.Bounds.Width - horizontalMargin, Math.Min(MaxWidth, constraint.Width));
var maxHeight = Math.Min(root.Bounds.Height - verticalMargin, Math.Min(MaxHeight, constraint.Height));

Drawing.ScaleProportions(ref width, ref height, maxWidth, maxHeight);
Drawing.ScaleProportions(ref width, ref height, Math.Min(constraint.Width, maxWidth), Math.Min(constraint.Height, maxHeight));
if (UseFullscreen)
{
// Scale to cover the available area (fill both width and height) so panning can traverse full image
var scaleX = maxWidth / width;
var scaleY = maxHeight / height;
var scale = Math.Max(scaleX, scaleY);

// Apply scale
width = width * scale;
height = height * scale;
}
else
{
// Normal mode: Fit within maxWidth/maxHeight (contain)
// only scale down if the image is larger than the available space
if (width > maxWidth || height > maxHeight)
{
var scaleX = maxWidth / width;
var scaleY = maxHeight / height;
var scale = Math.Min(scaleX, scaleY);
width *= scale;
height *= scale;
}
}

if (ForceSize && Content is FrameworkElement element)
{
element.Width = width;
element.Height = height;
}

if (Content is UIElement child)
{
child.Measure(new Size(width, height));
}

return new Size(width, height);
}

Expand Down
3 changes: 3 additions & 0 deletions Unicord.Universal/Models/ViewModelbase.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,15 @@ public abstract class ViewModelBase : INotifyPropertyChanged

public ViewModelBase(ViewModelBase parent = null)
{
Parent = parent;
discord = DiscordManager.Discord; // capture the discord client
syncContext = parent?.syncContext ?? SynchronizationContext.Current;
Debug.Assert(discord != null);
Debug.Assert(syncContext != null);
}

public ViewModelBase Parent { get; }

public event PropertyChangedEventHandler PropertyChanged;

// Holy hell is the C# Discord great.
Expand Down
203 changes: 163 additions & 40 deletions Unicord.Universal/Pages/Overlay/AttachmentOverlayPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,91 @@
<Page
x:Class="Unicord.Universal.Pages.Overlay.AttachmentOverlayPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Unicord.Universal.Pages.Overlay"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lib="using:Microsoft.UI.Xaml.Controls"
xmlns:controls="using:Unicord.Universal.Controls"
xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
xmlns:w1709="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 5)"
mc:Ignorable="d">
x:Class="Unicord.Universal.Pages.Overlay.AttachmentOverlayPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Unicord.Universal.Pages.Overlay"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lib="using:Microsoft.UI.Xaml.Controls"
xmlns:controls="using:Unicord.Universal.Controls"
xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
xmlns:w1709="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 5)"
RequestedTheme="Dark"
mc:Ignorable="d">
<Page.Resources>
<ui:AttachedDropShadow x:Key="ErrorShadow" CastTo="{x:Bind background}" BlurRadius="16" Opacity="1" Color="Black"/>
</Page.Resources>

<Grid x:Name="contentContainer">
<Border x:Name="background"
Tapped="contentContainer_Tapped"
Background="Transparent"/>
Tapped="contentContainer_Tapped"
Background="#B8000000"/>

<Grid>
<ScrollViewer MinZoomFactor="1"
<ScrollViewer x:Name="imageScrollViewer"
MinZoomFactor="1"
MaxZoomFactor="10"
IsVerticalRailEnabled="False"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Enabled"
VerticalScrollBarVisibility="Hidden"
VerticalScrollMode="Auto"
IsHorizontalRailEnabled="False"
HorizontalScrollBarVisibility="Auto"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Hidden"
HorizontalScrollMode="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
ZoomMode="Enabled"
Tapped="contentContainer_Tapped">
ZoomMode="Enabled"
Tapped="contentContainer_Tapped"
PointerPressed="imageScrollViewer_PointerPressed"
PointerMoved="imageScrollViewer_PointerMoved"
PointerReleased="imageScrollViewer_PointerReleased"
PointerCanceled="imageScrollViewer_PointerReleased">

<controls:ScaledContentControl x:Name="scaledControl" MaxWidth="Infinity" MaxHeight="Infinity">
<Image x:Name="attachmentImage"
Tapped="attachmentImage_Tapped">
<Image.Source>
<BitmapImage x:Name="AttachmentSource"
DownloadProgress="AttachmentSource_DownloadProgress"
ImageOpened="AttachmentSource_ImageOpened"
ImageFailed="AttachmentSource_ImageFailed"/>
</Image.Source>
</Image>
</controls:ScaledContentControl>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<controls:ScaledContentControl x:Name="scaledControl"
ForceSize="True"
MaxWidth="Infinity"
MaxHeight="Infinity">
<Image x:Name="attachmentImage" Tapped="attachmentImage_Tapped" DoubleTapped="attachmentImage_DoubleTapped">
<Image.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem x:Uid="AttachmentOverlay_CopyImagesMenuItem" Click="CopyImages_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE8C8;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem x:Uid="AttachmentOverlay_SaveAsMenuItem" Click="SaveAs_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE74E;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem x:Uid="AttachmentOverlay_ShareMenuItem" Click="Share_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE72D;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutSeparator />
<MenuFlyoutItem x:Uid="AttachmentOverlay_CopyLinkMenuItem" Click="CopyLink_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE71B;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem x:Uid="AttachmentOverlay_OpenInBrowserMenuItem" Click="OpenInBrowser_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE8A7;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
</MenuFlyout>
</Image.ContextFlyout>
<Image.Source>
<BitmapImage x:Name="AttachmentSource"
DownloadProgress="AttachmentSource_DownloadProgress"
ImageOpened="AttachmentSource_ImageOpened"
ImageFailed="AttachmentSource_ImageFailed"/>
</Image.Source>
</Image>
</controls:ScaledContentControl>
</Grid>
</ScrollViewer>

<Grid x:Name="contentContainerOverlay"
Expand All @@ -65,14 +104,98 @@
&#xE783;
</TextBlock>
</Grid>

<lib:InfoBar x:Name="successInfoBar"
Severity="Success"
IsOpen="False"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="16"
MaxWidth="400"/>
</Grid>

<Grid Margin="8" VerticalAlignment="Top">
<Button Style="{ThemeResource IconButtonStyle}" Content="&#xE72B;" x:Name="backButton" Click="backButton_Click">
<w1709:Button.KeyboardAccelerators>
<w1709:KeyboardAccelerator Key="Escape"/>
</w1709:Button.KeyboardAccelerators>
</Button>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{ThemeResource IconButtonStyle}" Content="&#xE72B;" x:Name="backButton" Click="backButton_Click">
<w1709:Button.KeyboardAccelerators>
<w1709:KeyboardAccelerator Key="Escape"/>
</w1709:Button.KeyboardAccelerators>
</Button>
<Ellipse Width="32" Height="32" Margin="12,0,0,0" VerticalAlignment="Center">
<Ellipse.Fill>
<ImageBrush x:Name="avatarBrush" Stretch="UniformToFill"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Margin="8,0,0,0" VerticalAlignment="Center">
<TextBlock x:Name="senderNameText" FontWeight="SemiBold" Foreground="White" FontSize="14"/>
<TextBlock x:Name="timestampText" Foreground="#CCCCCC" FontSize="12" Opacity="0.8"/>
</StackPanel>
</StackPanel>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<ComboBox x:Name="zoomComboBox" IsEditable="True" Width="Auto" MinWidth="80" VerticalAlignment="Center"
SelectionChanged="ZoomComboBox_SelectionChanged"
TextSubmitted="ZoomComboBox_TextSubmitted"
LostFocus="ZoomComboBox_LostFocus"
KeyDown="ZoomComboBox_KeyDown"
Margin="0,0,4,0">
<ComboBoxItem Content="100%" Tag="1" IsSelected="True"/>
<ComboBoxItem Content="200%" Tag="2"/>
<ComboBoxItem Content="300%" Tag="3"/>
<ComboBoxItem Content="400%" Tag="4"/>
<ComboBoxItem Content="500%" Tag="5"/>
<ComboBoxItem Content="600%" Tag="6"/>
<ComboBoxItem Content="700%" Tag="7"/>
<ComboBoxItem Content="800%" Tag="8"/>
<ComboBoxItem Content="900%" Tag="9"/>
<ComboBoxItem Content="1000%" Tag="10"/>
</ComboBox>
<Button x:Uid="AttachmentOverlay_ZoomModeButton" x:Name="zoomModeButton" Style="{ThemeResource IconButtonStyle}" Click="ZoomModeButton_Click">
<Grid Width="16" Height="16">
<TextBlock x:Name="zoomBackIcon" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="16" Text="&#xE9A6;" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1"/>
<TextBlock x:Name="zoomFrontIcon" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="16" Text="&#xE915;" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1"/>
</Grid>
</Button>
<Button x:Uid="AttachmentOverlay_ZoomInButton" x:Name="zoomInButton" Style="{ThemeResource IconButtonStyle}" Content="&#xE8A3;" Click="ZoomIn_Click" Margin="4,0,0,0" />
<Button x:Uid="AttachmentOverlay_ZoomOutButton" x:Name="zoomOutButton" Style="{ThemeResource IconButtonStyle}" Content="&#xE71F;" Click="ZoomOut_Click" Margin="4,0,0,0" />
<Button x:Uid="AttachmentOverlay_MoreButton" x:Name="zoomMoreButton" Style="{ThemeResource IconButtonStyle}" Content="&#xE712;" Margin="4,0,0,0">
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem x:Uid="AttachmentOverlay_SaveAsMenuItem" Click="SaveAs_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE74E;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem x:Uid="AttachmentOverlay_ShareMenuItem" Click="Share_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE72D;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem x:Uid="AttachmentOverlay_OpenInBrowserMenuItem" Click="OpenInBrowser_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE8A7;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutSeparator />
<MenuFlyoutItem x:Uid="AttachmentOverlay_CopyImagesMenuItem" Click="CopyImages_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE8C8;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem x:Uid="AttachmentOverlay_CopyLinkMenuItem" Click="CopyLink_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE71B;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutItem x:Uid="AttachmentOverlay_CopyAttachmentIdMenuItem" Click="CopyAttachmentId_Click">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xEC7A;" FontFamily="{StaticResource SymbolThemeFontFamily}" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
</MenuFlyout>
</Button.Flyout>
</Button>
</StackPanel>
</Grid>
</Grid>
</Page>
Loading
Loading