Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draggable Extension Sidebar Toggle #232

Merged
merged 8 commits into from
Oct 28, 2022
Merged

Draggable Extension Sidebar Toggle #232

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fc203f2
deps: added react-use-hoverintent;
sahil-shubham Oct 28, 2022
2832faf
added drggable toggle;
sahil-shubham Oct 28, 2022
d3a5551
persisted layout store;
sahil-shubham Oct 28, 2022
fbac412
squared off toggle border; better drag tracking;
sahil-shubham Oct 28, 2022
bc8d055
added patch bump changeset
sahil-shubham Oct 28, 2022
211f716
fixed cursors for dragging and clicking;
sahil-shubham Oct 28, 2022
ad7f168
increased drag intent time to 1.5s;
sahil-shubham Oct 28, 2022
6b9118e
workduck logo instead of arrow icons
sahil-shubham Oct 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fixed cursors for dragging and clicking; 
Signed-off-by: Sahil Shubham <[email protected]>
  • Loading branch information
@sahil-shubham
sahil-shubham committed Oct 28, 2022
commit 211f716c4a7a9f215ee7368082777c66a2e59cf4
22 changes: 13 additions & 9 deletions apps/extension/src/Components/Sidebar/DraggableToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@ import { useSidebarTransition } from '../../Hooks/useSidebarTransition'
import { useLayoutStore } from '../../Stores/useLayoutStore'
import { getElementById } from '../../contentScript'

const DragIcon = styled(Icon)<{ $show: boolean }>`
${(props) =>
!props.$show &&
css`
display: none;
`}
`

const ToggleWrapper = styled.div<{ $expanded?: boolean; $top: number }>`
position: fixed;
display: flex;
Expand Down Expand Up @@ -41,27 +49,23 @@ const ToggleWrapper = styled.div<{ $expanded?: boolean; $top: number }>`
}

&:hover {
cursor: pointer;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
background: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.colors.text.oppositePrimary};
}

${DragIcon} {
cursor: ns-resize;
}

&:active {
transition: background 0.1s ease;
background-color: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.colors.text.oppositePrimary};
}
`

const DragIcon = styled(Icon)<{ $show: boolean }>`
${(props) =>
!props.$show &&
css`
display: none;
cursor: ns-resize;
`}
`

export const DraggableToggle = () => {
const [isHovering, intentRef, setIsHovering] = useHoverIntent({ timeout: 600 })
const [tracking, setTracking] = useState(false)
Expand Down