WEB APP: P8PGantt - стиль полос прокрутки по умолчанию
This commit is contained in:
parent
3588322ced
commit
97472bec14
@ -7,7 +7,7 @@
|
|||||||
//Подключение библиотек
|
//Подключение библиотек
|
||||||
//---------------------
|
//---------------------
|
||||||
|
|
||||||
import React, { useEffect, useState, useCallback } from "react"; //Классы React
|
import React, { useEffect, useState, useCallback, useRef } from "react"; //Классы React
|
||||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
@ -364,6 +364,9 @@ const P8PGantt = ({
|
|||||||
editTask: null
|
editTask: null
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//Ссылки на DOM
|
||||||
|
const svgContainerRef = useRef(null);
|
||||||
|
|
||||||
//Отображение диаграммы
|
//Отображение диаграммы
|
||||||
const showGantt = useCallback(() => {
|
const showGantt = useCallback(() => {
|
||||||
if (!state.gantt) {
|
if (!state.gantt) {
|
||||||
@ -418,6 +421,11 @@ const P8PGantt = ({
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [tasks]);
|
}, [tasks]);
|
||||||
|
|
||||||
|
//При подключении компонента к старице
|
||||||
|
useEffect(() => {
|
||||||
|
svgContainerRef.current.children[0].classList.add("scroll");
|
||||||
|
}, []);
|
||||||
|
|
||||||
//Генерация содержимого
|
//Генерация содержимого
|
||||||
return (
|
return (
|
||||||
<div style={{ ...(containerStyle ? containerStyle : {}) }}>
|
<div style={{ ...(containerStyle ? containerStyle : {}) }}>
|
||||||
@ -468,7 +476,7 @@ const P8PGantt = ({
|
|||||||
cancelBtnCaption={cancelTaskEditorBtnCaption}
|
cancelBtnCaption={cancelTaskEditorBtnCaption}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
<div style={STYLES.GANTT(state.noData, title, zoomBar)}>
|
<div style={STYLES.GANTT(state.noData, title, zoomBar)} ref={svgContainerRef}>
|
||||||
<svg id="__gantt__" width="100%"></svg>
|
<svg id="__gantt__" width="100%"></svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -0,0 +1,18 @@
|
|||||||
|
.scroll::-webkit-scrollbar {
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll::-webkit-scrollbar-track {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #b4b4b4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: #808080;
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user