Home screen uses non-default layoutBounds #640
Comments
|
I switched to the
to this:
Note that most of the contents are smaller. Also the navigation bar is 20% shorter or so, and so are its contents (icons, title, button), and this effect persists even when not on the homescreen. I estimate to adjust all of the layouts after changing this constant could take 2-4 hours and could be done by any PhET developer--does not require expertise in these areas. Would it be important to get everything 100% pixel perfect before/after, or is it OK to be "pretty close"? Over to @ariel-phet to prioritize and assign. Keep in mind that @pixelzoom recommended this work should be done in concert with #639 (which is not included in this estimate). |
|
Everything on the Home screen, and its navbar, will need to be increased in size. |
|
@samreid I seem to recall there was a reason that the homescreen layout bounds are not the same as the standard -- perhaps it was this extra work and we were fine with the bounds being different? Could you do a few minutes of investigation to see if there is an older related issue where we decided to live with these bounds? Perhaps something related to iO? |
If you discover the reason, it would be nice to document it in the code, at the site where the non-standard layoutBounds are specified. |
|
In December 2014 in f094544 we changed the default layout bounds in ScreenView from 768x504 to 1024, 618. In that commit we did not upgrade HomeScreenView to use the new layout bounds, but we altered it to specify 768x504 (instead of the new default). We corrected some problems related to that in #185. In #541 we corrected a scaling issue on the home screen. I don't recall any PhET-iO or other changes that would have kept us using different layout bounds on the home screen, nor can I find any issues about that. Likely we just did not want to invest the time to fine-tune the layout with different constants. The main choices we have for proceeding with #639 are: Even if we fix the layout bounds for the Home Screen, we may still need to complete (a) while there are other sims that use non-default layout bounds. |
|
Marking for dev meeting (partially as a PSA about layout bounds) |
|
From Dev Meeting on 07/16/20: Discussion: @pixelzoom: ScreenIcon will need to be scaled because we are scaling them to a non-standard screen layout size. Resolution: |
pixelzoom
added
deprecated:meeting:developer
and removed
deprecated:meeting:developer
labels
|
Layout of the home screen differs based on the number of screens. In HomeScreenView.js: // Space the icons out more if there are fewer, so they will be spaced nicely.
// Cannot have only 1 screen because for 1-screen sims there is no home screen.
let spacing = 60;
if ( model.simScreens.length === 4 ) {
spacing = 33;
}
if ( model.simScreens.length >= 5 ) {
spacing = 20;
}I will test with a locally built version of scenery-phet, using |
|
This has turned into quite the project. I've had to adjust font sizes, widths, heights, spacing, lineWidth, etc. All of these quantities were set empirically, instead of relative to layoutBounds. In order for things to look the same, the multiplier for adjusting these quantities is 1024/768 = ~1.33. That's - const NAVIGATION_BAR_SIZE = new Dimension2( HomeScreenView.LAYOUT_BOUNDS.width, 40 );
+ const NAVIGATION_BAR_SIZE = new Dimension2( HomeScreenView.LAYOUT_BOUNDS.width, 53.3 );
- const TITLE_LEFT_MARGIN = 10;
+ const TITLE_LEFT_MARGIN = 13.3;
- const TITLE_RIGHT_MARGIN = 25;
+ const TITLE_RIGHT_MARGIN = 33.25;Changes like this are necessary in many files. In addition to files related to the Home screen, the entire navigation bar (and everything in it) is for some reason based on HomeScreen.LAYOUT_BOUNDS. Here's the list of files that require changes: Finally, I discovered a bug in the layout of the navigation bar. The home button + screen buttons are not centered in the negative space between the title and buttons at the right end of the bar, they are a bit too far to the left. I don't see any reason for this, so I intend to correct it. This is all looking good in my working copy, but I have not committed. It may be worth it to have HomeScreenView using the standard layoutBounds. But it's a tradeoff - there will be some ugly constant values (as noted above) and I suspect that this may cause some sim-specific problems. What PhET really needs is joist 2.0 - throw most of this away and start over. @samreid (the primary author for many of the modified files) and I are going to discuss before I commit. |
|
Ugh... problems:
So now I'm leaning towards bailing on this. |
|
I discussed with @samreid, and it doesn't seem like making this change is going to result in significant benefits. After > 4 hours of working on this, there are still big problems. And the joist code is (in general) not in good shape. So I'm going to bail on this - my work is captured in the patch below. I recommend that PhET plan on a major overhaul of joist in the not-too-distant future, a "joist 2.0". Assigning to @ariel-phet to review, and decide whether/when to schedule joist 2.0. Then please close this issue. huge patchIndex: scenery/js/accessibility/FocusHighlightPath.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- scenery/js/accessibility/FocusHighlightPath.js (revision 321c18b043c4e904843822adf8abd99087438fb6)
+++ scenery/js/accessibility/FocusHighlightPath.js (date 1603213852418)
@@ -33,12 +33,12 @@
const OUTER_DARK_GROUP_FOCUS_COLOR = new Color( 'rgba(159,15,80,1.0)' );
// Determined by inspection, base widths of focus highlight, transform of shape/bounds will change highlight line width
-const INNER_LINE_WIDTH_BASE = 2.5;
-const OUTER_LINE_WIDTH_BASE = 4;
+const INNER_LINE_WIDTH_BASE = 3.325;
+const OUTER_LINE_WIDTH_BASE = 5.32;
// determined by inspection, group focus highlights are thinner than default focus highlights
-const GROUP_OUTER_LINE_WIDTH = 2;
-const GROUP_INNER_LINE_WIDTH = 2;
+const GROUP_OUTER_LINE_WIDTH = 2.66;
+const GROUP_INNER_LINE_WIDTH = 2.66;
/**
* @constructor
Index: joist/js/PhetMenu.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/PhetMenu.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/PhetMenu.js (date 1603213421964)
@@ -49,8 +49,8 @@
const menuItemSubmitInputEventsLogString = joistStrings.menuItem.submitInputEventsLog;
// constants
-const FONT_SIZE = 18;
-const MAX_ITEM_WIDTH = 400;
+const FONT_SIZE = 24;
+const MAX_ITEM_WIDTH = 532;
// the supported keys allowed in each itemDescriptor for a MenuItem
const allowedItemDescriptorKeys = [ 'text', 'callback', 'present', 'options' ];
@@ -357,7 +357,7 @@
const itemHeight = _.maxBy( items, item => item.height ).height;
const content = new Node();
let y = 0;
- const ySpacing = 2;
+ const ySpacing = 2.66;
let separator;
_.each( items, item => {
// Don't add a separator for the first item
@@ -373,8 +373,8 @@
} );
// Create a comic-book-style bubble.
- const X_MARGIN = 5;
- const Y_MARGIN = 5;
+ const X_MARGIN = 6.65;
+ const Y_MARGIN = 6.65;
const bubble = createBubble( content.width + X_MARGIN + X_MARGIN, content.height + Y_MARGIN + Y_MARGIN );
this.addChild( bubble );
@@ -498,15 +498,15 @@
const rectangle = new Rectangle( 0, 0, width, height, 8, 8, { fill: 'white', lineWidth: 1, stroke: 'black' } );
const tail = new Shape();
- tail.moveTo( width - 20, height - 2 );
- tail.lineToRelative( 0, 20 );
- tail.lineToRelative( -20, -20 );
+ tail.moveTo( width - 26.6, height - 2.66 );
+ tail.lineToRelative( 0, 26.6 );
+ tail.lineToRelative( -26.6, -26.6 );
tail.close();
const tailOutline = new Shape();
- tailOutline.moveTo( width - 20, height );
- tailOutline.lineToRelative( 0, 20 - 2 );
- tailOutline.lineToRelative( -18, -18 );
+ tailOutline.moveTo( width - 26.6, height );
+ tailOutline.lineToRelative( 0, 26.6 - 2.66 );
+ tailOutline.lineToRelative( -24, -24 );
const bubble = new Node();
bubble.addChild( rectangle );
Index: joist/js/Screen.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/Screen.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/Screen.js (date 1603220545418)
@@ -35,7 +35,7 @@
const simScreenString = joistStrings.a11y.simScreen;
// constants
-const MINIMUM_HOME_SCREEN_ICON_SIZE = new Dimension2( 548, 373 );
+const MINIMUM_HOME_SCREEN_ICON_SIZE = new Dimension2( 730, 497 );
const MINIMUM_NAVBAR_ICON_SIZE = new Dimension2( 147, 100 );
const NAVBAR_ICON_ASPECT_RATIO = MINIMUM_NAVBAR_ICON_SIZE.width / MINIMUM_NAVBAR_ICON_SIZE.height;
const HOME_SCREEN_ICON_ASPECT_RATIO = MINIMUM_HOME_SCREEN_ICON_SIZE.width / MINIMUM_HOME_SCREEN_ICON_SIZE.height;
Index: joist/js/HomeScreenView.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/HomeScreenView.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/HomeScreenView.js (date 1603216632276)
@@ -6,7 +6,6 @@
* @author Sam Reid (PhET Interactive Simulations)
*/
-import Bounds2 from '../../dot/js/Bounds2.js';
import merge from '../../phet-core/js/merge.js';
import StringUtils from '../../phetcommon/js/util/StringUtils.js';
import PhetFont from '../../scenery-phet/js/PhetFont.js';
@@ -25,7 +24,7 @@
const homeScreenDescriptionPatternString = joistStrings.a11y.homeScreenDescriptionPattern;
// constants
-const LAYOUT_BOUNDS = new Bounds2( 0, 0, 768, 504 );
+const LAYOUT_BOUNDS = ScreenView.DEFAULT_LAYOUT_BOUNDS; // see https://github.com/phetsims/joist/issues/640
// iPad doesn't support Century Gothic, so fall back to Futura, see http://wordpress.org/support/topic/font-not-working-on-ipad-browser
const TITLE_FONT_FAMILY = 'Century Gothic, Futura';
@@ -63,12 +62,12 @@
const titleText = new Text( simNameProperty.value, {
font: new PhetFont( {
- size: 52,
+ size: 69.25, // to match size prior to https://github.com/phetsims/joist/issues/640
family: TITLE_FONT_FAMILY
} ),
fill: 'white',
- y: 130,
- maxWidth: this.layoutBounds.width - 10, // To support PhET-iO Clients setting this
+ y: 146,
+ maxWidth: this.layoutBounds.width - 14, // To support PhET-iO Clients setting this
tandem: tandem.createTandem( 'titleText' ),
textPropertyOptions: { phetioReadOnly: true }
} );
@@ -134,12 +133,12 @@
// Space the icons out more if there are fewer, so they will be spaced nicely.
// Cannot have only 1 screen because for 1-screen sims there is no home screen.
- let spacing = 60;
+ let spacing = 80;
if ( model.simScreens.length === 4 ) {
- spacing = 33;
+ spacing = 44;
}
if ( model.simScreens.length >= 5 ) {
- spacing = 20;
+ spacing = 26.8 ;
}
let hBox = null;
@@ -171,13 +170,13 @@
children: icons,
align: 'top',
resize: false,
- maxWidth: this.layoutBounds.width - 118
+ maxWidth: this.layoutBounds.width - 157
} );
iconsParentNode.addChild( hBox );
// position the icons
iconsParentNode.centerX = this.layoutBounds.width / 2;
- iconsParentNode.top = this.layoutBounds.height / 3 + 20;
+ iconsParentNode.top = this.layoutBounds.height / 3 + 18;
};
// When the selected screen changes, update layout of the icons
@@ -196,7 +195,7 @@
const warningNode = options.warningNode;
this.addChild( warningNode );
warningNode.centerX = this.layoutBounds.centerX;
- warningNode.bottom = this.layoutBounds.maxY - 2;
+ warningNode.bottom = this.layoutBounds.maxY - 3;
}
}
Index: joist/js/Frame.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/Frame.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/Frame.js (date 1603143526481)
@@ -23,8 +23,8 @@
// default options
options = merge( {
- xMargin1: 6,
- yMargin1: 6,
+ xMargin1: 8,
+ yMargin1: 8,
cornerRadius: 0 // radius of the rounded corners on the background
}, options );
@@ -44,7 +44,7 @@
// @private
const rectangle = new Rectangle( 0, 0, frameWidth, frameHeight, options.cornerRadius, options.cornerRadius, {
stroke: this.gradient,
- lineWidth: 3,
+ lineWidth: 4,
x: content.x - options.xMargin1,
y: content.y - options.yMargin1
} );
@@ -58,7 +58,7 @@
const frameBounds = Bounds2.rect( rectangle.x, rectangle.y, frameWidth, frameHeight );
this.highlightRectangle = Rectangle.bounds( frameBounds.dilated( 0.75 ), {
stroke: 'transparent',
- lineWidth: 4.5
+ lineWidth: 6
} );
this.addChild( this.highlightRectangle );
}
Index: joist/js/KeyboardHelpButton.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/KeyboardHelpButton.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/KeyboardHelpButton.js (date 1603212762456)
@@ -21,8 +21,8 @@
// constants
const hotKeysAndHelpString = joistStrings.a11y.keyboardHelp.hotKeysAndHelp;
-const HELP_BUTTON_HEIGHT = 67;
-const HELP_BUTTON_SCALE = 0.30; // scale applied to the icon
+const HELP_BUTTON_HEIGHT = 89.11;
+const HELP_BUTTON_SCALE = 0.3; // scale applied to the icon
class KeyboardHelpButton extends JoistButton {
@@ -35,13 +35,13 @@
constructor( screenProperty, backgroundColorProperty, tandem, options ) {
options = merge( {
- highlightExtensionWidth: 5,
- highlightExtensionHeight: 10,
+ highlightExtensionWidth: 6.65,
+ highlightExtensionHeight: 13.3,
// The keyboard button is not vertically symmetric, due to the cable on the top.
// This offset adjusts the body of the keyboard to be in the center, so it
// will align with the speaker button and the PhET logo
- highlightCenterOffsetY: 2,
+ highlightCenterOffsetY: 2.66,
// phet-io
visiblePropertyOptions: { phetioFeatured: true },
Index: sun/js/MenuItem.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- sun/js/MenuItem.js (revision a52e5196b2c8a3c02064b005f6142e9b294af415)
+++ sun/js/MenuItem.js (date 1603213209999)
@@ -22,19 +22,19 @@
// the check mark used for toggle-able menu items
const CHECK_MARK_NODE = new FontAwesomeNode( 'check', {
fill: 'rgba(0,0,0,0.7)',
- scale: 0.4
+ scale: 0.532
} );
// constants
-const FONT_SIZE = 18;
+const FONT_SIZE = 24;
const HIGHLIGHT_COLOR = '#a6d2f4';
-const MAX_ITEM_WIDTH = 400;
-const CHECK_PADDING = 2; // padding between the check and text
+const MAX_ITEM_WIDTH = 532;
+const CHECK_PADDING = 2.66; // padding between the check and text
const CHECK_OFFSET = CHECK_MARK_NODE.width + CHECK_PADDING; // offset that includes the check mark's width and padding
-const LEFT_X_MARGIN = 2;
-const RIGHT_X_MARGIN = 5;
-const Y_MARGIN = 3;
-const CORNER_RADIUS = 5;
+const LEFT_X_MARGIN = 2.66;
+const RIGHT_X_MARGIN = 6.65;
+const Y_MARGIN = 4;
+const CORNER_RADIUS = 6.65;
class MenuItem extends Node {
/**
Index: joist/js/HomeButton.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/HomeButton.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/HomeButton.js (date 1603213808687)
@@ -33,7 +33,7 @@
constructor( navBarHeight, navigationBarFillProperty, pdomDisplayNameProperty, tandem, options ) {
options = merge( {
- highlightExtensionWidth: 4,
+ highlightExtensionWidth: 5.32,
listener: null,
// pdom,
@@ -50,7 +50,7 @@
homeIcon.setScaleMagnitude( 0.48 * navBarHeight / homeIcon.height );
// transparent background, size determined empirically so that highlight is the same size as highlight on screen buttons
- const background = new Rectangle( 0, 0, homeIcon.width + 12, navBarHeight );
+ const background = new Rectangle( 0, 0, homeIcon.width + 16, navBarHeight );
homeIcon.center = background.center;
const content = new Node( { children: [ background, homeIcon ] } );
Index: joist/js/KebabMenuIcon.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/KebabMenuIcon.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/KebabMenuIcon.js (date 1603212826726)
@@ -12,7 +12,7 @@
import joist from './joist.js';
// constants
-const CIRCLE_RADIUS = 2.5;
+const CIRCLE_RADIUS = 3.325;
class KebabMenuIcon extends Path {
Index: joist/js/A11yButtonsHBox.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/A11yButtonsHBox.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/A11yButtonsHBox.js (date 1603214457776)
@@ -26,7 +26,7 @@
options = merge( {
align: 'center',
- spacing: 6
+ spacing: 9
}, options );
// list of optional buttons added for a11y
@@ -44,6 +44,7 @@
if ( sim.supportsSound ) {
a11yButtons.push( soundOnOffButton );
}
+ console.log( `soundOnOffButton ${soundOnOffButton.width} x ${soundOnOffButton.height}` );
}
// If the sim has accessibility support in its API, then create the button. This is support consistent API for PhET-iO
@@ -55,6 +56,7 @@
backgroundColorProperty,
tandem.createTandem( 'keyboardHelpButton' )
);
+ console.log( `keyboardHelpButton ${keyboardHelpButton.width} x ${keyboardHelpButton.height}` );
// only show the keyboard help button if the sim supports interactive descriptions, there is keyboard help content,
// and we are not in mobile safari
Index: joist/js/PhetButton.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/PhetButton.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/PhetButton.js (date 1603214101893)
@@ -26,7 +26,7 @@
// displays. The logo will be scaled up to 108px high so the rest of the layout code will work smoothly
// Scale to the same height as the PhET logo, so that layout code works correctly.
// height of the PhET logo, brand/phet/images/logo.png or brand/adapted-from-phet/images/logo.png
-const PHET_LOGO_HEIGHT = 108;
+const PHET_LOGO_HEIGHT = 143.64;
const PHET_LOGO_SCALE = 0.28; // scale applied to the PhET logo
class PhetButton extends JoistButton {
@@ -73,8 +73,8 @@
// The menu icon, to the right of the logo
const menuIcon = new KebabMenuIcon( {
- left: logoImage.width + 8,
- bottom: logoImage.bottom - 0.5,
+ left: logoImage.width + 10.64,
+ bottom: logoImage.bottom - 0.665,
pickable: false
} );
@@ -82,9 +82,9 @@
const icon = new Node( { children: [ logoImage, menuIcon ] } );
super( icon, backgroundFillProperty, tandem, {
- highlightExtensionWidth: 6,
- highlightExtensionHeight: 5,
- highlightCenterOffsetY: 4,
+ highlightExtensionWidth: 8,
+ highlightExtensionHeight: 6.65,
+ highlightCenterOffsetY: 5.32,
listener: () => {
phetMenu.show();
pushButtonSoundPlayer.play();
Index: joist/js/NavigationBarSoundToggleButton.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/NavigationBarSoundToggleButton.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/NavigationBarSoundToggleButton.js (date 1603215556758)
@@ -21,7 +21,7 @@
import joistStrings from './joistStrings.js';
// constants for node background
-const NODE_HEIGHT = 22.0;
+const NODE_HEIGHT = 29.26;
const NODE_WIDTH = NODE_HEIGHT * 1.13;
// constants for drawing speaker
@@ -30,7 +30,7 @@
const SPEAKER_BACK_WIDTH = SPEAKER_WIDTH * 0.46;
const SPEAKER_BACK_HEIGHT = SPEAKER_HEIGHT * 0.35;
const SPEAKER_BACK_Y_SPACE = ( SPEAKER_HEIGHT - SPEAKER_BACK_HEIGHT ) / 2.0; // space between top of speaker back and top of cone
-const CORNER_RADIUS = 1.0;
+const CORNER_RADIUS = 1.33;
// constant for drawing sound off X
const X_WIDTH = SPEAKER_HEIGHT * 0.52;
@@ -56,8 +56,8 @@
options = merge( {
// JoistButton options
- highlightExtensionWidth: 5,
- highlightExtensionHeight: 10,
+ highlightExtensionWidth: 6.65,
+ highlightExtensionHeight: 13.3,
highlightCenterOffsetY: 0,
visiblePropertyOptions: { phetioFeatured: true },
@@ -91,7 +91,7 @@
.close(),
{
stroke: 'black',
- lineWidth: 1.5,
+ lineWidth: 2,
lineJoin: 'round',
centerY: soundOffNode.centerY,
left: 0
@@ -106,7 +106,7 @@
new Shape().moveTo( 0, 0 ).lineTo( X_WIDTH, X_WIDTH ).moveTo( 0, X_WIDTH ).lineTo( X_WIDTH, 0 ),
{
stroke: 'black',
- lineWidth: 1.7,
+ lineWidth: 2.26,
lineCap: 'round',
right: soundOffNode.width,
centerY: soundOffNode.centerY
@@ -124,7 +124,7 @@
.arc( 0, 0, MIN_CURVE_RADIUS, CURVE_ANGLE, NEG_CURVE_ANGLE, true ),
{
stroke: 'black',
- lineWidth: 1.7,
+ lineWidth: 2.26,
lineCap: 'round',
right: soundOnNode.width,
centerY: soundOnNode.centerY
Index: joist/js/NavigationBarScreenButton.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/NavigationBarScreenButton.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/NavigationBarScreenButton.js (date 1603212365471)
@@ -26,7 +26,7 @@
import joist from './joist.js';
// constants
-const HIGHLIGHT_SPACING = 4;
+const HIGHLIGHT_SPACING = 5.3;
const getHighlightWidth = overlay => overlay.width + ( 2 * HIGHLIGHT_SPACING );
class NavigationBarScreenButton extends Node {
@@ -80,7 +80,7 @@
} );
const text = new Text( screen.nameProperty.value, {
- font: new PhetFont( 10 ),
+ font: new PhetFont( 13.3 ),
tandem: options.tandem.createTandem( 'text' ),
textPropertyOptions: { phetioReadOnly: true } // text is updated via screen.nameProperty
} );
@@ -166,7 +166,7 @@
const updateLayout = () => {
// adjust the vertical space between icon and text, see https://github.com/phetsims/joist/issues/143
- iconAndText.spacing = Math.max( 0, 12 - text.height );
+ iconAndText.spacing = Math.max( 0, 16 - text.height );
// adjust the overlay
overlay.setRect( 0, 0, iconAndText.width, overlay.height );
Index: joist/js/NavigationBar.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/NavigationBar.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/NavigationBar.js (date 1603214627668)
@@ -50,16 +50,16 @@
// {ScreenButtons centered} (if visible)
// a11yButtonsHBox (if present){PHET_BUTTON_LEFT_MARGIN}PhetButton{PHET_BUTTON_RIGHT_MARGIN}
// ]
-const NAVIGATION_BAR_SIZE = new Dimension2( HomeScreenView.LAYOUT_BOUNDS.width, 40 );
-const TITLE_LEFT_MARGIN = 10;
-const TITLE_RIGHT_MARGIN = 25;
-const PHET_BUTTON_LEFT_MARGIN = 6;
-const PHET_BUTTON_RIGHT_MARGIN = 10;
+const NAVIGATION_BAR_SIZE = new Dimension2( HomeScreenView.LAYOUT_BOUNDS.width, 53.3 );
+const TITLE_LEFT_MARGIN = 13.3;
+const TITLE_RIGHT_MARGIN = 33.25;
+const PHET_BUTTON_LEFT_MARGIN = 9;
+const PHET_BUTTON_RIGHT_MARGIN = 13.5;
const PHET_BUTTON_BOTTOM_MARGIN = 0;
-const HOME_BUTTON_LEFT_MARGIN = 5;
+const HOME_BUTTON_LEFT_MARGIN = 6.65;
const HOME_BUTTON_RIGHT_MARGIN = HOME_BUTTON_LEFT_MARGIN;
const SCREEN_BUTTON_SPACING = 0;
-const MINIMUM_SCREEN_BUTTON_WIDTH = 60; // Make sure each button is at least a minimum width so they don't get too close together, see #279
+const MINIMUM_SCREEN_BUTTON_WIDTH = 80; // Make sure each button is at least a minimum width so they don't get too close together, see #279
class NavigationBar extends Node {
@@ -104,7 +104,7 @@
let title = sim.simNameProperty.value;
this.titleText = new Text( title, {
- font: new PhetFont( 16 ),
+ font: new PhetFont( 21.28 ),
fill: sim.lookAndFeel.navigationBarTextFillProperty,
tandem: tandem.createTandem( 'titleText' ),
phetioDocumentation: 'Displays the title of the simulation in the navigation bar (bottom left)',
@@ -232,7 +232,7 @@
const availableTotal = 2 * Math.min( availableLeft, availableRight );
// width per screen button
- const screenButtonWidth = ( availableTotal - ( this.simScreens.length - 1 ) * SCREEN_BUTTON_SPACING ) / this.simScreens.length;
+ const screenButtonWidth = ( availableTotal - ( this.simScreens.length - 1.33 ) * SCREEN_BUTTON_SPACING ) / this.simScreens.length;
// Create the screen buttons
const screenButtons = this.simScreens.map( screen => {
@@ -258,7 +258,7 @@
for ( let i = 0; i < screenButtons.length; i++ ) {
// Equally space the centers of the buttons around the origin of their parent (screenButtonsContainer)
- screenButtons[ i ].centerX = spaceBetweenButtons * ( i - ( screenButtons.length - 1 ) / 2 );
+ screenButtons[ i ].centerX = spaceBetweenButtons * ( i - ( screenButtons.length - 1.33 ) / 2 );
}
// @private - Put all screen buttons under a parent, to simplify layout
Index: joist/js/HomeScreenButton.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- joist/js/HomeScreenButton.js (revision 9e8c097bf018d198dc8ed0fce7c0670ac2d68e53)
+++ joist/js/HomeScreenButton.js (date 1603143799004)
@@ -28,9 +28,8 @@
import Frame from './Frame.js';
import joist from './joist.js';
-
// constants
-const LARGE_ICON_HEIGHT = 140;
+const LARGE_ICON_HEIGHT = 186.5;
class HomeScreenButton extends VBox {
@@ -87,7 +86,7 @@
// create a frame for each size
const smallFrame = new Rectangle( 0, 0, smallIcon.width, smallIcon.height, {
stroke: options.showUnselectedHomeScreenIconFrame ? PhetColorScheme.SCREEN_ICON_FRAME : null,
- lineWidth: 0.7
+ lineWidth: 1
} );
const largeFrame = new Frame( largeIcon );
@@ -116,12 +115,12 @@
const settings = {
small: {
node: [ smallNode ],
- font: new PhetFont( 18 ),
- spacing: 3
+ font: new PhetFont( 24 ),
+ spacing: 3.5
},
large: {
node: [ largeNode ],
- font: new PhetFont( 42 ),
+ font: new PhetFont( 56 ),
spacing: 0
}
};
|
|
Assigning over to @jessegreenberg as he will likely need to consider these questions when thinking about the enhancements as part of the Global Controls work. Personally I think considering a "joist 2.0" would make quite a bit of sense as part of supporting the Global Controls work, but will let @jessegreenberg make some recommendations with the regards to that thought. |
|
@jessegreenberg, this issue has been around for a while. Will you please make sure that unreviewed changes aren't hanging around, and remove that label if there is just future work left for this issue. |
|
Nothing was committed in this issue except for a note of documentation pointing back here. This work didn't come up while working on Preferences. Leaving open but removing assignment and review labels. |
HomeScreenView is using non-default layoutBounds:
This results in the AboutDialog being a different size on the Home screen. HomeScreenView should use the default ScreenView layoutBounds, which PhET standardized on in #542.
Assigning to @samreid since he's listed as
@author. This should be addressed with #639. If you don't have time for this, reassign to @ariel-phet to prioritize and assign.The text was updated successfully, but these errors were encountered: