Show highlight in pinned-panel

Author: ioedeveloper

apps/remix-ide/src/app/components/pinned-panel.tsx

@@ -11,12 +11,13 @@ const pinnedPanel = {
   displayName: 'Pinned Panel',
   description: 'Remix IDE pinned panel',
   version: packageJson.version,
-  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView']
+  methods: ['addView', 'removeView', 'currentFocus', 'pinView', 'unPinView', 'highlight']
 }
 
 export class PinnedPanel extends AbstractPanel {
   dispatch: React.Dispatch<any> = () => {}
-  loggedState: any
+  loggedState: Record<string, any>
+  highlightStamp: number
 
   constructor() {
     super(pinnedPanel)
@@ -61,24 +62,30 @@ export class PinnedPanel extends AbstractPanel {
     this.emit('unPinnedPlugin', profile)
   }
 
+  highlight () {
+    this.highlightStamp = Date.now()
+    this.renderComponent()
+  }
+
   setDispatch (dispatch: React.Dispatch<any>) {
     this.dispatch = dispatch
   }
 
   render() {
     return (
-      <section className='panel pinned-panel'> <PluginViewWrapper plugin={this} /></section>
+      <section className='panel pinned-panel highlight'> <PluginViewWrapper plugin={this} /></section>
     )
   }
 
   updateComponent(state: any) {
-    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} plugins={state.plugins} pluginState={state.pluginState} />
+    return <RemixPluginPanel header={<RemixUIPanelHeader plugins={state.plugins} pinView={this.pinView.bind(this)} unPinView={this.unPinView.bind(this)}></RemixUIPanelHeader>} { ...state } />
   }
 
   renderComponent() {
     this.dispatch({
       plugins: this.plugins,
-      pluginState: this.loggedState
+      pluginState: this.loggedState,
+      highlightStamp: this.highlightStamp
     })
   }
 }

libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx

@@ -5,12 +5,15 @@ import './panel.css'
 interface panelPLuginProps {
   pluginRecord: PluginRecord,
   initialState?: any,
+  highlightStamp?: number,
   children?: any
 }
 
 const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
   const localRef = useRef<HTMLDivElement>(null)
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
+  const [showHighlight, setShowHighlight] = useState<boolean>(false)
+
   useEffect(() => {
     const ref: any = panelRef || localRef
     if (ref.current) {
@@ -39,8 +42,20 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
     }
   }, [])
 
+  useEffect(() => {
+    setShowHighlight(true)
+  }, [props.highlightStamp])
+
+  useEffect(() => {
+    if (showHighlight) {
+      setTimeout(() => {
+        setShowHighlight(false)
+      }, 500)
+    }
+  }, [showHighlight])
+
   return (
-    <div className={props.pluginRecord.active ? `${props.pluginRecord.class}` : 'd-none'} ref={panelRef || localRef}>
+    <div className={`${props.pluginRecord.active ? `${props.pluginRecord.class}` : 'd-none'} ${showHighlight ? 'highlight' : ''}`} ref={panelRef || localRef}>
       <>{view}</>
     </div>
   )

libs/remix-ui/panel/src/lib/plugins/panel.css

@@ -106,3 +106,7 @@ iframe {
 
 .terminal-wrap.minimized.desktop {
 }
+
+.highlight {
+    animation: highlight 2s forwards;
+}

libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx

@@ -9,6 +9,7 @@ export interface RemixPanelProps {
   plugins: Record<string, PluginRecord>,
   header: JSX.Element,
   pluginState?: any,
+  highlightStamp?: number
 }
 
 export function RemixPluginPanel(props: RemixPanelProps) {
@@ -18,7 +19,7 @@ export function RemixPluginPanel(props: RemixPanelProps) {
       <div className="pluginsContainer">
         <div className="plugins" id="plugins">
           {Object.values(props.plugins).map((pluginRecord) => {
-            return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} initialState={props.pluginState} />
+            return <RemixUIPanelPlugin key={pluginRecord.profile.name} pluginRecord={pluginRecord} initialState={props.pluginState} highlightStamp={props.highlightStamp} />
           })}
         </div>
       </div>

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -101,7 +101,7 @@ const Icon = ({ iconRecord, verticalIconPlugin, contextMenuAction, theme }: Icon
             className={`remixui_icon m-0  pt-1`}
             onClick={() => {
               if (iconRecord.pinned) {
-                console.log('called an already pinned plugin')
+                verticalIconPlugin.call('pinnedPanel', 'highlight')
               } else {
                 (verticalIconPlugin as any).toggle(name)
               }