Merge pull request #4690 from toggl-open-source/feature/timeline_ui/c…

…lick_drag_info_popup Show popup while dragging a new TE (win)
toggl-open-source · Nov 18, 2020 · 0a6a2ea · 0a6a2ea
2 parents 7948b8c + 2e517f2
commit 0a6a2ea
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 25 deletions.
diff --git a/src/ui/windows/TogglDesktop/TogglDesktop/ui/Behaviors/TimelineTimeEntryPopupHelper.cs b/src/ui/windows/TogglDesktop/TogglDesktop/ui/Behaviors/TimelineTimeEntryPopupHelper.cs
@@ -1,27 +1,43 @@
 using System;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
 using TogglDesktop.ViewModels;
 
 namespace TogglDesktop.Behaviors
 {
     public static class TimelineTimeEntryPopupHelper
     {
-        public static void OpenPopup(this TimelineTimeEntryBlockPopup popup, FrameworkElement placementTarget, ScrollViewer scroll)
+        public static void OpenPopupWithRightPlacement(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;
+                popup.OpenPopup(PlacementMode.Right, placementTarget, curBlock, 0, Math.Min(Math.Max(visibleTopOffset, offset), visibleBottomOffset) -
+                                                                                   curBlock.VerticalOffset);
             }
         }
 
+        public static void OpenPopup(this TimelineTimeEntryBlockPopup popup, PlacementMode mode,
+            FrameworkElement placementTarget, object dataContext, double horizontal, double vertical)
+        {
+            popup.DataContext = dataContext;
+            popup.PlacePopup(mode, placementTarget, horizontal, vertical);
+            popup.Popup.IsOpen = true;
+        }
+
+        public static void PlacePopup(this TimelineTimeEntryBlockPopup popup, PlacementMode mode,
+            FrameworkElement placementTarget,
+            double horizontal, double vertical)
+        {
+            popup.Popup.Placement = mode;
+            popup.Popup.PlacementTarget = placementTarget;
+            popup.Popup.VerticalOffset = vertical;
+            popup.Popup.HorizontalOffset = horizontal;
+        }
+
         public static void ClosePopup(this TimelineTimeEntryBlockPopup popup)
         {
             popup.Popup.IsOpen = false;

diff --git a/src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineRunningTimeEntryBlock.xaml.cs b/src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineRunningTimeEntryBlock.xaml.cs
@@ -46,7 +46,7 @@ private void OnThumbDragStarted(object sender, DragStartedEventArgs e)
         protected override void OnMouseEnter(MouseEventArgs e)
         {
             _scroll ??= this.FindParent<ScrollViewer>();
-            _popupContainer.OpenPopup(this, _scroll);
+            _popupContainer.OpenPopupWithRightPlacement(this, _scroll);
         }
 
         protected override void OnMouseLeave(MouseEventArgs e)

diff --git a/src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineTimeEntryBlockPopup.xaml b/src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineTimeEntryBlockPopup.xaml
@@ -7,9 +7,7 @@
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800"
              d:DataContext="{d:DesignInstance viewModels:TimeEntryBlock, IsDesignTimeCreatable=False}">
-    <Popup Placement="Right"
-           HorizontalOffset="5"
-           StaysOpen="True"
+    <Popup StaysOpen="True"
            Name="Popup">
         <Border BorderBrush="{DynamicResource Toggl.PopupBorderBrush}" BorderThickness="1" Focusable="False"
             Background="{DynamicResource Toggl.CardBackground}">
@@ -31,7 +29,8 @@
                 <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">
+                <DockPanel Grid.Row="2" Grid.Column="0" Margin="0 4 0 0"
+                           Visibility="{Binding ProjectName, Converter={StaticResource EmptyStringToCollapsedConverter}}">
                     <Ellipse Width="8" Height="8"
                          DockPanel.Dock="Left"
                          Margin="0 0 5 0"
@@ -47,7 +46,9 @@
                            FontSize="12"
                            Visibility="{Binding TaskName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
                 </DockPanel>
-                <TextBlock Grid.Row="3" Grid.Column="0" Text="{Binding ClientName}" Style="{StaticResource Toggl.CaptionText}"/>
+                <TextBlock Grid.Row="3" Grid.Column="0" Text="{Binding ClientName}"
+                           Style="{StaticResource Toggl.CaptionText}"
+                           Visibility="{Binding ClientName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
                 <StackPanel Orientation="Horizontal" Grid.Row="4" Grid.Column="0">
                     <Viewbox Visibility="{Binding HasTag, Converter={StaticResource BooleanToVisibilityConverter}}">
                         <Path Style="{StaticResource Toggl.TagIcon}"/>

diff --git a/src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineTimeEntryInfo.xaml b/src/ui/windows/TogglDesktop/TogglDesktop/ui/controls/TimelineTimeEntryInfo.xaml
@@ -9,13 +9,13 @@
              d:DataContext="{d:DesignInstance viewModels:TimeEntryBlock, IsDesignTimeCreatable=False}">
     <StackPanel Height="{Binding Height}" Margin="20,0,0,0">
         <TextBlock Text="{Binding Description}" Style="{StaticResource Toggl.CaptionBlackText}"/>
-        <DockPanel>
+        <DockPanel Visibility="{Binding ProjectName, Converter={StaticResource EmptyStringToCollapsedConverter}}">
             <Ellipse Width="8" Height="8"
-                         DockPanel.Dock="Left"
-                         Margin="0 0 5 0"
-                         VerticalAlignment="Center"
-                         Fill="{Binding Color, Converter={StaticResource AdaptProjectColorConverter}}"
-                         Visibility="{Binding ProjectName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
+                     DockPanel.Dock="Left"
+                     Margin="0 0 5 0"
+                     VerticalAlignment="Center"
+                     Fill="{Binding Color, Converter={StaticResource AdaptProjectColorConverter}}"
+                     Visibility="{Binding ProjectName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
             <TextBlock Foreground="{Binding Color, Converter={StaticResource AdaptProjectTextColorConverter}}"
                            Text="{Binding ProjectName}" FontSize="12"
                            VerticalAlignment="Center"/>
@@ -25,7 +25,8 @@
                            FontSize="12"
                            Visibility="{Binding TaskName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
         </DockPanel>
-        <TextBlock Text="{Binding ClientName}" Style="{StaticResource Toggl.CaptionText}"/>
+        <TextBlock Text="{Binding ClientName}" Style="{StaticResource Toggl.CaptionText}"
+                   Visibility="{Binding ClientName, Converter={StaticResource EmptyStringToCollapsedConverter}}"/>
         <Grid>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*"/>
@@ -39,7 +40,7 @@
                     <Path Style="{StaticResource Toggl.DollarIcon}"/>
                 </Viewbox>
             </StackPanel>
-            <TextBlock Margin="0 0 5 0" Grid.Column="1" DockPanel.Dock="Right" HorizontalAlignment="Right" Text="{Binding Duration}" Style="{StaticResource Toggl.CaptionBlackText}"/>
+            <TextBlock Margin="0 5 5 0" Grid.Column="1" DockPanel.Dock="Right" HorizontalAlignment="Right" Text="{Binding Duration}" Style="{StaticResource Toggl.CaptionBlackText}"/>
         </Grid>
     </StackPanel>
 </UserControl>
diff --git a/src/ui/windows/TogglDesktop/TogglDesktop/ui/views/Timeline.xaml.cs b/src/ui/windows/TogglDesktop/TogglDesktop/ui/views/Timeline.xaml.cs
@@ -3,6 +3,7 @@
 using System.Reactive.Linq;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
 using System.Windows.Input;
 using DynamicData.Binding;
 using ReactiveUI;
@@ -89,7 +90,7 @@ private void OnTimeEntryBlockMouseEnter(object sender, MouseEventArgs e)
         {
             if (sender is FrameworkElement uiElement)
             {
-                TimeEntryPopupContainer.OpenPopup(uiElement, MainViewScroll);
+                TimeEntryPopupContainer.OpenPopupWithRightPlacement(uiElement, MainViewScroll);
             }
         }
 
@@ -105,20 +106,27 @@ private void OnTimeEntryCanvasMouseDown(object sender, MouseButtonEventArgs e)
             if (e.LeftButton == MouseButtonState.Pressed)
             {
                 Mouse.Capture(sender as UIElement);
-                _dragStartedPoint = e.GetPosition(TimeEntryBlocks).Y;
+                var point = e.GetPosition(TimeEntryBlocks);
+                _dragStartedPoint = point.Y;
                 _timeEntryId = TimelineViewModel.AddNewTimeEntry(_dragStartedPoint.Value, 0, ViewModel.SelectedScaleMode, ViewModel.SelectedDate);
-                ViewModel.TimeEntryBlocks[_timeEntryId].IsDragged = true;
             }
         }
 
         private void OnTimeEntryCanvasMouseMove(object sender, MouseEventArgs e)
         {
             if (_dragStartedPoint != null && _timeEntryId != null && e.LeftButton == MouseButtonState.Pressed)
             {
-                var verticalChange = Math.Abs(e.GetPosition(TimeEntryBlocks).Y - _dragStartedPoint.Value);
+                ViewModel.TimeEntryBlocks[_timeEntryId].IsDragged = true;
+                var point = e.GetPosition(TimeEntryBlocks);
+                var verticalChange = Math.Abs(point.Y - _dragStartedPoint.Value);
                 ViewModel.TimeEntryBlocks[_timeEntryId].VerticalOffset =
-                    Math.Min(_dragStartedPoint.Value, e.GetPosition(TimeEntryBlocks).Y);
+                    Math.Min(_dragStartedPoint.Value, point.Y);
                 ViewModel.TimeEntryBlocks[_timeEntryId].Height = verticalChange;
+                if (!TimeEntryPopupContainer.Popup.IsOpen)
+                    TimeEntryPopupContainer.OpenPopup(PlacementMode.Relative, TimeEntryBlocks, ViewModel.TimeEntryBlocks[_timeEntryId],
+                        point.X + 15, point.Y);
+                else
+                    TimeEntryPopupContainer.PlacePopup(PlacementMode.Relative, TimeEntryBlocks, point.X + 15, point.Y);
             }
         }
 
@@ -134,6 +142,7 @@ private void OnTimeEntryCanvasMouseUp(object sender, MouseButtonEventArgs mouseB
                 ViewModel.TimeEntryBlocks[_timeEntryId].IsDragged = false;
                 Toggl.Edit(_timeEntryId, false, Toggl.Description);
             }
+            TimeEntryPopupContainer.ClosePopup();
             _dragStartedPoint = null;
             _timeEntryId = null;
             Mouse.Capture(null);