Git Product home page Git Product logo

Comments (7)

ewpatton avatar ewpatton commented on May 5, 2024 1
  • There should be a max width (if vertical, height if horizontal), since block stacks can be large.
    • No horizontal scroll (if vertical)

@rachel-fenichel Could we have the horizontal scrollbar control be configurable (in vertical mode)? We've seen this issue in App Inventor (mit-cml/appinventor-sources#2156) and our preference would be to allow the user to scroll to see more of the blocks rather than clip them outright.

from blockly-samples.

rachel-fenichel avatar rachel-fenichel commented on May 5, 2024

@ewpatton FYI

from blockly-samples.

rachel-fenichel avatar rachel-fenichel commented on May 5, 2024

@ewpatton Gotcha, I'll remove that from the description.

from blockly-samples.

RoboErikG avatar RoboErikG commented on May 5, 2024

Another option would be to create a preview image and shrink it to a reasonable size.

from blockly-samples.

ewpatton avatar ewpatton commented on May 5, 2024

@RoboErikG I can see two potential issues with that approach:

  1. Currently, the blocks in the backpack are drawn at the same scale as the other flyouts and the main workspace. This could be potentially surprising to users if blocks starting have different sizes. Is each block stack sized independently, or are they scaled uniformly based on the largest stack?
  2. Font size could become an issue. For example, I often have my windows split screen (like right now). If I suddenly halve the available screen real estate the backpack can use going from full screen to split screen, the font scaled to 50% may become unreadable for people (11 pt -> 6.5 pt). I just tried this on my mac and while it was readable with on Retina display, there are also users on low resolution displays that may be adversely impacted by this.

I imagine that the definition of "reasonable size" could be adjusted to accommodate the font size issue, however the flyout may still end up needing to clip at that point. I think this also doesn't account well for inlined inputs where the horizontal extent of the blocks can be quite large.

from blockly-samples.

RoboErikG avatar RoboErikG commented on May 5, 2024

@ewpatton the preview image is the current approach in Scratch if you want to see how it works in practice.

image

A nice bonus since Blockly moved to a plugin system, both could be implemented as separate plugins. =)

from blockly-samples.

alschmiedt avatar alschmiedt commented on May 5, 2024

Closing because we now have a backpack!

from blockly-samples.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.