Skip to content
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

Closed
carljbowman opened this issue Apr 3, 2018 · 9 comments · Fixed by #1717
Closed

"Editor Tabs" Refresh #1713

carljbowman opened this issue Apr 3, 2018 · 9 comments · Fixed by #1717

Comments

@carljbowman
Copy link
Contributor

carljbowman commented Apr 3, 2018

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

  • Rename "Blocks" tab to "Code" and add blocks icon
  • Keep "Costumes" and add paint brush icon
  • Keep "Backdrops" and add paint brush icon
  • Keep "Sounds" and add paint brush icon

Icon Assets
tab-icons.zip

Prototype
https://invis.io/53GNSXUWQ6F

Sketches

Code Tab

code tab

Costumes Tab

costumes tab

Sounds Tab

sounds tab

Assigning @thisandagain for triage

@mrjacobbloom
Copy link

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

@hedgehog125
Copy link

@mrjacobbloom Hmm, it could just be the icon and only say the text when you hover? Then it could be a lot longer.

@carljbowman
Copy link
Contributor Author

@mrjacobbloom - Just a coincidence in the mock that things aligned nicely, but not explicitly apart of the design.

@kyleplo
Copy link
Contributor

kyleplo commented Apr 4, 2018

In the costumes tab, shouldn't it be more like this:
costume-tab

@sfederici
Copy link

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.

@Kenny2github
Copy link
Contributor

@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.

@sfederici
Copy link

@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.

@tmickel
Copy link
Contributor

tmickel commented Apr 5, 2018

@sfederici

The best choice was the popup costume editor

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.

You Always See What Is More Important

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.

changing the name of the tab from blocks to code is a good idea

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"?

kyleplo added a commit to kyleplo/scratch-gui that referenced this issue Apr 17, 2018
* 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
@sfederici
Copy link

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 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.

I disagree that the palette needs to be "always seen" for Scratchers to realize their importance and utility!

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.

Isn't Scratch "code"?

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants