"flat" design enhancements for blocks and watchers

pull/3/merge
jmoenig 2013-06-20 13:24:15 +02:00
rodzic fe8cbd5b70
commit 7af5ab575d
5 zmienionych plików z 89 dodań i 29 usunięć

Wyświetl plik

@ -153,7 +153,7 @@ DialogBoxMorph, BlockInputFragmentMorph, PrototypeHatBlockMorph*/
// Global stuff ////////////////////////////////////////////////////////
modules.blocks = '2013-June-18';
modules.blocks = '2013-June-20';
var SyntaxElementMorph;
var BlockMorph;
@ -1096,7 +1096,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
part.size = this.fontSize * 1.2;
part.color = new Color(255, 255, 255);
part.shadowColor = this.color.darker(this.labelContrast);
part.shadowOffset = this.embossing;
part.shadowOffset = MorphicPreferences.isFlat ?
new Point() : this.embossing;
part.drawNew();
break;
case '%turtleOutline':
@ -1105,7 +1106,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
part.color = new Color(255, 255, 255);
part.isProtectedLabel = true; // doesn't participate in zebraing
part.shadowColor = this.color.darker(this.labelContrast);
part.shadowOffset = this.embossing;
part.shadowOffset = MorphicPreferences.isFlat ?
new Point() : this.embossing;
part.drawNew();
break;
case '%clockwise':
@ -1114,7 +1116,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
part.color = new Color(255, 255, 255);
part.isProtectedLabel = false; // zebra colors
part.shadowColor = this.color.darker(this.labelContrast);
part.shadowOffset = this.embossing;
part.shadowOffset = MorphicPreferences.isFlat ?
new Point() : this.embossing;
part.drawNew();
break;
case '%counterclockwise':
@ -1123,7 +1126,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
part.color = new Color(255, 255, 255);
part.isProtectedLabel = false; // zebra colors
part.shadowColor = this.color.darker(this.labelContrast);
part.shadowOffset = this.embossing;
part.shadowOffset = MorphicPreferences.isFlat ?
new Point() : this.embossing;
part.drawNew();
break;
case '%greenflag':
@ -1132,7 +1136,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
part.color = new Color(0, 200, 0);
part.isProtectedLabel = true; // doesn't participate in zebraing
part.shadowColor = this.color.darker(this.labelContrast);
part.shadowOffset = this.embossing;
part.shadowOffset = MorphicPreferences.isFlat ?
new Point() : this.embossing;
part.drawNew();
break;
case '%stop':
@ -1141,7 +1146,8 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
part.color = new Color(200, 0, 0);
part.isProtectedLabel = true; // doesn't participate in zebraing
part.shadowColor = this.color.darker(this.labelContrast);
part.shadowOffset = this.embossing;
part.shadowOffset = MorphicPreferences.isFlat ?
new Point() : this.embossing;
part.drawNew();
break;
default:
@ -1155,7 +1161,9 @@ SyntaxElementMorph.prototype.labelPart = function (spec) {
part.color = new Color(255, 255, 255);
part.isBold = true;
part.shadowColor = this.color.darker(this.labelContrast);
part.shadowOffset = this.embossing;
if (!MorphicPreferences.isFlat) {
part.shadowOffset = this.embossing;
}
part.drawNew();
}
return part;
@ -2502,14 +2510,14 @@ BlockMorph.prototype.fixLabelColor = function () {
this.setLabelColor(
new Color(255, 255, 255),
clr.darker(this.labelContrast),
new Point(-1, -1)
MorphicPreferences.isFlat ? null : new Point(-1, -1)
);
} else {
this.setLabelColor(
new Color(0, 0, 0),
clr.lighter(this.zebraContrast)
.lighter(this.labelContrast * 2),
new Point(1, 1)
MorphicPreferences.isFlat ? null : new Point(1, 1)
);
}
}
@ -2987,12 +2995,21 @@ CommandBlockMorph.prototype.drawNew = function () {
this.drawBottom(context);
// add 3D-Effect:
this.drawTopDentEdge(context, 0, 0);
this.drawBottomDentEdge(context, 0, this.height() - this.corner);
this.drawLeftEdge(context);
this.drawRightEdge(context);
this.drawTopLeftEdge(context);
this.drawBottomRightEdge(context);
if (!MorphicPreferences.isFlat) {
this.drawTopDentEdge(context, 0, 0);
this.drawBottomDentEdge(context, 0, this.height() - this.corner);
this.drawLeftEdge(context);
this.drawRightEdge(context);
this.drawTopLeftEdge(context);
this.drawBottomRightEdge(context);
} else {
nop();
/*
this.drawFlatBottomDentEdge(
context, 0, this.height() - this.corner
);
*/
}
// erase CommandSlots
this.eraseHoles(context);
@ -3225,6 +3242,16 @@ CommandBlockMorph.prototype.drawBottomDentEdge = function (context, x, y) {
context.stroke();
};
CommandBlockMorph.prototype.drawFlatBottomDentEdge = function (context) {
if (!this.isStop()) {
context.fillStyle = this.color.darker(this.contrast / 2).toString();
context.beginPath();
this.drawDent(context, 0, this.height() - this.corner);
context.closePath();
context.fill();
}
};
CommandBlockMorph.prototype.drawLeftEdge = function (context) {
var shift = this.edge * 0.5,
gradient = context.createLinearGradient(0, 0, this.edge, 0);
@ -3723,6 +3750,7 @@ ReporterBlockMorph.prototype.drawRounded = function (context) {
context.closePath();
context.fill();
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
context.lineWidth = this.edge;
@ -3898,6 +3926,8 @@ ReporterBlockMorph.prototype.drawDiamond = function (context) {
context.closePath();
context.fill();
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
context.lineWidth = this.edge;
context.lineJoin = 'round';
@ -4879,6 +4909,8 @@ CommandSlotMorph.prototype.drawNew = function () {
context.fillStyle = this.rfColor.toString();
this.drawFlat(context);
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
this.drawEdges(context);
};
@ -5204,6 +5236,8 @@ RingCommandSlotMorph.prototype.drawNew = function () {
// draw the 'flat' shape:
this.drawFlat(context);
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
this.drawEdges(context);
};
@ -5385,6 +5419,8 @@ CSlotMorph.prototype.drawNew = function () {
// draw the 'flat' shape:
this.drawFlat(context);
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
this.drawTopRightEdge(context);
this.drawTopEdge(context, this.inset, this.corner);
@ -6382,7 +6418,9 @@ InputSlotMorph.prototype.drawNew = function () {
this.width() - this.edge * 2,
this.height() - this.edge * 2
);
this.drawRectBorder(context);
if (!MorphicPreferences.isFlat) {
this.drawRectBorder(context);
}
} else {
r = (this.height() - (this.edge * 2)) / 2;
context.fillStyle = this.color.toString();
@ -6405,7 +6443,9 @@ InputSlotMorph.prototype.drawNew = function () {
);
context.closePath();
context.fill();
this.drawRoundBorder(context);
if (!MorphicPreferences.isFlat) {
this.drawRoundBorder(context);
}
}
};
@ -6775,6 +6815,8 @@ BooleanSlotMorph.prototype.drawDiamond = function (context) {
context.closePath();
context.fill();
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
context.lineWidth = this.edge;
context.lineJoin = 'round';
@ -7972,7 +8014,9 @@ ColorSlotMorph.prototype.drawNew = function () {
this.width() - this.edge * 2,
this.height() - this.edge * 2
);
this.drawRectBorder(context);
if (!MorphicPreferences.isFlat) {
this.drawRectBorder(context);
}
};
ColorSlotMorph.prototype.drawRectBorder =
@ -8672,6 +8716,7 @@ FunctionSlotMorph.prototype.drawRounded = function (context) {
context.closePath();
context.fill();
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
context.lineWidth = this.edge;
@ -8835,6 +8880,8 @@ FunctionSlotMorph.prototype.drawDiamond = function (context) {
context.closePath();
context.fill();
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
context.lineWidth = this.edge;
context.lineJoin = 'round';
@ -9138,6 +9185,8 @@ RingReporterSlotMorph.prototype.drawRounded = function (context) {
context.closePath();
context.fill();
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
context.lineWidth = this.edge;
context.lineJoin = 'round';
@ -9309,6 +9358,8 @@ RingReporterSlotMorph.prototype.drawDiamond = function (context) {
context.closePath();
context.fill();
if (MorphicPreferences.isFlat) {return; }
// add 3D-Effect:
context.lineWidth = this.edge;
context.lineJoin = 'round';

Wyświetl plik

@ -912,7 +912,9 @@ JaggedBlockMorph.prototype.drawNew = function () {
context.fillStyle = this.cachedClr;
this.drawBackground(context);
this.drawEdges(context);
if (!MorphicPreferences.isFlat) {
this.drawEdges(context);
}
// erase holes
this.eraseHoles(context);

Wyświetl plik

@ -1745,3 +1745,4 @@ ______
130620
------
* GUI: add code mapping preference to persistent settings
* Blocks, BYOB, Lists, Objects: "flat" design enhancements for blocks and watchers

Wyświetl plik

@ -59,9 +59,9 @@
/*global modules, contains, BoxMorph, WorldMorph, HandleMorph,
PushButtonMorph, SyntaxElementMorph, Color, Point, WatcherMorph,
StringMorph, SpriteMorph, ScrollFrameMorph, CellMorph, ArrowMorph,
MenuMorph, snapEquals, Morph, isNil, localize*/
MenuMorph, snapEquals, Morph, isNil, localize, MorphicPreferences*/
modules.lists = '2013-April-23';
modules.lists = '2013-June-20';
var List;
var ListWatcherMorph;
@ -367,7 +367,7 @@ ListWatcherMorph.prototype.init = function (list, parentCell) {
false,
false,
false,
new Point(1, 1),
MorphicPreferences.isFlat ? new Point() : new Point(1, 1),
new Color(255, 255, 255)
);
this.label.mouseClickLeft = function () {myself.startIndexMenu(); };
@ -525,7 +525,7 @@ ListWatcherMorph.prototype.update = function (anyway) {
false,
false,
false,
new Point(1, 1),
MorphicPreferences.isFlat ? new Point() : new Point(1, 1),
new Color(255, 255, 255)
);
cell = new CellMorph(

Wyświetl plik

@ -123,7 +123,7 @@ PrototypeHatBlockMorph*/
// Global stuff ////////////////////////////////////////////////////////
modules.objects = '2013-June-18';
modules.objects = '2013-June-20';
var SpriteMorph;
var StageMorph;
@ -5285,7 +5285,7 @@ CellMorph.prototype.drawNew = function () {
);
context.closePath();
context.fill();
if (this.border > 0) {
if (this.border > 0 && !MorphicPreferences.isFlat) {
context.lineWidth = this.border;
context.strokeStyle = this.borderColor.toString();
context.beginPath();
@ -5297,7 +5297,9 @@ CellMorph.prototype.drawNew = function () {
context.shadowOffsetY = this.border;
context.shadowBlur = this.border;
context.shadowColor = this.color.darker(80).toString();
this.drawShadow(context, this.edge, this.border / 2);
if (!MorphicPreferences.isFlat) {
this.drawShadow(context, this.edge, this.border / 2);
}
}
// position my contents
@ -5582,7 +5584,7 @@ WatcherMorph.prototype.fixLayout = function () {
true,
false,
false,
new Point(1, 1),
MorphicPreferences.isFlat ? new Point() : new Point(1, 1),
new Color(255, 255, 255)
);
this.add(this.labelMorph);
@ -5856,7 +5858,11 @@ WatcherMorph.prototype.drawNew = function () {
context = this.image.getContext('2d');
if ((this.edge === 0) && (this.border === 0)) {
BoxMorph.uber.drawNew.call(this);
return null;
return;
}
if (MorphicPreferences.isFlat) {
WatcherMorph.uber.drawNew.call(this);
return;
}
gradient = context.createLinearGradient(0, 0, 0, this.height());
gradient.addColorStop(0, this.color.lighter().toString());