Merge pull request #410 from smalruby/feature/load-from-url-222

feat: add Load from URL menu item to File menu

Author: takaokouji

src/components/gui/gui.jsx

@@ -32,6 +32,7 @@ import DragLayer from '../../containers/drag-layer.jsx';
 import ConnectionModal from '../../containers/connection-modal.jsx';
 import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
 import BlockDisplayModal from '../../containers/block-display-modal.jsx';
+import URLLoaderModal from '../url-loader-modal/url-loader-modal.jsx';
 
 import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
 import {resolveStageSize} from '../../lib/screen-utils';
@@ -121,6 +122,7 @@ const GUIComponent = props => {
         onShare,
         onShowPrivacyPolicy,
         onStartSelectingFileUpload,
+        onStartSelectingUrlLoad,
         onTelemetryModalCancel,
         onTelemetryModalOptIn,
         onTelemetryModalOptOut,
@@ -132,6 +134,9 @@ const GUIComponent = props => {
         telemetryModalVisible,
         theme,
         tipsLibraryVisible,
+        urlLoaderModalVisible,
+        closeUrlLoaderModal,
+        onUrlLoaderSubmit,
         vm,
         // Exclude Redux-related props from being passed to DOM
         setSelectedBlocks: _setSelectedBlocks,
@@ -187,6 +192,12 @@ const GUIComponent = props => {
                         onShowPrivacyPolicy={onShowPrivacyPolicy}
                     />
                 ) : null}
+                {urlLoaderModalVisible ? (
+                    <URLLoaderModal
+                        onRequestClose={closeUrlLoaderModal}
+                        onLoadUrl={onUrlLoaderSubmit}
+                    />
+                ) : null}
                 {loading ? (
                     <Loader />
                 ) : null}
@@ -260,6 +271,7 @@ const GUIComponent = props => {
                     onSeeCommunity={onSeeCommunity}
                     onShare={onShare}
                     onStartSelectingFileUpload={onStartSelectingFileUpload}
+                    onStartSelectingUrlLoad={onStartSelectingUrlLoad}
                     onToggleLoginOpen={onToggleLoginOpen}
                 />
                 <Box className={styles.bodyWrapper}>
@@ -466,6 +478,7 @@ GUIComponent.propTypes = {
     onShare: PropTypes.func,
     onShowPrivacyPolicy: PropTypes.func,
     onStartSelectingFileUpload: PropTypes.func,
+    onStartSelectingUrlLoad: PropTypes.func,
     onTabSelect: PropTypes.func,
     onTelemetryModalCancel: PropTypes.func,
     onTelemetryModalOptIn: PropTypes.func,
@@ -480,6 +493,9 @@ GUIComponent.propTypes = {
     telemetryModalVisible: PropTypes.bool,
     theme: PropTypes.string,
     tipsLibraryVisible: PropTypes.bool,
+    urlLoaderModalVisible: PropTypes.bool,
+    closeUrlLoaderModal: PropTypes.func,
+    onUrlLoaderSubmit: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 GUIComponent.defaultProps = {

src/components/menu-bar/menu-bar.jsx

@@ -188,7 +188,8 @@ class MenuBar extends React.Component {
             'handleKeyPress',
             'handleRestoreOption',
             'getSaveToComputerHandler',
-            'restoreOptionMessage'
+            'restoreOptionMessage',
+            'handleClickLoadFromUrl'
         ]);
     }
     componentDidMount () {
@@ -277,6 +278,11 @@ class MenuBar extends React.Component {
             }
         };
     }
+    handleClickLoadFromUrl () {
+        if (this.props.onStartSelectingUrlLoad) {
+            this.props.onStartSelectingUrlLoad();
+        }
+    }
     restoreOptionMessage (deletedItem) {
         switch (deletedItem) {
         case 'Sprite':
@@ -504,6 +510,15 @@ class MenuBar extends React.Component {
                                                 />
                                             </MenuItem>
                                         )}</SB3Downloader>
+                                        <MenuItem
+                                            onClick={this.handleClickLoadFromUrl}
+                                        >
+                                            <FormattedMessage
+                                                defaultMessage="Load from URL"
+                                                description="Menu bar item for loading from URL"
+                                                id="gui.menuBar.loadFromUrl"
+                                            />
+                                        </MenuItem>
                                     </MenuSection>
                                 </MenuBarMenu>
                             </div>
@@ -931,6 +946,7 @@ MenuBar.propTypes = {
     onSetTimeTravelMode: PropTypes.func,
     onShare: PropTypes.func,
     onStartSelectingFileUpload: PropTypes.func,
+    onStartSelectingUrlLoad: PropTypes.func,
     onToggleLoginOpen: PropTypes.func,
     projectTitle: PropTypes.string,
     renderLogin: PropTypes.func,

src/components/url-loader-modal/url-loader-icon.svg

@@ -0,0 +1,119 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.modal-content {
+    width: 500px;
+    height: auto;
+    line-height: 1.75;
+}
+
+.header {
+    background-color: $motion-primary;
+}
+
+.body {
+    background: $ui-white;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.promptSection {
+    text-align: left;
+}
+
+.promptText {
+    font-size: 0.875rem;
+    color: $text-primary;
+    line-height: 1.5;
+}
+
+.inputSection {
+    display: flex;
+    flex-direction: column;
+}
+
+.urlInput {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid $ui-black-transparent;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-family: inherit;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.urlInput:focus {
+    border-color: $motion-primary;
+    box-shadow: 0 0 0 1px $motion-primary;
+}
+
+.urlInput::placeholder {
+    color: $text-primary-transparent;
+}
+
+.urlInput.inputError {
+    border-color: $error-primary;
+    box-shadow: 0 0 0 1px $error-primary;
+}
+
+.errorMessage {
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    color: $error-primary;
+    line-height: 1.4;
+}
+
+.buttonSection {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+}
+
+.cancelButton,
+.openButton {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+    min-width: 80px;
+}
+
+.cancelButton {
+    background: $ui-white;
+    color: $text-primary;
+    border: 1px solid $ui-black-transparent;
+}
+
+.cancelButton:hover {
+    background: $ui-secondary;
+}
+
+.cancelButton:active {
+    background: $ui-black-transparent;
+}
+
+.openButton {
+    background: $motion-primary;
+    color: $ui-white;
+}
+
+.openButton:hover:not(.disabled) {
+    background: $motion-tertiary;
+}
+
+.openButton:active:not(.disabled) {
+    background: $motion-tertiary;
+}
+
+.openButton.disabled {
+    background: $ui-black-transparent;
+    color: $text-primary-transparent;
+    cursor: not-allowed;
+}