From f94a982e7965a879a658fa0f1d5c56ae82264e3e Mon Sep 17 00:00:00 2001 From: filip mertens Date: Fri, 3 Nov 2023 16:05:22 +0100 Subject: [PATCH 1/5] tooltips while dragging --- .../src/lib/context/moveContext.ts | 3 +- .../drag-n-drop/src/lib/drag-n-drop.tsx | 11 +++- .../drag-n-drop/src/lib/types/index.ts | 2 + .../src/lib/components/custom-tooltip.tsx | 54 +++++++++++-------- .../helper/src/types/customtooltip.ts | 1 + .../src/lib/components/file-explorer.tsx | 7 ++- .../src/lib/components/file-label.tsx | 2 + .../src/lib/components/file-render.tsx | 6 ++- .../workspace/src/lib/remix-ui-workspace.tsx | 14 ++++- .../remix-ui/workspace/src/lib/types/index.ts | 2 + 10 files changed, 73 insertions(+), 29 deletions(-) diff --git a/libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts b/libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts index 4eb31c87a7..d31dc3e07c 100644 --- a/libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts +++ b/libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts @@ -5,5 +5,6 @@ export const MoveContext = createContext({ dragged: {} as { path: string, isDirectory: boolean }, moveFile: () => null, moveFolder: () => null, - currentlyMoved: () => null + currentlyMoved: () => null, + dragStatus: () => null }) diff --git a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx index 6427dbed12..5549a5ef33 100644 --- a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx +++ b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx @@ -14,7 +14,8 @@ export const Drag = (props: DragType) => { moveFolder: props.onFolderMoved, currentlyMoved: (path) => { setDragged(() => path) - } + }, + dragStatus: props.dragStatus }} > {props.children} @@ -68,6 +69,7 @@ export const Draggable = (props: DraggableType) => { } const handleDrag = () => { + context.dragStatus(true) if (context.dragged.path !== destination.path) { context.currentlyMoved({ path: destination.path, @@ -76,6 +78,10 @@ export const Draggable = (props: DraggableType) => { } } + const handleDragEnd = () => { + context.dragStatus(false) + } + return ( <> {props.isDraggable ? ( @@ -97,6 +103,9 @@ export const Draggable = (props: DraggableType) => { handleDrag() } }} + onDragEnd={(event) => { + handleDragEnd() + }} onDragOver={(event) => { if (destination) { handleDragover(event) diff --git a/libs/remix-ui/drag-n-drop/src/lib/types/index.ts b/libs/remix-ui/drag-n-drop/src/lib/types/index.ts index a995f40117..8bd4b0066a 100644 --- a/libs/remix-ui/drag-n-drop/src/lib/types/index.ts +++ b/libs/remix-ui/drag-n-drop/src/lib/types/index.ts @@ -17,6 +17,7 @@ export interface MoveContextType { moveFile: (dest: string, src: string) => void moveFolder: (dest: string, src: string) => void currentlyMoved: (file: { path: string, isDirectory: boolean }) => void + dragStatus: (isDragged: boolean) => void } export interface DraggableType { @@ -31,4 +32,5 @@ export interface DragType { children: ReactNode onFileMoved: (dest: string, src: string) => void onFolderMoved: (dest: string, src: string) => void + dragStatus: (isDragged: boolean) => void } diff --git a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx b/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx index 15e7cd58ac..885c280b82 100644 --- a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx +++ b/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx @@ -1,9 +1,10 @@ -import React from 'react' -import {Fragment} from 'react' -import {OverlayTrigger, Popover} from 'react-bootstrap' -import {CustomTooltipType} from '../../types/customtooltip' +import { use } from 'chai' +import React, { useEffect } from 'react' +import { Fragment } from 'react' +import { OverlayTrigger, Popover } from 'react-bootstrap' +import { CustomTooltipType } from '../../types/customtooltip' -export function CustomTooltip({children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay}: CustomTooltipType) { +export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay, hide }: CustomTooltipType) { if (typeof tooltipText !== 'string') { const newTooltipText = React.cloneElement(tooltipText, { className: ' bg-secondary text-wrap p-1 px-2 ' @@ -12,24 +13,31 @@ export function CustomTooltip({children, placement, tooltipId, tooltipClasses, t } return ( - - - - {typeof tooltipText === 'string' ? {tooltipText} : tooltipText} - - - } - delay={delay} - > + (!hide ? ( + + + + {typeof tooltipText === 'string' ? {tooltipText} : tooltipText} + + + } + delay={delay} + > + {children} + + + ) : ( + {children} - - + + )) ) } diff --git a/libs/remix-ui/helper/src/types/customtooltip.ts b/libs/remix-ui/helper/src/types/customtooltip.ts index 803f95c2ee..7afb63f091 100644 --- a/libs/remix-ui/helper/src/types/customtooltip.ts +++ b/libs/remix-ui/helper/src/types/customtooltip.ts @@ -9,4 +9,5 @@ export type CustomTooltipType = { tooltipText: string | JSX.Element, tooltipTextClasses?: string delay?: OverlayDelay + hide?: boolean } \ No newline at end of file diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx index 8ee532f4c8..f2cec10ee1 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx @@ -334,6 +334,10 @@ export const FileExplorer = (props: FileExplorerProps) => { } } + const dragStatus = (isDragged: boolean) => { + props.dragStatus(isDragged) + } + useEffect(() => { if (files[ROOT_PATH]){ try { @@ -349,7 +353,7 @@ export const FileExplorer = (props: FileExplorerProps) => { return ( - +
  • @@ -393,6 +397,7 @@ export const FileExplorer = (props: FileExplorerProps) => { key={index} showIconsMenu={props.showIconsMenu} hideIconsMenu={props.hideIconsMenu} + dragStatus={state.dragStatus} /> )) } diff --git a/libs/remix-ui/workspace/src/lib/components/file-label.tsx b/libs/remix-ui/workspace/src/lib/components/file-label.tsx index c9752a822d..c379d980d4 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-label.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-label.tsx @@ -14,6 +14,7 @@ export interface FileLabelProps { } fileDecorations: fileDecoration[] editModeOff: (content: string) => void + dragStatus: boolean } export const FileLabel = (props: FileLabelProps) => { @@ -84,6 +85,7 @@ export const FileLabel = (props: FileLabelProps) => { tooltipText={`${file.path}`} tooltipId={`fileExplorer.${file.path}`} tooltipClasses="text-nowrap" + hide={props.dragStatus} > {file.name} diff --git a/libs/remix-ui/workspace/src/lib/components/file-render.tsx b/libs/remix-ui/workspace/src/lib/components/file-render.tsx index ffb08b2a31..fcec4b5860 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-render.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-render.tsx @@ -25,6 +25,7 @@ export interface RenderFileProps { handleClickFile: (path: string, type: string) => void handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void fileDecorations: fileDecoration[] + dragStatus: boolean } export const FileRender = (props: RenderFileProps) => { @@ -107,7 +108,7 @@ export const FileRender = (props: RenderFileProps) => { <>
    - +
    @@ -138,6 +139,7 @@ export const FileRender = (props: RenderFileProps) => { handleContextMenu={props.handleContextMenu} expandPath={props.expandPath} key={index} + dragStatus={props.dragStatus} /> ))} @@ -155,7 +157,7 @@ export const FileRender = (props: RenderFileProps) => { <>
    - +
    diff --git a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx index 73587e6628..236f0be705 100644 --- a/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx +++ b/libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx @@ -68,7 +68,8 @@ export function Workspace() { mouseOverElement: null, showContextMenu: false, reservedKeywords: [ROOT_PATH, 'gist-'], - copyElement: [] + copyElement: [], + dragStatus: false }) useEffect(() => { @@ -612,6 +613,15 @@ export function Workspace() { }) } + const dragStatus = (status: boolean) => { + setState((prevState) => { + return { + ...prevState, + dragStatus: status + } + }) + } + const handleNewFileInput = async (parentFolder?: string) => { if (!parentFolder) parentFolder = getFocusedFolder() const expandPath = [...new Set([...global.fs.browser.expandPath, parentFolder])] @@ -1041,6 +1051,7 @@ export function Workspace() { editModeOn={editModeOn} handleNewFileInput={handleNewFileInput} handleNewFolderInput={handleNewFolderInput} + dragStatus={dragStatus} />
    • )} @@ -1099,6 +1110,7 @@ export function Workspace() { editModeOn={editModeOn} handleNewFileInput={handleNewFileInput} handleNewFolderInput={handleNewFolderInput} + dragStatus={dragStatus} /> )} diff --git a/libs/remix-ui/workspace/src/lib/types/index.ts b/libs/remix-ui/workspace/src/lib/types/index.ts index a10f7fcc4b..2292f180da 100644 --- a/libs/remix-ui/workspace/src/lib/types/index.ts +++ b/libs/remix-ui/workspace/src/lib/types/index.ts @@ -125,6 +125,7 @@ export interface FileExplorerProps { toGist: (path?: string, type?: string) => void handleNewFileInput: (parentFolder?: string) => Promise handleNewFolderInput: (parentFolder?: string) => Promise + dragStatus: (status: boolean) => void } type Placement = import('react-overlays/usePopper').Placement export interface FileExplorerMenuProps { @@ -190,6 +191,7 @@ export interface WorkSpaceState { showContextMenu: boolean reservedKeywords: string[] copyElement: CopyElementType[] + dragStatus: boolean } export type FileFocusContextType = { From 7162de343c644dd6da462e8a84d862d210e2fc06 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Fri, 3 Nov 2023 14:11:12 +0100 Subject: [PATCH 2/5] fix dropdown issues --- .../src/lib/components/homeTablangOptions.tsx | 32 +++++++++++-------- .../home-tab/src/lib/remix-ui-home-tab.css | 5 +++ 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx index 2baa737ad2..01b55bb00a 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx @@ -26,19 +26,25 @@ export function LanguageOptions({ plugin }: { plugin: any }) { return ( <> -
    - - {['EN', 'ES', 'FR', 'ZH'].map(lang => ( - - { - changeLanguage(lang.toLowerCase()) - setLangOptions(lang) - }} - > - {lang} - - ))} - +
    + + + {langOptions} + + + {['EN', 'ES', 'FR', 'IT', 'ZH'].map(lang => ( + + { + changeLanguage(lang.toLowerCase()) + setLangOptions(lang) + }} + style={{ color: 'var(--white)'}} + > + {lang} + + ))} + +
    ) diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css index f448657ee2..3a8e7d6a06 100644 --- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css +++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.css @@ -109,3 +109,8 @@ .remixui_home_carouselText { font-size: rfs-fluid-value(1rem); } + +.langSelectorbg { + background-color: var(--body-bg); + color: var(--text); +} From c61e6c21ef8b4b207019592ffa086b72f8c385f1 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Fri, 3 Nov 2023 14:19:31 +0100 Subject: [PATCH 3/5] fix text color for dropdown items --- .../remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx index 01b55bb00a..003c6d5f21 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx @@ -38,7 +38,7 @@ export function LanguageOptions({ plugin }: { plugin: any }) { changeLanguage(lang.toLowerCase()) setLangOptions(lang) }} - style={{ color: 'var(--white)'}} + style={{ color: 'var(--text)'}} > {lang} From c9505eec5737c08ee82d74c1b3dd1aa0c3c80146 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Fri, 3 Nov 2023 17:13:10 +0100 Subject: [PATCH 4/5] change cursor to pointer for the dropdown --- .../home-tab/src/lib/components/homeTablangOptions.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx index 003c6d5f21..9dfaa7f44e 100644 --- a/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx +++ b/libs/remix-ui/home-tab/src/lib/components/homeTablangOptions.tsx @@ -32,13 +32,14 @@ export function LanguageOptions({ plugin }: { plugin: any }) { {langOptions} - {['EN', 'ES', 'FR', 'IT', 'ZH'].map(lang => ( + {['EN', 'ES', 'FR', 'IT', 'ZH'].map((lang, index) => ( { changeLanguage(lang.toLowerCase()) setLangOptions(lang) }} - style={{ color: 'var(--text)'}} + style={{ color: 'var(--text)', cursor: 'pointer' }} + key={index} > {lang} From c1a5683bf18cfbc737e13b0169df02789ed0285a Mon Sep 17 00:00:00 2001 From: aniket-engg Date: Mon, 6 Nov 2023 20:04:19 +0530 Subject: [PATCH 5/5] update Semaphore workspace readme --- .../src/templates/semaphore/README.txt | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/libs/remix-ws-templates/src/templates/semaphore/README.txt b/libs/remix-ws-templates/src/templates/semaphore/README.txt index 19034d3b23..c046f1668c 100644 --- a/libs/remix-ws-templates/src/templates/semaphore/README.txt +++ b/libs/remix-ws-templates/src/templates/semaphore/README.txt @@ -1,9 +1,10 @@ -REMIX CIRCOM WORKSPACE +CIRCOM ZKP SEMAPHORE WORKSPACE -Welcome to the Remix Circom Workspace. This workspace becomes available when you create a new workspace using the 'Circom' template. -Directory Structure +Welcome to the Remix Circom ZKP Semaphore Workspace. The workspace comprises two main directories: - circuits: Contains sample semaphore contracts. These can be compiled to generate a witness. - scripts: Provides a sample script designed for a trusted setup using snarkjs. This script also aids in generating Solidity code, which is essential for on-chain deployment. \ No newline at end of file +- circuits: Contains sample semaphore contracts. These can be compiled to generate a witness using 'Circom ZKP Compiler' plugin. +- scripts: Provides a sample script designed for a trusted setup using snarkjs. This script also aids +in generating Solidity code, which is essential for on-chain deployment. +