-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Editor Tabs" Refresh #1713
Comments
I really like the overlappiness of the tabs! Is the width of the Code tab always dictated by the width of the left column of the Costumes and Sounds tabs? It worked out well in English but I don't trust the word "Code" to be short enough in other languages for that to work out |
@mrjacobbloom Hmm, it could just be the icon and only say the text when you hover? Then it could be a lot longer. |
@mrjacobbloom - Just a coincidence in the mock that things aligned nicely, but not explicitly apart of the design. |
I think there are some general problems with the new interface. The Scratch interface has always been YASWIMI, that is "You Always See What Is More Important". In Scratch 1 and 2 you always see blocks, even when working on costumes and sounds. In Scratch 3 instead you don't see blocks anymore when you move to costumes and sounds. That is wrong. That said, I don't think changing the name of the tab from blocks to code is a good idea. Students will learn to think to code as blocks in Scratch. This is the main difference between coding with a standard programming language and Scratch. So, who is going to help using the word "code" instead of "blocks"? No one. As for the block icon, it didn't mean much to me the one at the bottom left of the list of categories with the + sign. When I saw it the very first time I thought "what it is button for"? And I'm using Scratch since 2008. If you really want to use icons for blocks/costumes/sounds I think the blocks icon should be retougth. |
@sfederici there's a slight inaccuracy there. When working on costumes and sounds in Scratch 2, you actually can't see blocks. I agree that changing the name from Blocks to Code is a mistake, but that might be something for a different issue. |
@Kenny2github Yes, and this is most unfortunate. The best choice was the popup costume editor in Scratch 1, so that you could (correctly) see the paint editor only if you really want a costume to be different from the ones available in the library or imported or "shoot". You can do a lot of things just using the costumes from the library. The important parts of Scratch are blocks and sprites. So I welcome the sprite infos (coordinates, direction, etc) getting back visible all the time. |
One significant advantage of the in-tab paint editor is that it allows rapid iteration and tinkering with costumes that is immediately reflected and fully visible on the stage. In the pop-up editor, going back and forth between editing a costume and seeing how that affects your project requires either a very small pop-up or clunky window manipulation.
The desire to emphasize the most powerful part of Scratch makes sense, but I disagree that the palette needs to be "always seen" for Scratchers to realize their importance and utility! :) I would also not downplay the importance of powerful and usable tools for editing images and sounds. To my understanding, above all, Scratch aims to be about creating.
Traditionally it was titled "Scripts" --- it seems this has been iterated on a lot for 3.0 :) I am not sure I understand your point about "thinking to code as blocks." To my understanding, there is no "main difference" between a 'standard programming language' and Scratch beyond (1) the set of commands built to interact with the tinkerable Scratch runtime and (2) the graphical editor. Isn't Scratch "code"? |
* Updating save and load buttons to not use bind in mapStateToProps * Switch to costumes tab on open backdrop library * Add switching to costumes tab to surprise button also. All backdrop adding buttons should switch tabs. * Additional fixes to libraries * chore(package): update scratch-paint to version 0.2.0-prerelease.20180306212946 * chore(package): update scratch-vm to version 0.1.0-prerelease.1520372503-prerelease.1520372519 * Costume tab detects added costume and switches to the current costume of the edit target * fix lint * chore(package): update chromedriver to version 2.36.0 * Try using headless chrome for integration tests * Code cleanup addressing PR comment. * chore(package): update react-responsive to version 4.0.5 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180307192639 * Update make-toolbox-xml.js * chore(package): update scratch-blocks to version 0.1.0-prerelease.1520519504 * Removing JSZip dependency. VM will unpack the zip (for now, until this functionality gets moved to scratch-storage). * chore(package): update react-style-proptype to version 3.2.1 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180308191417 * Clean up some unused warnings * chore(package): update scratch-vm to version 0.1.0-prerelease.1520606673-prerelease.1520606691 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180309170325 * Fix proptype warnings for asset panel buttons * Fix reload button on error page so that it goes to the correct url (including the pathname). * Allow new sprite to propagate before selecting costume tab * chore(package): update react-modal to version 3.3.2 * Gui should catch vm load errors and render error page if project failed to load. * Trigger loading animation and loading error states from load button. * Load button file input should only accept specific file extensions. Update load button to use new revamped loadProject function from VM. Loading a project via load button should clear the url hash (without triggering a reload or the project-loader-hoc). * Moving shorthand prop ('disabled') first, according to react lint rules. * chore(package): update scratch-blocks to version 0.1.0-prerelease.1521142086 Closes scratchfoundation#1603 * hold scroll position on switching sprites * Code cleanup to remove warning for loadingStateVisible property. * chore(package): update scratch-paint to version 0.2.0-prerelease.20180316191214 Closes scratchfoundation#1628 * Don't prevent default on keyboard events * chore(package): update scratch-vm to version 0.1.0-prerelease.1521481406-prerelease.1521481427 Closes scratchfoundation#1619 * Conditionally use "when stage clicked" vs "when this sprite clicked" * chore(package): update scratch-blocks to version 0.1.0-prerelease.1521560313 * chore(package): update chromedriver to version 2.37.0 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180320181154 * Make the loader message update every 5 seconds * Rename md5 property in default sb3 project to md5ext to reflect it's actual contents. * Add more browsers to the unsupported list Added: - Opera (including Opera Mini) - Silk Not Added: - Vivialdi - appears to be ‘Chrome’ in `platform.name` * Revert "Rename md5 property in default sb3 project to md5ext to reflect it's actual contents." scratch-audio depends on sound property being called md5 even though it refers to md5+file ext, so this property cannot be renamed just yet. This reverts commit dee7195. * Pretty print default project json. * Default project should have correct property names for md5+ext. * Remove .sb from file browser filter since we can't support them yet. Remove .zip from the same. Save project as .sb3 (and untitled-project). * Implement Pauls suggestion and remove promises * Changes to hash should happen through project loader hoc. Changes to the current project id and current project data should happen in a reducer since they are part of global state. That way, the load button can affect the global project data as well. * Make load button work with new changes. * Recorded sounds should have actual md5s. * chore(package): update scratch-blocks to version 0.1.0-prerelease.1521811349 * Fix linting * Fix typo FWIW the AP style guide recommends "emojis", although many dictionaries also recognize "emoji" as the plural because that is the plural in the original Japanese. * chore(package): update scratch-vm to version 0.1.0-prerelease.1521811835-prerelease.1521811852 Closes scratchfoundation#1636 * Revert "Changes to hash should happen through project loader hoc. Changes to the current project id and current project data should happen in a reducer since they are part of global state. That way, the load button can affect the global project data as well." This reverts commit e4fe143. * Updating scratch-vm version in package.json * chore(package): update scratch-render to version 0.1.0-prerelease.1521830325 * chore(package): update react-responsive to version 4.1.0 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180326153721 * Include the update for scratch-vm to stay in sync * Do not autofocus filter in libraries. Resolves scratchfoundation#1644 * Enable video sensing extension * WIP: Most of menubar * chore(package): update scratch-paint to version 0.2.0-prerelease.20180328125648 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180328130249 * chore(package): update scratch-vm to version 0.1.0-prerelease.1522249865-prerelease.1522249883 * Rename button to avoid collision with scratch-paint * Style menu bar component * chore(package): update scratch-blocks to version 0.1.0-prerelease.1522264400 Closes scratchfoundation#1678 * Finish tweaking size/positioning * Lint * Final tweaks with @carljbowman * Update snapshots * Try building with node8 in travis * chore(package): update scratch-paint to version 0.2.0-prerelease.20180329174415 * chore(package): update scratch-render to version 0.1.0-prerelease.1522346711 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180329193314 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180329200323 * chore(package): update scratch-vm to version 0.1.0-prerelease.1522355889-prerelease.1522355906 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180330172108 * Show the costume/sound number similar to Scratch 2. Add a jest unit test for making sure the number is rendered out when provided and not when not provided. * chore(package): update scratch-paint to version 0.2.0-prerelease.20180402150533 * chore(package): update scratch-paint to version 0.2.0-prerelease.20180403143543 * Make the stage thumbnail match the comps * chore(package): update scratch-paint to version 0.2.0-prerelease.20180403230109 * fixed issue 1691 * Update design for editor tabs with icons, changing blocks to code. Resolves scratchfoundation#1713 * Pass sample rate and sample count data to vm for recorded sounds. * Recording names should start at 1, and let the vm create fresh names as needed. * chore(package): update scratch-paint to version 0.2.0-prerelease.20180404190532 Closes scratchfoundation#1720 * Remove whitespace from sound recording name. * chore(package): update scratch-vm to version 0.1.0-prerelease.1522944347-prerelease.1522944370 Closes scratchfoundation#1721 * Fix handleExtensionAdded when no targets present If an extension is loaded at project-load time, there won't be any targets. In that case, `handleExtensionAdded` now skips target-specific steps. This change also adds a filter for JSON block info to support upcoming block separators, which have XML but no JSON. * Remove unnecessary toString call in the project-loader. Let VM/Parser handle it. * chore(package): update scratch-vm to version 0.1.0-prerelease.1522969014-prerelease.1522969034 * Manually fire tab change events onclick to fix touching tabs not working It seems like there is some kind of touch action interference coming from the blocks panel, where if you touch the tabs on a touchscreen chromebook/chrome responsive mode, it does not select the tab if the touch radius is overlapping the blocks panel at all. See gifs in PR for more explanation. Fixes issue scratchfoundation#1283, making chromebooks useable! * Fix linting * chore(package): update scratch-vm to version 0.1.0-prerelease.1523023502-prerelease.1523023526 * Update to the better looking version number * Only add handlers for costumes/sounds, not needed for blocks. * Update default project with new more compact serialization. * Unifiy colors variables - Auditing color CSS and componet CSS to make consistent. - Made a first pass of changes to increase contrast to elements that previously were problematic * Modified some UI details with new color system Updates include modifications to interaction states for the following: tabs, add menus, forms, and stage selector. * chore(package): update scratch-paint to version 0.2.0-prerelease.20180409173029 Closes scratchfoundation#1737 * chore(package): update scratch-blocks to version 0.1.0-prerelease.1523296754 Closes scratchfoundation#1746 * Fixes for load button issues. * Remove camera upload options from sprite and backdrop selectors. * Update VM manually in package json * Add details to sprite tile and update styling * Fix spacing and sizing for tile details * Add shadow filter for selected tiles, making all-white costumes visible. * Fix linting * chore(package): update scratch-paint to version 0.2.0-prerelease.20180410152401 * Fixing issue scratchfoundation#1753 * Fixing issue scratchfoundation#1753 - Style fixing * Update scratch vm and render * Update scratch-vm version. * Add more information to error boundary messages While working on the menubar, I couldn't find the source of an error. This adds more stack info to the error messages emitted by the error boundary. * Remove the redundant error line The error message is included in the first line of the stack * First pass on menus They open and close what more do you want? * Rename menu item class name We have actual menu items now so the things that were menu items should be considered menu bar items * Consolidate coming soon tooltips into a component Mostly to remove the repeated props * chore(package): update scratch-blocks to version 0.1.0-prerelease.1523542868 * Fix cat avatar Sorry @carljbowman * Clean up menu positioning * Add editor drag mode for popping sprites of stage. Also integrate the "ignore draggability, always drag" behavior of editor mode. Right now, editor drag mode is hooked up to the "isFullscreen" flag, since it is the closest thing we have to player mode now. * Make the sprite jump back to original position if dropped off stage. * Hook up save and load buttons These use a technique where the save/load functionality is passed from the component to its children via a function argument. I opted for this rather than a higher order component because it is more readable and requires fewer intermediary components. This could just as easily been done with a higher order component and would be happy to change it to that instead. There is a performance implication since there is a function being defined in render. However the menu bar is not a highly re-rendered component, so I thought it would be ok in this case. * Fix proptype warning * Update some css to allow dragging to work in Edge * Finish .menu-bar -> .menu-bar-item rename * Highlight on hover/active * Add dividers It's a cleaner API IMO but ended up being a messy implementation... * Dropdown drop shadow, dropped a bit from the comp It's shifted downward to not overlap the menubar, since it's hard to make a child z-indexed below its parent. * Fix hover states * Fix menu border radius * Add edit menu * De-cruft * Don't disable the preview modal for everyone whoops * Bump up logo size, and remove transform * Only pointer pointy things * Be more succinct with the open prop * Match edit clickability to file There's a subtle difference in behavior between mouseup and click. Using mouseup allows you to close the menu by clicking its opener item. * Menu items should be bold * Rename SaveButton to ProjectSaver and add docs * Rename LoadButton and add docs * Re-order motion blocks * Update scratch-vm * Add EV3 and microbit to extensions library. Resolves scratchfoundationGH-1545. Resolves scratchfoundationGH-1655 * Adjust language in selectors and libraries. Resolves scratchfoundationGH-1759 * Apply changes to costume library * Update vm to include video motion fixes for other browsers * Update vm to include fixes for video transparency
In reality this is something that really drives me crazy. I very often start editing a costume (or a project) and then decide that this is not the best way to go for. The new "ultra-interactive" behaviour of Scratch (since version 2), that is projects changing even before saving and costumes being modified without actually having to save them, it is for me a very bad feature. I want to have to click an OK confirm button before costumes are changed or to select a SAVE option in the menu before a projects is actually changed.
My deepest desire with Scratch is that it could be used by people that weren't previously explained how the GUI works. So I was very sad when the sprite info area went hidden behind a "info" icon. Now the area is back, but the blocks are gone in some cases. I perfectly remember my very first approach to Scratch after having tried Alice. I was very happy that I could see a lot of things, but it took some time to me to discover what the "category" labels on top of the block list were for. So I like the "single list" of blocks, but it is to me very important that blocks (the most important part of Scratch) are always visible.
I guess this is due to my way of thinking to good and bad coding. Scratch is the good coding that I learned to associate with blocks. Other languages (even block languages such as code.org or Alice or appinventor) are sort of bad coding. They do not guide you well, so that in a very short time you can get frustrated and abandon. |
Overview
We would like to take another pass at the "Editor Tabs" design to increase the visibility and "tabby-ness". Of course the hierarchical prominence is a balancing act among the UI that we will continue to dial in over time
Language
Icon Assets
tab-icons.zip
Prototype
https://invis.io/53GNSXUWQ6F
Sketches
Code Tab
Costumes Tab
Sounds Tab
Assigning @thisandagain for triage
The text was updated successfully, but these errors were encountered: