Merge pull request #15 from firecamp-io/fc-scrollbar

Fc scrollbar
HexmosTech · Oct 3, 2022 · f668751 · f668751
2 parents c7693de + b0e57d9
commit f668751
Show file tree

Hide file tree

Showing 16 changed files with 153 additions and 59 deletions.
diff --git a/packages/firecamp-core/package.json b/packages/firecamp-core/package.json
@@ -57,7 +57,7 @@
     "@types/react-dom": "^17.0.13"
   },
   "dependencies": {
-    "@firecamp/cloud-apis": "^0.0.16",
+    "@firecamp/cloud-apis": "^0.0.17",
     "@firecamp/cookie-manager": "^0.0.0",
     "@firecamp/graphql": "^0.0.0",
     "@firecamp/rest": "^0.0.0",

diff --git a/packages/firecamp-core/src/components/activity-bar/explorer/Explorer.tsx b/packages/firecamp-core/src/components/activity-bar/explorer/Explorer.tsx
@@ -332,8 +332,12 @@ const Explorer: FC<any> = () => {
                   onSelectItems={_onNodeSelect}
                   onRegisterTree={(...a) => console.log(a, 'on register tree')}
                   onDrop={onDrop}
-                  // onMissingItems={(itemIds )=> console.log(itemIds, "onMissingItems")}
-                  // onMissingChildren={(itemIds )=> console.log(itemIds, "onMissingChildren")}
+                  onMissingItems={(itemIds )=> {
+                    // console.log(itemIds, "onMissingItems")
+                  }}
+                  onMissingChildren={(itemIds )=> {
+                    // console.log(itemIds, "onMissingChildren")
+                  }}
                 >
                   <Tree
                     treeId="collections-explorer"

diff --git a/packages/firecamp-core/src/components/activity-bar/explorer/WorkspaceCollectionsProvider.ts b/packages/firecamp-core/src/components/activity-bar/explorer/WorkspaceCollectionsProvider.ts
@@ -212,6 +212,7 @@ export class WorkspaceCollectionsProvider<T = any> implements TreeDataProvider {
   }
 
   public addFolderItem(item: any) {
+    if (!item.meta) item.meta = { f_orders: [], r_orders: [] };
     this.items.push({ ...item, _meta: { ...item._meta, is_folder: true } });
     this.items.map((i) => {
       if (item._meta.folder_id && i._meta.id == item._meta.folder_id) {
@@ -255,19 +256,42 @@ export class WorkspaceCollectionsProvider<T = any> implements TreeDataProvider {
 
   public deleteFolderItem(itemId: string) {
     const item = this.items.find((i) => i._meta.id == itemId);
-    if (!item) return item;
-    this.items = this.items.filter((i) => i._meta.id != itemId);
-    // TODO: remove from parent children
+    if (!item) return;
+    this.items = this.items
+      .filter((i) => i._meta.id != itemId)
+      .map((i) => {
+        // remove folder from parent's f_orders
+        if (
+          i._meta.id == item._meta.folder_id ||
+          i._meta.id == item._meta.collection_id
+        ) {
+          const newFldOrders = i.meta.f_orders.filter((f) => f != itemId);
+          return { ...i, meta: { ...i.meta, f_orders: newFldOrders } };
+        }
+        return i;
+      });
     this.emitter.emit(ETreeEventTypes.itemChanged, [
       item._meta.folder_id || item._meta.collection_id,
     ]);
   }
 
   public deleteRequestItem(itemId: string) {
     const item = this.items.find((i) => i._meta.id == itemId);
-    if (!item) return item;
-    this.items = this.items.filter((i) => i._meta.id != itemId);
-    // TODO: remove from parent children
+    if (!item) return;
+    this.items = this.items
+      .filter((i) => i._meta.id != itemId)
+      .map((i) => {
+        // remove folder from parent's f_orders
+        if (
+          i._meta.id == item._meta.folder_id ||
+          i._meta.id == item._meta.collection_id
+        ) {
+          const newReqOrders = i.meta.f_orders.filter((r) => r != itemId);
+          return { ...i, meta: { ...i.meta, r_orders: newReqOrders } };
+        }
+        return i;
+      });
+
     this.emitter.emit(ETreeEventTypes.itemChanged, [
       item._meta.folder_id || item._meta.collection_id,
     ]);

diff --git a/packages/firecamp-core/src/store/workspace.ts b/packages/firecamp-core/src/store/workspace.ts
@@ -2,15 +2,10 @@ import create from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { nanoid } from 'nanoid';
 import _reject from 'lodash/reject';
-
+import { ICollection } from '@firecamp/types';
 import { _object, _string } from '@firecamp/utils';
 import { Rest } from '@firecamp/cloud-apis';
-import {
-  TId,
-  IWorkspace,
-  IOrganization,
-  EWorkspaceType,
-} from '@firecamp/types';
+import { TId, IWorkspace, EWorkspaceType } from '@firecamp/types';
 
 import { useEnvStore } from './environment';
 import AppService from '../services/app';
@@ -232,12 +227,13 @@ export const useWorkspaceStore = create<IWorkspaceStore>(
       const res = await Rest.collection
         .create(_collection)
         .then((r) => {
+          const col: ICollection = r.data;
           set((s) => {
-            s.explorer?.tdpInstance.addCollectionItem(_collection);
+            s.explorer?.tdpInstance.addCollectionItem(col);
             return {
               explorer: {
                 ...s.explorer,
-                collections: [...s.explorer.collections, _collection],
+                collections: [...s.explorer.collections, col],
               },
             };
           });
@@ -277,7 +273,7 @@ export const useWorkspaceStore = create<IWorkspaceStore>(
         .then((r) => {
           set((s) => {
             const collections = s.explorer.collections.filter(
-              (c) => c._meta.id == cId
+              (c) => c._meta.id != cId
             );
             s.explorer.tdpInstance.deleteCollectionItem(cId);
             return { explorer: { ...s.explorer, collections } };
@@ -307,20 +303,28 @@ export const useWorkspaceStore = create<IWorkspaceStore>(
       };
 
       state.toggleProgressBar(true);
-      const res = await Rest.folder.create(_folder);
-      state.toggleProgressBar(false);
+      const res = await Rest.folder
+        .create(_folder)
+        .then((res) => {
+          //@ts-ignore
+          if (_folder.meta?.type) _folder.meta.type = 'F';
+          set((s) => {
+            s.explorer?.tdpInstance.addFolderItem(_folder);
+            return {
+              explorer: {
+                ...s.explorer,
+                folders: [...s.explorer.folders, _folder],
+              },
+            };
+          });
+        })
+        // .catch((e) => {
+        //   console.log(e);
+        // })
+        .finally(() => {
+          state.toggleProgressBar(false);
+        });
 
-      //@ts-ignore
-      _folder.meta = { type: 'F' };
-      set((s) => {
-        s.explorer?.tdpInstance.addFolderItem(_folder);
-        return {
-          explorer: {
-            ...s.explorer,
-            folders: [...s.explorer.folders, _folder],
-          },
-        };
-      });
       return res;
     },
     updateFolder: async (fId: string, payload: { [k: string]: any }) => {
@@ -355,7 +359,7 @@ export const useWorkspaceStore = create<IWorkspaceStore>(
         .delete(fId)
         .then((r) => {
           set((s) => {
-            const folders = s.explorer.folders.filter((f) => f._meta.id == fId);
+            const folders = s.explorer.folders.filter((f) => f._meta.id != fId);
             s.explorer.tdpInstance.deleteFolderItem(fId);
             return { explorer: { ...s.explorer, folders } };
           });

diff --git a/packages/ui-kit/src/components/ToolBar/ToolBar.scss b/packages/ui-kit/src/components/ToolBar/ToolBar.scss
@@ -9,7 +9,7 @@
 
   .toolbar>* {
     margin-left: 2px;
-    padding: 2px;
+    padding: 1px;
     cursor: pointer;
   }
 

diff --git a/packages/ui-kit/src/components/editors/monaco/components/MultiLineIFE.tsx b/packages/ui-kit/src/components/editors/monaco/components/MultiLineIFE.tsx
@@ -188,7 +188,7 @@ const MultiLineIFE: FC<IMultiLineIFE> = ({
   }
 
   return (
-    <div className={classnames("relative h-full mt-4",className)}>
+    <div className={classnames("relative h-full",className)}>
       <div className="fc-input-IFE-multiline-placeholder">
         <div>{!value ? placeholder || '' : ''}</div>
       </div>

diff --git a/packages/ui-kit/src/components/grid/Resizable.scss b/packages/ui-kit/src/components/grid/Resizable.scss
@@ -1,12 +1,14 @@
 .fc-col-resizer.left>div:last-child:hover>div:after ,.fc-col-resizer.left>div:last-child:focus>div:after,.fc-col-resizer.left>div:last-child:active>div:after ,
 .fc-col-resizer.right>div:last-child:hover>div:after ,.fc-col-resizer.right>div:last-child:focus>div:after,.fc-col-resizer.right>:last-child:active>div:after {
   content: ' ';
+  content: " ";
   position: absolute;
-  left: 4px;
-  right: 5px;
+  left: 2px;
   top: 0px;
   bottom: 0px;
   background: var(--app-focus);
+  z-index: 99;
+  width: 1px;
 }
 
 .fc-col-resizer.top>div:last-child:hover>div:after ,.fc-col-resizer.top>div:last-child:focus>div:after,.fc-col-resizer.top>div:last-child:active>div:after ,
@@ -43,3 +45,7 @@
 .fc-col-resizer>.col{
   height: 100% !important;
 }
+.fc-col-resizer.right > div:last-child>div,.fc-col-resizer.left > div:last-child>div {
+  width: 6px !important;
+  right: -3px !important;
+}
diff --git a/packages/ui-kit/src/components/pane/Pane.scss b/packages/ui-kit/src/components/pane/Pane.scss
@@ -28,7 +28,23 @@
 .pane-body>.rct-tree-root::-webkit-scrollbar-thumb{
     background: var(--focus-level-4);
 }
-
+.pane-body .rct-tree-root
+{
+    height: calc( 100% - 2px);
+    overflow: auto;
+    scrollbar-color: rebeccapurple green;
+    scrollbar-width: thin;
+}
+.pane-body .rct-tree-root::-webkit-scrollbar{
+    width: 0px;
+    height: 8px;
+}
+.pane-body:hover .rct-tree-root::-webkit-scrollbar{
+    width: 8px;
+}
+.pane-body .rct-tree-root::-webkit-scrollbar-thumb{
+    background: var(--focus-level-4);
+}
 
 /*------pane header css starts ---------*/
 .pane-header{

diff --git a/packages/ui-kit/src/components/pane/Pane.tsx b/packages/ui-kit/src/components/pane/Pane.tsx
@@ -76,7 +76,7 @@ const Header: FC<IHeader> = ({ titleRenderer, actionRenderer, actions, className
 
 const Body: FC<IBody> = ({ children, className }) => {
     return (
-        <div className={cx("pane-body p-2 focus-outer overflow-auto visible-scrollbar", className)} tabIndex={1}>
+        <div className={cx("pane-body p-2 focus-outer", className)} tabIndex={1}>
             {children}
         </div>
     );

diff --git a/packages/ui-kit/src/components/response/tabs/BodyTab.tsx b/packages/ui-kit/src/components/response/tabs/BodyTab.tsx
@@ -233,7 +233,7 @@ const BodyTab: FC<IBodyTab> = ({ data, headers }) => {
           </StatusBar.PrimaryRegion>
         </StatusBar>
       </Container.Header>
-      <Container.Body overflow={'visible'}>
+      <Container.Body overflow={'hidden'}>
         {_renderTabBody(activeTab)}
       </Container.Body>
     </Container>

diff --git a/packages/ui-kit/src/components/status-bar/StatusBar.scss b/packages/ui-kit/src/components/status-bar/StatusBar.scss
@@ -70,5 +70,10 @@
 .fc-statusbar .fc-urlbar-path {
 	margin-top: 0px;
 	overflow: visible;
+	line-height: 22px;
+	height: 20px;
+}
+.fc-urlbar-path>span{
+	line-height: 18px;
 }
 /*---statusbar old css end---------------*/
diff --git a/packages/ui-kit/src/components/tabs/Tabs.scss b/packages/ui-kit/src/components/tabs/Tabs.scss
@@ -45,8 +45,8 @@
 }
 
 .custom-scrollbar::-webkit-scrollbar{
-    width: 4px;
-    height: 4px;
+    width: 4px !important;
+    height: 4px !important;
 }
 
 .custom-scrollbar:hover::-webkit-scrollbar-thumb,.doc-explorer-contents:hover::-webkit-scrollbar-thumb
@@ -63,4 +63,9 @@
     margin-bottom: -4px;
     overflow-x: scroll;
     overflow-y: hidden;
-}
+}
+@-moz-document url-prefix() {
+    .custom-scrollbar {
+        padding-bottom: 4px;
+    }
+  }
diff --git a/packages/ui-kit/src/components/tree/tree.scss b/packages/ui-kit/src/components/tree/tree.scss
@@ -7,6 +7,7 @@
   }
   .save-modal-collection .rct-tree-root{
     max-height: 200px;
+    overflow: auto;
   }
   .save-modal-collection .rct-tree-root::-webkit-scrollbar{
     background: transparent;

diff --git a/packages/ui-kit/src/components/url/components/UrlBar.tsx b/packages/ui-kit/src/components/url/components/UrlBar.tsx
@@ -14,7 +14,7 @@ const UrlBar: FC<IUrlBar> & {
       <div className="fc-statusbar">
         {!!nodePath ? (
           <div className="fc-urlbar-path">
-            {nodePath || ''}
+            <span>{nodePath || ''}</span>
             <ToolBar className="ml-4 visible">
               { showEditIcon? <VscEdit size={16} onClick={onEditClick}/>: <></> }
               <CopyButton className="hidden" id={`copy-button`} text={nodePath || ''} />

diff --git a/packages/ui-kit/src/scss/base.scss b/packages/ui-kit/src/scss/base.scss
@@ -579,19 +579,31 @@ textarea:focus,textarea:focus-visible{
 
 /*---------scrollbar css start----------*/
 .doc-explorer-contents::-webkit-scrollbar
+{
+  width: 0px;
+  height: 0px;
+  transition: width 1s
+}
+.doc-explorer-contents:hover::-webkit-scrollbar
 {
   width: 8px;
   height: 8px;
 }
+.doc-explorer-contents:hover::-webkit-scrollbar:hover
+{
+  width: 12px;
+  height: 8px;
+
+}
 .visible-scrollbar::-webkit-scrollbar-thumb
 {
-background-color: var(--focus-level-4) !important;
+  background-color: var(--focus-level-4) !important;
 }
 ::-webkit-scrollbar-track{
   background: transparent;
 }
 ::-webkit-scrollbar-thumb{
-  background: #000 !important;
+  background: var(--focus-level-4) !important;
   border-radius: 10px;
 }
 
@@ -612,8 +624,13 @@ background-color: var(--focus-level-4) !important;
 }
 .visible-scrollbar::-webkit-scrollbar, .visible-scrollbar > div::-webkit-scrollbar{
   display: block;
-  width: 4px;
-  height: 4px;
+  width: 0px;
+  height: 0px;
+}
+.visible-scrollbar:hover::-webkit-scrollbar, .visible-scrollbar > div:hover::-webkit-scrollbar{
+  display: block;
+  width: 8px;
+  height: 8px;
 }
 .visible-scrollbar ::-webkit-scrollbar-track{
   background: transparent;
@@ -771,4 +788,4 @@ body .ace_editor .ace_scrollbar{
 	color: var(--cm-ws)
 }
 
-/*---code mirror css ends----------*/
+/*---code mirror css ends----------*/