ThemeConfigurator düzenlemesi

ui/src/components/template/ThemeConfigurator/StyleSwitcher.tsx

@@ -1,16 +1,16 @@
 import { HiCheck } from 'react-icons/hi'
 import { components } from 'react-select'
+import classNames from 'classnames'
 
 import { Select, toast } from '@/components/ui'
 import { styleMapOptions } from '@/views/admin/listForm/edit/options'
 import Notification from '@/components/ui/Notification'
-import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useStoreActions, useStoreState } from '@/store'
 import { updateSettingValues } from '@/services/setting-ui.service'
 import React from 'react'
 
 const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
-  const { translate } = useLocalization()
+  const menuItemHeight = 36
   const { setMode, setStyle, setThemeColor, setThemeColorLevel, abpConfig } = useStoreActions(
     (actions) => ({
       setMode: actions.theme.setMode,
@@ -20,7 +20,7 @@ const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
       abpConfig: actions.abpConfig.getConfig,
     }),
   )
-  const { style, themeColor, primaryColorLevel } = useStoreState((state) => state.theme)
+  const { style } = useStoreState((state) => state.theme)
 
   const onSetStyle = React.useCallback(
     async (val: any) => {
@@ -44,17 +44,20 @@ const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
       abpConfig(false)
       if (onStyleChange) onStyleChange()
     },
-    [setStyle, setMode, abpConfig, translate, onStyleChange],
+    [setStyle, setMode, setThemeColor, setThemeColorLevel, abpConfig, onStyleChange],
   )
 
   // Custom Option
-  const CustomSelectOption = ({ innerProps, label, data, isSelected }: any) => {
+  const CustomSelectOption = ({ innerProps, label, data, isSelected, isFocused }: any) => {
     const { border, fill } = data.color
     return (
       <div
-        className={`flex items-center justify-between p-2 cursor-pointer ${
+        className={classNames(
-          isSelected ? 'bg-gray-100 dark:bg-gray-500' : 'hover:bg-gray-50 dark:hover:bg-gray-600'
+          'select-option cursor-pointer',
-        }`}
+          isSelected && 'selected',
+          isFocused && 'focused',
+        )}
+        style={{ minHeight: menuItemHeight }}
         {...innerProps}
       >
         <div className="flex items-center">
@@ -81,7 +84,7 @@ const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
   // Custom Control
   const CustomControl = ({ children, ...props }: any) => {
     const selected = props.getValue()[0]
-    const { border, fill } = selected?.color
+    const { border, fill } = selected?.color || { border: '#ccc', fill: '#fff' }
     return (
       <components.Control {...props}>
         {selected ? (
@@ -108,15 +111,17 @@ const StyleSwitcher = ({ onStyleChange }: { onStyleChange?: () => void }) => {
 
   return (
     <Select
-      value={styleMapOptions.find((o) => o.value === style)}
-      options={styleMapOptions}
-      onChange={(option: any) => {
-        onSetStyle(option)
-      }}
       components={{
         Option: CustomSelectOption,
         Control: CustomControl,
       }}
+      isSearchable={true}
+      maxMenuHeight={menuItemHeight * 7}
+      options={styleMapOptions}
+      value={styleMapOptions.find((o) => o.value === style)}
+      onChange={(option: any) => {
+        onSetStyle(option)
+      }}
     />
   )
 }

ui/src/components/template/ThemeConfigurator/ThemeConfigurator.tsx

@@ -11,7 +11,6 @@ export type ThemeConfiguratorProps = {
   callBackClose?: () => void
 }
 
-
 const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
   const { translate } = useLocalization()
   const [modeKey, setModeKey] = useState(0)
@@ -24,6 +23,10 @@ const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
   return (
     <div className="flex flex-col h-full justify-between">
       <div className="flex flex-col gap-y-3 mb-2 ml-1">
+        <div>
+          <h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
+          <LayoutSwitcher />
+        </div>
         <div>
           <h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6>
           <StyleSwitcher onStyleChange={handleStyleChange} />
@@ -50,10 +53,6 @@ const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
           </div>
           <DirectionSwitcher callBackClose={callBackClose} />
         </div>
-        <div>
-          <h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
-          <LayoutSwitcher />
-        </div>
       </div>
     </div>
   )