"Flat" GUI design preference

in the IDE's settings menu
pull/3/merge
jmoenig 2013-05-16 14:38:37 +02:00
rodzic b74695d4a0
commit e1a3092713
10 zmienionych plików z 255 dodań i 94 usunięć

Wyświetl plik

@ -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),

18
byob.js
Wyświetl plik

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

222
gui.js
Wyświetl plik

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

Wyświetl plik

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

Wyświetl plik

@ -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);

Wyświetl plik

@ -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'));

Wyświetl plik

@ -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);

Plik binarny nie jest wyświetlany.

Przed

Szerokość:  |  Wysokość:  |  Rozmiar: 1.3 KiB

BIN
snap_logo_sm.png 100644

Plik binarny nie jest wyświetlany.

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 4.6 KiB

Wyświetl plik

@ -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);