From 2889c73a38083b1d7bf3256d6c23bf50f8672cee Mon Sep 17 00:00:00 2001 From: radhika Date: Tue, 27 Sep 2022 13:49:25 +0530 Subject: [PATCH 1/4] [ui] scrollbar css updated --- .../src/components/ToolBar/ToolBar.scss | 2 +- .../ui-kit/src/components/grid/Resizable.scss | 10 ++++-- .../src/components/status-bar/StatusBar.scss | 1 + packages/ui-kit/src/components/tabs/Tabs.scss | 4 +-- packages/ui-kit/src/scss/base.scss | 25 ++++++++++++--- packages/ui-kit/src/scss/tailwind.scss | 31 +++++++++++++------ 6 files changed, 55 insertions(+), 18 deletions(-) diff --git a/packages/ui-kit/src/components/ToolBar/ToolBar.scss b/packages/ui-kit/src/components/ToolBar/ToolBar.scss index 058b902a5..a9ed30ad7 100644 --- 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/grid/Resizable.scss b/packages/ui-kit/src/components/grid/Resizable.scss index c4b262f4a..dce0aad6f 100644 --- 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/status-bar/StatusBar.scss b/packages/ui-kit/src/components/status-bar/StatusBar.scss index 483abd2e3..a02cacb5e 100644 --- a/packages/ui-kit/src/components/status-bar/StatusBar.scss +++ b/packages/ui-kit/src/components/status-bar/StatusBar.scss @@ -70,5 +70,6 @@ .fc-statusbar .fc-urlbar-path { margin-top: 0px; overflow: visible; + line-height: 18px; } /*---statusbar old css end---------------*/ \ No newline at end of file diff --git a/packages/ui-kit/src/components/tabs/Tabs.scss b/packages/ui-kit/src/components/tabs/Tabs.scss index 331a40006..a6061a6a2 100644 --- 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 diff --git a/packages/ui-kit/src/scss/base.scss b/packages/ui-kit/src/scss/base.scss index ff037b30c..0ccdee6bc 100644 --- a/packages/ui-kit/src/scss/base.scss +++ b/packages/ui-kit/src/scss/base.scss @@ -579,13 +579,25 @@ 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; @@ -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----------*/ \ No newline at end of file +/*---code mirror css ends----------*/ diff --git a/packages/ui-kit/src/scss/tailwind.scss b/packages/ui-kit/src/scss/tailwind.scss index 33d532a7d..c1ec06a7b 100644 --- a/packages/ui-kit/src/scss/tailwind.scss +++ b/packages/ui-kit/src/scss/tailwind.scss @@ -1198,7 +1198,6 @@ video { width: 100%; } .w-max { - width: -webkit-max-content; width: -moz-max-content; width: max-content; } @@ -2281,12 +2280,10 @@ hr{ height: 100%; } .h-fit{ - height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .\!h-fit{ - height: -webkit-fit-content !important; height: -moz-fit-content !important; height: fit-content !important; } @@ -2329,7 +2326,6 @@ textarea:focus,textarea:focus-visible{ color: var(--error); } .w-fit { - width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @@ -2612,7 +2608,6 @@ textarea:focus,textarea:focus-visible{ } .collapsed { - height: -webkit-fit-content !important; height: -moz-fit-content !important; height: fit-content !important; min-height: 0px !important @@ -2626,13 +2621,26 @@ textarea:focus,textarea:focus-visible{ /*---------scrollbar css start----------*/ .doc-explorer-contents::-webkit-scrollbar +{ + width: 0px; + height: 0px; + -webkit-transition: width 1s; + 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; @@ -2659,8 +2667,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; @@ -2820,4 +2833,4 @@ body .ace_editor .ace_scrollbar{ color: var(--cm-ws) } -/*---code mirror css ends----------*/ \ No newline at end of file +/*---code mirror css ends----------*/ From 55c78e5b82f0041d092ba33ddf63034df3266047 Mon Sep 17 00:00:00 2001 From: Nishchit14 Date: Wed, 28 Sep 2022 17:05:35 +0530 Subject: [PATCH 2/4] feat: explorer improvements --- packages/firecamp-core/package.json | 2 +- .../activity-bar/explorer/Explorer.tsx | 8 +++-- .../explorer/WorkspaceCollectionsProvider.ts | 32 +++++++++++++++---- packages/firecamp-core/src/store/workspace.ts | 18 ++++------- 4 files changed, 40 insertions(+), 20 deletions(-) diff --git a/packages/firecamp-core/package.json b/packages/firecamp-core/package.json index ef70b303c..d2703cd86 100644 --- 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 index d50f4e9f4..dc7a91bc5 100644 --- 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 = () => { 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") + }} > 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_order + if (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, ]); @@ -265,9 +273,21 @@ export class WorkspaceCollectionsProvider implements TreeDataProvider { 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_order + if (i._meta.id == item._meta.folder_id) { + const newReqOrders = i.meta.f_orders.filter((r) => r != itemId); + return { ...i, meta: { ...i.meta, r_orders: newReqOrders } }; + } else if (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 index 38fbc777b..061136794 100644 --- 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( 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( .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 } }; @@ -355,7 +351,7 @@ export const useWorkspaceStore = create( .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 } }; }); From e2e1d3fa4f38a36749019fd1ae450c0b9ffbc122 Mon Sep 17 00:00:00 2001 From: Nishchit14 Date: Thu, 29 Sep 2022 13:10:06 +0530 Subject: [PATCH 3/4] chore: explorer improvements --- .../explorer/WorkspaceCollectionsProvider.ts | 18 ++++++---- packages/firecamp-core/src/store/workspace.ts | 34 ++++++++++++------- 2 files changed, 32 insertions(+), 20 deletions(-) diff --git a/packages/firecamp-core/src/components/activity-bar/explorer/WorkspaceCollectionsProvider.ts b/packages/firecamp-core/src/components/activity-bar/explorer/WorkspaceCollectionsProvider.ts index 2a07e755a..84826ef00 100644 --- 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 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) { @@ -259,8 +260,11 @@ export class WorkspaceCollectionsProvider implements TreeDataProvider { this.items = this.items .filter((i) => i._meta.id != itemId) .map((i) => { - // remove folder from parent's f_order - if (i._meta.id == item._meta.collection_id) { + // 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 } }; } @@ -277,11 +281,11 @@ export class WorkspaceCollectionsProvider implements TreeDataProvider { this.items = this.items .filter((i) => i._meta.id != itemId) .map((i) => { - // remove folder from parent's f_order - if (i._meta.id == item._meta.folder_id) { - const newReqOrders = i.meta.f_orders.filter((r) => r != itemId); - return { ...i, meta: { ...i.meta, r_orders: newReqOrders } }; - } else if (i._meta.id == item._meta.collection_id) { + // 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 } }; } diff --git a/packages/firecamp-core/src/store/workspace.ts b/packages/firecamp-core/src/store/workspace.ts index 061136794..32f6485ca 100644 --- a/packages/firecamp-core/src/store/workspace.ts +++ b/packages/firecamp-core/src/store/workspace.ts @@ -303,20 +303,28 @@ export const useWorkspaceStore = create( }; 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 }) => { From 39d75cad6a912124db49829bca84ab3e7d6fb5a9 Mon Sep 17 00:00:00 2001 From: radhika Date: Mon, 3 Oct 2022 10:49:30 +0530 Subject: [PATCH 4/4] scrolling issue resolved in panebody --- .../editors/monaco/components/MultiLineIFE.tsx | 2 +- packages/ui-kit/src/components/pane/Pane.scss | 18 +++++++++++++++++- packages/ui-kit/src/components/pane/Pane.tsx | 2 +- .../src/components/response/tabs/BodyTab.tsx | 2 +- .../src/components/status-bar/StatusBar.scss | 4 ++++ packages/ui-kit/src/components/tabs/Tabs.scss | 7 ++++++- packages/ui-kit/src/components/tree/tree.scss | 1 + .../src/components/url/components/UrlBar.tsx | 2 +- packages/ui-kit/src/scss/base.scss | 2 +- packages/ui-kit/src/scss/tailwind.scss | 1 - 10 files changed, 33 insertions(+), 8 deletions(-) diff --git a/packages/ui-kit/src/components/editors/monaco/components/MultiLineIFE.tsx b/packages/ui-kit/src/components/editors/monaco/components/MultiLineIFE.tsx index d485d6a5f..00cc69266 100644 --- 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 = ({ } return ( -
+
{!value ? placeholder || '' : ''}
diff --git a/packages/ui-kit/src/components/pane/Pane.scss b/packages/ui-kit/src/components/pane/Pane.scss index 5a2c6aabe..228688f14 100644 --- 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 index b4460eba1..5bd10559f 100644 --- 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 = ({ titleRenderer, actionRenderer, actions, className const Body: FC = ({ children, className }) => { return ( -
+
{children}
); diff --git a/packages/ui-kit/src/components/response/tabs/BodyTab.tsx b/packages/ui-kit/src/components/response/tabs/BodyTab.tsx index 54abd9be1..a26b0bb96 100644 --- 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 = ({ data, headers }) => { - + {_renderTabBody(activeTab)} diff --git a/packages/ui-kit/src/components/status-bar/StatusBar.scss b/packages/ui-kit/src/components/status-bar/StatusBar.scss index a02cacb5e..d86e716b3 100644 --- a/packages/ui-kit/src/components/status-bar/StatusBar.scss +++ b/packages/ui-kit/src/components/status-bar/StatusBar.scss @@ -70,6 +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---------------*/ \ No newline at end of file diff --git a/packages/ui-kit/src/components/tabs/Tabs.scss b/packages/ui-kit/src/components/tabs/Tabs.scss index a6061a6a2..8160f9eed 100644 --- a/packages/ui-kit/src/components/tabs/Tabs.scss +++ b/packages/ui-kit/src/components/tabs/Tabs.scss @@ -63,4 +63,9 @@ margin-bottom: -4px; overflow-x: scroll; overflow-y: hidden; -} \ No newline at end of file +} +@-moz-document url-prefix() { + .custom-scrollbar { + padding-bottom: 4px; + } + } \ No newline at end of file diff --git a/packages/ui-kit/src/components/tree/tree.scss b/packages/ui-kit/src/components/tree/tree.scss index 049e8c425..e08f0a6a8 100644 --- 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 index d480a9718..77d5da297 100644 --- 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 & {
{!!nodePath ? (
- {nodePath || ''} + {nodePath || ''} { showEditIcon? : <> } diff --git a/packages/ui-kit/src/scss/base.scss b/packages/ui-kit/src/scss/base.scss index 0ccdee6bc..1bf09272f 100644 --- a/packages/ui-kit/src/scss/base.scss +++ b/packages/ui-kit/src/scss/base.scss @@ -603,7 +603,7 @@ textarea:focus,textarea:focus-visible{ background: transparent; } ::-webkit-scrollbar-thumb{ - background: #000 !important; + background: var(--focus-level-4) !important; border-radius: 10px; } diff --git a/packages/ui-kit/src/scss/tailwind.scss b/packages/ui-kit/src/scss/tailwind.scss index c1ec06a7b..52ffca1fc 100644 --- a/packages/ui-kit/src/scss/tailwind.scss +++ b/packages/ui-kit/src/scss/tailwind.scss @@ -2646,7 +2646,6 @@ textarea:focus,textarea:focus-visible{ background: transparent; } ::-webkit-scrollbar-thumb{ - background: #000 !important; border-radius: 10px; }