diff --git a/apps/remix-ide/src/app/plugins/remixGuide.tsx b/apps/remix-ide/src/app/plugins/remixGuide.tsx index 1c4cd51eee..d782e11ff3 100644 --- a/apps/remix-ide/src/app/plugins/remixGuide.tsx +++ b/apps/remix-ide/src/app/plugins/remixGuide.tsx @@ -1,3 +1,4 @@ + import React from 'react' import { ViewPlugin } from '@remixproject/engine-web' import { PluginViewWrapper } from '@remix-ui/helper' @@ -88,6 +89,7 @@ export class RemixGuidePlugin extends ViewPlugin { logo='/assets/img/YouTubeLogo.webp' enableFilter={true} showUntagged={true} + showPin={true} tagList={[ ['beginner', 'danger'], ['advanced', 'warning'], @@ -117,12 +119,14 @@ export class RemixGuidePlugin extends ViewPlugin { diff --git a/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx b/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx index 6993e153e0..bd08f4d59a 100644 --- a/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx +++ b/libs/remix-ui/grid-view/src/lib/components/customCheckbox.tsx @@ -16,7 +16,7 @@ export const CustomCheckbox = (props: CustomCheckboxProps) => { if (!textColor || textColor == '') textColor = filterCon.keyValueMap[props.label].color return ( -
+
; 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 ( - +