diff --git a/src/components/DataView/styled/index.js b/src/components/DataView/styled/index.js index 072d1f27..82f217e0 100644 --- a/src/components/DataView/styled/index.js +++ b/src/components/DataView/styled/index.js @@ -1,9 +1,12 @@ import styled from "@emotion/styled"; import { THEME_COLORS } from '../theme/theme'; import { CircularProgress } from "@mui/material"; +import darkTheme from "../../../theme/dark"; + +const theme = darkTheme; export const DataViewStyled = styled.div` - background: ${THEME_COLORS.dataViewBackground}; + background: ${theme.viewBg}; margin: 6px 8px; overflow-y: scroll; overflow-x: hidden; @@ -18,7 +21,7 @@ export const DataViewStyled = styled.div` &::-webkit-scrollbar-thumb { border-radius: 10px; - background: ${THEME_COLORS.scrollbarThumb}; + background: ${theme.scrollbarThumb}; } `; @@ -30,7 +33,7 @@ export const EmptyViewContainer = styled.div` width: 100%; height: 175px; font-size: 1em; - color: ${THEME_COLORS.emptyViewMessage}; + color: ${theme.textOff}; text-align: center; `; @@ -63,12 +66,13 @@ export const LogRow = styled.div` export const RowLogContent = styled.span` font-size: 0.95em; font-family: monospace; - color: ${THEME_COLORS.logContent}; + color: ${theme.textWhite}; + line-height: 1.5; `; export const RowTimestamp = styled.span` position: relative; - color: ${THEME_COLORS.logsTimestamp}; + color: ${theme.textColor}; margin-right: 0.25rem; `; diff --git a/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js b/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js index 20fa9f30..087737d0 100644 --- a/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js +++ b/src/components/StatusBar/components/daterangepicker/components/AbsoluteSelector.js @@ -1,5 +1,7 @@ import styled from "@emotion/styled"; import DateRangeIcon from "@mui/icons-material/DateRange"; +import darkTheme from "../../../../../theme/dark"; +const theme = darkTheme; const SelectorsContainer = styled.div` display: ${(props) => (props.isDisplay ? "flex" : "none")}; flex-direction: column; @@ -11,10 +13,11 @@ const SelectorsContainer = styled.div` .label { font-size: 0.85em; - color: #aaa; + color: ${theme.inputLabelColor}; width: 50px; margin-left: 5px; margin-bottom: 2px; + white-space: nowrap; } .input-group { display: flex; @@ -23,7 +26,7 @@ const SelectorsContainer = styled.div` width: 170px; line-height: 1.5; text-align: center; - color: #ddd; + color: ${theme.textColor}; } button { cursor: pointer; @@ -34,10 +37,10 @@ const SelectorsContainer = styled.div` padding: 0px 8px; margin: 3px; border-radius: 3px; - color: #eee; - background: #0c8181; + color: ${theme.textColor}; + background: ${theme.primaryDark}; &:hover { - background: #159d9d; + background: ${theme.primaryLight}; } } } @@ -45,8 +48,8 @@ const SelectorsContainer = styled.div` `; const AbsoluteSubmitButton = styled.button` - color: #eee; - background: #0c8181; + color: ${theme.textColor}; + background: ${theme.primaryDark}; font-size: 0.85em; font-weight: bold; padding: 8px 0px; @@ -55,11 +58,12 @@ const AbsoluteSubmitButton = styled.button` border-radius: 3px; transition: 0.2s all; margin: 10px; - margin-top: {props => (props.isHorizontal && props.isMobile ? '20px':'40px')} + margin-top: ${(props) => + props.isHorizontal && props.isMobile ? "20px" : "40px"}; cursor: pointer; &:hover { - background: #159d9d; - } + background: ${theme.primaryLight}; + } `; export default function AbsoluteSelector({ @@ -72,7 +76,6 @@ export default function AbsoluteSelector({ isFullCalendar, setStopCalendar, setStartCalendar, - calendarOpen, startCalendarOpen, stopCalendarOpen, isHorizontal, diff --git a/src/components/StatusBar/components/daterangepicker/components/Heading.js b/src/components/StatusBar/components/daterangepicker/components/Heading.js index 99e72c4a..2093d5a5 100644 --- a/src/components/StatusBar/components/daterangepicker/components/Heading.js +++ b/src/components/StatusBar/components/daterangepicker/components/Heading.js @@ -8,14 +8,15 @@ import { MONTHS } from "../consts"; import { HeadingStyles, theme } from "./styles"; import { generateYears } from "../utils"; import styled from "@emotion/styled"; - +import darkTheme from "../../../../../theme/dark"; +const ctheme = darkTheme; const DateSelect = styled.select` cursor: pointer; position: relative; font-size: 1em; - color: #ddd; - background: #121212; + color: ${ctheme.textColor}; + background: ${ctheme.inputBg}; border: none; border-radius: 3px; padding: 4px 8px; @@ -28,7 +29,7 @@ const DateSelect = styled.select` &::-webkit-scrollbar-thumb { border-radius: 10px; - background: #444; + background: ${ctheme.scrollbarThumb}; } `; diff --git a/src/components/StatusBar/styled/index.js b/src/components/StatusBar/styled/index.js index 1a6b1fca..78113a2f 100644 --- a/src/components/StatusBar/styled/index.js +++ b/src/components/StatusBar/styled/index.js @@ -42,10 +42,11 @@ export const StatusCont = styled.div` text-transform: uppercase; background: ${theme.inputLabelBg}; border-radius: 4px; + white-space: nowrap; } } input { - color: #ddd; + color: ${theme.textColor}; background: ${theme.inputBg}; border: none; outline: none; @@ -60,9 +61,7 @@ export const StatusCont = styled.div` &.limit { width: 50px; } - &.url { - width: 175px; - } + &.date-time-range { width: 120px; } @@ -89,9 +88,7 @@ export const ApiSelectorStyled = styled.div` &:focus { color: orange; } - &.url { - width: 175px; - } + } button { @@ -100,8 +97,8 @@ export const ApiSelectorStyled = styled.div` border: none; padding: 4px 8px; border-radius: 3px; - background: #7b7b7b3b; - color: #d1d1d1; + background: ${theme.buttonDefault}; + color: ${theme.textColor}; font-size: 1em; cursor: pointer; line-height: 1.5; @@ -109,7 +106,7 @@ export const ApiSelectorStyled = styled.div` text-overflow: ellipsis; transition: 0.2s all; &:hover { - background: #9e9e9e3b; + background: ${theme.buttonHover}; } } @@ -123,6 +120,7 @@ export const ApiSelectorStyled = styled.div` text-transform: uppercase; background: ${theme.inputLabelBg}; border-radius: 4px; + white-space: nowrap; } } & div { @@ -139,9 +137,9 @@ export const UrlCopyButton = styled.button` align-items: center; border: none; padding: 4px 8px; - background: #7b7b7b3b; + background: ${theme.buttonDefault}; border-radius: 3px; - color: ${({ isActive }) => (isActive ? "orange" : "#7b7b7b")}; + color: ${({ isActive }) => (isActive ? "orange" : theme.textColor)}; cursor: ${({ isActive }) => (isActive ? "pointer" : "not-allowed")}; align-items: center; white-space: nowrap; @@ -154,7 +152,7 @@ export const UrlCopyButton = styled.button` color: ${theme.textColor}; } &:hover { - background: #9e9e9e3b; + background:${theme.buttonHover}; } `; @@ -170,6 +168,7 @@ export const DatePickerButton = styled.button` display: flex; align-items: center; margin-left: 10px; + height:32px; span{ margin-left:5px;} &:hover{ color:orange; diff --git a/src/plugins/charts/ChartLabelList.js b/src/plugins/charts/ChartLabelList.js index 107ad806..4afdbdd2 100644 --- a/src/plugins/charts/ChartLabelList.js +++ b/src/plugins/charts/ChartLabelList.js @@ -23,12 +23,11 @@ const ChartLabel = styled("div")` font-family: sans-serif; display: flex; align-items: center; - + line-height: 1.5; padding-right: 10px; cursor: pointer; opacity: ${(props) => (props.isVisible ? "1" : ".5")}; border-radius: 3px; - height: 20px !important; &:hover { background: black; } diff --git a/src/plugins/charts/index.js b/src/plugins/charts/index.js index a1e3d5fd..fbabbe50 100644 --- a/src/plugins/charts/index.js +++ b/src/plugins/charts/index.js @@ -13,6 +13,21 @@ import { useState, useEffect, useRef } from "react"; import { format } from "date-fns"; import { ChartLabelList } from "./ChartLabelList"; +import styled from "@emotion/styled"; + +const ChartButton = styled.button` + border: none; + margin: 0px 5px; + background: ${(props) => (props.isActive ? "#333" : "black")}; + color: #ddd; + padding: 4px 8px; + border-radius: 3px; + cursor: pointer; + font-size: 1em; + line-height: 1.5; + white-space: nowrap; +`; + function ClokiChart({ matrixData }) { const APP_NAME = "cloki_view"; const LOCAL_CHART_TYPE = `${APP_NAME}_chart_type`; @@ -24,19 +39,21 @@ function ClokiChart({ matrixData }) { const [allData] = useState(getDataParsed(false)); const [labels, setLabels] = useState([]); const [element, setElement] = useState(chartRef.current); + function highlightItems(list) { list.forEach((item) => { item.plot.highlight(item.i, item.plotIndex); }); } - function isFloat(x){ - return !!(x % 1) + function isFloat(x) { + return !!(x % 1); } function makeTolltipItems(list) { - const sorted = list.filter( f => parseFloat(f.value) === parseFloat(f.item.datapoint[1])) - + const sorted = list.filter( + (f) => parseFloat(f.value) === parseFloat(f.item.datapoint[1]) + ); return sorted ?.map( @@ -54,7 +71,6 @@ function ClokiChart({ matrixData }) { ` ) .join(""); - } function formatDateRange(data) { const tsArray = data @@ -83,7 +99,7 @@ function ClokiChart({ matrixData }) { show: true, mode: "time", timezone: "local", - timeformat: "%Y-%m-%d %H:%M:%S", + timeformat: "%Y-%m-%d %H:%M:%S", }, grid: { show: true, @@ -115,7 +131,7 @@ function ClokiChart({ matrixData }) { markings: { clickable: true, }, - crosshair: { color:'#88888855', mode: "xy", linewidth:1, }, + crosshair: { color: "#88888855", mode: "xy", linewidth: 1 }, selection: { mode: "x", @@ -156,12 +172,14 @@ function ClokiChart({ matrixData }) { plot.unhighlight(); if (item) { let plotData = plot.getData(); - const [plotTime,_] = item.datapoint; + const [plotTime, _] = item.datapoint; const selectedPlots = JSON.parse( localStorage.getItem("labelsSelected") ); - const itemValue = isFloat(parseFloat(item.datapoint[1]))? parseFloat(item.datapoint[1]).toFixed(3) : item.datapoint[1] - + const itemValue = isFloat(parseFloat(item.datapoint[1])) + ? parseFloat(item.datapoint[1]).toFixed(3) + : item.datapoint[1]; + const isSelectedPlots = selectedPlots.length > 0; const labelsList = []; for (let i = 0; i < plotData.length; i++) { @@ -182,7 +200,7 @@ function ClokiChart({ matrixData }) { labelsList.push({ color: plotData[i].color, label: plotData[i].label, - value: value, + value: value, plot, plotIndex, item, @@ -209,19 +227,17 @@ function ClokiChart({ matrixData }) { ${labelsFormatted} `; - const labelLength = item.series.label.length; + const labelLength = item.series.label.length; showTooltip( item.pageX, item.pageY, tooltipTemplate, labelLength ); - } } else { $q("#tooltip").remove(); previousPoint = null; - } }); }; @@ -586,7 +602,6 @@ function ClokiChart({ matrixData }) { lines: { ...series.lines, show: false }, bars: { ...series.bars, show: false }, points: { ...series.points, show: false }, - }; } else { return { @@ -594,7 +609,6 @@ function ClokiChart({ matrixData }) { bars, lines, points, - }; } }); @@ -642,7 +656,6 @@ function ClokiChart({ matrixData }) { } } - useEffect(() => { setElement(chartRef.current); setLabels(chartData.map(({ label }) => label)); @@ -651,7 +664,6 @@ function ClokiChart({ matrixData }) { localStorage.setItem("labelsSelected", JSON.stringify([])); }, []); - useEffect(() => { setChartOptions(chartOptions); setElement(chartRef.current); @@ -712,7 +724,6 @@ function ClokiChart({ matrixData }) { } } - const handleNoLimitData = (e) => { setIsSpliced(false); }; @@ -769,52 +780,24 @@ function ClokiChart({ matrixData }) { justifyContent: "flex-end", }} > - - - +
{ + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + function handleClearHistory() { + clearHistory(); + setOpen(false); + } + + return ( +
+ + + {"Clear History"} + + + + + Are you sure you want to clear the {dialogType} History? + + + + Click ‘Clear History’ to delete your {dialogType}{" "} + history permanently + + + + + Cancel + + + Clear History + + + +
+ ); + } diff --git a/src/plugins/queryhistory/components/CloseButton/CloseButton.js b/src/plugins/queryhistory/components/CloseButton/CloseButton.js new file mode 100644 index 00000000..339f0039 --- /dev/null +++ b/src/plugins/queryhistory/components/CloseButton/CloseButton.js @@ -0,0 +1,11 @@ +import { StyledCloseButton } from "../../styled"; +import CloseIcon from "@mui/icons-material/Close"; + + +export default function CloseButton({ onClose }) { + return ( + + + + ); +} \ No newline at end of file diff --git a/src/plugins/queryhistory/components/EmptyHistoryDisplay/EmptyHistoryDisplay.js b/src/plugins/queryhistory/components/EmptyHistoryDisplay/EmptyHistoryDisplay.js new file mode 100644 index 00000000..0ff4a90c --- /dev/null +++ b/src/plugins/queryhistory/components/EmptyHistoryDisplay/EmptyHistoryDisplay.js @@ -0,0 +1,5 @@ +import { EmptyHistory } from "../../styled"; + +export default function EmptyHistoryDisplay({ message }) { + return {message}; +} \ No newline at end of file diff --git a/src/plugins/queryhistory/index.js b/src/plugins/queryhistory/index.js index f0484117..31d605a9 100644 --- a/src/plugins/queryhistory/index.js +++ b/src/plugins/queryhistory/index.js @@ -1,5 +1,4 @@ -import styled from "@emotion/styled"; -import { createTheme, ThemeProvider, Tooltip } from "@mui/material"; +import { ThemeProvider, Tooltip } from "@mui/material"; import localService from "../../services/localService"; import Drawer from "@mui/material/Drawer"; import { useState, useEffect } from "react"; @@ -13,197 +12,45 @@ import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; import StarIcon from "@mui/icons-material/Star"; import StarBorderIcon from "@mui/icons-material/StarBorder"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; -import DisplaySettingsIcon from "@mui/icons-material/DisplaySettings"; -import HistoryIcon from "@mui/icons-material/History"; -import CloseIcon from "@mui/icons-material/Close"; -import SearchIcon from "@mui/icons-material/Search"; + import LinkIcon from "@mui/icons-material/Link"; import AccessTimeIcon from "@mui/icons-material/AccessTime"; import TabsUnstyled from "@mui/base/TabsUnstyled"; -import TabsListUnstyled from "@mui/base/TabsListUnstyled"; -import TabPanelUnstyled from "@mui/base/TabPanelUnstyled"; -import { buttonUnstyledClasses } from "@mui/base/ButtonUnstyled"; -import TabUnstyled, { tabUnstyledClasses } from "@mui/base/TabUnstyled"; + import LaunchIcon from "@mui/icons-material/Launch"; import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight"; import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap"; import ZoomInMapIcon from "@mui/icons-material/ZoomInMap"; -// Dialog -import Dialog from "@mui/material/Dialog"; -import DialogActions from "@mui/material/DialogActions"; -import DialogContent from "@mui/material/DialogContent"; -import DialogContentText from "@mui/material/DialogContentText"; -import DialogTitle from "@mui/material/DialogTitle"; + import { notificationTypes } from "../notifications/consts"; import localUrl from "../../services/localUrl"; import setLinksHistory from "../../actions/setLinksHistory"; -//import { DateRangePickerMain } from "../../components/StatusBar/components/daterangepicker/index"; -// Alert Dialog for Clearing History -function AlertDialog({ clearHistory, dialogType }) { - const [open, setOpen] = useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - function handleClearHistory() { - clearHistory(); - setOpen(false); - } - return ( -
- - - {"Clear History"} - - - - - Are you sure you want to clear the {dialogType} History? - - - - Click ‘Clear History’ to delete your {dialogType}{" "} - history permanently - - - - - Cancel - - - Clear History - - - -
- ); -} - -const blue = { - 50: "#F0F7FF", - 100: "#C2E0FF", - 200: "#80BFFF", - 300: "#66B2FF", - 400: "#3399FF", - 500: "#262626", - 600: "#0072E5", - 700: "#0059B2", - 800: "#004C99", - 900: "#003A75", -}; - -const Tab = styled(TabUnstyled)` - color: #aaa; - cursor: pointer; - font-size: 13px; - background-color: transparent; - padding: 6px 10px; - border: none; - border-radius: 3px 3px 0px 0px; - display: flex; - justify-content: center; - align-items: center; - border-bottom: 1px solid transparent; - transition: 0.2s all; - - &:hover { - background-color: #666666; - } - - &:focus { - color: #aaa; - border-radius: 3px 3px 0px 0px; - - outline-offset: 2px; - } - - &.${tabUnstyledClasses.selected} { - color: #eee; - border-bottom: 1px solid #11abab; - } - - &.${buttonUnstyledClasses.disabled} { - opacity: 0.5; - cursor: not-allowed; - } -`; - -const TabHistoryIcon = styled(HistoryIcon)` - height: 16px; - width: 16px; - margin-right: 3px; -`; - -const TabHistoryStarIcon = styled(StarBorderIcon)` - height: 16px; - width: 16px; - margin-right: 3px; -`; -const TabHistorySettingIcon = styled(DisplaySettingsIcon)` - height: 16px; - width: 16px; - margin-right: 3px; -`; - -const TabHistoryLinkIcon = styled(LinkIcon)` - height: 16px; - width: 16px; - margin-right: 3px; -`; - -const TabHistorySearchIcon = styled(SearchIcon)` - height: 21px; - width: 16px; - padding: 0px 3px; - border-radius: 3px 0px 0px 3px; - background: #121212; -`; - -const TabHeaderContainer = styled.div` - padding: 0px 15px; - font-size: 13px; - display: flex; - align-items: center; - justify-content: space-between; - background: #8a8a8a50; - height: 37px; -`; -const TabPanel = styled(TabPanelUnstyled)` - width: 100%; -`; - -const TabsList = styled(TabsListUnstyled)` - min-width: 320px; - background-color: ${blue[500]}; - border-bottom: 4px solid #2e2e2e; - display: flex; - align-items: center; - align-content: space-between; -`; - -const EmptyHistory = styled.div` - display: flex; - align-items: center; - justify-content: center; - color: #ddd; - font-size: 14px; - flex: 1; - padding:20px; - height: 50%; -`; -function EmptyHistoryDisplay({ message }) { - return {message}; -} +import { + TabsList, + Tab, + TabHistoryIcon, + TabHistoryLinkIcon, + TabHistoryStarIcon, + TabHistorySettingIcon, + TabPanel, + LinkParams, + RowData, + HistoryButton, + SubmitButton, + QueryHistoryContainer, + TabHeaderContainer, + TabHistorySearchIcon, + FilterInput, + SettingItemContainer, + TimeSpan, + HistoryRow, + theme, +} from "./styled"; + +import AlertDialog from "./components/AlertDialog/AlertDialog"; +import EmptyHistoryDisplay from "./components/EmptyHistoryDisplay/EmptyHistoryDisplay"; +import CloseButton from "./components/CloseButton/CloseButton"; function QueryHistoryTabs({ historyTabHeader, @@ -259,183 +106,6 @@ function QueryHistoryTabs({ ); } -export const theme = createTheme({ - palette: { - mode: "dark", - primary: { - main: "#ddd", - background: "#1a1a1a", - }, - }, -}); - -const QueryHistoryContainer = styled.div` - height: 250px; - overflow-y: auto; - &.starredCont { - height: 210px; - } - &::-webkit-scrollbar { - width: 10px; - background: black; - } - - &::-webkit-scrollbar-thumb { - border-radius: 10px; - background: #444; - } -`; - -const HistoryButton = styled.button` - padding: 3px 6px; - background: #333; - border-radius: 3px; - border: none; - color: #ddd; - display: flex; - align-items: center; - justify-content: center; - margin: 0px 6px; - cursor: pointer; - min-height: 20px; -`; - -const SettingItemContainer = styled.div` - height: 100px; - width: 240px; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 20px; - background: #333; - margin: 10px; - border-radius: 3px; - & div { - font-size: 15px; - color: orange; - } - & small { - font-size: 12px; - color: #ddd; - } -`; -const SubmitButton = styled(HistoryButton)` - background: #11abab; - white-space: nowrap; - .open-icon { - display: none; - } - .open-text { - display: flex; - } - @media screen and (max-width: 864px) { - .open-icon { - display: flex; - } - .open-text { - display: none; - } - } -`; - -const ClearHistoryButton = styled(HistoryButton)` - font-weight: bold; - padding: 10px 20px; - background: #088789; - margin: 0; - width: 100%; - white-space: nowrap; -`; -const StyledCloseButton = styled(HistoryButton)` - background: none; - color: #ddd; - font-size: 14px; - height: 16px; - width: 16px; - position: absolute; - right: 0; -`; - -const DialogCancelButton = styled(HistoryButton)` - background: #646464; - padding: 8px 16px; -`; -const DialogConfirmButton = styled(HistoryButton)` - background: #088789; - padding: 8px 16px; -`; - -const FilterInput = styled.input` - color: orange; - background: #121212; - border: none; - height: 21px; - margin: 0px 10px 0px 0px; - padding: 0px; - font-size: 13px; - border-radius: 0px 3px 3px 0px; - font-family: monospace; - font-size: 12px; - &:focus { - outline: none; - } -`; -const RowData = styled.span` - flex: 1; - font-family: "monospace"; - font-size: "13px"; - color: "#ddd"; - white-space: nowrap; - padding: 4px 0px; - overflow: hidden; - text-overflow: ellipsis; -`; - -const LinkParams = styled.div` - display: flex; - flex: 1; - justify-content: space-between; - .open-button { - display: none; - } - .inline-params { - align-items: center; - display: ${(props) => (props.open ? "none" : "grid")}; - flex: 1; - grid-template-columns: 1fr 0.25fr 0.25fr auto; - margin-right: 5px; - } - - .open-button { - display: flex; - color: #aaa; - background: none; - border: none; - } - .block-params { - display: ${(props) => (props.open ? "flex" : "none")}; - flex-direction: column; - flex: 1; - p { - display: flex; - align-items: center; - justify-content: space-between; - flex: 1; - border-bottom: 1px solid #333; - margin-bottom: 4px; - padding-bottom: 2px; - span { - margin-left: 3px; - } - } - } - @media screen and (max-width: 864px) { - .inline-params { - display: none; - } - } -`; - function HistoryLinkParams({ item, copyLink, @@ -512,7 +182,15 @@ function HistoryLinkParams({

Query:{" "} - {decodeURIComponent(item.params.query)}{" "} + + {decodeURIComponent(item.params.query)} + {" "}

API URL: {item.params.apiUrl}{" "} @@ -600,31 +278,6 @@ function HistoryLinkTools({ ); } -function CloseButton({ onClose }) { - return ( - - - - ); -} - -const HistoryRow = styled.div` - padding: 5px 0px; - padding-left: 10px; - background: #212121; - margin: 5px; - border-radius: 3px; - font-size: 13px; - display: flex; - justify-content: space-between; - align-items: center; - //height: 30px; -`; -const TimeSpan = styled.div` - @media screen and (max-width: 1370px) { - display: none; - } -`; function QueryHistoryTab({ queryHistory, copyQuery, @@ -923,7 +576,6 @@ function SettingHistoryTabHeader({ queryHistory, linksHistory }) { } function SettingTab({ clearHistory, clearLinksHistory }) { - // const listDisplay = filtered.length > 0 ? filtered : queryHistory return (

@@ -952,7 +604,7 @@ function SettingTab({ clearHistory, clearLinksHistory }) { ); } -const QueryHistoryDrawer = (props) => { +const QueryHistory = (props) => { const dispatch = useDispatch(); const historyService = localService().historyStore(); const linkService = localUrl(); @@ -1220,8 +872,4 @@ const QueryHistoryDrawer = (props) => { ); }; -const QueryHistory = () => { - return ; -}; - export default QueryHistory; diff --git a/src/plugins/queryhistory/styled/index.js b/src/plugins/queryhistory/styled/index.js new file mode 100644 index 00000000..8287b6ba --- /dev/null +++ b/src/plugins/queryhistory/styled/index.js @@ -0,0 +1,306 @@ +import styled from "@emotion/styled"; +import { buttonUnstyledClasses } from "@mui/base/ButtonUnstyled"; +import TabUnstyled, { tabUnstyledClasses } from "@mui/base/TabUnstyled"; +import DisplaySettingsIcon from "@mui/icons-material/DisplaySettings"; +import HistoryIcon from "@mui/icons-material/History"; +import SearchIcon from "@mui/icons-material/Search"; +import TabsListUnstyled from "@mui/base/TabsListUnstyled"; +import TabPanelUnstyled from "@mui/base/TabPanelUnstyled"; +import StarBorderIcon from "@mui/icons-material/StarBorder"; +import LinkIcon from "@mui/icons-material/Link"; +import { createTheme } from "@mui/material"; + + +export const Tab = styled(TabUnstyled)` + color: #aaa; + cursor: pointer; + font-size: 13px; + background-color: transparent; + padding: 6px 10px; + border: none; + border-radius: 3px 3px 0px 0px; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 1px solid transparent; + transition: 0.2s all; + + &:hover { + background-color: #666666; + } + + &:focus { + color: #aaa; + border-radius: 3px 3px 0px 0px; + + outline-offset: 2px; + } + + &.${tabUnstyledClasses.selected} { + color: #eee; + border-bottom: 1px solid #11abab; + } + + &.${buttonUnstyledClasses.disabled} { + opacity: 0.5; + cursor: not-allowed; + } +`; + +export const TabHistoryIcon = styled(HistoryIcon)` + height: 16px; + width: 16px; + margin-right: 3px; +`; + +export const TabHistoryStarIcon = styled(StarBorderIcon)` + height: 16px; + width: 16px; + margin-right: 3px; +`; +export const TabHistorySettingIcon = styled(DisplaySettingsIcon)` + height: 16px; + width: 16px; + margin-right: 3px; +`; + +export const TabHistoryLinkIcon = styled(LinkIcon)` + height: 16px; + width: 16px; + margin-right: 3px; +`; + +export const TabHistorySearchIcon = styled(SearchIcon)` + height: 21px; + width: 16px; + padding: 0px 3px; + border-radius: 3px 0px 0px 3px; + background: #121212; +`; + +export const TabHeaderContainer = styled.div` + padding: 0px 15px; + font-size: 13px; + display: flex; + align-items: center; + justify-content: space-between; + background: #8a8a8a50; + height: 37px; +`; +export const TabPanel = styled(TabPanelUnstyled)` + width: 100%; +`; + +export const TabsList = styled(TabsListUnstyled)` + min-width: 320px; + border-bottom: 4px solid #2e2e2e; + display: flex; + align-items: center; + align-content: space-between; +`; + +export const EmptyHistory = styled.div` + display: flex; + align-items: center; + justify-content: center; + color: #ddd; + font-size: 14px; + flex: 1; + padding: 20px; + height: 50%; +`; + +export const QueryHistoryContainer = styled.div` + height: 250px; + overflow-y: auto; + &.starredCont { + height: 210px; + } + &::-webkit-scrollbar { + width: 10px; + background: black; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background: #444; + } +`; + +export const HistoryButton = styled.button` + padding: 3px 6px; + background: #333; + border-radius: 3px; + border: none; + color: #ddd; + display: flex; + align-items: center; + justify-content: center; + margin: 0px 6px; + cursor: pointer; + min-height: 20px; +`; + +export const SettingItemContainer = styled.div` + height: 100px; + width: 240px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 20px; + background: #333; + margin: 10px; + border-radius: 3px; + & div { + font-size: 15px; + color: orange; + } + & small { + font-size: 12px; + color: #ddd; + } +`; +export const SubmitButton = styled(HistoryButton)` + background: #11abab; + white-space: nowrap; + .open-icon { + display: none; + } + .open-text { + display: flex; + } + @media screen and (max-width: 864px) { + .open-icon { + display: flex; + } + .open-text { + display: none; + } + } +`; + +export const ClearHistoryButton = styled(HistoryButton)` + font-weight: bold; + padding: 10px 20px; + background: #088789; + margin: 0; + width: 100%; + white-space: nowrap; +`; +export const StyledCloseButton = styled(HistoryButton)` + background: none; + color: #ddd; + font-size: 14px; + height: 16px; + width: 16px; + position: absolute; + right: 0; +`; + +export const DialogCancelButton = styled(HistoryButton)` + background: #646464; + padding: 8px 16px; +`; +export const DialogConfirmButton = styled(HistoryButton)` + background: #088789; + padding: 8px 16px; +`; + +export const FilterInput = styled.input` + color: orange; + background: #121212; + border: none; + height: 21px; + margin: 0px 10px 0px 0px; + padding: 0px; + font-size: 13px; + border-radius: 0px 3px 3px 0px; + font-family: monospace; + font-size: 12px; + &:focus { + outline: none; + } +`; +export const RowData = styled.span` + flex: 1; + font-family: "monospace"; + font-size: "13px"; + color: "#ddd"; + white-space: nowrap; + padding: 4px 0px; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const LinkParams = styled.div` + display: flex; + flex: 1; + justify-content: space-between; + .open-button { + display: none; + } + .inline-params { + align-items: center; + display: ${(props) => (props.open ? "none" : "grid")}; + flex: 1; + grid-template-columns: 1fr 0.25fr 0.25fr auto; + margin-right: 5px; + } + + .open-button { + display: flex; + color: #aaa; + background: none; + border: none; + } + .block-params { + display: ${(props) => (props.open ? "flex" : "none")}; + flex-direction: column; + flex: 1; + p { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1; + border-bottom: 1px solid #333; + margin-bottom: 4px; + padding-bottom: 2px; + span { + margin-left: 3px; + } + } + } + @media screen and (max-width: 864px) { + .inline-params { + display: none; + } + } +`; + +export const HistoryRow = styled.div` + padding: 5px 0px; + padding-left: 10px; + background: #212121; + margin: 5px; + border-radius: 3px; + font-size: 13px; + display: flex; + justify-content: space-between; + align-items: center; + //height: 30px; +`; +export const TimeSpan = styled.div` + @media screen and (max-width: 1370px) { + display: none; + } +`; + +export const theme = createTheme({ + palette: { + mode: "dark", + primary: { + main: "#ddd", + background: "#1a1a1a", + }, + }, +}); diff --git a/src/plugins/settingsmenu/styled/index.js b/src/plugins/settingsmenu/styled/index.js index f796a03f..34411b88 100644 --- a/src/plugins/settingsmenu/styled/index.js +++ b/src/plugins/settingsmenu/styled/index.js @@ -90,6 +90,7 @@ export const ApiSelectorWrapper = styled.div` font-size: 0.8em; color: ${st.labelColor}; margin: 3px 0px; + white-space: nowrap; } `; export const SaveApiButton = styled.button` diff --git a/src/scss/modules/date-range-picker.scss b/src/scss/modules/date-range-picker.scss index 835fce08..367014fc 100644 --- a/src/scss/modules/date-range-picker.scss +++ b/src/scss/modules/date-range-picker.scss @@ -16,6 +16,7 @@ padding: 8px; color:#ddd; line-height: 1.5; + margin-right:10px; svg { margin-right: 0; } diff --git a/src/scss/modules/status-bar.scss b/src/scss/modules/status-bar.scss index 24687c39..a7e9bd12 100644 --- a/src/scss/modules/status-bar.scss +++ b/src/scss/modules/status-bar.scss @@ -15,7 +15,7 @@ .label { flex: 1; color: #bfbfbf; - + white-space: nowrap;; text-transform: uppercase; border-radius: 3px; } @@ -41,9 +41,7 @@ &.limit { width: 50px; } - &.url { - width: 175px; - } + &.date-time-range { width: 120px; color: orange; @@ -69,9 +67,7 @@ padding: 3px 6px; font-size: 13px; border-radius: 3px; - &.url { - width: 175px; - } + } button { display: flex; diff --git a/src/scss/modules/valuesList.scss b/src/scss/modules/valuesList.scss index 96188064..7aa9ab4b 100644 --- a/src/scss/modules/valuesList.scss +++ b/src/scss/modules/valuesList.scss @@ -31,12 +31,13 @@ max-height: 500px; overflow: auto; small { - margin: 3px; - padding: 5px 8px; + margin: 5px; + padding: 4px 8px; border-radius: 3px; background: #5454543b; + line-height: 1.5; color: #d1d1d1; - font-size: 0.9em; + font-size: 1em; cursor: pointer; align-items: center; white-space: nowrap; diff --git a/src/theme/dark.js b/src/theme/dark.js index 0574d21a..c4e0a672 100644 --- a/src/theme/dark.js +++ b/src/theme/dark.js @@ -1,6 +1,4 @@ -// this is the set for dark theme colors -// black const black = { b10: "#12121267", b15: "#121212", @@ -10,6 +8,7 @@ const black = { b400: "#292929", b500: "#333333", }; + const white = { w100: "#fff", w200: "#f5f5f5", @@ -49,6 +48,8 @@ const orange = { }; const textColor = lightgrey.lg200; +const textOff = lightgrey.lg400; +const textWhite = white.w300; const inputBg = black.b15; const primaryDark = turquoise.tq200; const primaryLight = turquoise.tq300; @@ -59,7 +60,15 @@ const buttonInactive = black.b400; const inputTextFocus = orange.or100; const inputLabelColor = lightgrey.lg400; const inputLabelBg = black.bg10; - +const viewBg = black.b300; +const scrollbarThumb = "#616161"; +const critical = "purple"; +const error = "red"; +const warning = "yellow"; +const info = "green"; +const debug = "blue"; +const trace = "lightblue"; +const unknown = "gray"; const darkTheme = { black, @@ -76,8 +85,18 @@ const darkTheme = { inputTextFocus, inputLabelColor, inputLabelBg, + textOff, + textWhite, + viewBg, + scrollbarThumb, + critical, + error, + warning, + info, + debug, + trace, + unknown, darkgrey, turquoise, - }; export default darkTheme;