Skip to content
This repository has been archived by the owner on Feb 13, 2024. It is now read-only.

Commit

Permalink
Merge pull request #4662 from toggl-open-source/fix/timeline_ui/resizing
Browse files Browse the repository at this point in the history 
Fix resizing stops when TE update arrives
  • Loading branch information
@skel35
skel35 authored Nov 17, 2020
2 parents 50f61dc + 2e054cc commit 809450c
Show file tree
Hide file tree
Showing 12 changed files with 163 additions and 74 deletions.
8 changes: 8 additions & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/TogglDesktop.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,7 @@
<Compile Include="ui\Behaviors\NumericInputTextBoxBehavior.cs" />
<Compile Include="ui\Behaviors\RepositionPopupWithParentWindowBehavior.cs" />
<Compile Include="ui\Behaviors\TextBoxHelper.cs" />
<Compile Include="ui\Behaviors\TimelineTimeEntryPopupHelper.cs" />
<Compile Include="ui\controls\DatePickerHelper.cs" />
<Compile Include="ui\controls\DaysOfWeekSelector.xaml.cs">
<DependentUpon>DaysOfWeekSelector.xaml</DependentUpon>
Expand Down Expand Up @@ -250,6 +251,9 @@
<Compile Include="ui\controls\TimelineTimeEntryBlock.xaml.cs">
<DependentUpon>TimelineTimeEntryBlock.xaml</DependentUpon>
</Compile>
<Compile Include="ui\controls\TimelineTimeEntryBlockPopup.xaml.cs">
<DependentUpon>TimelineTimeEntryBlockPopup.xaml</DependentUpon>
</Compile>
<Compile Include="ui\controls\TimelineTimeEntryInfo.xaml.cs">
<DependentUpon>TimelineTimeEntryInfo.xaml</DependentUpon>
</Compile>
Expand Down Expand Up @@ -497,6 +501,10 @@
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="ui\controls\TimelineTimeEntryBlockPopup.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Page Include="ui\controls\TimelineTimeEntryInfo.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
Expand Down
30 changes: 30 additions & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/Behaviors/TimelineTimeEntryPopupHelper.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
using System;
using System.Windows;
using System.Windows.Controls;
using TogglDesktop.ViewModels;

namespace TogglDesktop.Behaviors
{
public static class TimelineTimeEntryPopupHelper
{
public static void OpenPopup(this TimelineTimeEntryBlockPopup popup, FrameworkElement placementTarget, ScrollViewer scroll)
{
if (placementTarget.DataContext is TimeEntryBlock curBlock)
{
popup.DataContext = curBlock;
popup.Popup.PlacementTarget = placementTarget;
popup.Popup.IsOpen = true;
var visibleTopOffset = scroll.VerticalOffset + 10;
var visibleBottomOffset = scroll.VerticalOffset + scroll.ActualHeight - 10;
var offset = curBlock.VerticalOffset + placementTarget.ActualHeight / 2;
popup.Popup.VerticalOffset = Math.Min(Math.Max(visibleTopOffset, offset), visibleBottomOffset) -
curBlock.VerticalOffset;
}
}

public static void ClosePopup(this TimelineTimeEntryBlockPopup popup)
{
popup.Popup.IsOpen = false;
}
}
}
4 changes: 4 additions & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/ViewModels/TimelineBlockViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ public class TimeEntryBlock : TimelineBlockViewModel

public bool IsResizable { [ObservableAsProperty] get; }

[Reactive]
public bool IsDragged { get; set; }

private readonly double _hourHeight;

public TimeEntryBlock(string timeEntryId, int hourHeight)
Expand All @@ -90,6 +93,7 @@ public TimeEntryBlock(string timeEntryId, int hourHeight)
.ToPropertyEx(this, x => x.Duration);
this.WhenAnyValue(x => x.Height)
.Select(h => h >= TimelineConstants.MinResizableTimeEntryBlockHeight)
.Where(_ => !IsDragged)
.ToPropertyEx(this, x => x.IsResizable);
}

Expand Down
8 changes: 4 additions & 4 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/ViewModels/TimelineViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@ public TimelineViewModel()
var blocksObservable = Toggl.TimelineTimeEntries
.CombineLatest(Toggl.RunningTimeEntry, scaleModeObservable,
(list, running, mode) => ConvertTimeEntriesToBlocks(list, running, mode, SelectedDate, CurrentTimeOffset));
var blocksWithRunningObservable = blocksObservable.CombineLatest(Toggl.RunningTimeEntry, (list, te) => (TimeEntries: list, Running: te));
var blocksWithRunningObservable = blocksObservable.CombineLatest(Toggl.RunningTimeEntry,
(list, te) => (TimeEntries: list, Running: te))
.Where(_ => (TimeEntryBlocks == null || !TimeEntryBlocks.Any(item => item.Value.IsDragged)) &&
(RunningTimeEntryBlock == null || !RunningTimeEntryBlock.IsDragged));
blocksWithRunningObservable.Select(tuple =>
tuple.Running.HasValue ? tuple.TimeEntries.GetValueOrDefault(tuple.Running.Value.GUID) : null)
.ToPropertyEx(this, x => x.RunningTimeEntryBlock);
Expand Down Expand Up @@ -345,9 +348,6 @@ public static string AddNewTimeEntry(double offset, double height, int scaleMode
[Reactive]
public ActivityBlock SelectedActivityBlock { get; set; }

[Reactive]
public TimeEntryBlock SelectedTimeEntryBlock { get; set; }

public Dictionary<string, TimeEntryBlock> TimeEntryBlocks { [ObservableAsProperty]get; }

public TimeEntryBlock RunningTimeEntryBlock { [ObservableAsProperty]get; }
Expand Down
1 change: 1 addition & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineRunningTimeEntryBlock.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
Cursor="SizeNS"
Name="ThumbTop"
Visibility="{Binding IsResizable, Converter={StaticResource BooleanToVisibilityConverter}}"
DragStarted="OnThumbDragStarted"
DragDelta="OnThumbTopDragDelta"
DragCompleted="OnThumbTopDragCompleted">
<Thumb.Template>
Expand Down
21 changes: 21 additions & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineRunningTimeEntryBlock.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using TogglDesktop.Behaviors;
using TogglDesktop.ViewModels;

namespace TogglDesktop
Expand Down Expand Up @@ -31,6 +33,25 @@ private void OnThumbTopDragDelta(object sender, DragDeltaEventArgs e)
private void OnThumbTopDragCompleted(object sender, DragCompletedEventArgs e)
{
ViewModel.ChangeStartTime();
ViewModel.IsDragged = false;
}

private void OnThumbDragStarted(object sender, DragStartedEventArgs e)
{
ViewModel.IsDragged = true;
}

private readonly TimelineTimeEntryBlockPopup _popupContainer = new TimelineTimeEntryBlockPopup();
private ScrollViewer _scroll;
protected override void OnMouseEnter(MouseEventArgs e)
{
_scroll ??= this.FindParent<ScrollViewer>();
_popupContainer.OpenPopup(this, _scroll);
}

protected override void OnMouseLeave(MouseEventArgs e)
{
_popupContainer.ClosePopup();
}
}
}
2 changes: 2 additions & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineTimeEntryBlock.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
Cursor="SizeNS"
Name="ThumbTop"
Visibility="{Binding IsResizable, Converter={StaticResource BooleanToVisibilityConverter}}"
DragStarted="OnThumbDragStarted"
DragDelta="OnThumbTopDragDelta"
DragCompleted="OnThumbTopDragCompleted">
<Thumb.Template>
Expand All @@ -67,6 +68,7 @@
Cursor="SizeNS"
Name="ThumbBottom"
Visibility="{Binding IsResizable, Converter={StaticResource BooleanToVisibilityConverter}}"
DragStarted="OnThumbDragStarted"
DragDelta="OnThumbBottomDragDelta"
DragCompleted="OnThumbBottomDragCompleted">
<Thumb.Template>
Expand Down
7 changes: 7 additions & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineTimeEntryBlock.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,18 @@ private void OnThumbTopDragDelta(object sender, DragDeltaEventArgs e)
private void OnThumbTopDragCompleted(object sender, DragCompletedEventArgs e)
{
ViewModel.ChangeStartTime();
ViewModel.IsDragged = false;
}

private void OnThumbBottomDragCompleted(object sender, DragCompletedEventArgs e)
{
ViewModel.ChangeEndTime();
ViewModel.IsDragged = false;
}

private void OnThumbDragStarted(object sender, DragStartedEventArgs e)
{
ViewModel.IsDragged = true;
}
}
}
62 changes: 62 additions & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineTimeEntryBlockPopup.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<UserControl x:Class="TogglDesktop.TimelineTimeEntryBlockPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewModels="clr-namespace:TogglDesktop.ViewModels"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:DesignInstance viewModels:TimeEntryBlock, IsDesignTimeCreatable=False}">
<Popup Placement="Right"
HorizontalOffset="5"
StaysOpen="True"
Name="Popup">
<Border BorderBrush="{DynamicResource Toggl.PopupBorderBrush}" BorderThickness="1" Focusable="False"
Background="{DynamicResource Toggl.CardBackground}">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" BlurRadius="4" Direction="270" Opacity="0.2" Color="Black" />
</Border.Effect>
<Grid Margin="8 8 8 8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="0 0 5 0" Grid.Row="0" Grid.Column="0" Text="{Binding StartEndCaption}" Style="{StaticResource Toggl.CaptionBlackText}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Duration}" Style="{StaticResource Toggl.CaptionBlackText}"/>
<TextBlock Margin="0 10 0 0" Grid.Row="1" Grid.Column="0" Text="{Binding Description}" Style="{StaticResource Toggl.CaptionBlackText}"/>
<DockPanel Grid.Row="2" Grid.Column="0" Margin="0 4 0 0">
<Ellipse Width="8" Height="8"
DockPanel.Dock="Left"
Margin="0 0 5 0"
VerticalAlignment="Center"
Fill="{Binding Color, Converter={StaticResource AdaptProjectTextColorConverter}}"
Visibility="{Binding ProjectName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
<TextBlock Foreground="{Binding Color, Converter={StaticResource AdaptProjectTextColorConverter}}"
Text="{Binding ProjectName}" FontSize="12"
VerticalAlignment="Center"/>
<TextBlock Foreground="{Binding Color, Converter={StaticResource AdaptProjectTextColorConverter}}"
Padding="4 0 0 0"
Text="{Binding TaskName, Converter={StaticResource StringFormatIfNotEmptyConverter}, ConverterParameter='- {0}'}"
FontSize="12"
Visibility="{Binding TaskName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="{Binding ClientName}" Style="{StaticResource Toggl.CaptionText}"/>
<StackPanel Orientation="Horizontal" Grid.Row="4" Grid.Column="0">
<Viewbox Visibility="{Binding HasTag, Converter={StaticResource BooleanToVisibilityConverter}}">
<Path Style="{StaticResource Toggl.TagIcon}"/>
</Viewbox>
<Viewbox DockPanel.Dock="Left" Visibility="{Binding IsBillable, Converter={StaticResource BooleanToVisibilityConverter}}">
<Path Style="{StaticResource Toggl.DollarIcon}"/>
</Viewbox>
</StackPanel>
</Grid>
</Border>
</Popup>
</UserControl>
15 changes: 15 additions & 0 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineTimeEntryBlockPopup.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
using System.Windows.Controls;

