P8-Panels/app/theme/styles/box.js

/*
    Парус 8 - Панели мониторинга
    Вспомогательные стили Box
*/

//---------------------
//Подключение библиотек
//---------------------

import { P8P_COMPONENT_WIDTH, P8P_COMPONENT_HEIGHT, P8P_SCROLL_AUTO } from "./common"; //Стили - общие
import { useTheme } from "@mui/material/styles"; //Хук темы приложения

//---------
//Общие стили контейнеров
//---------

//Контейнер плавающий
export const P8P_BOX_FLEX = { display: "flex" };

//Контейнер плавающий, элементы по центру, к началу
export const P8P_BOX_CENTER_START = {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start"
};

//Контейнер плавающий, элементы по центру, к концу
export const P8P_BOX_CENTER_END = {
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end"
};

//Контейнер плавающий, элементы по центру, равномерно
export const P8P_BOX_CENTER_BETWEEN = {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
};

//Контейнер плавающий, элементы по центру
export const P8P_BOX_CENTER = { display: "flex", alignItems: "center", justifyContent: "center" };

//---------
//Стили приложения
//---------

//Контейнер рабочего пространства
export const P8P_BOX_APP_WORKSPACE = {
    ...P8P_COMPONENT_WIDTH({ width: "100vw" }),
    //width: "100vw",
    ...P8P_BOX_CENTER_BETWEEN
};

//Меню панелей - контейнер грида
export const P8P_BOX_PANELS_MENU_CONTAINER = {
    ...P8P_BOX_CENTER_START,
    ...P8P_COMPONENT_HEIGHT({ minHeight: "100vh" })
};

//---------
//Стили настроек панелей
//---------

//Список настроек панели
export const P8P_BOX_SETTINGS_LIST = {
    ...P8P_COMPONENT_WIDTH({ width: "520px" }),
    ...P8P_COMPONENT_HEIGHT({ height: "500px" }),
    ...P8P_SCROLL_AUTO
};

//Список панелей настроек панелей
export const P8P_BOX_SETTINGS_PANELS = {
    ...P8P_COMPONENT_WIDTH({ width: "300px" }),
    ...P8P_COMPONENT_HEIGHT({ height: "500px" }),
    ...P8P_SCROLL_AUTO
};

//Контейнер настроек панелей
export const P8P_BOX_SETTINGS_CONTAINER = {
    display: "flex",
    flexDirection: "row",
    alignItems: "flex-start"
};

//---------
//Стили Ганта
//---------

//Контейнер диаграмы Ганта
export const P8P_BOX_GANTT = ({ noData, zoomBarHeight, titleHeight }) => ({
    ...P8P_COMPONENT_HEIGHT({ height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})` }),
    //height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
    display: noData ? "none" : ""
});

//---------
//Стили циклограммы
//---------

//Контейнер циклограммы
export const P8P_BOX_CYCLOGRAM = ({ noData, zoomBarHeight, titleHeight }) => ({
    position: "relative",
    overflow: "auto",
    padding: "0px 8px",
    ...P8P_COMPONENT_HEIGHT({ height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})` }),
    //height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
    display: noData ? "none" : ""
});

//Контейнер строки циклограммы
export const P8P_BOX_CYCLOGRAM_ROW = ({ index }) => {
    //Определение темы приложения
    const theme = useTheme();
    //Возвращаем стиль
    return {
        ...(index % 2 === 0 ? { backgroundColor: theme.palette.P8PBackground.primary } : { backgroundColor: theme.palette.P8PBackground.secondary })
    };
};

//Контейнер заголовка группы циклограммы
export const P8P_BOX_CYCLOGRAM_GROUP = ({ height }) => {
    //Определение темы приложения
    const theme = useTheme();
    //Возвращаем стиль
    return {
        border: "1px solid",
        backgroundColor: theme.palette.P8PCyclogram.group,
        ...P8P_BOX_CENTER,
        height
    };
};

//Контейнер задачи циклограммы
export const P8P_BOX_CYCLOGRAM_TASK = ({ lineHeight, bgColor, textColor, highlightColor }) => {
    //Определение темы приложения
    const theme = useTheme();
    //Возвращаем стиль
    return {
        display: "flex",
        alignItems: "center",
        backgroundColor: bgColor ? bgColor : theme.palette.P8PCyclogram.task,
        ...(textColor ? { color: textColor } : {}),
        height: lineHeight,
        "&:hover": {
            ...(highlightColor
                ? { backgroundColor: `${highlightColor} !important`, filter: "brightness(1) !important" }
                : { filter: `brightness(${bgColor ? "1.25" : "1.1"}) !important` }),
            cursor: "pointer !important"
        }
    };
};