Expand styling options for tabs #139
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
If this isn't rounded it is possible that either leaf disappears behind the separator by one pixel. The rounding here should happen the same way the rounding happens in `show_separator`
The stroke of a rectangle expands beyond the original rectangle. This will make sure that the rectangle is small enough so that when the stroke expands beyond the rect, it is still inside the original size.
Adanos020
requested changes
Jun 5, 2023
There was a problem hiding this comment.
Looks pretty good so far.
As for this:
If the
from_eguimethods derive their styling from those variants then adding a third party theme to egui would automatically apply that theme to the dock area aswell. I didnt do that right now since i didn't want to change the default styling of the dock area. Everything should look almost the same as before.
I think it's absolutely fine to do now. The reason is that when the major version number is 0, minor versions can be incompatible with each other. In my opinion, this change would make the library a lot better!
|
I also now changed the styling a bit to fit more into the egui styling. Styling matches the widget colors where applicable. Also works with themes. Here with the Carpuccino theme: |
|
Nicely done, I also really like the new look with the stroke around tabs! Please also include these changes in the changelog and I'll merge this. |
Adjust changelog
|
All good to go then from me! |
Adanos020
approved these changes
Jun 6, 2023
Adanos020
pushed a commit
that referenced
this pull request
Jun 16, 2023
* Add rounding and correctly draw border * Add TabBodyStyle * Round the leaf size calculation If this isn't rounded it is possible that either leaf disappears behind the separator by one pixel. The rounding here should happen the same way the rounding happens in `show_separator` * Deal with stroke width correctly The stroke of a rectangle expands beyond the original rectangle. This will make sure that the rectangle is small enough so that when the stroke expands beyond the rect, it is still inside the original size. * Add different interaction version of tab style * Move `fill_tab_bar` to tab bar settings * Update the examples with the new styling * Account for the scrollbar in the tab bar * Use the correct interact style for the tab title * Rename style structs * Move hline style to tab style * Add a prefered width for tabs * Hide to tab body top border * Set pointer hand when hovering over a tab * Update changelog * Remove todo * Improve doc and apply suggestions * Depluralise * Change preferred width to minimum width * Change styling a bit * Change the default styling a bit * Avoid overdrawing the add button line * Update CHANGELOG.md Adjust changelog
Adanos020
pushed a commit
that referenced
this pull request
Jul 1, 2023
* Add rounding and correctly draw border * Add TabBodyStyle * Round the leaf size calculation If this isn't rounded it is possible that either leaf disappears behind the separator by one pixel. The rounding here should happen the same way the rounding happens in `show_separator` * Deal with stroke width correctly The stroke of a rectangle expands beyond the original rectangle. This will make sure that the rectangle is small enough so that when the stroke expands beyond the rect, it is still inside the original size. * Add different interaction version of tab style * Move `fill_tab_bar` to tab bar settings * Update the examples with the new styling * Account for the scrollbar in the tab bar * Use the correct interact style for the tab title * Rename style structs * Move hline style to tab style * Add a prefered width for tabs * Hide to tab body top border * Set pointer hand when hovering over a tab * Update changelog * Remove todo * Improve doc and apply suggestions * Depluralise * Change preferred width to minimum width * Change styling a bit * Change the default styling a bit * Avoid overdrawing the add button line * Update CHANGELOG.md Adjust changelog
Adanos020
pushed a commit
that referenced
this pull request
Aug 28, 2023
* Add rounding and correctly draw border * Add TabBodyStyle * Round the leaf size calculation If this isn't rounded it is possible that either leaf disappears behind the separator by one pixel. The rounding here should happen the same way the rounding happens in `show_separator` * Deal with stroke width correctly The stroke of a rectangle expands beyond the original rectangle. This will make sure that the rectangle is small enough so that when the stroke expands beyond the rect, it is still inside the original size. * Add different interaction version of tab style * Move `fill_tab_bar` to tab bar settings * Update the examples with the new styling * Account for the scrollbar in the tab bar * Use the correct interact style for the tab title * Rename style structs * Move hline style to tab style * Add a prefered width for tabs * Hide to tab body top border * Set pointer hand when hovering over a tab * Update changelog * Remove todo * Improve doc and apply suggestions * Depluralise * Change preferred width to minimum width * Change styling a bit * Change the default styling a bit * Avoid overdrawing the add button line * Update CHANGELOG.md Adjust changelog
Merged
Adanos020
added a commit
that referenced
this pull request
Sep 18, 2023
* Expand styling options for tabs (#139) * Add rounding and correctly draw border * Add TabBodyStyle * Round the leaf size calculation If this isn't rounded it is possible that either leaf disappears behind the separator by one pixel. The rounding here should happen the same way the rounding happens in `show_separator` * Deal with stroke width correctly The stroke of a rectangle expands beyond the original rectangle. This will make sure that the rectangle is small enough so that when the stroke expands beyond the rect, it is still inside the original size. * Add different interaction version of tab style * Move `fill_tab_bar` to tab bar settings * Update the examples with the new styling * Account for the scrollbar in the tab bar * Use the correct interact style for the tab title * Rename style structs * Move hline style to tab style * Add a prefered width for tabs * Hide to tab body top border * Set pointer hand when hovering over a tab * Update changelog * Remove todo * Improve doc and apply suggestions * Depluralise * Change preferred width to minimum width * Change styling a bit * Change the default styling a bit * Avoid overdrawing the add button line * Update CHANGELOG.md Adjust changelog * feat: double click on separator to reset size (#146) * Update egui version in badge * fix: typo * feat: double click to reset resizing --------- Co-authored-by: Adanos020 <[email protected]> * Update version number and changelog * feat: allow disabling vertical/horizontal splits (#145) * feat: allow disabling vertical/horizontal splits in my use case vertical splits are useless, maybe other people have some use for this. /shrug * fix: rename vertical/horizontal to leftright/topbottom * Move `allowed_splits` from `Style` to `DockArea` * Add split directions to the style editor. Fix panic while dragging tabs with `None` split directions. * Delete redundant module path --------- Co-authored-by: Adam Gąsior <[email protected]> * Rename `SplitTypes` to `AllowedSplits`. Update changelog. * Allow individual tabs to be closable or not (#150) * Allow individual tabs to be closable or not This fixes #113 * Fix clippy warning --------- Co-authored-by: Adam Gąsior <[email protected]> * Remove blank space where the close button is not enabled (#153) * Add the NodeIndex to context_menu() parameter list (#157) * Add the NodeIndex to context_menu() parameter list * Adapt contex_menu() in hello example * Support for undocking and docking tabs as windows (#149) * Support for undocking and docking tabs as windows This commit adds support for undocking and docking tabs as windows. this includes a new widget shown on panels where tabs can be dropped which is inspired by other guis and originally implemented by micfong-z. * Added Surfaces! Restructured Tree to have the top level indexing be done via the new type Surface! Surfaces can either mean the root panel or a window. This contains broken examples and major breaking changes in api that will be addressed * Renamings and restructure Additions: windows can now be resized undocked tabs that become windows now reflect their old size Changes: -Renamed NodeTree back to Tree -Renamed Tree to DockState -Added new methods to DockState to reflect old API and fix examples -New methods iter_nodes, root, root_mut, * Further Renaming and window rejecting tabs this commit creates several breaking API changes and adds the ability for tabs to reject being created as a window. This is done via ``TabViewer``. A new example has been added to showcase this feature. * Support for undocking and docking tabs as windows This commit adds support for undocking and docking tabs as windows. this includes a new widget shown on panels where tabs can be dropped which is inspired by other guis and originally implemented by micfong-z. * Added Surfaces! Restructured Tree to have the top level indexing be done via the new type Surface! Surfaces can either mean the root panel or a window. This contains broken examples and major breaking changes in api that will be addressed * Renamings and restructure Additions: windows can now be resized undocked tabs that become windows now reflect their old size Changes: -Renamed NodeTree back to Tree -Renamed Tree to DockState -Added new methods to DockState to reflect old API and fix examples -New methods iter_nodes, root, root_mut, * Further Renaming and window rejecting tabs this commit creates several breaking API changes and adds the ability for tabs to reject being created as a window. This is done via ``TabViewer``. A new example has been added to showcase this feature. * Delete abstract_tree * Experimental changes -bugfixes -namechanges [TEMPORARY] * Small bugfixes -removing all tabs on root surface doesn't panic -tabs can be added to an empty surface * Surfaces, Focus and expanding windows Bugfix -fixed a bug where closing all tabs in a window could result in a panic -fixed a scenario where the dockarea may attempt to remove the root surface. -Leaf rects are now trimmed down to never expand beyond root node rects to try and prevent pixel roundings causing windows and other surfaces to infinitely expand. * bugfixes and consistency changes -changed set_focused_node_and_surface to be more consistent with set_focused_node -fixed a panic condition where move_tab tries to delete the root surface * Addition to splits -Allowed parent nodes to be split * Panic condition fix Fixed a panic condition where the emptying of the root surface can cause an out of bounds error for indexing the empty node tree * changed interactions with overlay -tab drop overlay is now always on top of everything in the dock area, -style has been changed to accomodate overlay properties -when overlay is shown hovering over buttons will lock the hover data until the mouse reaches outside their influence * Further Overlay changes -implemented ops::BitAnd for AllowedSplits -when trying to drop a tab on an empty surface, only the insert button will be shown * Hold time for overlay lock replaced lock in hoverdata with an ``Option<Instant>`` to allow for a user specified max hold time before the overlay may switch to another node if a node from another surface is above it * faded windows first part * Fading windows part 2 windows now fade whenever a surface that isn't theirs is being hovered * Removed Fade Animation removed the fading animation for windows and relevant style fields * Hightlighting rect on hovered leaves dragged tabs now show a highlight rect on the leaf theyre about to be dropped on small changes have been made to examples and new methods which existed for tree but not dock state has beeen implemented for dock state * Formatting; partial highlighting of overlay icons for better target indication * Cleanup and fix clippy warnings * Fix tests * Dedicated button color fields for overlay buttons Added ``button_color`` and ``button_border``stroke`` to overlaystyle, as well as slightly changed the documentation to be more accurate and consistent * Fix overlay icon proportions * Cleanup, rename `allow_in_windows` to `allowed_in_windows`, eject context menu option pt. 1 * Small clarity change to hover data * changes to old overlay and hello example this is one of several parts in chaning the old overlay to match the new needs of egui_docks. as well as starting to make changes to the hello example to inclulde the new overlay options. * changes to hello example and overlay style made changes to hello example to include more parameters from the overlay style and divided overlay style into style and feel * refactoring HoverData This is the first part in refactoring HoverData to fit the new ergonomics of the crate, this commit introduces DragAndDropState, which carries info which isn't relevant to HoverData or DragData, this commit doesn't change behavior in any way for egui_dock, however a future commit probably will * Close context menu upon clicking on one of the options * Only show the 'Eject' option for docked tabs * Minor refactorings * Quick fix to window fade fixed window fade problem introduced during hoverdata refactor * Second hotfix for new HoverData this hotfix addresses the problems with stolen focus, as well as a bug with the drag and drop of tabs * refining fix to nodes stealing focus this commit fixes the problem with nodes stealing focus they aren't supposed to, as it previously didnt allow for focus to be switched while interacting with a widget that consumes clicks or drags. * Make tab windows movable by dragging from any point in the tab body * Minor cleanup * Reworking Hoverdata part 2 this commit is meant to finish the rework of hoverata (with some polishing still needing to be done) also includes a couple of refactors in order to declutter the dock_area module * Polishing overlay fixed certain edgecases and polished the overlay * Changes to overlay changed the way dropping a tab in its original node behaves * update to Highlighted areas overlay changes how the highlighted areas overlay behaves on same node drags to be consistent with the icon based overlay * Window bounds, finished hello example Changed hello example to reflect the entirety of ``OverlayStyle`` added the option to put a bound on where windows can reside, being restricted to the screen rect by default. -moved selection_color -added a from_egui method for OverlayStyle * correction of documentation corrects part of documentation for dock area * Correct typos in examples/hello.rs * Make clippy happy and clean up comments&documentation. * Fix rustfmt errors * Fix doc errors * improved documentation this commit updates some of the documentation to include examples and further details about certain methods, and will be one of many to come in very high likelyhood * Consistency changes, improved documentation -More examples in documentation -Clarifications in documentaion -Removed ``root_..`` methods -renamed "root surface" to "main surface" * removed unneccesary links removed unneccesary bool links * Improve documentation in lib.rs * Make `Node::split` panic if `fraction` isn't in range 0..=1 * Reformat * Write more about surfaces and trees * Fix doc test * Clarifications in the docs * Add a section about `style` * Polishing `style` * Documentation grooming * Make clippy happy * Fix cargo doc errors * Update changelog * added buttons to windows (+setting) restructured dock area this commit restructures the contents of `DockArea` so that mod.rs isn't a 1000+ line behemoth. As well as adding collapse and close buttons to window surfaces. * updated changelog, hello example, and window behavior this commit fixes the behaviour where windows are collapsed by default, as well as updates the changlog to include the "show window heads" setting and a checkbox in the hello example to showcase the feature * updated behaviour to windows - added seperate settings for close and collapse buttons on windows. - shows title of selected node when collapsed * fixed oversights slight code restructure to windows as well as an oversight where the wrong fields was used * Update readme * final touches final touches on windows * Disable closing non-closeable tabs with middle click * Update changelog * changed sizes on window titles changed window titles to appear with the same style as tab titles * Fix clippy errors * Fix docs --------- Co-authored-by: Adanos020 <[email protected]> * pdate tab's scroll * update tab's scroll * update scroll mode for every tab * update scroll mode for every tab * update scroll mode for every tab * Finish up rebase * Reformat * Enable/disable scroll bars on individual tabs. (#160) * Update mod.rs * update tab's scroll * update tab's scroll * fix cargo fmt * update scroll mode for every tab * update scroll mode for every tab * update scroll mode for every tab --------- Co-authored-by: Adam Gąsior <[email protected]> * Reformat * Update changelog and contribution guide * Make `TabViewer::{on_add,add_popup}` accept corresponding surface index (#167) * Make `TabViewer::{on_add,add_popup}` accept corresponding surface index * Fix `TabViewer::context_menu` while I'm at it * Update changelog * Fix examples * Fix bug #168 (#171) fixes the bug addressed in #168, by always ignoring window hovers when dragging a non window tab. * Fix for issue #172 (#173) * Minor clarifications to documentation and changelog * Add `serde` attributes to `DockState` and all types stored in it * Make `DockState` and types related to it debugable * Fix for issue #174 (#176) * Fix for issue #174 (removed instant) fixes issue #174 by removing the use of ``Instant`` inside the drag/drop state. since it's not allowed on wasm. * ran cargo fmt ran cargo fmt on last commit. * finishing touches fixed ``widnow_fade`` which also made use of ``Instant`` * Fixes to small bugs (#177) fixes the bugs discussed in the discord egui_dock channel * Translations (#178) * First working implementation of translations * API change * Remove unnecessary imports of `Translations` * Clean up * Update changelog, rename one of the translations structs * Add guide section about translations * Fix hover_pos on touch screens (#180) * Fix hover_pos on touch screens * Rename to last_hover_pos & replace all occurrences * Reorder state assignment in show_inside * Update changelog * New demo GIF --------- Co-authored-by: Leonard Schüngel <[email protected]> Co-authored-by: zkldi <[email protected]> Co-authored-by: Peter Kristensen <[email protected]> Co-authored-by: 12089897411 <[email protected]> Co-authored-by: ToppDev <[email protected]> Co-authored-by: Vikrinox <[email protected]> Co-authored-by: 12089897411 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #137
I think im pretty happy with this.
I added four interaction styles similar to egui widget styles.
active,inative,hoveredandfocused. If thefrom_eguimethods derive their styling from those variants then adding a third party theme to egui would automatically apply that theme to the dock area aswell.I didnt do that right now since i didn't want to change the default styling of the dock area. Everything should look almost the same as before.
About that almost...
Egui has this quirk (technically eframe) where it renders 1px wide lines as anti aliased. It draws half the line width on either side of the line. This causes a 1px line to actually be rendered as 2px.
This is a group with a label inside and a 1px solid black outline.
The same was happening for the tab outlines, however they were limited by the clip rect so they appeared as 1px.
You can see how the right border is actually 2px wide because it is the only one not clipped.
I added a function to reduce the size of a rect to make sure that a border around the rect does not exceed the original area of the rect.
All this means is that now the tabs look like this:
This now also plays well with the border of the tab body and the colors now match aswell.
If you have a dock area that doesnt fill its parent container then you can set a border on the tab body and get this effect which is quite nice i think.
You just have to change
style.tab.tab_body.stroke.width = 1.0;in the style.