Grid buttons responsive

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>

ui/src/components/template/Header.tsx

@@ -15,14 +15,8 @@ const Header = (props: HeaderProps) => {
 
   return (
     <header className={classNames('header', className)}>
-      <div
+      <div className={classNames('header-wrapper', container && 'container mx-auto')}>
-        className={classNames(
+        <div className="flex">{headerStart}</div>
-          'header-wrapper',
-          HEADER_HEIGHT_CLASS,
-          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>

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 navMode = useStoreState((state) => state.theme.navMode)
-    const themeColor = useStoreState((state) => state.theme.themeColor)
+  const themeColor = useStoreState((state) => state.theme.themeColor)
-    const primaryColorLevel = useStoreState(
+  const primaryColorLevel = useStoreState((state) => state.theme.primaryColorLevel)
-        (state) => state.theme.primaryColorLevel
+  const userAuthority = useStoreState((state) => state.auth.user.authority)
-    )
-    const userAuthority = useStoreState((state) => state.auth.user.authority)
 
-    const { larger } = useResponsive()
+  const { larger } = useResponsive()
 
-    const headerColor = () => {
+  const headerColor = () => {
-        if (navMode === NAV_MODE_THEMED) {
+    if (navMode === NAV_MODE_THEMED) {
-            return `bg-${themeColor}-${primaryColorLevel} secondary-header-${navMode}`
+      return `bg-${themeColor}-${primaryColorLevel} secondary-header-${navMode}`
-        }
-        return `secondary-header-${navMode}`
     }
+    return `secondary-header-${navMode}`
+  }
 
-    return (
+  return (
-        <>
+    <>
-            {larger.md && (
+      {larger.md && (
-                <div
+        <div className={classNames('flex items-center py-1', headerColor(), className)}>
-                    className={classNames(
+          <div className={classNames('flex items-center px-2', contained && 'container mx-auto')}>
-                        'h-12 flex items-center',
+            <HorizontalMenuContent manuVariant={navMode} userAuthority={userAuthority} />
-                        headerColor(),
+          </div>
-                        className
+        </div>
-                    )}
+      )}
-                >
+    </>
-                    <div
+  )
-                        className={classNames(
-                            'flex items-center px-2',
-                            contained && 'container mx-auto'
-                        )}
-                    >
-                        <HorizontalMenuContent
-                            manuVariant={navMode}
-                            userAuthority={userAuthority}
-                        />
-                    </div>
-                </div>
-            )}
-        </>
-    )
 }
 
 export default SecondaryHeader

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 {
+import { HEADER_HEIGHT_CLASS, DIR_LTR, DIR_RTL } from '@/constants/theme.constant'
-    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
+  className?: string
-    title: string
+  title: string
-    menu?: NavigationTree[]
+  menu?: NavigationTree[]
-    routeKey: string
+  routeKey: string
-    onCollapse: () => void
+  onCollapse: () => void
-    direction?: Direction
+  direction?: Direction
-    userAuthority: string[]
+  userAuthority: string[]
-    navMode: NavMode
+  navMode: NavMode
 }
 
 const StackedSideNavSecondary = (props: StackedSideNavSecondaryProps) => {
-    const {
+  const {
-        className,
+    className,
-        title,
+    title,
-        menu,
+    menu,
-        routeKey,
+    routeKey,
-        onCollapse,
+    onCollapse,
-        direction,
+    direction,
-        userAuthority,
+    userAuthority,
-        navMode,
+    navMode,
-        ...rest
+    ...rest
-    } = props
+  } = props
 
-    const handleCollpase = () => {
+  const handleCollpase = () => {
-        onCollapse()
+    onCollapse()
-    }
+  }
 
-    return (
+  return (
-        <div className={classNames('h-full', className)} {...rest}>
+    <div className={classNames('h-full', className)} {...rest}>
-            <div
+      <div
-                className={`${HEADER_HEIGHT_CLASS} flex items-center justify-between gap-4 pl-6 pr-4`}
+        // 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
+        <h5 className="font-bold">{title}</h5>
-                    shape="circle"
+        <Button
-                    variant="plain"
+          shape="circle"
-                    size="sm"
+          variant="plain"
-                    icon={
+          size="sm"
-                        <>
+          icon={
-                            {direction === DIR_LTR && <FaArrowLeft />}
+            <>
-                            {direction === DIR_RTL && <FaArrowRight />}
+              {direction === DIR_LTR && <FaArrowLeft />}
-                        </>
+              {direction === DIR_RTL && <FaArrowRight />}
-                    }
+            </>
-                    onClick={handleCollpase}
+          }
-                />
+          onClick={handleCollpase}
-            </div>
+        />
-            <ScrollBar autoHide direction={direction}>
+      </div>
-                <VerticalMenuContent
+      <ScrollBar autoHide direction={direction}>
-                    routeKey={routeKey}
+        <VerticalMenuContent
-                    navigationTree={menu}
+          routeKey={routeKey}
-                    userAuthority={userAuthority}
+          navigationTree={menu}
-                    navMode={navMode}
+          userAuthority={userAuthority}
-                />
+          navMode={navMode}
-            </ScrollBar>
+        />
-        </div>
+      </ScrollBar>
-    )
+    </div>
+  )
 }
 
 export default StackedSideNavSecondary

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) {

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',
       })
     }