Grid buttons responsive

2025-09-15 11:15:21 +03:00 · 2025-09-15 11:15:21 +03:00 · b009b520e1
commit b009b520e1
parent 57dc9811a7
6 changed files with 100 additions and 108 deletions
--- a/ui/src/components/template/AiAssistant.tsx
+++ b/ui/src/components/template/AiAssistant.tsx
@ -20,7 +20,7 @@ const AiAssistant = () => {
    <Tooltip title={translate('::Abp.Identity.Ai')}>
      <div
        onClick={() => navigate(ROUTES_ENUM.protected.admin.ai)}
-        className="flex items-center justify-center w-9 h-9 m-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
+        className="flex items-center justify-center text-2xl m-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
      >
        <FcHeadset size={24} />
      </div>
--- a/ui/src/components/template/Header.tsx
+++ b/ui/src/components/template/Header.tsx
@ -15,14 +15,8 @@ const Header = (props: HeaderProps) => {

  return (
    <header className={classNames('header', className)}>
-      <div
-        className={classNames(
-          'header-wrapper',
-          HEADER_HEIGHT_CLASS,
-          container && 'container mx-auto',
-        )}
-      >
-        <div className='flex'>{headerStart}</div>
+      <div className={classNames('header-wrapper', container && 'container mx-auto')}>
+        <div className="flex">{headerStart}</div>
        {headerMiddle && <div className="header-action header-action-middle">{headerMiddle}</div>}
        <div className="header-action header-action-end">{headerEnd}</div>
      </div>
--- a/ui/src/components/template/SecondaryHeader.tsx
+++ b/ui/src/components/template/SecondaryHeader.tsx
@ -6,53 +6,37 @@ import { useStoreState } from '@/store'
 import type { CommonProps } from '@/@types/common'

 interface SecondaryHeaderProps extends CommonProps {
-    contained: boolean
+  contained: boolean
 }

 const SecondaryHeader = (props: SecondaryHeaderProps) => {
-    const { className, contained } = props
+  const { className, contained } = props

-    const navMode = useStoreState((state) => state.theme.navMode)
-    const themeColor = useStoreState((state) => state.theme.themeColor)
-    const primaryColorLevel = useStoreState(
-        (state) => state.theme.primaryColorLevel
-    )
-    const userAuthority = useStoreState((state) => state.auth.user.authority)
+  const navMode = useStoreState((state) => state.theme.navMode)
+  const themeColor = useStoreState((state) => state.theme.themeColor)
+  const primaryColorLevel = useStoreState((state) => state.theme.primaryColorLevel)
+  const userAuthority = useStoreState((state) => state.auth.user.authority)

-    const { larger } = useResponsive()
+  const { larger } = useResponsive()

-    const headerColor = () => {
-        if (navMode === NAV_MODE_THEMED) {
-            return `bg-${themeColor}-${primaryColorLevel} secondary-header-${navMode}`
-        }
-        return `secondary-header-${navMode}`
+  const headerColor = () => {
+    if (navMode === NAV_MODE_THEMED) {
+      return `bg-${themeColor}-${primaryColorLevel} secondary-header-${navMode}`
    }
+    return `secondary-header-${navMode}`
+  }

-    return (
-        <>
-            {larger.md && (
-                <div
-                    className={classNames(
-                        'h-12 flex items-center',
-                        headerColor(),
-                        className
-                    )}
-                >
-                    <div
-                        className={classNames(
-                            'flex items-center px-2',
-                            contained && 'container mx-auto'
-                        )}
-                    >
-                        <HorizontalMenuContent
-                            manuVariant={navMode}
-                            userAuthority={userAuthority}
-                        />
-                    </div>
-                </div>
-            )}
-        </>
-    )
+  return (
+    <>
+      {larger.md && (
+        <div className={classNames('flex items-center py-1', headerColor(), className)}>
+          <div className={classNames('flex items-center px-2', contained && 'container mx-auto')}>
+            <HorizontalMenuContent manuVariant={navMode} userAuthority={userAuthority} />
+          </div>
+        </div>
+      )}
+    </>
+  )
 }

 export default SecondaryHeader
--- a/ui/src/components/template/StackedSideNav/StackedSideNavSecondary.tsx
+++ b/ui/src/components/template/StackedSideNav/StackedSideNavSecondary.tsx
@ -1,73 +1,70 @@
 import Button from '@/components/ui/Button'
 import ScrollBar from '@/components/ui/ScrollBar'
 import classNames from 'classnames'
-import {
-    HEADER_HEIGHT_CLASS,
-    DIR_LTR,
-    DIR_RTL,
-} from '@/constants/theme.constant'
+import { HEADER_HEIGHT_CLASS, DIR_LTR, DIR_RTL } from '@/constants/theme.constant'
 import VerticalMenuContent from '@/components/template/VerticalMenuContent'
-import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'
 import type { NavigationTree } from '@/@types/navigation'
 import type { Direction, NavMode } from '@/@types/theme'

 type StackedSideNavSecondaryProps = {
-    className?: string
-    title: string
-    menu?: NavigationTree[]
-    routeKey: string
-    onCollapse: () => void
-    direction?: Direction
-    userAuthority: string[]
-    navMode: NavMode
+  className?: string
+  title: string
+  menu?: NavigationTree[]
+  routeKey: string
+  onCollapse: () => void
+  direction?: Direction
+  userAuthority: string[]
+  navMode: NavMode
 }

 const StackedSideNavSecondary = (props: StackedSideNavSecondaryProps) => {
-    const {
-        className,
-        title,
-        menu,
-        routeKey,
-        onCollapse,
-        direction,
-        userAuthority,
-        navMode,
-        ...rest
-    } = props
+  const {
+    className,
+    title,
+    menu,
+    routeKey,
+    onCollapse,
+    direction,
+    userAuthority,
+    navMode,
+    ...rest
+  } = props

-    const handleCollpase = () => {
-        onCollapse()
-    }
+  const handleCollpase = () => {
+    onCollapse()
+  }

-    return (
-        <div className={classNames('h-full', className)} {...rest}>
-            <div
-                className={`${HEADER_HEIGHT_CLASS} flex items-center justify-between gap-4 pl-6 pr-4`}
-            >
-                <h5 className="font-bold">{title}</h5>
-                <Button
-                    shape="circle"
-                    variant="plain"
-                    size="sm"
-                    icon={
-                        <>
-                            {direction === DIR_LTR && <FaArrowLeft />}
-                            {direction === DIR_RTL && <FaArrowRight />}
-                        </>
-                    }
-                    onClick={handleCollpase}
-                />
-            </div>
-            <ScrollBar autoHide direction={direction}>
-                <VerticalMenuContent
-                    routeKey={routeKey}
-                    navigationTree={menu}
-                    userAuthority={userAuthority}
-                    navMode={navMode}
-                />
-            </ScrollBar>
-        </div>
-    )
+  return (
+    <div className={classNames('h-full', className)} {...rest}>
+      <div
+        // className={`${HEADER_HEIGHT_CLASS} flex items-center justify-between gap-4 pl-6 pr-4`}
+        className={'flex items-center justify-between gap-4 pl-6 pr-4'}
+      >
+        <h5 className="font-bold">{title}</h5>
+        <Button
+          shape="circle"
+          variant="plain"
+          size="sm"
+          icon={
+            <>
+              {direction === DIR_LTR && <FaArrowLeft />}
+              {direction === DIR_RTL && <FaArrowRight />}
+            </>
+          }
+          onClick={handleCollpase}
+        />
+      </div>
+      <ScrollBar autoHide direction={direction}>
+        <VerticalMenuContent
+          routeKey={routeKey}
+          navigationTree={menu}
+          userAuthority={userAuthority}
+          navMode={navMode}
+        />
+      </ScrollBar>
+    </div>
+  )
 }

 export default StackedSideNavSecondary
--- a/ui/src/views/list/useFilters.tsx
+++ b/ui/src/views/list/useFilters.tsx
@ -95,6 +95,8 @@ const useFilters = ({
    // Add ApplyFilterButton button filterRow.visible is true and filterRow.applyFilter is set to "onClick" ise calisir
    if (grdOpt.filterRowDto?.visible && grdOpt.filterRowDto?.applyFilter == 'onClick') {
      items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        name: 'applyFilterButton',
      })
    }
@ -155,6 +157,8 @@ const useFilters = ({

      if (checkPermission(gridDto?.gridOptions.permissionDto.e)) {
        items.push({
+          locateInMenu: 'auto',
+          showText: 'inMenu',
          name: 'exportButton',
        })
      }
@ -164,6 +168,8 @@ const useFilters = ({
        location: 'after',
        widget: 'dxMenu',
        name: 'filterMenuButtons',
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        options: {
          // filtre menüsündeki elemanlarin tıklama islemleri burada yönetiliyor.
          onItemClick: function (e: any) {
--- a/ui/src/views/list/useToolbar.tsx
+++ b/ui/src/views/list/useToolbar.tsx
@ -56,6 +56,8 @@ const useToolbar = ({
    // field chooser panel
    if (grdOpt.columnOptionDto?.columnChooserEnabled) {
      items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        name: 'columnChooserButton',
      })
    }
@ -63,8 +65,9 @@ const useToolbar = ({
    // Add group panel
    if (grdOpt.groupPanelDto?.visible) {
      items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        name: 'groupPanel',
-        showText: 'always',
      })
    }

@ -74,6 +77,8 @@ const useToolbar = ({
      items.push({
        location: 'after',
        widget: 'dxButton',
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        name: 'deleteSelectedRecords',
        options: {
          text: translate('::ListForms.ListForm.DeleteSelectedRecords'),
@ -169,8 +174,9 @@ const useToolbar = ({
    // Add InsertNewRecord button
    if (grdOpt.editingOptionDto?.allowAdding && checkPermission(grdOpt.permissionDto?.c)) {
      items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        name: 'addRowButton',
-        showText: 'always',
        location: 'after',
      })
    }
@ -245,8 +251,9 @@ const useToolbar = ({
    // Add searchPanel
    if (grdOpt.searchPanelDto?.visible) {
      items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        name: 'searchPanel',
-        showText: 'always',
      })
    }

@ -257,10 +264,14 @@ const useToolbar = ({
      checkPermission(grdOpt.permissionDto?.u)
    ) {
      items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        name: 'saveButton',
      })

      items.push({
+        locateInMenu: 'auto',
+        showText: 'inMenu',
        name: 'revertButton',
      })
    }