mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-27 01:02:42 +01:00
fce0109822
Summary: Ref T5240. Currently, when dragging nodes, we leave them where they are in the document and apply "position: relative;" so we can move them around on screen. - Pros: All the CSS still works. - Cons: Can't drag them outside the nearest containing element with "overflow: hidden;", many subtle positioning bugs with scrollable containers. Instead, this diff leaves the thing we're dragging exactly where it is, clones it, and drags the clone instead. - Pros: You can drag it anywhere. Seems to fix all the scrolling container problems. - Cons: CSS which depends on a container class no longer works. The CSS thing is bad, but doesn't seem too unreasonable to fix. Basically, we just need to put some `phui-this-is-a-workboard-card` class on the cards, and use that to style them instead of `phui-workboard-view`, and then do something similar for draggable lists. Although we no longer need to drag cards to tabs with the current design, I think there's a reasonable chance we'll revisit that later. The current design also calls for scrollable columns, but there would be no way to drag cards outside of their current column with the current approach. NOTE: This does not attempt to fix the CSS, so dragging is pretty rough, since the "clone" loses a number of container classes and thus a number of rules. I'll clean up the CSS in the next change. Test Plan: - Dragged stuff around on task lists, workboards, and sort lists (e.g., pinned applications) in Safari, Firefox and Chrome. - Scrolled window and containers (workboards) during drag. - Dragged stuff out of the workboard. - Dragged stuff offscreen. - CSS is funky, but I can no longer find any positioning or layout issues in any browser. Reviewers: chad Reviewed By: chad Maniphest Tasks: T5240 Differential Revision: https://secure.phabricator.com/D15160 |
||
|---|---|---|
| .. | ||
| calendar | ||
| workboards | ||
| phui-action-list.css | ||
| phui-action-panel.css | ||
| phui-badge.css | ||
| phui-big-info-view.css | ||
| phui-box.css | ||
| phui-button.css | ||
| phui-chart.css | ||
| phui-crumbs-view.css | ||
| phui-document-pro.css | ||
| phui-document-summary.css | ||
| phui-document.css | ||
| phui-feed-story.css | ||
| phui-fontkit.css | ||
| phui-form-view.css | ||
| phui-form.css | ||
| phui-header-view.css | ||
| phui-icon-set-selector.css | ||
| phui-icon.css | ||
| phui-image-mask.css | ||
| phui-info-panel.css | ||
| phui-info-view.css | ||
| phui-list.css | ||
| phui-object-box.css | ||
| phui-object-item-list-view.css | ||
| phui-pager.css | ||
| phui-pinboard-view.css | ||
| phui-profile-menu.css | ||
| phui-property-list-view.css | ||
| phui-remarkup-preview.css | ||
| phui-spacing.css | ||
| phui-status.css | ||
| phui-tag-view.css | ||
| phui-timeline-view.css | ||
| phui-two-column-view.css | ||