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

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

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

import { hasValue } from "../../core/utils";
import { 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_CLICKABLE = {
    cursor: "pointer",
    "&:hover": {
        opacity: 0.8
    }
};

//Контейнер для заголовка диалога
export const P8P_BOX_DIALOG_TITLE = {
    display: "grid",
    gridTemplateColumns: "1fr auto 1fr",
    alignItems: "center",
    gap: "16px"
};

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

//Контейнер рабочего пространства
export const P8P_BOX_APP_WORKSPACE = {
    width: "100vw",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between"
};

//Меню панелей - контейнер грида
export const P8P_BOX_PANELS_MENU_CONTAINER = {
    minHeight: "100vh",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start"
};

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

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

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

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

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

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

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

//Контейнер циклограммы
export const P8P_BOX_CYCLOGRAM = ({ noData, zoomBarHeight, titleHeight }) => ({
    height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
    position: "relative",
    overflow: "auto",
    padding: "0px 8px",
    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 {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        border: "1px solid",
        backgroundColor: theme.palette.P8PCyclogram.group,
        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"
        }
    };
};

//---------
//Стили заголовка
//---------

//Контейнер заголовка
export const P8P_BOX_HEADER = ({ isFixed }) => ({
    display: "flex",
    flexDirection: "row",
    alignItems: "flex-start",
    padding: "0px",
    width: "100vw",
    height: "64px",
    background: "P8PHeader.background",
    boxShadow: "0px 6px 6px rgba(182, 189, 201, 0.17), 0px 1px 3px rgba(182, 189, 201, 0.2)",
    position: isFixed ? "fixed" : "relative",
    overflow: "hidden"
});

//Контейнер элемента заголовка
export const P8P_BOX_HEADER_ITEM = ({ width, minWidth, isClickable }) => ({
    height: "100%",
    width,
    minWidth,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "column",
    borderRight: "1px solid",
    borderColor: "P8PHeader.border",
    ...(!hasValue(width) ? { flex: 1 } : {}),
    ...(isClickable ? { ...P8P_BOX_CLICKABLE } : {})
});

//Контейнер фильтров
export const P8P_BOX_HEADER_FILTER = ({ width, isLimited, isLessMinWidth }) => ({
    ...P8P_BOX_HEADER_ITEM({ width }),
    minWidth: isLimited ? "max-content" : isLessMinWidth ? "73px" : null,
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-start",
    flexDirection: "row",
    overflow: "hidden",
    padding: "0px 16px"
});

//Контейнер списка фильтров
export const P8P_BOX_HEADER_FILTER_GRP = {
    minWidth: "0px",
    height: "100%",
    alignContent: "center",
    flex: "1 1 0",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis"
};

//Контейнер для кастомного фильтра
export const P8P_BOX_HEADER_FILTER_CUSTOM = {
    display: "-webkit-box",
    overflow: "hidden",
    WebkitBoxOrient: "vertical",
    WebkitLineClamp: 1,
    color: "P8PText.primary"
};