"Flat" GUI design preference

in the IDE's settings menu

1 files changed, 34 insertions, 17 deletions

diff --git a/widgets.js b/widgets.js
index 8c162ae..7fc7978 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);