Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-25 16:19:47 +02:00
Code Issues Releases Activity

Add scrollbar for board tabs, update dependencies

Browse source
This commit is contained in:
Maksim Eltyshev 2020-06-08 18:49:40 +05:00
parent c4e3c3d4c8
commit 2d92ade8dc
6 changed files with 2576 additions and 2079 deletions
Download patch file Download diff file Expand all files Collapse all files

50
client/src/components/Boards/Boards.jsx
View file

@ -1,5 +1,5 @@
import pick from 'lodash/pick';
import React, { useCallback } from 'react';
import React, { useCallback, useRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
@ -16,6 +16,14 @@ import styles from './Boards.module.scss';
const Boards = React.memo(
({ items, currentId, isEditable, onCreate, onUpdate, onMove, onDelete }) => {
const tabsWrapper = useRef(null);
const handleWheel = useCallback(({ deltaY }) => {
tabsWrapper.current.scrollBy({
left: deltaY,
});
}, []);
const handleDragStart = useCallback(() => {
closePopup();
}, []);
@ -115,25 +123,27 @@ const Boards = React.memo(
);
return (
<div className={styles.wrapper}>
{isEditable ? (
<DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
{({ innerRef, droppableProps, placeholder }) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<div {...droppableProps} ref={innerRef} className={styles.tabs}>
{renderEditableItems(items)}
{placeholder}
<AddPopup onCreate={onCreate}>
<Button icon="plus" className={styles.addButton} />
</AddPopup>
</div>
)}
</Droppable>
</DragDropContext>
) : (
<div className={styles.tabs}>{renderItems(items)}</div>
)}
<div className={styles.wrapper} onWheel={handleWheel}>
<div ref={tabsWrapper} className={styles.tabsWrapper}>
{isEditable ? (
<DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<Droppable droppableId="boards" type={DroppableTypes.BOARD} direction="horizontal">
{({ innerRef, droppableProps, placeholder }) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<div {...droppableProps} ref={innerRef} className={styles.tabs}>
{renderEditableItems(items)}
{placeholder}
<AddPopup onCreate={onCreate}>
<Button icon="plus" className={styles.addButton} />
</AddPopup>
</div>
)}
</Droppable>
</DragDropContext>
) : (
<div className={styles.tabs}>{renderItems(items)}</div>
)}
</div>
</div>
);
},

33
client/src/components/Boards/Boards.module.scss
View file

@ -67,16 +67,47 @@
}
.tabs {
border-bottom: 2px solid rgba(0, 0, 0, 0.24);;
display: flex;
height: 38px;
flex: 0 0 auto;
white-space: nowrap;
}
.tabsWrapper {
display: flex;
flex: 0 0 auto;
height: 56px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
&:hover {
height: 38px;
}
&::-webkit-scrollbar {
height: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
}
}
.wrapper {
border-bottom: 2px solid rgba(0, 0, 0, 0.24);
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 38px;
overflow: hidden;
&:hover {
border-bottom: 0;
}
}
}