namespace TogglDesktop
{
/// <summary>
/// Interaction logic for TimelineTimeEntryBlockPopup.xaml
/// </summary>
public partial class TimelineTimeEntryBlockPopup : UserControl
{
public TimelineTimeEntryBlockPopup()
{
InitializeComponent();
}
}
}
60 changes: 3 additions & 57 deletions src/ui/windows/TogglDesktop/TogglDesktop/ui/views/Timeline.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,9 +202,7 @@
<Canvas Name="RunningTimeEntryCanvas" Grid.Row="1" Grid.Column="2" Margin="10 0 0 0" Visibility="{Binding IsTodaySelected, Converter={StaticResource BooleanToVisibilityConverter}}">
<togglDesktop:TimelineRunningTimeEntryBlock DataContext="{Binding RunningTimeEntryBlock}"
Canvas.Top="{Binding VerticalOffset}"
Canvas.Left="{Binding HorizontalOffset}"
MouseEnter="OnTimeEntryBlockMouseEnter"
MouseLeave="OnTimeEntyrBlockMouseLeave">
Canvas.Left="{Binding HorizontalOffset}">
<togglDesktop:TimelineRunningTimeEntryBlock.Style>
<Style TargetType="FrameworkElement">
<Style.Triggers>
Expand Down Expand Up @@ -330,60 +328,8 @@
</StackPanel>
</Border>
</Popup>
<Popup Placement="Right"
DataContext="{Binding SelectedTimeEntryBlock}"
Name="TimeEntryPopup"
HorizontalOffset="5"
StaysOpen="True"
Grid.Row="1" Grid.Column="2">
<Border BorderBrush="{DynamicResource Toggl.PopupBorderBrush}" BorderThickness="1" Focusable="False"
Background="{DynamicResource Toggl.CardBackground}">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" BlurRadius="4" Direction="270" Opacity="0.2" Color="Black" />
</Border.Effect>
<Grid Margin="8 8 8 8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="0 0 5 0" Grid.Row="0" Grid.Column="0" Text="{Binding StartEndCaption}" Style="{StaticResource Toggl.CaptionBlackText}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Duration}" Style="{StaticResource Toggl.CaptionBlackText}"/>
<TextBlock Margin="0 10 0 0" Grid.Row="1" Grid.Column="0" Text="{Binding Description}" Style="{StaticResource Toggl.CaptionBlackText}"/>
<DockPanel Grid.Row="2" Grid.Column="0" Margin="0 4 0 0">
<Ellipse Width="8" Height="8"
DockPanel.Dock="Left"
Margin="0 0 5 0"
VerticalAlignment="Center"
Fill="{Binding Color, Converter={StaticResource AdaptProjectTextColorConverter}}"
Visibility="{Binding ProjectName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
<TextBlock Foreground="{Binding Color, Converter={StaticResource AdaptProjectTextColorConverter}}"
Text="{Binding ProjectName}" FontSize="12"
VerticalAlignment="Center"/>
<TextBlock Foreground="{Binding Color, Converter={StaticResource AdaptProjectTextColorConverter}}"
Padding="4 0 0 0"
Text="{Binding TaskName, Converter={StaticResource StringFormatIfNotEmptyConverter}, ConverterParameter='- {0}'}"
FontSize="12"
Visibility="{Binding TaskName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="{Binding ClientName}" Style="{StaticResource Toggl.CaptionText}"/>
<StackPanel Orientation="Horizontal" Grid.Row="4" Grid.Column="0">
<Viewbox Visibility="{Binding HasTag, Converter={StaticResource BooleanToVisibilityConverter}}">
<Path Style="{StaticResource Toggl.TagIcon}"/>
</Viewbox>
<Viewbox DockPanel.Dock="Left" Visibility="{Binding IsBillable, Converter={StaticResource BooleanToVisibilityConverter}}">
<Path Style="{StaticResource Toggl.DollarIcon}"/>
</Viewbox>
</StackPanel>
</Grid>
</Border>
</Popup>
<togglDesktop:TimelineTimeEntryBlockPopup Grid.Row="1" Grid.Column="2"
x:Name="TimeEntryPopupContainer"/>
</Grid>
</ScrollViewer>
<TextBlock Grid.Row="3" Grid.Column="1" Text="No entries here... Go ahead and track some time!" Width="125" HorizontalAlignment="Center"
Expand Down
Loading

0 comments on commit 809450c

Please sign in to comment.