;
updateValue: (key: string, enabled: boolean, color: string) => void
addValue: (key: string, enabled: boolean, color: string) => void
}
const FiltersContext = createContext
({
showUntagged: false,
+ showPin: false,
keyValueMap: {},
updateValue: () => {},
addValue: () => {},
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.css b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.css
index 19d630ddce..fad989989f 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.css
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.css
@@ -19,3 +19,28 @@
width: 3rem;
height: 3rem;
}
+
+.remixui_grid_cell_pin:focus {
+ outline: none;
+}
+.remixui_grid_cell_pin {
+ width: 1rem;
+ height: 1rem;
+ position: relative;
+ right: 1rem;
+ top: -0.5rem;
+ background: transparent;
+}
+
+.remixui_grid_cell_tags {
+ position: relative;
+ right: 1rem;
+ top: 0.1rem;
+}
+
+.remixui_grid_cell_tag {
+ font-size: x-small;
+ font-weight: bolder;
+ width: 0.4rem;
+ height: 1.2rem;
+}
\ No newline at end of file
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
index 0642eb074c..a9aa039a8a 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx
@@ -14,6 +14,8 @@ const _paq = window._paq = window._paq || []
interface RemixUIGridCellProps {
plugin: any
+ pinned?: boolean
+ pinStateCallback?: any
logo?: string
title?: string
tagList?: string[] // max 8, others will be ignored
@@ -25,6 +27,7 @@ interface RemixUIGridCellProps {
export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
const filterCon = useContext(FiltersContext)
const [anyEnabled, setAnyEnabled] = useState(false)
+ const [pinned, setPinned] = useState(props.pinned)
useEffect(() => {
if (props.tagList) setAnyEnabled(props.tagList.some((key) => filterCon.keyValueMap[key]?.enabled))
@@ -32,18 +35,30 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
}, [filterCon, props.tagList])
return (
-
+
{ anyEnabled &&
-
+
{ props.logo &&
}
- { props.title &&
}
+ { props.title &&
}
{ props.children }
- { props.tagList &&
+ { filterCon.showPin &&
}
+ { props.tagList &&
{ Object.keys(props.tagList).map((key) => (
filterCon.keyValueMap[props.tagList[key]].enabled && (
{
tooltipText={props.tagList[key]}
>
+ className={'remixui_grid_cell_tag bg-' + filterCon.keyValueMap[props.tagList[key]].color}
+ >
)
)) }
}
{ !props.tagList &&
+ className={'remixui_grid_cell_tags'}>
}
}
diff --git a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
index 4dd5409678..c1b332bc01 100644
--- a/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
+++ b/libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx
@@ -1,7 +1,6 @@
import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
import './remix-ui-grid-section.css'
-import {ThemeContext, themes} from './themeContext'
declare global {
interface Window {
@@ -20,37 +19,6 @@ interface RemixUIGridSectionProps {
}
export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
- const {plugin} = props.plugin
- const searchInputRef = useRef(null)
-
- console.log('props.hScrollable ', props.hScrollable)
- const [state, setState] = useState<{
- themeQuality: {filter: string; name: string}
- }>({
- themeQuality: themes.light
- })
-
- useEffect(() => {
- plugin?.call('theme', 'currentTheme').then((theme) => {
- // update theme quality. To be used for for images
- setState((prevState) => {
- return {
- ...prevState,
- themeQuality: theme.quality === 'dark' ? themes.dark : themes.light
- }
- })
- })
- plugin?.on('theme', 'themeChanged', (theme) => {
- // update theme quality. To be used for for images
- setState((prevState) => {
- return {
- ...prevState,
- themeQuality: theme.quality === 'dark' ? themes.dark : themes.light
- }
- })
- })
- }, [plugin])
-
return (
{
const [keyValueMap, setKeyValueMap] = useState
>({});
const showUntagged = props.showUntagged || false
+ const showPin = props.showPin || false
const updateValue = (key: string, enabled: boolean, color?: string) => {
if (!color || color === '') color = setKeyValueMap[key].color
setKeyValueMap((prevMap) => ({
@@ -96,7 +98,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
}, [plugin])
return (
-
+