kopia lustrzana https://github.com/backface/turtlestitch
"flat" design enhancements for blocks and watchers
rodzic
fe8cbd5b70
commit
7af5ab575d
89
blocks.js
89
blocks.js
|
@ -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';
|
||||
|
|
4
byob.js
4
byob.js
|
@ -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);
|
||||
|
|
|
@ -1745,3 +1745,4 @@ ______
|
|||
130620
|
||||
------
|
||||
* GUI: add code mapping preference to persistent settings
|
||||
* Blocks, BYOB, Lists, Objects: "flat" design enhancements for blocks and watchers
|
||||
|
|
8
lists.js
8
lists.js
|
@ -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(
|
||||
|
|
16
objects.js
16
objects.js
|
@ -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());
|
||||
|
|
Ładowanie…
Reference in New Issue