diff --git a/blocks.js b/blocks.js index 3e32b16e..4f1f0931 100644 --- a/blocks.js +++ b/blocks.js @@ -153,7 +153,7 @@ DialogBoxMorph, BlockInputFragmentMorph, PrototypeHatBlockMorph*/ // Global stuff //////////////////////////////////////////////////////// -modules.blocks = '2013-May-14'; +modules.blocks = '2013-May-16'; var SyntaxElementMorph; var BlockMorph; @@ -2201,10 +2201,11 @@ BlockMorph.prototype.toggleHighlight = function () { BlockMorph.prototype.highlight = function (color, blur, border) { var highlight = new BlockHighlightMorph(), fb = this.fullBounds(), - edge = useBlurredShadows ? blur : border; + edge = useBlurredShadows && !MorphicPreferences.isFlat ? + blur : border; highlight.setExtent(fb.extent().add(edge * 2)); highlight.color = color; - highlight.image = useBlurredShadows ? + highlight.image = useBlurredShadows && !MorphicPreferences.isFlat ? this.highlightImageBlurred(color, blur) : this.highlightImage(color, border); highlight.setPosition(fb.origin.subtract(new Point(edge, edge))); @@ -2434,7 +2435,8 @@ BlockMorph.prototype.thumbnail = function (scale, clipWidth, noShadow) { if (!noShadow) {block.addShadow(); } ext = block.fullBounds().extent(); if (!noShadow) { - ext = ext.subtract(this.shadowBlur * (useBlurredShadows ? 1 : 2)); + ext = ext.subtract(this.shadowBlur * + (useBlurredShadows && !MorphicPreferences.isFlat ? 1 : 2)); } trgt = newCanvas(new Point( Math.min(ext.x * scale, clipWidth || ext.x), diff --git a/byob.js b/byob.js index 1dc1f2b6..7fbe3e18 100644 --- a/byob.js +++ b/byob.js @@ -101,11 +101,11 @@ Context, StringMorph, nop, newCanvas, radians, BoxMorph, ArrowMorph, PushButtonMorph, contains, InputSlotMorph, ShadowMorph, ToggleButtonMorph, IDE_Morph, MenuMorph, copy, ToggleElementMorph, Morph, fontHeight, StageMorph, SyntaxElementMorph, SnapSerializer, -CommentMorph, localize, CSlotMorph, SpeechBubbleMorph*/ +CommentMorph, localize, CSlotMorph, SpeechBubbleMorph, MorphicPreferences*/ // Global stuff //////////////////////////////////////////////////////// -modules.byob = '2013-April-24'; +modules.byob = '2013-May-16'; // Declarations @@ -1156,7 +1156,7 @@ BlockDialogMorph.prototype.addCategoryButton = function (category) { button.padding = 0; button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; - button.labelColor = new Color(255, 255, 255); + button.labelColor = IDE_Morph.prototype.buttonLabelColor; button.contrast = this.buttonContrast; button.fixLayout(); button.refresh(); @@ -1190,6 +1190,11 @@ BlockDialogMorph.prototype.fixCategoriesLayout = function () { )); }); + if (MorphicPreferences.isFlat) { + this.categories.corner = 0; + this.categories.border = 0; + this.categories.edge = 0; + } this.categories.setExtent(new Point( 3 * xPadding + 2 * buttonWidth, (rows + 1) * yPadding + rows * buttonHeight + 2 * border @@ -1487,8 +1492,8 @@ BlockEditorMorph.prototype.init = function (definition, target) { // create scripting area scripts = new ScriptsMorph(target); scripts.isDraggable = false; - scripts.color = new Color(71, 71, 71); - scripts.texture = 'scriptsPaneTexture.gif'; + scripts.color = IDE_Morph.prototype.groupColor; + scripts.texture = IDE_Morph.prototype.scriptsPaneTexture; scripts.cleanUpMargin = 10; proto = new PrototypeHatBlockMorph(this.definition); @@ -1666,7 +1671,7 @@ BlockEditorMorph.prototype.updateDefinition = function () { BlockEditorMorph.prototype.context = function (prototypeHat) { // answer my script reified for deferred execution // if no prototypeHat is given, my body is scanned - var head, topBlock, proto, stackFrame; + var head, topBlock, stackFrame; head = prototypeHat || detect( this.body.contents.children, @@ -1676,7 +1681,6 @@ BlockEditorMorph.prototype.context = function (prototypeHat) { if (topBlock === null) { return null; } - proto = head.parts()[0]; stackFrame = Process.prototype.reify.call( null, topBlock, diff --git a/gui.js b/gui.js index 8e6c4124..e9d02515 100644 --- a/gui.js +++ b/gui.js @@ -68,7 +68,7 @@ sb, CommentMorph, CommandBlockMorph*/ // Global stuff //////////////////////////////////////////////////////// -modules.gui = '2013-May-14'; +modules.gui = '2013-May-16'; // Declarations @@ -91,14 +91,87 @@ IDE_Morph.prototype = new Morph(); IDE_Morph.prototype.constructor = IDE_Morph; IDE_Morph.uber = Morph.prototype; -// IDE_Morph preferences settings +// IDE_Morph preferences settings and skins -IDE_Morph.prototype.buttonContrast = 30; -IDE_Morph.prototype.backgroundColor = new Color(40, 40, 40); -IDE_Morph.prototype.frameColor = SpriteMorph.prototype.paletteColor; -IDE_Morph.prototype.groupColor - = SpriteMorph.prototype.paletteColor.lighter(8); -IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor; +IDE_Morph.prototype.setDefaultDesign = function () { + MorphicPreferences.isFlat = false; + SpriteMorph.prototype.paletteColor = new Color(55, 55, 55); + SpriteMorph.prototype.paletteTextColor = new Color(230, 230, 230); + StageMorph.prototype.paletteTextColor + = SpriteMorph.prototype.paletteTextColor; + StageMorph.prototype.paletteColor = SpriteMorph.prototype.paletteColor; + SpriteMorph.prototype.sliderColor + = SpriteMorph.prototype.paletteColor.lighter(30); + + IDE_Morph.prototype.buttonContrast = 30; + IDE_Morph.prototype.backgroundColor = new Color(40, 40, 40); + IDE_Morph.prototype.frameColor = SpriteMorph.prototype.paletteColor; + + IDE_Morph.prototype.groupColor + = SpriteMorph.prototype.paletteColor.lighter(8); + IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor; + IDE_Morph.prototype.buttonLabelColor = new Color(255, 255, 255); + IDE_Morph.prototype.tabColors = [ + IDE_Morph.prototype.groupColor.darker(40), + IDE_Morph.prototype.groupColor.darker(60), + IDE_Morph.prototype.groupColor + ]; + IDE_Morph.prototype.rotationStyleColors = IDE_Morph.prototype.tabColors; + IDE_Morph.prototype.appModeColor = new Color(); + IDE_Morph.prototype.scriptsPaneTexture = 'scriptsPaneTexture.gif'; + IDE_Morph.prototype.padding = 5; + + SpriteIconMorph.prototype.labelColor + = IDE_Morph.prototype.buttonLabelColor; + CostumeIconMorph.prototype.labelColor + = IDE_Morph.prototype.buttonLabelColor; + SoundIconMorph.prototype.labelColor + = IDE_Morph.prototype.buttonLabelColor; + TurtleIconMorph.prototype.labelColor + = IDE_Morph.prototype.buttonLabelColor; +}; + +IDE_Morph.prototype.setFlatDesign = function () { + MorphicPreferences.isFlat = true; + SpriteMorph.prototype.paletteColor = new Color(255, 255, 255); + SpriteMorph.prototype.paletteTextColor = new Color(70, 70, 70); + StageMorph.prototype.paletteTextColor + = SpriteMorph.prototype.paletteTextColor; + StageMorph.prototype.paletteColor = SpriteMorph.prototype.paletteColor; + SpriteMorph.prototype.sliderColor = SpriteMorph.prototype.paletteColor; + + IDE_Morph.prototype.buttonContrast = 30; + IDE_Morph.prototype.backgroundColor = new Color(200, 200, 200); + IDE_Morph.prototype.frameColor = new Color(255, 255, 255); + + IDE_Morph.prototype.groupColor = new Color(230, 230, 230); + IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor; + IDE_Morph.prototype.buttonLabelColor = new Color(70, 70, 70); + IDE_Morph.prototype.tabColors = [ + IDE_Morph.prototype.groupColor.lighter(60), + IDE_Morph.prototype.groupColor.darker(10), + IDE_Morph.prototype.groupColor + ]; + IDE_Morph.prototype.rotationStyleColors = [ + IDE_Morph.prototype.groupColor, + IDE_Morph.prototype.groupColor.darker(10), + IDE_Morph.prototype.groupColor.darker(30) + ]; + IDE_Morph.prototype.appModeColor = IDE_Morph.prototype.frameColor; + IDE_Morph.prototype.scriptsPaneTexture = null; + IDE_Morph.prototype.padding = 1; + + SpriteIconMorph.prototype.labelColor + = IDE_Morph.prototype.buttonLabelColor; + CostumeIconMorph.prototype.labelColor + = IDE_Morph.prototype.buttonLabelColor; + SoundIconMorph.prototype.labelColor + = IDE_Morph.prototype.buttonLabelColor; + TurtleIconMorph.prototype.labelColor + = IDE_Morph.prototype.buttonLabelColor; +}; + +IDE_Morph.prototype.setDefaultDesign(); // IDE_Morph instance creation: @@ -312,8 +385,7 @@ IDE_Morph.prototype.createLogo = function () { } this.logo = new Morph(); - this.logo.texture = 'snap_logo_sm.gif'; - + this.logo.texture = 'snap_logo_sm.png'; this.logo.drawNew = function () { this.image = newCanvas(this.extent()); var context = this.image.getContext('2d'), @@ -325,7 +397,8 @@ IDE_Morph.prototype.createLogo = function () { ); gradient.addColorStop(0, 'black'); gradient.addColorStop(0.5, myself.frameColor.toString()); - context.fillStyle = gradient; + context.fillStyle = MorphicPreferences.isFlat ? + myself.frameColor.toString() : gradient; context.fillRect(0, 0, this.width(), this.height()); if (this.texture) { this.drawTexture(this.texture); @@ -405,7 +478,7 @@ IDE_Morph.prototype.createControlBar = function () { button.padding = 0; button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; - button.labelColor = new Color(255, 255, 255); + button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; button.drawNew(); // button.hint = 'stage size\nsmall & normal'; @@ -437,7 +510,7 @@ IDE_Morph.prototype.createControlBar = function () { button.padding = 0; button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; - button.labelColor = new Color(255, 255, 255); + button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; button.drawNew(); // button.hint = 'app & edit\nmodes'; @@ -539,7 +612,7 @@ IDE_Morph.prototype.createControlBar = function () { button.padding = 0; button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; - button.labelColor = new Color(255, 255, 255); + button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; button.drawNew(); // button.hint = 'open, save, & annotate project'; @@ -563,7 +636,7 @@ IDE_Morph.prototype.createControlBar = function () { button.padding = 0; button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; - button.labelColor = new Color(255, 255, 255); + button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; button.drawNew(); // button.hint = 'edit settings'; @@ -586,7 +659,7 @@ IDE_Morph.prototype.createControlBar = function () { button.padding = 0; button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; - button.labelColor = new Color(255, 255, 255); + button.labelColor = this.buttonLabelColor; button.contrast = this.buttonContrast; button.drawNew(); // button.hint = 'cloud operations'; @@ -648,10 +721,10 @@ IDE_Morph.prototype.createControlBar = function () { true, false, false, - new Point(2, 1), + MorphicPreferences.isFlat ? null : new Point(2, 1), myself.frameColor.darker(myself.buttonContrast) ); - this.label.color = new Color(255, 255, 255); + this.label.color = myself.buttonLabelColor; this.label.drawNew(); this.add(this.label); this.label.setCenter(this.center()); @@ -705,7 +778,7 @@ IDE_Morph.prototype.createCategories = function () { button.padding = 0; button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; - button.labelColor = new Color(255, 255, 255); + button.labelColor = myself.buttonLabelColor; button.fixLayout(); button.refresh(); myself.categories.add(button); @@ -816,11 +889,7 @@ IDE_Morph.prototype.createSpriteBar = function () { padlock, thumbnail, tabCorner = 15, - tabColors = [ - this.groupColor.darker(40), - this.groupColor.darker(60), - this.groupColor - ], + tabColors = this.tabColors, tabBar = new AlignmentMorph('row', -tabCorner * 2), tab, myself = this; @@ -834,7 +903,7 @@ IDE_Morph.prototype.createSpriteBar = function () { this.add(this.spriteBar); function addRotationStyleButton(rotationStyle) { - var colors = tabColors, + var colors = myself.rotationStyleColors, button; button = new ToggleButtonMorph( @@ -869,7 +938,7 @@ IDE_Morph.prototype.createSpriteBar = function () { button.padding = 0; button.labelShadowOffset = new Point(-1, -1); button.labelShadowColor = colors[1]; - button.labelColor = new Color(255, 255, 255); + button.labelColor = myself.buttonLabelColor; button.fixLayout(); button.refresh(); rotationStyleButtons.push(button); @@ -934,14 +1003,15 @@ IDE_Morph.prototype.createSpriteBar = function () { } ); padlock.label.isBold = false; - padlock.label.setColor(new Color(255, 255, 255)); + padlock.label.setColor(this.buttonLabelColor); padlock.color = tabColors[2]; padlock.highlightColor = tabColors[0]; padlock.pressColor = tabColors[1]; - padlock.tick.shadowOffset = new Point(-1, -1); + padlock.tick.shadowOffset = MorphicPreferences.isFlat ? + new Point() : new Point(-1, -1); padlock.tick.shadowColor = new Color(); // black - padlock.tick.color = new Color(255, 255, 255); + padlock.tick.color = this.buttonLabelColor; padlock.tick.isBold = false; padlock.tick.drawNew(); @@ -979,7 +1049,7 @@ IDE_Morph.prototype.createSpriteBar = function () { tab.edge = 1; tab.labelShadowOffset = new Point(-1, -1); tab.labelShadowColor = tabColors[1]; - tab.labelColor = new Color(255, 255, 255); + tab.labelColor = this.buttonLabelColor; tab.drawNew(); tab.fixLayout(); tabBar.add(tab); @@ -998,7 +1068,7 @@ IDE_Morph.prototype.createSpriteBar = function () { tab.edge = 1; tab.labelShadowOffset = new Point(-1, -1); tab.labelShadowColor = tabColors[1]; - tab.labelColor = new Color(255, 255, 255); + tab.labelColor = this.buttonLabelColor; tab.drawNew(); tab.fixLayout(); tabBar.add(tab); @@ -1017,7 +1087,7 @@ IDE_Morph.prototype.createSpriteBar = function () { tab.edge = 1; tab.labelShadowOffset = new Point(-1, -1); tab.labelShadowColor = tabColors[1]; - tab.labelColor = new Color(255, 255, 255); + tab.labelColor = this.buttonLabelColor; tab.drawNew(); tab.fixLayout(); tabBar.add(tab); @@ -1047,7 +1117,7 @@ IDE_Morph.prototype.createSpriteEditor = function () { if (this.currentTab === 'scripts') { scripts.isDraggable = false; scripts.color = this.groupColor; - scripts.texture = 'scriptsPaneTexture.gif'; + scripts.texture = this.scriptsPaneTexture; this.spriteEditor = new ScrollFrameMorph( scripts, @@ -1136,7 +1206,7 @@ IDE_Morph.prototype.createCorralBar = function () { newbutton.padding = 0; newbutton.labelShadowOffset = new Point(-1, -1); newbutton.labelShadowColor = colors[1]; - newbutton.labelColor = new Color(255, 255, 255); + newbutton.labelColor = this.buttonLabelColor; newbutton.contrast = this.buttonContrast; newbutton.drawNew(); newbutton.hint = "add a new Turtle sprite"; @@ -1158,7 +1228,7 @@ IDE_Morph.prototype.createCorralBar = function () { paintbutton.padding = 0; paintbutton.labelShadowOffset = new Point(-1, -1); paintbutton.labelShadowColor = colors[1]; - paintbutton.labelColor = new Color(255, 255, 255); + paintbutton.labelColor = this.buttonLabelColor; paintbutton.contrast = this.buttonContrast; paintbutton.drawNew(); paintbutton.hint = "paint a new sprite"; @@ -1275,7 +1345,7 @@ IDE_Morph.prototype.createCorral = function () { IDE_Morph.prototype.fixLayout = function (situation) { // situation is a string, i.e. // 'selectSprite' or 'refreshPalette' or 'tabEditor' - var padding = 5; + var padding = this.padding; Morph.prototype.trackChanges = false; @@ -1549,6 +1619,40 @@ IDE_Morph.prototype.selectSprite = function (sprite) { this.currentSprite.scripts.fixMultiArgs(); }; +// IDE_Morph skins + +IDE_Morph.prototype.defaultDesign = function () { + this.setDefaultDesign(); + this.refreshIDE(); +}; + +IDE_Morph.prototype.flatDesign = function () { + this.setFlatDesign(); + this.refreshIDE(); +}; + +IDE_Morph.prototype.refreshIDE = function () { + var projectData; + + if (Process.prototype.isCatchingErrors) { + try { + projectData = this.serializer.serialize(this.stage); + } catch (err) { + this.showMessage('Serialization failed: ' + err); + } + } else { + projectData = this.serializer.serialize(this.stage); + } + SpriteMorph.prototype.initBlocks(); + this.buildPanes(); + this.fixLayout(); + if (this.loadNewProject) { + this.newProject(); + } else { + this.openProjectString(projectData); + } +}; + // IDE_Morph sprite list access IDE_Morph.prototype.addNewSprite = function () { @@ -1738,7 +1842,7 @@ IDE_Morph.prototype.cloudMenu = function () { } else { myself.prompt('Export Project As...', function (name) { myself.exportProjectMedia(name); - }, 'exportProject'); + }, null, 'exportProject'); } }, null, @@ -1752,7 +1856,7 @@ IDE_Morph.prototype.cloudMenu = function () { } else { myself.prompt('Export Project As...', function (name) { myself.exportProjectNoMedia(name); - }, 'exportProject'); + }, null, 'exportProject'); } }, null, @@ -1766,7 +1870,7 @@ IDE_Morph.prototype.cloudMenu = function () { } else { myself.prompt('Export Project As...', function (name) { myself.exportProjectAsCloudData(name); - }, 'exportProject'); + }, null, 'exportProject'); } }, null, @@ -1947,6 +2051,19 @@ IDE_Morph.prototype.settingsMenu = function () { 'check to rasterize\nSVGs on import', true ); + addPreference( + 'Flat design', + function () { + if (MorphicPreferences.isFlat) { + return myself.defaultDesign(); + } + myself.flatDesign(); + }, + MorphicPreferences.isFlat, + 'uncheck for default\nGUI design', + 'check for alternative\nGUI design', + false + ); menu.addLine(); // everything below this line is made persistent addPreference( 'Thread safe scripts', @@ -2055,7 +2172,7 @@ IDE_Morph.prototype.projectMenu = function () { } else { myself.prompt('Export Project As...', function (name) { myself.exportProject(name); - }, 'exportProject'); + }, null, 'exportProject'); } }, 'show project data as XML\nin a new browser window', @@ -2786,7 +2903,7 @@ IDE_Morph.prototype.toggleAppMode = function (appMode) { Morph.prototype.trackChanges = false; if (this.isAppMode) { - this.setColor(new Color()); + this.setColor(this.appModeColor); this.controlBar.setColor(this.color); this.controlBar.appModeButton.refresh(); elements.forEach(function (e) { @@ -2962,7 +3079,7 @@ IDE_Morph.prototype.userSetBlocksScale = function () { sample = new FrameMorph(); sample.acceptsDrops = false; - sample.texture = 'scriptsPaneTexture.gif'; + sample.texture = this.scriptsPaneTexture; sample.setExtent(new Point(250, 180)); scrpt.setPosition(sample.position().add(10)); sample.add(scrpt); @@ -3419,14 +3536,17 @@ IDE_Morph.prototype.cloudError = function () { IDE_Morph.prototype.cloudIcon = function (height, color) { var clr = color || DialogBoxMorph.prototype.titleBarColor, + isFlat = MorphicPreferences.isFlat, icon = new SymbolMorph( - 'cloudGradient', + isFlat ? 'cloud' : 'cloudGradient', height || 50, clr, - new Point(-1, -1), + isFlat ? null : new Point(-1, -1), clr.darker(50) ); - icon.addShadow(new Point(1, 1), 1, clr.lighter(95)); + if (!isFlat) { + icon.addShadow(new Point(1, 1), 1, clr.lighter(95)); + } return icon; }; @@ -4967,6 +5087,8 @@ TurtleIconMorph.prototype.init = function (aSpriteOrStage, aTemplate) { }; TurtleIconMorph.prototype.createThumbnail = function () { + var isFlat = MorphicPreferences.isFlat; + if (this.thumbnail) { this.thumbnail.destroy(); } @@ -4975,7 +5097,7 @@ TurtleIconMorph.prototype.createThumbnail = function () { 'turtle', this.thumbSize.y, this.labelColor, - new Point(-1, -1), + isFlat ? null : new Point(-1, -1), new Color(0, 0, 0) ); } else { @@ -4983,7 +5105,7 @@ TurtleIconMorph.prototype.createThumbnail = function () { 'stage', this.thumbSize.y, this.labelColor, - new Point(-1, -1), + isFlat ? null : new Point(-1, -1), new Color(0, 0, 0) ); } @@ -5140,7 +5262,7 @@ WardrobeMorph.prototype.updateList = function () { paintbutton.labelMinExtent = new Point(36, 18); paintbutton.labelShadowOffset = new Point(-1, -1); paintbutton.labelShadowColor = paintbutton.highlightColor; - paintbutton.labelColor = new Color(255, 255, 255); + paintbutton.labelColor = TurtleIconMorph.prototype.labelColor; paintbutton.contrast = this.buttonContrast; paintbutton.drawNew(); paintbutton.hint = "Paint a new costume"; @@ -5156,7 +5278,7 @@ WardrobeMorph.prototype.updateList = function () { "costumes tab help" // look up long string in translator )); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(SpriteMorph.prototype.paletteTextColor); txt.setPosition(new Point(x, y)); this.addContents(txt); @@ -5507,7 +5629,7 @@ JukeboxMorph.prototype.updateList = function () { 'import a sound from your computer\nby dragging it into here' )); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(SpriteMorph.prototype.paletteTextColor); txt.setPosition(new Point(x, y)); this.addContents(txt); y = txt.bottom() + padding; diff --git a/history.txt b/history.txt index bbce4f84..45d60f0a 100755 --- a/history.txt +++ b/history.txt @@ -1711,3 +1711,7 @@ ______ * Objects: Costume shrinkWrap adjustments * Morphic: Flat design preference introduced (default is off) * Widgets: preparing for "flat GUI skins" + +130516 +------ +* "flat" GUI design preference (in the settings menu) diff --git a/morphic.js b/morphic.js index d7ad1642..9859e632 100644 --- a/morphic.js +++ b/morphic.js @@ -1035,7 +1035,7 @@ /*global window, HTMLCanvasElement, getMinimumFontHeight, FileReader, Audio, FileList, getBlurredShadowSupport*/ -var morphicVersion = '2013-May-15'; +var morphicVersion = '2013-May-16'; var modules = {}; // keep track of additional loaded modules var useBlurredShadows = getBlurredShadowSupport(); // check for Chrome-bug @@ -2794,7 +2794,7 @@ Morph.prototype.shadow = function (off, a, color) { alpha = a || ((a === 0) ? 0 : 0.2), fb = this.fullBounds(); shadow.setExtent(fb.extent().add(this.shadowBlur * 2)); - if (useBlurredShadows) { + if (useBlurredShadows && !MorphicPreferences.isFlat) { shadow.image = this.shadowImageBlurred(offset, color); shadow.alpha = alpha; shadow.setPosition(fb.origin.add(offset).subtract(this.shadowBlur)); @@ -6137,7 +6137,7 @@ InspectorMorph.prototype.init = function (target) { ); this.isDraggable = true; this.border = 1; - this.edge = 5; + this.edge = MorphicPreferences.isFlat ? 1 : 5; this.color = new Color(60, 60, 60); this.borderColor = new Color(95, 95, 95); this.drawNew(); @@ -6674,6 +6674,9 @@ MenuMorph.prototype.createLabel = function () { text.backgroundColor = this.borderColor; text.drawNew(); this.label = new BoxMorph(3, 0); + if (MorphicPreferences.isFlat) { + this.label.edge = 0; + } this.label.color = this.borderColor; this.label.borderColor = this.borderColor; this.label.setExtent(text.extent().add(4)); @@ -6695,8 +6698,8 @@ MenuMorph.prototype.drawNew = function () { }); this.children = []; if (!this.isListContents) { - this.edge = 5; - this.border = 2; + this.edge = MorphicPreferences.isFlat ? 0 : 5; + this.border = MorphicPreferences.isFlat ? 1 : 2; } this.color = new Color(255, 255, 255); this.borderColor = new Color(60, 60, 60); diff --git a/objects.js b/objects.js index a0c5be2f..771a0a1c 100644 --- a/objects.js +++ b/objects.js @@ -123,7 +123,7 @@ PrototypeHatBlockMorph*/ // Global stuff //////////////////////////////////////////////////////// -modules.objects = '2013-May-15'; +modules.objects = '2013-May-16'; var SpriteMorph; var StageMorph; @@ -178,6 +178,7 @@ SpriteMorph.prototype.blockColor = { }; SpriteMorph.prototype.paletteColor = new Color(55, 55, 55); +SpriteMorph.prototype.paletteTextColor = new Color(230, 230, 230); SpriteMorph.prototype.sliderColor = SpriteMorph.prototype.paletteColor.lighter(30); SpriteMorph.prototype.isCachingPrimitives = true; @@ -1492,7 +1493,7 @@ SpriteMorph.prototype.blockTemplates = function (category) { 'development mode \ndebugging primitives:' )); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(this.paletteTextColor); blocks.push(txt); blocks.push('-'); blocks.push(block('log')); @@ -1621,7 +1622,7 @@ SpriteMorph.prototype.blockTemplates = function (category) { 'development mode \ndebugging primitives:' )); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(this.paletteTextColor); blocks.push(txt); blocks.push('-'); blocks.push(block('colorFiltered')); @@ -1675,7 +1676,7 @@ SpriteMorph.prototype.blockTemplates = function (category) { 'development mode \ndebugging primitives:' ); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(this.paletteTextColor); blocks.push(txt); blocks.push('-'); blocks.push(block('reportTypeOf')); @@ -3184,6 +3185,9 @@ StageMorph.prototype.isCachingPrimitives StageMorph.prototype.sliderColor = SpriteMorph.prototype.sliderColor; +StageMorph.prototype.paletteTextColor + = SpriteMorph.prototype.paletteTextColor; + StageMorph.prototype.hiddenPrimitives = {}; // StageMorph instance creation @@ -3734,7 +3738,7 @@ StageMorph.prototype.blockTemplates = function (category) { 'Stage selected:\nno motion primitives' )); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(this.paletteTextColor); blocks.push(txt); } else if (cat === 'looks') { @@ -3756,7 +3760,7 @@ StageMorph.prototype.blockTemplates = function (category) { 'development mode \ndebugging primitives:' )); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(this.paletteTextColor); blocks.push(txt); blocks.push('-'); blocks.push(block('log')); @@ -3862,7 +3866,7 @@ StageMorph.prototype.blockTemplates = function (category) { 'development mode \ndebugging primitives:' )); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(this.paletteTextColor); blocks.push(txt); blocks.push('-'); blocks.push(block('colorFiltered')); @@ -3918,7 +3922,7 @@ StageMorph.prototype.blockTemplates = function (category) { 'development mode \ndebugging primitives:' ); txt.fontSize = 9; - txt.setColor(new Color(230, 230, 230)); + txt.setColor(this.paletteTextColor); blocks.push(txt); blocks.push('-'); blocks.push(block('reportTypeOf')); diff --git a/paint.js b/paint.js index a7b36e3d..80e6295c 100644 --- a/paint.js +++ b/paint.js @@ -47,6 +47,7 @@ ---------------- May 10 - first full release (Kartik) May 14 - bugfixes (bugfixes, Snap integration (Jens) + May 16 - flat design adjustments (Jens) */ @@ -54,12 +55,13 @@ FrameMorph, PushButtonMorph, Color, SymbolMorph, newCanvas, Morph, TextMorph, CostumeIconMorph, IDE_Morph, Costume, SpriteMorph, nop, Image, WardrobeMorph, TurtleIconMorph, localize, MenuMorph, InputFieldMorph, SliderMorph, - ToggleMorph, ToggleButtonMorph, BoxMorph, modules, radians + ToggleMorph, ToggleButtonMorph, BoxMorph, modules, radians, + MorphicPreferences */ // Global stuff //////////////////////////////////////////////////////// -modules.paint = '2013-May-14'; +modules.paint = '2013-May-16'; // Declarations @@ -118,7 +120,10 @@ PaintEditorMorph.prototype.buildContents = function () { this.toolbox = new BoxMorph(); this.toolbox.color = SpriteMorph.prototype.paletteColor.lighter(8); - this.toolbox.borderColor = this.toolbox.color.lighter(40); + this.toolbox.borderColor = this.toolbox.color.lighter(40); + if (MorphicPreferences.isFlat) { + this.toolbox.edge = 0; + } this.buildToolbox(); this.controls.add(this.toolbox); diff --git a/snap_logo_sm.gif b/snap_logo_sm.gif deleted file mode 100755 index 8de22c3e..00000000 Binary files a/snap_logo_sm.gif and /dev/null differ diff --git a/snap_logo_sm.png b/snap_logo_sm.png new file mode 100644 index 00000000..500559b0 Binary files /dev/null and b/snap_logo_sm.png differ diff --git a/widgets.js b/widgets.js index 8c162ae4..7fc79787 100644 --- a/widgets.js +++ b/widgets.js @@ -73,7 +73,7 @@ newCanvas, StringMorph, Morph, TextMorph, nop, detect, StringFieldMorph, HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph, ArrowMorph, MenuMorph, isString, isNil, SliderMorph, MorphicPreferences*/ -modules.widgets = '2013-May-15'; +modules.widgets = '2013-May-16'; var PushButtonMorph; var ToggleButtonMorph; @@ -208,10 +208,10 @@ PushButtonMorph.prototype.mouseLeave = function () { PushButtonMorph.prototype.outlinePath = BoxMorph.prototype.outlinePath; PushButtonMorph.prototype.drawOutline = function (context) { - var outlineStyle; + var outlineStyle, + isFlat = MorphicPreferences.isFlat && !this.is3D; - if (MorphicPreferences.isFlat && !this.is3D) {return; } - if (!this.outline) {return null; } + if (!this.outline || isFlat) {return null; } if (this.outlineGradient) { outlineStyle = context.createLinearGradient( 0, @@ -228,7 +228,7 @@ PushButtonMorph.prototype.drawOutline = function (context) { context.beginPath(); this.outlinePath( context, - this.corner, + isFlat ? 0 : this.corner, 0 ); context.closePath(); @@ -236,11 +236,13 @@ PushButtonMorph.prototype.drawOutline = function (context) { }; PushButtonMorph.prototype.drawBackground = function (context, color) { + var isFlat = MorphicPreferences.isFlat && !this.is3D; + context.fillStyle = color.toString(); context.beginPath(); this.outlinePath( context, - Math.max(this.corner - this.outline, 0), + isFlat ? 0 : Math.max(this.corner - this.outline, 0), this.outline ); context.closePath(); @@ -724,8 +726,6 @@ ToggleButtonMorph.prototype.drawEdges = function ( topColor, bottomColor ) { - if (MorphicPreferences.isFlat && !this.is3D) {return; } - var gradient; ToggleButtonMorph.uber.drawEdges.call( @@ -737,6 +737,16 @@ ToggleButtonMorph.prototype.drawEdges = function ( ); if (this.hasPreview) { // indicate the possible selection color + if (MorphicPreferences.isFlat && !this.is3D) { + context.fillStyle = this.pressColor.toString(); + context.fillRect( + this.outline, + this.outline, + this.corner, + this.height() - this.outline * 2 + ); + return; + } gradient = context.createLinearGradient( 0, 0, @@ -1509,7 +1519,7 @@ DialogBoxMorph.prototype.inform = function ( 'center', null, null, - new Point(1, 1), + MorphicPreferences.isFlat ? null : new Point(1, 1), new Color(255, 255, 255) ); @@ -1544,7 +1554,7 @@ DialogBoxMorph.prototype.askYesNo = function ( 'center', null, null, - new Point(1, 1), + MorphicPreferences.isFlat ? null : new Point(1, 1), new Color(255, 255, 255) ); @@ -1708,7 +1718,7 @@ DialogBoxMorph.prototype.promptCredentials = function ( null, // alignment null, // width null, // font name - new Point(1, 1), // shadow offset + MorphicPreferences.isFlat ? null : new Point(1, 1), new Color(255, 255, 255) // shadowColor ); } @@ -2411,13 +2421,16 @@ DialogBoxMorph.prototype.drawNew = function () { ), shift = this.corner / 2, x, - y; + y, + isFlat = MorphicPreferences.isFlat && !this.is3D; + + // this.alpha = isFlat ? 0.9 : 1; this.image = newCanvas(this.extent()); context = this.image.getContext('2d'); // title bar - if (MorphicPreferences.isFlat && !this.is3D) { + if (isFlat) { context.fillStyle = this.titleBarColor.toString(); } else { gradient = context.createLinearGradient(0, 0, 0, th); @@ -2434,7 +2447,7 @@ DialogBoxMorph.prototype.drawNew = function () { context.beginPath(); this.outlinePathTitle( context, - this.corner + isFlat ? 0 : this.corner ); context.closePath(); context.fill(); @@ -2445,12 +2458,12 @@ DialogBoxMorph.prototype.drawNew = function () { context.beginPath(); this.outlinePathBody( context, - this.corner + isFlat ? 0 : this.corner ); context.closePath(); context.fill(); - if (MorphicPreferences.isFlat && !this.is3D) { + if (isFlat) { DialogBoxMorph.uber.addShadow.call(this); Morph.prototype.trackChanges = true; this.fullChanged(); @@ -2973,7 +2986,11 @@ InputFieldMorph.prototype.drawNew = function () { this.image = newCanvas(this.extent()); context = this.image.getContext('2d'); if (this.parent) { - this.color = this.parent.color.lighter(this.contrast * 0.75); + if (this.parent.color.eq(new Color(255, 255, 255))) { + this.color = this.parent.color.darker(this.contrast * 0.1); + } else { + this.color = this.parent.color.lighter(this.contrast * 0.75); + } borderColor = this.parent.color; } else { borderColor = new Color(120, 120, 120);