jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - category scroll and font size

Browse source
This commit is contained in:
Shekar Siri 2022-04-19 19:04:18 +02:00
parent 1642c1ffd1
commit c5b0d0fc82
1 changed files with 4 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
View file

@ -4,7 +4,7 @@ import { useObserver } from 'mobx-react-lite';
import cn from 'classnames';
import { useStore } from 'App/mstore';
function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds, unSelectCategory }) {
function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }) {
const selectedCategoryWidgetsCount = useObserver(() => {
return category.widgets.filter(widget => selectedWidgetIds.includes(widget.metricId)).length;
});
@ -14,10 +14,9 @@ function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds,
onClick={() => onClick(category)}
>
<div className="font-medium text-lg mb-2 capitalize">{category.name}</div>
<div className="mb-2">{category.description}</div>
<div className="mb-2 text-sm leading-tight">{category.description}</div>
{selectedCategoryWidgetsCount > 0 && (
<div className="flex items-center">
{/* <input type="checkbox" checked={true} onChange={() => unSelectCategory(category)} /> */}
<span className="color-gray-medium text-sm">{`Selected ${selectedCategoryWidgetsCount} of ${category.widgets.length}`}</span>
</div>
)}
@ -69,7 +68,7 @@ function DashboardMetricSelection(props) {
</div>
<div className="ml-auto flex items-center">
<span className="color-gray-medium">Showing past 7 days data for visual clue</span>
<span className="color-gray-medium">Past 7 days data</span>
<label className="flex items-center ml-3 cursor-pointer select-none">
<input type="checkbox" onChange={toggleAllWidgets} checked={selectAllCheck} />
<div className="ml-2">Select All</div>
@ -81,7 +80,7 @@ function DashboardMetricSelection(props) {
</div>
<div className="grid grid-cols-12 gap-4">
<div className="col-span-3">
<div className="grid grid-cols-1 gap-4">
<div className="grid grid-cols-1 gap-4" style={{ maxHeight: "calc(100vh - 165px)", overflowY: 'auto' }}>
{activeCategory && widgetCategories.map((category, index) =>
<WidgetCategoryItem
key={category.name}
@ -89,7 +88,6 @@ function DashboardMetricSelection(props) {
category={category}
isSelected={activeCategory.name === category.name}
selectedWidgetIds={selectedWidgetIds}
unSelectCategory={dashboardStore.removeSelectedWidgetByCategory}
/>
)}
</div>