TChromeTabs
TChromeTabs copied to clipboard
norgepaul
Problems with scrolling and closing tabs
First of all let me thank you for this awesome Delphi component! I love how you took care about the smallest details and made this component extremely flexible to use! Having said that, I found some glitches that I'd like to address, hoping you could fix them to make this component even better.
-
The width of the tabs isn’t initialized correctly if the close button is visible and TabWidthFromContent is set to True. The initial width ignores the close button area, so the text is cut off. After launching the program, one has to move the cursor over the component, then move it out again, then the component fixes all tab widths automatically.
-
AutoHideButtons = True causes the scroll buttons to initialize as a tiny area in the top left if there are initially enough tabs to make the scroll buttons visible from the beginning. Moving the cursor over the component and out again fixes their position, but not their state. One has to click the left scroll button to make it disabled (as it should be because you can’t scroll further left). Demonstration of 1 and 2:
-
Closing tab with TabWidthFromContent = True is somewhat buggy. First, the button right from the closed tab changes its size to the closed tab size. Maybe you made this so the user can directly click on the close button of the next tab, but I think it’s wrong to cut the text of the next longer tab just for this. I wish there was an option to keep the widths. Second, closing the tab with enabled scrolling causes a confusing result. Demonstration of 3:
-
I'd wish there was a procedure to update all positions at any time. Currently this is only triggered when the cursor leaves the component. If there was such a public procedure, one could probably work around some of the problems like these.
I'm using the latest TChromeTabs version. Here's the configuration of the described problems (I've left out the LookAndFeel part because I didn't change anything there):
object MyChromeTabs: TChromeTabs
Left = 32
Top = 32
Width = 436
Height = 27
ActiveTabIndex = 4
Options.Display.CloseButton.Offsets.Vertical = 6
Options.Display.CloseButton.Offsets.Horizontal = 2
Options.Display.CloseButton.Height = 14
Options.Display.CloseButton.Width = 14
Options.Display.CloseButton.AutoHide = True
Options.Display.CloseButton.Visibility = bvAll
Options.Display.CloseButton.AutoHideWidth = 20
Options.Display.CloseButton.CrossRadialOffset = 4
Options.Display.AddButton.Offsets.Vertical = 10
Options.Display.AddButton.Offsets.Horizontal = 2
Options.Display.AddButton.Height = 14
Options.Display.AddButton.Width = 31
Options.Display.AddButton.ShowPlusSign = False
Options.Display.AddButton.Visibility = avRightFloating
Options.Display.AddButton.HorizontalOffsetFloating = -3
Options.Display.ScrollButtonLeft.Offsets.Vertical = 10
Options.Display.ScrollButtonLeft.Offsets.Horizontal = 1
Options.Display.ScrollButtonLeft.Height = 15
Options.Display.ScrollButtonLeft.Width = 15
Options.Display.ScrollButtonRight.Offsets.Vertical = 10
Options.Display.ScrollButtonRight.Offsets.Horizontal = 1
Options.Display.ScrollButtonRight.Height = 15
Options.Display.ScrollButtonRight.Width = 15
Options.Display.TabModifiedGlow.Style = msRightToLeft
Options.Display.TabModifiedGlow.VerticalOffset = -6
Options.Display.TabModifiedGlow.Height = 30
Options.Display.TabModifiedGlow.Width = 100
Options.Display.TabModifiedGlow.AnimationPeriodMS = 4000
Options.Display.TabModifiedGlow.EaseType = ttEaseInOutQuad
Options.Display.TabModifiedGlow.AnimationUpdateMS = 50
Options.Display.Tabs.SeeThroughTabs = False
Options.Display.Tabs.TabOverlap = 15
Options.Display.Tabs.ContentOffsetLeft = 18
Options.Display.Tabs.ContentOffsetRight = 16
Options.Display.Tabs.OffsetLeft = 0
Options.Display.Tabs.OffsetTop = 4
Options.Display.Tabs.OffsetRight = 0
Options.Display.Tabs.OffsetBottom = 0
Options.Display.Tabs.MinWidth = 100
Options.Display.Tabs.MaxWidth = 200
Options.Display.Tabs.TabWidthFromContent = True
Options.Display.Tabs.PinnedWidth = 39
Options.Display.Tabs.ImageOffsetLeft = 13
Options.Display.Tabs.TextTrimType = tttFade
Options.Display.Tabs.Orientation = toTop
Options.Display.Tabs.BaseLineTabRegionOnly = False
Options.Display.Tabs.WordWrap = False
Options.Display.Tabs.TextAlignmentHorizontal = taLeftJustify
Options.Display.Tabs.TextAlignmentVertical = taVerticalCenter
Options.Display.Tabs.ShowImages = True
Options.Display.Tabs.ShowPinnedTabText = False
Options.Display.TabContainer.TransparentBackground = True
Options.Display.TabContainer.OverlayButtons = True
Options.Display.TabContainer.PaddingLeft = 0
Options.Display.TabContainer.PaddingRight = 0
Options.Display.TabMouseGlow.Offsets.Vertical = 0
Options.Display.TabMouseGlow.Offsets.Horizontal = 0
Options.Display.TabMouseGlow.Height = 200
Options.Display.TabMouseGlow.Width = 200
Options.Display.TabMouseGlow.Visible = True
Options.Display.TabSpinners.Upload.ReverseDirection = True
Options.Display.TabSpinners.Upload.RenderedAnimationStep = 2
Options.Display.TabSpinners.Upload.Position.Offsets.Vertical = 0
Options.Display.TabSpinners.Upload.Position.Offsets.Horizontal = 0
Options.Display.TabSpinners.Upload.Position.Height = 16
Options.Display.TabSpinners.Upload.Position.Width = 16
Options.Display.TabSpinners.Upload.SweepAngle = 135
Options.Display.TabSpinners.Download.ReverseDirection = False
Options.Display.TabSpinners.Download.RenderedAnimationStep = 5
Options.Display.TabSpinners.Download.Position.Offsets.Vertical = 0
Options.Display.TabSpinners.Download.Position.Offsets.Horizontal = 0
Options.Display.TabSpinners.Download.Position.Height = 16
Options.Display.TabSpinners.Download.Position.Width = 16
Options.Display.TabSpinners.Download.SweepAngle = 135
Options.Display.TabSpinners.AnimationUpdateMS = 50
Options.Display.TabSpinners.HideImagesWhenSpinnerVisible = True
Options.DragDrop.DragType = dtBetweenContainers
Options.DragDrop.DragOutsideImageAlpha = 220
Options.DragDrop.DragOutsideDistancePixels = 30
Options.DragDrop.DragStartPixels = 2
Options.DragDrop.DragControlImageResizeFactor = 0.500000000000000000
Options.DragDrop.DragCursor = crDefault
Options.DragDrop.DragDisplay = ddTabAndControl
Options.DragDrop.DragFormBorderWidth = 2
Options.DragDrop.DragFormBorderColor = 8421504
Options.DragDrop.ContrainDraggedTabWithinContainer = True
Options.Animation.DefaultMovementAnimationTimeMS = 100
Options.Animation.DefaultStyleAnimationTimeMS = 300
Options.Animation.AnimationTimerInterval = 15
Options.Animation.MinimumTabAnimationWidth = 40
Options.Animation.DefaultMovementEaseType = ttLinearTween
Options.Animation.DefaultStyleEaseType = ttLinearTween
Options.Animation.MovementAnimations.TabAdd.UseDefaultEaseType = True
Options.Animation.MovementAnimations.TabAdd.UseDefaultAnimationTime = True
Options.Animation.MovementAnimations.TabAdd.EaseType = ttEaseOutExpo
Options.Animation.MovementAnimations.TabAdd.AnimationTimeMS = 500
Options.Animation.MovementAnimations.TabDelete.UseDefaultEaseType = True
Options.Animation.MovementAnimations.TabDelete.UseDefaultAnimationTime = True
Options.Animation.MovementAnimations.TabDelete.EaseType = ttEaseOutExpo
Options.Animation.MovementAnimations.TabDelete.AnimationTimeMS = 500
Options.Animation.MovementAnimations.TabMove.UseDefaultEaseType = False
Options.Animation.MovementAnimations.TabMove.UseDefaultAnimationTime = False
Options.Animation.MovementAnimations.TabMove.EaseType = ttEaseOutExpo
Options.Animation.MovementAnimations.TabMove.AnimationTimeMS = 500
Options.Behaviour.BackgroundDblClickMaximiseRestoreForm = True
Options.Behaviour.BackgroundDragMovesForm = True
Options.Behaviour.TabSmartDeleteResizing = True
Options.Behaviour.TabSmartDeleteResizeCancelDelay = 700
Options.Behaviour.UseBuiltInPopupMenu = True
Options.Behaviour.TabRightClickSelect = True
Options.Behaviour.ActivateNewTab = True
Options.Behaviour.DebugMode = False
Options.Behaviour.IgnoreDoubleClicksWhileAnimatingMovement = True
Options.Scrolling.Enabled = True
Options.Scrolling.ScrollButtons = csbLeftAndRight
Options.Scrolling.ScrollStep = 20
Options.Scrolling.ScrollRepeatDelay = 20
Options.Scrolling.AutoHideButtons = True
Options.Scrolling.DragScroll = True
Options.Scrolling.DragScrollOffset = 50
Options.Scrolling.MouseWheelScroll = True
Tabs = <
item
Caption = 'This is the first tab 1'
Active = False
Tag = 0
ImageIndex = 3
ImageIndexOverlay = -1
Pinned = False
Visible = True
Modified = False
SpinnerState = tssNone
HideCloseButton = False
end
item
Caption = 'Longer tab 2'
Active = False
Tag = 0
ImageIndex = 2
ImageIndexOverlay = 24
Pinned = False
Visible = True
Modified = False
SpinnerState = tssNone
HideCloseButton = False
end
item
Caption = 'Very long tab 3'
Active = False
Tag = 0
ImageIndex = 4
ImageIndexOverlay = 25
Pinned = False
Visible = True
Modified = False
SpinnerState = tssNone
HideCloseButton = False
end
item
Caption = 'Tab 4'
Active = False
Tag = 0
ImageIndex = -1
ImageIndexOverlay = -1
Pinned = False
Visible = True
Modified = False
SpinnerState = tssNone
HideCloseButton = False
end
item
Caption = 'This is the last tab 5'
Active = True
Tag = 0
ImageIndex = -1
ImageIndexOverlay = -1
Pinned = False
Visible = True
Modified = False
SpinnerState = tssNone
HideCloseButton = False
end>
end
Too long and too complicated issue. Needs to be splitted into 3 requests with simple steps which producing error
Code which testing bug (1) of above requests.
The width of the tabs isn’t initialized correctly if the close button is visible and TabWidthFromContent is set to True. The initial width ignores the close button area, so the text is cut off. After launching the program, one has to move the cursor over the component, then move it out again, then the component fixes all tab widths automatically.
procedure TForm1.EventSetTabWidth(Sender: TObject;
ATabControl: ChromeTabsControls.TChromeTabControl; var TabWidth: Integer);
begin
TestTabWidth := TabWidth;
end;
procedure TForm1.Button1Click(Sender: TObject);
begin
if Assigned(TestChromeTabs) then
TestChromeTabs.Free;
TestChromeTabs := TChromeTabs.Create(self);
TestChromeTabs.OnSetTabWidth := EventSetTabWidth;
TestChromeTabs.Parent := self;
TestChromeTabs.Left := 8;
TestChromeTabs.Top := 102;
TestChromeTabs.Width := 350;
TestChromeTabs.Options.Display.Tabs.TabWidthFromContent := True;
TestChromeTabs.Tabs.Add.Caption := '1 Tab 1';
TestChromeTabs.Tabs.Add.Caption := '2 Longer tab caption 2';
TestChromeTabs.Tabs.Add.Caption := '3 Tab 3';
(Sender as TButton).Caption := Format('Expected: %d, Actual: %d',
[79, TestTabWidth]);
end;
I'm going to verify this. Check two other cases and register three separate issues. Then we can close this multi-issue. Any comments?
Registered issue #70 with problem described in the point 1:
- The width of the tabs isn’t initialized correctly if the close button is visible and TabWidthFromContent is set to True. The initial width ignores the close button area, so the text is cut off. After launching the program, one has to move the cursor over the component, then move it out again, then the component fixes all tab widths automatically.
Can't reproduce: point 2.
- AutoHideButtons = True causes the scroll buttons to initialize as a tiny area in the top left if there are initially enough tabs to make the scroll buttons visible from the beginning. Moving the cursor over the component and out again fixes their position, but not their state. One has to click the left scroll button to make it disabled (as it should be because you can’t scroll further left).
When I paste provided TChromeTab component then tab are displayed incorrectly, but can produce similar scenarios for code.