scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #1097 from adroitwhiz/scrollbar-padding

Browse source 
Make the room between canvas edges and scrollbars count as draggable
This commit is contained in:
adroitwhiz 2020-06-04 15:23:12 -04:00 committed by GitHub
commit 3dac1b6adc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/scrollable-canvas/scrollable-canvas.css
View file

@ -2,31 +2,39 @@ $scrollbar-size: 8px;
$scrollbar-padding: 4px; $scrollbar-padding: 4px;
.vertical-scrollbar, .horizontal-scrollbar { .vertical-scrollbar, .horizontal-scrollbar {
position: absolute;
background: rgba(190, 190, 190, 0.8); background: rgba(190, 190, 190, 0.8);
border-radius: calc($scrollbar-size / 2); border-radius: calc($scrollbar-size / 2);
cursor: pointer; width: 100%;
height: 100%;
} }
.vertical-scrollbar-wrapper { .vertical-scrollbar-wrapper {
position: absolute; position: absolute;
width: $scrollbar-size; width: calc($scrollbar-size + $scrollbar-padding);
right: $scrollbar-padding; right: 0;
top: $scrollbar-padding; top: $scrollbar-padding;
height: calc(100% - $scrollbar-size - 2 * $scrollbar-padding); height: calc(100% - $scrollbar-size - 2 * $scrollbar-padding);
} }
.horizontal-scrollbar-wrapper { .horizontal-scrollbar-wrapper {
position: absolute; position: absolute;
height: $scrollbar-size; height: calc($scrollbar-size + $scrollbar-padding);
left: $scrollbar-padding; left: $scrollbar-padding;
bottom: $scrollbar-padding; bottom: 0;
width: calc(100% - $scrollbar-size - 2 * $scrollbar-padding); width: calc(100% - $scrollbar-size - 2 * $scrollbar-padding);
} }
.vertical-scrollbar { .vertical-scrollbar-hitbox, .horizontal-scrollbar-hitbox {
width: $scrollbar-size; position: absolute;
cursor: pointer;
box-sizing: border-box;
} }
.horizontal-scrollbar { .vertical-scrollbar-hitbox {
height: $scrollbar-size; width: calc($scrollbar-size + $scrollbar-padding);
padding-right: $scrollbar-padding;
}
.horizontal-scrollbar-hitbox {
height: calc($scrollbar-size + $scrollbar-padding);
padding-bottom: $scrollbar-padding;
} }

12
src/components/scrollable-canvas/scrollable-canvas.jsx
View file

@ -13,7 +13,7 @@ const ScrollableCanvasComponent = props => (
style={{pointerEvents: 'none'}} style={{pointerEvents: 'none'}}
> >
<div <div
className={styles.horizontalScrollbar} className={styles.horizontalScrollbarHitbox}
style={{ style={{
width: `${props.horizontalScrollLengthPercent}%`, width: `${props.horizontalScrollLengthPercent}%`,
left: `${props.horizontalScrollStartPercent}%`, left: `${props.horizontalScrollStartPercent}%`,
@ -23,14 +23,18 @@ const ScrollableCanvasComponent = props => (
}} }}
onMouseDown={props.onHorizontalScrollbarMouseDown} onMouseDown={props.onHorizontalScrollbarMouseDown}
onTouchStart={props.onHorizontalScrollbarMouseDown} onTouchStart={props.onHorizontalScrollbarMouseDown}
>
<div
className={styles.horizontalScrollbar}
/> />
</div> </div>
</div>
<div <div
className={styles.verticalScrollbarWrapper} className={styles.verticalScrollbarWrapper}
style={{pointerEvents: 'none'}} style={{pointerEvents: 'none'}}
> >
<div <div
className={styles.verticalScrollbar} className={styles.verticalScrollbarHitbox}
style={{ style={{
height: `${props.verticalScrollLengthPercent}%`, height: `${props.verticalScrollLengthPercent}%`,
top: `${props.verticalScrollStartPercent}%`, top: `${props.verticalScrollStartPercent}%`,
@ -40,9 +44,13 @@ const ScrollableCanvasComponent = props => (
}} }}
onMouseDown={props.onVerticalScrollbarMouseDown} onMouseDown={props.onVerticalScrollbarMouseDown}
onTouchStart={props.onVerticalScrollbarMouseDown} onTouchStart={props.onVerticalScrollbarMouseDown}
>
<div
className={styles.verticalScrollbar}
/> />
</div> </div>
</div> </div>
</div>
); );
ScrollableCanvasComponent.propTypes = { ScrollableCanvasComponent.propTypes = {