Add collection actions to the top of the element list

ComPlat · Oct 29, 2024 · 6ed7199 · 6ed7199
1 parent eca9647
commit 6ed7199
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsList.js b/app/packs/src/apps/mydb/elements/list/ElementsList.js
@@ -1,6 +1,6 @@
 import Immutable from 'immutable';
 import React from 'react';
-import { Tabs, Tab, Tooltip, OverlayTrigger, Button } from 'react-bootstrap';
+import { Tabs, Tab, Tooltip, OverlayTrigger, Button, ButtonGroup } from 'react-bootstrap';
 import KeyboardActions from 'src/stores/alt/actions/KeyboardActions';
 import UIActions from 'src/stores/alt/actions/UIActions';
 import UserActions from 'src/stores/alt/actions/UserActions';
@@ -14,6 +14,10 @@ import UserStore from 'src/stores/alt/stores/UserStore';
 import { StoreContext } from 'src/stores/mobx/RootStore';
 import ArrayUtils from 'src/utilities/ArrayUtils';
 import PropTypes from 'prop-types';
+import ManagingActions from 'src/components/managingActions/ManagingActions';
+import CreateButton from 'src/components/contextActions/CreateButton';
+import SplitElementButton from 'src/components/contextActions/SplitElementButton';
+import ExportImportButton from 'src/components/contextActions/ExportImportButton';
 
 function getSortedHash(inputHash) {
   const resultHash = {};
@@ -259,14 +263,23 @@ export default class ElementsList extends React.Component {
             Remove search result
           </Button>
         )}
-        <div className="position-relative h-100">
-          <div className="position-absolute top-0 end-0">
-            <ElementsTableSettings
-              visible={visible}
-              hidden={hidden}
-            />
+        <div className="d-flex flex-column gap-1 h-100">
+          <div className="d-flex gap-2">
+            <ManagingActions />
+            <ButtonGroup className="d-flex align-items-center">
+              <SplitElementButton />
+              <CreateButton />
+            </ButtonGroup>
+            <ExportImportButton />
           </div>
-          <div className="tabs-container--with-full-height">
+          <div className="tabs-container--with-full-height position-relative">
+            <div className="position-absolute top-0 end-0">
+              <ElementsTableSettings
+                visible={visible}
+                hidden={hidden}
+              />
+            </div>
+
             <Tabs
               id="tabList"
               defaultActiveKey={0}

diff --git a/app/packs/src/apps/mydb/layout/Topbar.js b/app/packs/src/apps/mydb/layout/Topbar.js
@@ -1,11 +1,7 @@
 import React from 'react';
-import { ButtonGroup } from 'react-bootstrap';
 
 import Search from 'src/components/navigation/search/Search';
-import CreateButton from 'src/components/contextActions/CreateButton';
-import SplitElementButton from 'src/components/contextActions/SplitElementButton';
 import ReportUtilButton from 'src/components/contextActions/ReportUtilButton';
-import ExportImportButton from 'src/components/contextActions/ExportImportButton';
 import ScanCodeButton from 'src/components/contextActions/ScanCodeButton';
 import SupportMenuButton from 'src/components/navigation/SupportMenuButton';
 import UserAuth from 'src/components/navigation/UserAuth';
@@ -16,15 +12,8 @@ export default function Topbar() {
       <Search />
 
       <div className="d-flex align-items-center gap-2">
-        <ButtonGroup className="d-flex align-items-center">
-          <SplitElementButton />
-          <CreateButton />
-        </ButtonGroup>
-
-        <ExportImportButton />
         <ReportUtilButton />
         <ScanCodeButton />
-
         <SupportMenuButton />
         <UserAuth />
       </div>

diff --git a/app/packs/src/components/managingActions/ManagingActions.js b/app/packs/src/components/managingActions/ManagingActions.js
@@ -174,7 +174,7 @@ export default class ManagingActions extends React.Component {
 
     return (
       <>
-        <ButtonGroup className="d-flex align-items-center">
+        <ButtonGroup>
           <DropdownButton
             as={ButtonGroup}
             variant="success"