fixed settings icon theme change bug

pull/1671/head
Joseph Izang 3 years ago
parent 3b5f1efb74
commit d07d017bcd
  1. 9
      apps/remix-ide/src/app/components/vertical-icons.js
  2. 37
      libs/remix-ui/vertical-icons-panel/src/lib/components/Settings.tsx
  3. 3
      libs/remix-ui/vertical-icons-panel/src/lib/remix-ui-vertical-icons-panel.tsx

@ -163,6 +163,15 @@ export class VerticalIcons extends Plugin {
this.events.emit('showContent', name)
}
onThemeChanged (themeType) {
const invert = themeType === 'dark' ? 1 : 0
const active = this.view.querySelector('.active')
if (active) {
const image = active.querySelector('.image')
image.style.setProperty('filter', `invert(${invert})`)
}
}
/**
* Toggles the side panel for plugin
* @param {string} name Name of profile of the module to activate

@ -1,7 +1,7 @@
/* eslint-disable no-use-before-define */
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { VerticalIcons } from 'libs/remix-ui/vertical-icons-panel/types/vertical-icons-panel'
import React, { useEffect } from 'react'
import React, { useEffect, useRef } from 'react'
import { Chevron } from './Chevron'
import Icon from './Icon'
@ -11,25 +11,30 @@ interface SettingsProps {
addActive: (name: string) => void
removeActive: () => void
scrollableRef: React.MutableRefObject<any>
onThemeChanged: (themeType: any) => void
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive, onThemeChanged }: SettingsProps) {
useEffect(() => {
// const themeModule = verticalIconsPlugin.registry.get('themeModule').api
// themeModule.events.on('themeChanged', (theme: any) => {
// onThemeChanged(theme.quality)
// })
return () => {
document.addEventListener('themeChanged', (theme: any) => {
// onThemeChanged(theme.quality)
console.log('this is what theme contains', theme)
})
function Settings ({ scrollableRef, verticalIconsPlugin, itemContextAction, addActive, removeActive }: SettingsProps) {
const settingsRef = useRef(null)
function onThemeChanged (themeType: any) {
const invert = themeType === 'dark' ? 1 : 0
// @ts-ignore
const active = settingsRef.current.querySelector('.active')
if (active) {
// @ts-ignore
const image = settingsRef.current.querySelector('.remixui_image')
image.style.setProperty('filter', `invert(${invert})`)
}
})
}
useEffect(() => {
const themeModule = verticalIconsPlugin.registry.get('themeModule').api
themeModule.events.on('themeChanged', (theme: any) => {
onThemeChanged(theme.quality)
console.log('There was a theme change and is caught in settings. This is the theme payload ', theme)
})
}, [])
return (
<div id="settingsIcons" data-id="vertialIconsSettingsIcons">
<div id="settingsIcons" data-id="vertialIconsSettingsIcons" ref={settingsRef}>
<Chevron
divElementRef={scrollableRef}
cssRule={'fa fa-chevron-down remixui_icon-chevron mt-0 mb-0 ml-1 pl-3'}

@ -76,6 +76,7 @@ export function RemixUiVerticalIconsPanel ({
const themeModule = verticalIconsPlugin.registry.get('themeModule').api
themeModule.events.on('themeChanged', (theme: any) => {
onThemeChanged(theme.quality)
console.log('There was a theme change. This is the theme payload ', theme)
})
}, [])
@ -83,6 +84,7 @@ export function RemixUiVerticalIconsPanel ({
const themeModule = verticalIconsPlugin.registry.get('themeModule').api
themeModule.events.on('themeChanged', (theme: any) => {
onThemeChanged(theme.quality)
console.log('There was a theme change. This is the theme payload ', theme)
})
}, [])
@ -130,7 +132,6 @@ export function RemixUiVerticalIconsPanel ({
removeActive={removeActive}
itemContextAction={itemContextAction}
scrollableRef={scrollableRef}
onThemeChanged={onThemeChanged}
/>
</Fragment>
) : null}

Loading…
Cancel
Save