From 2b00cb251ae1c283c3cda6002a55b8d6133f95a4 Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 13:37:03 -0400 Subject: [PATCH 01/11] theme fixes, fix window 'back' behavior when cancel clicked, goes to default window. --- src/assets/styles/components/_web-ide.scss | 28 ++++++++++++++++--- .../instance/functions/manage/index.js | 2 +- src/components/shared/webide/FileBrowser.js | 2 +- src/components/shared/webide/index.js | 6 ++-- .../shared/webide/windows/NameInput.js | 7 +++-- .../webide/windows/NameProjectWindow.js | 2 ++ 6 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss index 4a8d98462..ba3836a90 100644 --- a/src/assets/styles/components/_web-ide.scss +++ b/src/assets/styles/components/_web-ide.scss @@ -1,4 +1,9 @@ .dark { + .no-projects { + .docs-link { + color: #ee81ee !important; + } + } color: white; .editor.current-file-path { @@ -42,6 +47,22 @@ } .purple { + + .no-projects { + color: white; + .docs-link { + color: #ee81ee !important; + } + } + color: white; + .name-input { + .invalid { + border: 1px solid red !important; + } + .invalid-text { + color: red !important; + } + } .editor-window .cancel-button { color: rgb(105, 105, 105);; } @@ -113,6 +134,9 @@ .light { + .no-projects { + color: rgb(105,105,105); + } color: rgb(105,105,105); .package-install-window { @@ -280,10 +304,6 @@ } } - .no-projects { - color: white; - } - .file-browser { margin-left: 0; diff --git a/src/components/instance/functions/manage/index.js b/src/components/instance/functions/manage/index.js index 44e4b0a2b..0f1d21740 100644 --- a/src/components/instance/functions/manage/index.js +++ b/src/components/instance/functions/manage/index.js @@ -224,7 +224,7 @@ function ManageIndex({ refreshCustomFunctions, loading }) { async function createNewProject(newProjectName) { - await addComponent({ + const { error, message } = await addComponent({ auth, url, project: newProjectName diff --git a/src/components/shared/webide/FileBrowser.js b/src/components/shared/webide/FileBrowser.js index df5a87d4f..c1104e37d 100644 --- a/src/components/shared/webide/FileBrowser.js +++ b/src/components/shared/webide/FileBrowser.js @@ -8,7 +8,7 @@ function NoProjects() { return (

You have no HarperDB applications yet. Click the button in the menu above to create your first application!

-

See the documentation for more info on HarperDB Applications.

+

See the documentation for more info on HarperDB Applications.

); } diff --git a/src/components/shared/webide/index.js b/src/components/shared/webide/index.js index 243d856bf..e2aae5e59 100644 --- a/src/components/shared/webide/index.js +++ b/src/components/shared/webide/index.js @@ -338,7 +338,7 @@ function WebIDE({ } onCancel={ () => { - backToPreviousWindow(); + toDefaultWindow(); } } @@ -361,7 +361,7 @@ function WebIDE({ } onCancel={ () => { - backToPreviousWindow(); + toDefaultWindow(); } } /> @@ -378,7 +378,7 @@ function WebIDE({ } onCancel={ () => { - backToPreviousWindow(); + toDefaultWindow(); } } /> diff --git a/src/components/shared/webide/windows/NameInput.js b/src/components/shared/webide/windows/NameInput.js index 454fc53b3..b3a5d8b74 100644 --- a/src/components/shared/webide/windows/NameInput.js +++ b/src/components/shared/webide/windows/NameInput.js @@ -4,9 +4,10 @@ import React, { useState } from 'react'; import cn from 'classnames'; -export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='', value }) { +export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='', value, validate }) { const [ name, setName ] = useState(value || ''); + const [ isValidName, setIsValidName ] = useState(false); function handleKeyDown(e) { @@ -35,14 +36,16 @@ export default function NameInput({ onCancel, onConfirm, onEnter, label='', plac className={ cn("name-input") }> { label && } { - setName(e.target.value) + setName(e.target.value); }} onKeyDown={ handleKeyDown } value={name} placeholder={placeholder} title="choose name for your new file or folder" /> +
From b9c61b343172b3151fe339a51c54835070dcad3c Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 15:50:17 -0400 Subject: [PATCH 03/11] set default validate fn to return true in NameInput --- src/components/shared/webide/windows/NameInput.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/shared/webide/windows/NameInput.js b/src/components/shared/webide/windows/NameInput.js index f1d3dd185..c8e25a694 100644 --- a/src/components/shared/webide/windows/NameInput.js +++ b/src/components/shared/webide/windows/NameInput.js @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import cn from 'classnames'; -export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='', value, validate }) { +export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='', value, validate=() => true }) { const [ name, setName ] = useState(value || ''); const [ isValidName, setIsValidName ] = useState(false); @@ -47,9 +47,11 @@ export default function NameInput({ onCancel, onConfirm, onEnter, label='', plac value={name} placeholder={placeholder} title="choose name for your new file or folder" /> -
{ name.length > 0 && !isValidName && error: project name must contain only alphanumeric characters, dashes and underscores. } From 0cd6b40296932f0c66f4ed60641992077abb12ce Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 15:50:36 -0400 Subject: [PATCH 04/11] name input text should display as block --- src/assets/styles/components/_web-ide.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss index 291e2eee5..bed6834a9 100644 --- a/src/assets/styles/components/_web-ide.scss +++ b/src/assets/styles/components/_web-ide.scss @@ -707,6 +707,7 @@ color: $color-danger !important; margin-bottom: 20px; + display: block; } From c624da09485501e35762e95f02fdacbdd45e05ff Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 16:19:44 -0400 Subject: [PATCH 05/11] use alert when network operations fail. --- .../instance/functions/manage/index.js | 79 +++++++++++++++---- 1 file changed, 63 insertions(+), 16 deletions(-) diff --git a/src/components/instance/functions/manage/index.js b/src/components/instance/functions/manage/index.js index 0f1d21740..0607ab940 100644 --- a/src/components/instance/functions/manage/index.js +++ b/src/components/instance/functions/manage/index.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { useStoreState } from 'pullstate'; import { useParams } from 'react-router'; +import { useAlert } from 'react-alert'; import appState from '../../../../functions/state/appState'; import instanceState from '../../../../functions/state/instanceState'; @@ -77,6 +78,7 @@ function ManageIndex({ refreshCustomFunctions, loading }) { const [instanceAuths] = useInstanceAuth({}); const theme = useStoreState(appState, (s) => s.theme); const [ restartingInstance, setRestartingInstance ] = useState(false); + const alert = useAlert(); async function restartWithLoadingState({ auth: instanceAuth, url: instanceUrl }) { @@ -87,7 +89,6 @@ function ManageIndex({ refreshCustomFunctions, loading }) { setRestartingInstance(false); }, 100); - } @@ -103,7 +104,11 @@ function ManageIndex({ refreshCustomFunctions, loading }) { payload: selectedFile.content }; - await setComponentFile(payload); + const { error, message } = await setComponentFile(payload); + + if (error) { + alert.error(message); + } if (restartRequired) { @@ -148,15 +153,28 @@ function ManageIndex({ refreshCustomFunctions, loading }) { const { path, project, name } = selectedFile; const newFile = getRelativeFilepath(path); - const { message: fileContent } = await getComponentFile({ + const { error, message } = await getComponentFile({ auth, url, project, file: newFile }); + if (error) { + + alert.error(message); + + return { + content: '', + path, + project, + name + }; + + } + return { - content: fileContent, + content: message, path, project, name @@ -166,31 +184,35 @@ function ManageIndex({ refreshCustomFunctions, loading }) { async function deleteFile(f) { - await dropComponent({ + const { error, message } = await dropComponent({ auth, url, project: f.project, file: getRelativeFilepath(f.path) }); + if (error) { + alert.error(message); + } + await refreshCustomFunctions(); } async function deletePackage({ name: project }) { - await dropComponent({ + const { error, message } = await dropComponent({ auth, url, project }); + if (error) { + alert.error(message); + return; + } - await restartInstance({ - auth, - url - }); - + await restartInstance({ auth, url }); await refreshCustomFunctions(); } @@ -203,19 +225,32 @@ function ManageIndex({ refreshCustomFunctions, loading }) { // if we're deleting a top-level directory, that's a project, // so don't pass a file. otherwise pass project name and file/dir // relative to project name as 'file'. + if (targetDirpath.length > 0) { - await dropComponent({ + + const { error, message } = await dropComponent({ auth, url, project, file: targetDirpath }); + + if (error) { + alert.error(message); + } + } else { - await dropComponent({ + + const { error, message } = await dropComponent({ auth, url, project }); + + if (error) { + alert.error(message); + } + } await refreshCustomFunctions(); @@ -230,7 +265,11 @@ function ManageIndex({ refreshCustomFunctions, loading }) { project: newProjectName }); - // await restartInstance({ auth, url }); + if (error) { + alert.error(message); + } + + await restartInstance({ auth, url }); await refreshCustomFunctions(); } @@ -241,13 +280,17 @@ function ManageIndex({ refreshCustomFunctions, loading }) { const relativeDirpath = getRelativeFilepath(path); const relativeFilepath = relativeDirpath ? `${relativeDirpath}/${newFolderName}` : newFolderName; - await setComponentFile({ + const { error, message } = await setComponentFile({ auth, url, project, file: relativeFilepath }) + if (error) { + alert.error(message); + } + await refreshCustomFunctions(); } @@ -257,13 +300,17 @@ function ManageIndex({ refreshCustomFunctions, loading }) { const deployPromises = deployTargets.map(async (t) => { // TODO: check error here. - await deployComponent({ + const { error, message } = await deployComponent({ auth: t.auth, url: t.instance.url, project: projectName, packageUrl }); + if (error) { + alert.error(message); + } + // TODO: what do we actually want to do about an invalid package? // change to restartService({ auth, url, service: 'http_worker' }); From 4e567390e10d97817abdde7ed7d5f5998eb7585c Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 16:37:11 -0400 Subject: [PATCH 06/11] disable folder closing until there's time to really fix that. markup restructure interfered with proper functioning. --- .idea/.gitignore | 5 + .idea/aws.xml | 17 + .idea/codeStyles/Project.xml | 7 + .idea/codeStyles/codeStyleConfig.xml | 5 + .idea/hdbms.iml | 12 + .idea/inspectionProfiles/Project_Default.xml | 7 + .idea/modules.xml | 8 + .idea/vcs.xml | 6 + src/assets/styles/components/_web-ide.scss | 712 ++++++++++--------- src/components/shared/webide/FileBrowser.js | 22 +- 10 files changed, 446 insertions(+), 355 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/aws.xml create mode 100644 .idea/codeStyles/Project.xml create mode 100644 .idea/codeStyles/codeStyleConfig.xml create mode 100644 .idea/hdbms.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..b58b603fe --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/aws.xml b/.idea/aws.xml new file mode 100644 index 000000000..1850186a1 --- /dev/null +++ b/.idea/aws.xml @@ -0,0 +1,17 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 000000000..db7649e16 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 000000000..79ee123c2 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/hdbms.iml b/.idea/hdbms.iml new file mode 100644 index 000000000..0c8867d7e --- /dev/null +++ b/.idea/hdbms.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 000000000..7c4836fbe --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 000000000..5c6b00a16 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..35eb1ddfb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss index bed6834a9..157d23a28 100644 --- a/src/assets/styles/components/_web-ide.scss +++ b/src/assets/styles/components/_web-ide.scss @@ -4,7 +4,8 @@ color: #ee81ee !important; } } - color: white; + + color: white; .editor.current-file-path { border-bottom: 1px solid transparent; @@ -14,33 +15,37 @@ span { color: white; } - } + } + .name-input { .validation-message { color: $color-danger; } + .name-input-container { input.invalid { border: 1px solid $color-danger !important; outline-color: $color-danger !important; } + .invalid-project-name { color: $color-danger; } } } + .package-install-window { background: rgb(17, 17, 17); } .file.folder-selected { - background: rgba(200,200,200,0.2) !important; + background: rgba(200, 200, 200, 0.2) !important; } .file-menu, .editor-menu { - border-bottom: 1px solid rgb(60,60,60) !important; + border-bottom: 1px solid rgb(60, 60, 60) !important; } .file-browser button > span { @@ -49,7 +54,7 @@ .file-browser .file.file-selected > span { color: #ee81ee !important; - } + } button[disabled]:hover, @@ -64,46 +69,54 @@ .no-projects { color: white; + .docs-link { color: #ee81ee !important; } } - color: white; + + color: white; + .name-input { .validation-message { margin-top: 8px; } + & > input.invalid { border: 1px solid red !important; outline-color: 1px solid red !important; } + .invalid-text { color: red !important; } + .invalid-project-name { color: purple; } } + .editor-window .cancel-button { color: rgb(105, 105, 105);; } .package-install-window { - background: white; + background: white; } .name-input-cancel { - color: rgb(105, 105, 105) !important; + color: rgb(105, 105, 105) !important; } .editor.current-file-path { border-bottom: 1px solid lightgray; } - color: rgb(105,105,105); + + color: rgb(105, 105, 105); .default-window-option { span { - color: rgb(105,105,105); + color: rgb(105, 105, 105); } } @@ -112,7 +125,7 @@ } .file.folder-selected { - background: rgba(200,200,200,0.2) !important; + background: rgba(200, 200, 200, 0.2) !important; } .editor-window { @@ -120,8 +133,9 @@ flex-direction: column; .current-file-path { - background: rgb(26,26,26); + background: rgb(26, 26, 26); } + /* .root { display: grid; @@ -156,9 +170,10 @@ .light { .no-projects { - color: rgb(105,105,105); + color: rgb(105, 105, 105); } - color: rgb(105,105,105); + + color: rgb(105, 105, 105); .package-install-window { background: white; @@ -169,12 +184,12 @@ } .restart-instance-on-save-text { - color: rgb(240,240,240) !important; + color: rgb(240, 240, 240) !important; } .file-menu button[disabled], .editor-menu button[disabled] { - color: rgb(240,240,240) !important; + color: rgb(240, 240, 240) !important; // #5e5e5e; } @@ -183,7 +198,7 @@ } .file.folder-selected { - background: rgba(200,200,200,0.2) !important; + background: rgba(200, 200, 200, 0.2) !important; //background: lightgray !important; } @@ -207,7 +222,7 @@ } .editor-window button { - color: rgb(105,105,105); + color: rgb(105, 105, 105); } .install-package-icon { @@ -219,12 +234,12 @@ } .file-menu { - color: rgb(105,105,105); + color: rgb(105, 105, 105); } .default-window-option { span { - color: rgb(105,105,105); + color: rgb(105, 105, 105); } } } @@ -296,7 +311,7 @@ .file-browser-scroll-container { height: 100%; overflow-y: auto; - } + } // top-level element (left-side) .file-browser-outer-container { @@ -336,87 +351,87 @@ padding-bottom: 0; padding-left: 0; - .rename-file, - .deploy-project { - margin-left: 8px; - } + .rename-file, + .deploy-project { + margin-left: 8px; + } - .rename-file { - color: transparent; - } + .rename-file { + color: transparent; + } - .file { - &.file-selected { - color: #ee81ee; - //background: #191919 !important; - // background: #4a4a4a !important; - //border: 1px solid rgb(120,120,120);; + .file { + &.file-selected { + color: #ee81ee; + //background: #191919 !important; + // background: #4a4a4a !important; + //border: 1px solid rgb(120,120,120);; + } + + &.folder-selected { + //background: #2c2c2c !important; + } } - &.folder-selected { - //background: #2c2c2c !important; + .package.package-selected { + color: #f24242; } - } - .package.package-selected { - color: #f24242; - } + .project-icon { + color: rgb(25, 168, 148); + } - .project-icon { - color: rgb(25, 168, 148); - } + .package-icon { + color: #f24242; + } - .package-icon { - color: #f24242; - } + .file, + .package { - .file, - .package { + background: transparent; + border: 1px solid transparent; + list-style-type: none; + margin: 0; + outline: none !important; // TODO: fix this because it is not accessible; style differently + padding: 3px; + white-space: nowrap; - background: transparent; - border: 1px solid transparent; - list-style-type: none; - margin: 0; - outline: none !important; // TODO: fix this because it is not accessible; style differently - padding: 3px; - white-space: nowrap; + &.selected { + } - &.selected { - } + .package-text, + .filename-text { + padding-left: 5px; + } - .package-text, - .filename-text { - padding-left: 5px; - } + .file-icon.filetype-js { + color: #f7df1e; + } - .file-icon.filetype-js { - color: #f7df1e; - } + .file-icon.filetype-yaml { + color: #c4c4ff; + } - .file-icon.filetype-yaml { - color: #c4c4ff; - } + .file-icon.filetype-unknown { + color: lightgray; + } - .file-icon.filetype-unknown { - color: lightgray; + .folder-icon { + color: rgb(143 141 255); + } } - .folder-icon { - color: rgb(143 141 255); + .folder { + padding-left: 15px; } - } - .folder { - padding-left: 15px; - } - - .folder.folder-contents-closed { - display: none; - } + .folder.folder-contents-closed { + display: none; + } - .folder.folder-contents-open { - display: block; - } + .folder.folder-contents-open { + display: block; + } } } @@ -485,377 +500,380 @@ } .editor-window { - align-items: center; + align-items: center; + display: flex; + flex-direction: column; + + height: 100%; + justify-content: center; + width: 100%; + //overflow-y: auto; + + .card .card-body { + background: transparent !important; + } + + .name-input { display: flex; flex-direction: column; + width: 50%; - height: 100%; - justify-content: center; - width: 100%; - //overflow-y: auto; - - .card .card-body { - background: transparent !important; + .validation-message { + margin-top: 8px; } - .name-input { + .name-input-container { display: flex; - flex-direction: column; - width: 50%; + flex-direction: row; + align-items: center; - .validation-message { - margin-top: 8px; + .invalid-project-name { + margin-left: 15px; } - .name-input-container { - display: flex; - flex-direction: row; - align-items: center; - - .invalid-project-name { - margin-left: 15px; - } - .hidden { - visibility: hidden; - } - } - .name-input-buttons-container { - padding-top: 10px; + .hidden { + visibility: hidden; } } - - .delete-folder-window-title, - .delete-file-window-title, - .delete-package-window-title, - .folder-to-delete { - align-self: flex-start; - font-size: 1.3em; + + .name-input-buttons-container { + padding-top: 10px; + } + } + + .delete-folder-window-title, + .delete-file-window-title, + .delete-package-window-title, + .folder-to-delete { + align-self: flex-start; + font-size: 1.3em; + font-weight: bold; + } + + .folder-to-delete-parent-project { + color: $color-danger; + font-weight: bold; + } + + .delete-package-window-controls { + .package-to-delete { + color: $color-danger; font-weight: bold; } + } - .folder-to-delete-parent-project { - color: $color-danger; - font-weight: bold; + .delete-folder-window-controls { + .folder-to-delete { } - .delete-package-window-controls { - .package-to-delete { - color: $color-danger; - font-weight: bold; - } + .folder-to-delete-parent-project { } + } - .delete-folder-window-controls { - .folder-to-delete { - } + .delete-file-window-container { + display: flex; + flex-direction: column; - .folder-to-delete-parent-project { - } + .delete-file-window-title { + align-self: flex-start; } - .delete-file-window-container { - display: flex; - flex-direction: column; + } - .delete-file-window-title { - align-self: flex-start; - } + .delete-file-window-controls { + .file-to-delete { + color: $color-danger; + font-weight: bold; + } + .file-to-delete-parent-project { + font-weight: bold; + // color: rgb(25, 168, 148); + // color: $color-danger; } + } - .delete-file-window-controls { - .file-to-delete { - color: $color-danger; - font-weight: bold; + .default-window { + .default-window-container { + h4 { + padding-bottom: 80px; } - .file-to-delete-parent-project { - font-weight: bold; - // color: rgb(25, 168, 148); - // color: $color-danger; - } - } + .default-window-option { + line-height: 2.5em; - .default-window { - .default-window-container { - h4 { - padding-bottom: 80px; + span, + button > span { + margin-left: 20px; } - .default-window-option { - line-height: 2.5em; - - span, - button > span { - margin-left: 20px; - } - - span { - // color: white; - } + span { + // color: white; + } - .add-project-button-text, - .install-package-button-text { - // color: white; - } + .add-project-button-text, + .install-package-button-text { + // color: white; } } } + } - .default-window-container, - .name-project-window-container, - .name-project-folder-window-container, - .name-file-window-container, - .delete-file-window-container, - .delete-folder-window-container, - .delete-package-window-container { - align-items: center; - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - width: 100%; - } + .default-window-container, + .name-project-window-container, + .name-project-folder-window-container, + .name-file-window-container, + .delete-file-window-container, + .delete-folder-window-container, + .delete-package-window-container { + align-items: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + width: 100%; + } - .default-window, - .name-project-window, - .name-project-folder-window, - .name-file-window, - .delete-package-window, - .delete-file-window, - .delete-folder-window { - align-items: center; + .default-window, + .name-project-window, + .name-project-folder-window, + .name-file-window, + .delete-package-window, + .delete-file-window, + .delete-folder-window { + align-items: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + width: 100%; + } + + .name-project-window-title, + .name-file-window-title { + text-align: center; + } + + .card-body { + } + + .name-file-window { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; + + .name-file-window-container { display: flex; flex-direction: column; height: 100%; - justify-content: center; width: 100%; } + } + + .package-install-window { + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + padding-left: 25%; + padding-right: 25%; - .name-project-window-title, - .name-file-window-title { + width: 100%; + + .package-install-window-title { + font-size: 1.5em; + font-weight: bold; text-align: center; } - .card-body { + .card { + border: 0 solid transparent !important; } - .name-file-window { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - - .name-file-window-container { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - } - } + .package-install-source-form { + align-items: center; - .package-install-window { display: flex; - flex-direction: column; - height: 100%; + flex-direction: row; + height: 100px; justify-content: center; - padding-left: 25%; - padding-right: 25%; - - width: 100%; - .package-install-window-title { - font-size: 1.5em; - font-weight: bold; - text-align: center; - } - - .card { - border: 0 solid transparent !important; - } - - .package-install-source-form { + .package-install-option-container { align-items: center; - display: flex; - flex-direction: row; - height:100px; + flex-direction: column; justify-content: center; + width: 100px; - .package-install-option-container { - align-items:center; - display: flex; - flex-direction:column; - justify-content:center; - width: 100px; - - .package-install-source-icon { - font-size: 2em; - margin-bottom: 5px; - } + .package-install-source-icon { + font-size: 2em; + margin-bottom: 5px; + } - .package-install-source-option { - height: 25px; - width: 25px; - } + .package-install-source-option { + height: 25px; + width: 25px; } } + } - .package-install-details-form { - .project-name-invalid-text { - - color: $color-danger !important; - margin-bottom: 20px; - display: block; - } + .package-install-details-form { + .project-name-invalid-text { + color: $color-danger !important; + margin-bottom: 20px; + display: block; + } - .package-install-input-container { - display: flex; - flex-direction: column; - margin-bottom: 20px; + .package-install-input-container { + display: flex; + flex-direction: column; - .project-name-input.invalid:focus, - .project-name-input.invalid { - border: 1px solid $color-danger !important; - outline-color: $color-danger !important; - } + margin-bottom: 20px; + .project-name-input.invalid:focus, + .project-name-input.invalid { + border: 1px solid $color-danger !important; + outline-color: $color-danger !important; + } - .search-status-icon-container { - text-align: center; - width: 40px; - i { - color: white; + .search-status-icon-container { + text-align: center; + width: 40px; - &.not-searching { - color: white; //rgba(0,255,0, 0.1); - } + i { + color: white; - &.found, &.loading { - color: green; - } + &.not-searching { + color: white; //rgba(0,255,0, 0.1); + } - &.not-found { - color: rgb(145, 50, 120); - } + &.found, &.loading { + color: green; + } + &.not-found { + color: rgb(145, 50, 120); } - } - .package-install-deploy-targets-dropdown { } + } - .package-install-github-query-container { - .package-install-github-user { - margin-bottom: 20px; - } - - .package-install-github-repo-lookup { - margin-bottom: 20px; + .package-install-deploy-targets-dropdown { + } - .github-package-search-box { - align-items: center; - display: flex; - flex-direction: row; - justify-content: center; - } - } + .package-install-github-query-container { + .package-install-github-user { + margin-bottom: 20px; } - .package-install-npm-lookup { - .package-install-npm-query-container { + .package-install-github-repo-lookup { + margin-bottom: 20px; + + .github-package-search-box { align-items: center; display: flex; flex-direction: row; - margin-bottom: 20px; + justify-content: center; } } + } + .package-install-npm-lookup { + .package-install-npm-query-container { + align-items: center; + display: flex; + flex-direction: row; + margin-bottom: 20px; + } } - } + } } - .editor { - &.current-file-path::before { - } + } + + .editor { + &.current-file-path::before { + } - &.current-file-path { - align-self: flex-start; - color: darkgray; + &.current-file-path { + align-self: flex-start; + color: darkgray; - .current-file-path-icon { - padding: 5px; - } + .current-file-path-icon { + padding: 5px; } - width: 100%; } - .package-install-source-form { - align-items: center; - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - width: 100%; + width: 100%; + } - .package-install-source-icon { - font-size: 2em; + .package-install-source-form { + align-items: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + width: 100%; - &.fab.fa-npm { - color: rgb(145, 50, 120); - font-size: 3em; - } + .package-install-source-icon { + font-size: 2em; - &.fa-github, - &.fa-link { - padding: 5px; - } + &.fab.fa-npm { + color: rgb(145, 50, 120); + font-size: 3em; + } - &.fa-link { - color: lightgray; - } + &.fa-github, + &.fa-link { + padding: 5px; + } - &.fa-github { - color: rgb(28, 182, 149); - } + &.fa-link { + color: lightgray; + } + + &.fa-github { + color: rgb(28, 182, 149); } + } - .package-type { - border: 0 solid transparent !important; + .package-type { + border: 0 solid transparent !important; + display: flex; + flex-direction: row; + margin-bottom: 30px; + + label { display: flex; - flex-direction: row; - margin-bottom: 30px; - - label { - display: flex; - flex-direction: column; - justify-content: space-between; - min-width: 80px; - text-align: center; - } + flex-direction: column; + justify-content: space-between; + min-width: 80px; + text-align: center; + } - input:focus { - outline: none !important; - } + input:focus { + outline: none !important; + } - input { - margin-top: 10px; - } + input { + margin-top: 10px; } } + } - .filename-dialog { - align-items: center; - display: flex; - height: 100%; - justify-content: center; - width: 100%; - } + .filename-dialog { + align-items: center; + display: flex; + height: 100%; + justify-content: center; + width: 100%; + } } } diff --git a/src/components/shared/webide/FileBrowser.js b/src/components/shared/webide/FileBrowser.js index c1104e37d..77fc8dc3c 100644 --- a/src/components/shared/webide/FileBrowser.js +++ b/src/components/shared/webide/FileBrowser.js @@ -33,12 +33,11 @@ function directorySortComparator(a, b) { const isFolder = (entry) => Boolean(entry.entries); -function ProjectIcon({ toggleClosed }) { - return ; +function ProjectIcon() { + return ; } function FolderIcon({ isOpen, toggleClosed }) { - const folderClassName = isOpen ? 'fa-folder-open' : 'fa-folder'; - return ; + return ; } function FiletypeIcon({ extension }) { @@ -165,6 +164,10 @@ function Folder({ directoryEntry, userOnSelect, onFolderSelect, onDeployProject, const entries = [...(directoryEntry.entries || [])].sort(directorySortComparator); const fileExtension = parseFileExtension(directoryEntry.name); + if (directoryEntry.path.endsWith('asdf')) { + console.log('directoryEntry: ', directoryEntry.path); + console.log('open: ', open); + } let Icon; // top-level dir === package // FolderIcon/PackageIcon is func so we can give it open args now, but instantiate it later. @@ -216,10 +219,13 @@ function Folder({ directoryEntry, userOnSelect, onFolderSelect, onDeployProject, { entries.map((entry) => (
  • -
      +
        Date: Tue, 24 Oct 2023 16:37:36 -0400 Subject: [PATCH 07/11] remove idea files. --- .idea/.gitignore | 5 -- .idea/aws.xml | 17 ------- .idea/codeStyles/Project.xml | 7 --- .idea/codeStyles/codeStyleConfig.xml | 5 -- .idea/hdbms.iml | 12 ----- .idea/inspectionProfiles/Project_Default.xml | 7 --- .idea/modules.xml | 8 --- .idea/vcs.xml | 6 --- .idea/workspace.xml | 51 ++++++++++++++++++++ 9 files changed, 51 insertions(+), 67 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/aws.xml delete mode 100644 .idea/codeStyles/Project.xml delete mode 100644 .idea/codeStyles/codeStyleConfig.xml delete mode 100644 .idea/hdbms.iml delete mode 100644 .idea/inspectionProfiles/Project_Default.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/vcs.xml create mode 100644 .idea/workspace.xml diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index b58b603fe..000000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml -# Editor-based HTTP Client requests -/httpRequests/ diff --git a/.idea/aws.xml b/.idea/aws.xml deleted file mode 100644 index 1850186a1..000000000 --- a/.idea/aws.xml +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml deleted file mode 100644 index db7649e16..000000000 --- a/.idea/codeStyles/Project.xml +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml deleted file mode 100644 index 79ee123c2..000000000 --- a/.idea/codeStyles/codeStyleConfig.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/hdbms.iml b/.idea/hdbms.iml deleted file mode 100644 index 0c8867d7e..000000000 --- a/.idea/hdbms.iml +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml deleted file mode 100644 index 7c4836fbe..000000000 --- a/.idea/inspectionProfiles/Project_Default.xml +++ /dev/null @@ -1,7 +0,0 @@ - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 5c6b00a16..000000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1ddfb..000000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 000000000..957ce7305 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + 1698179374556 + + + + + + \ No newline at end of file From 79929bac2b737a51755b069dfccb1bf1ee4fd1e9 Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 16:49:21 -0400 Subject: [PATCH 08/11] fix language in new folder window --- .../shared/webide/windows/NameProjectFolderWindow.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/shared/webide/windows/NameProjectFolderWindow.js b/src/components/shared/webide/windows/NameProjectFolderWindow.js index 005923755..86ac934d3 100644 --- a/src/components/shared/webide/windows/NameProjectFolderWindow.js +++ b/src/components/shared/webide/windows/NameProjectFolderWindow.js @@ -7,9 +7,9 @@ export default function NameProjectFolderWindow({ active, onConfirm, onCancel }) return !active ? null : ( - Name Your Project + Name Your Folder From 0c52d9f0497ab3417bed9360c5b1f9bc0ffd2534 Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 16:49:31 -0400 Subject: [PATCH 09/11] fix hover color on cancel button in purple theme. --- src/assets/styles/components/_web-ide.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss index 157d23a28..8663590fb 100644 --- a/src/assets/styles/components/_web-ide.scss +++ b/src/assets/styles/components/_web-ide.scss @@ -99,15 +99,14 @@ .editor-window .cancel-button { color: rgb(105, 105, 105);; } + .editor-window .cancel-button:hover { + color: white; + } .package-install-window { background: white; } - .name-input-cancel { - color: rgb(105, 105, 105) !important; - } - .editor.current-file-path { border-bottom: 1px solid lightgray; } @@ -246,6 +245,10 @@ .web-ide { + + .cancel-button { + margin-left: 10px; + } // general stuff height: 75vh; overflow: hidden; From 5ef2ab252f1214a332c6d403f8abf1c7b6ed0ab9 Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 17:06:16 -0400 Subject: [PATCH 10/11] change bg for purple editor window. --- src/assets/styles/components/_web-ide.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss index 8663590fb..63b0c69b7 100644 --- a/src/assets/styles/components/_web-ide.scss +++ b/src/assets/styles/components/_web-ide.scss @@ -67,6 +67,19 @@ .purple { + + .default-window-option { + .add-project-icon .add-project-button-text, + .install-package-icon .install-package-button-text { + color: white; + } + } + + .editor-window .default-window .default-window-container { + background: $color-pureblack !important; + color: white; + } + .no-projects { color: white; @@ -510,11 +523,7 @@ height: 100%; justify-content: center; width: 100%; - //overflow-y: auto; - .card .card-body { - background: transparent !important; - } .name-input { display: flex; From 7a5455c4979cda17f9b58835f02c25c7e85c3a29 Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 24 Oct 2023 17:11:41 -0400 Subject: [PATCH 11/11] reapproach default window menu item colors --- src/assets/styles/components/_web-ide.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss index 63b0c69b7..e34fb7805 100644 --- a/src/assets/styles/components/_web-ide.scss +++ b/src/assets/styles/components/_web-ide.scss @@ -68,11 +68,8 @@ .purple { - .default-window-option { - .add-project-icon .add-project-button-text, - .install-package-icon .install-package-button-text { - color: white; - } + .default-window-option span { + color: white !important; } .editor-window .default-window .default-window-container {