diff options
| -rwxr-xr-x | history.txt | 2 | ||||
| -rw-r--r-- | morphic.js | 16 | ||||
| -rw-r--r-- | widgets.js | 95 |
3 files changed, 80 insertions, 33 deletions
diff --git a/history.txt b/history.txt index 8e4b9ae..bbce4f8 100755 --- a/history.txt +++ b/history.txt @@ -1709,3 +1709,5 @@ ______ 130515 ------ * Objects: Costume shrinkWrap adjustments +* Morphic: Flat design preference introduced (default is off) +* Widgets: preparing for "flat GUI skins" @@ -1035,7 +1035,7 @@ /*global window, HTMLCanvasElement, getMinimumFontHeight, FileReader, Audio, FileList, getBlurredShadowSupport*/ -var morphicVersion = '2013-May-06'; +var morphicVersion = '2013-May-15'; var modules = {}; // keep track of additional loaded modules var useBlurredShadows = getBlurredShadowSupport(); // check for Chrome-bug @@ -1054,7 +1054,8 @@ var standardSettings = { useSliderForInput: false, useVirtualKeyboard: true, isTouchDevice: false, // turned on by touch events, don't set - rasterizeSVGs: false + rasterizeSVGs: false, + isFlat: false }; var touchScreenSettings = { @@ -1072,7 +1073,8 @@ var touchScreenSettings = { useSliderForInput: true, useVirtualKeyboard: true, isTouchDevice: false, - rasterizeSVGs: false + rasterizeSVGs: false, + isFlat: false }; var MorphicPreferences = standardSettings; @@ -5464,7 +5466,7 @@ SliderButtonMorph.prototype.init = function (orientation) { this.color = new Color(80, 80, 80); this.highlightColor = new Color(90, 90, 140); this.pressColor = new Color(80, 80, 160); - this.is3D = true; + this.is3D = false; this.hasMiddleDip = true; SliderButtonMorph.uber.init.call(this, orientation); }; @@ -5477,21 +5479,21 @@ SliderButtonMorph.prototype.drawNew = function () { var colorBak = this.color.copy(); SliderButtonMorph.uber.drawNew.call(this); - if (this.is3D) { + if (this.is3D || !MorphicPreferences.isFlat) { this.drawEdges(); } this.normalImage = this.image; this.color = this.highlightColor.copy(); SliderButtonMorph.uber.drawNew.call(this); - if (this.is3D) { + if (this.is3D || !MorphicPreferences.isFlat) { this.drawEdges(); } this.highlightImage = this.image; this.color = this.pressColor.copy(); SliderButtonMorph.uber.drawNew.call(this); - if (this.is3D) { + if (this.is3D || !MorphicPreferences.isFlat) { this.drawEdges(); } this.pressImage = this.image; @@ -71,9 +71,9 @@ /*global TriggerMorph, modules, Color, Point, BoxMorph, radians, newCanvas, StringMorph, Morph, TextMorph, nop, detect, StringFieldMorph, HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph, -ArrowMorph, MenuMorph, isString, isNil, SliderMorph*/ +ArrowMorph, MenuMorph, isString, isNil, SliderMorph, MorphicPreferences*/ -modules.widgets = '2013-May-10'; +modules.widgets = '2013-May-15'; var PushButtonMorph; var ToggleButtonMorph; @@ -144,6 +144,7 @@ PushButtonMorph.prototype.init = function ( template ) { // additional properties: + this.is3D = false; // for "flat" design exceptions this.target = target || null; this.action = action || null; this.environment = environment || null; @@ -209,6 +210,7 @@ PushButtonMorph.prototype.outlinePath = BoxMorph.prototype.outlinePath; PushButtonMorph.prototype.drawOutline = function (context) { var outlineStyle; + if (MorphicPreferences.isFlat && !this.is3D) {return; } if (!this.outline) {return null; } if (this.outlineGradient) { outlineStyle = context.createLinearGradient( @@ -252,6 +254,7 @@ PushButtonMorph.prototype.drawEdges = function ( topColor, bottomColor ) { + if (MorphicPreferences.isFlat && !this.is3D) {return; } var minInset = Math.max(this.corner, this.outline + this.edge), w = this.width(), h = this.height(), @@ -431,13 +434,17 @@ PushButtonMorph.prototype.createBackgrounds = function () { }; PushButtonMorph.prototype.createLabel = function () { + var shading = !MorphicPreferences.isFlat || this.is3D; + if (this.label !== null) { this.label.destroy(); } if (this.labelString instanceof SymbolMorph) { this.label = this.labelString.fullCopy(); - this.label.shadowOffset = this.labelShadowOffset; - this.label.shadowColor = this.labelShadowColor; + if (shading) { + this.label.shadowOffset = this.labelShadowOffset; + this.label.shadowColor = this.labelShadowColor; + } this.label.color = this.labelColor; this.label.drawNew(); } else { @@ -448,7 +455,7 @@ PushButtonMorph.prototype.createLabel = function () { true, false, false, - this.labelShadowOffset, + shading ? this.labelShadowOffset : null, this.labelShadowColor, this.labelColor ); @@ -717,6 +724,8 @@ ToggleButtonMorph.prototype.drawEdges = function ( topColor, bottomColor ) { + if (MorphicPreferences.isFlat && !this.is3D) {return; } + var gradient; ToggleButtonMorph.uber.drawEdges.call( @@ -773,6 +782,9 @@ ToggleButtonMorph.prototype.previewPath = function (context, radius, inset) { }; ToggleButtonMorph.prototype.createLabel = function () { + var shading = !MorphicPreferences.isFlat || this.is3D, + none = new Point(); + if (this.label !== null) { this.label.destroy(); } @@ -784,12 +796,14 @@ ToggleButtonMorph.prototype.createLabel = function () { this.label = this.labelString[0].fullCopy(); this.trueStateLabel = this.labelString[1].fullCopy(); if (!this.isPicture) { - this.label.shadowOffset = this.labelShadowOffset; + this.label.shadowOffset = shading ? + this.labelShadowOffset : none; this.label.shadowColor = this.labelShadowColor; this.label.color = this.labelColor; this.label.drawNew(); - this.trueStateLabel.shadowOffset = this.labelShadowOffset; + this.trueStateLabel.shadowOffset = shading ? + this.labelShadowOffset : none; this.trueStateLabel.shadowColor = this.labelShadowColor; this.trueStateLabel.color = this.labelColor; this.trueStateLabel.drawNew(); @@ -805,7 +819,7 @@ ToggleButtonMorph.prototype.createLabel = function () { true, false, false, - this.labelShadowOffset, + shading ? this.labelShadowOffset : null, this.labelShadowColor, this.labelColor ); @@ -816,7 +830,7 @@ ToggleButtonMorph.prototype.createLabel = function () { true, false, false, - this.labelShadowOffset, + shading ? this.labelShadowOffset : null, this.labelShadowColor, this.labelColor ); @@ -825,7 +839,8 @@ ToggleButtonMorph.prototype.createLabel = function () { if (this.labelString instanceof SymbolMorph) { this.label = this.labelString.fullCopy(); if (!this.isPicture) { - this.label.shadowOffset = this.labelShadowOffset; + this.label.shadowOffset = shading ? + this.labelShadowOffset : none; this.label.shadowColor = this.labelShadowColor; this.label.color = this.labelColor; this.label.drawNew(); @@ -840,7 +855,7 @@ ToggleButtonMorph.prototype.createLabel = function () { true, false, false, - this.labelShadowOffset, + shading ? this.labelShadowOffset : none, this.labelShadowColor, this.labelColor ); @@ -956,6 +971,8 @@ TabMorph.prototype.drawEdges = function ( topColor, bottomColor ) { + if (MorphicPreferences.isFlat && !this.is3D) {return; } + var w = this.width(), h = this.height(), c = this.corner, @@ -1114,6 +1131,8 @@ ToggleMorph.prototype.fixLayout = function () { }; ToggleMorph.prototype.createLabel = function () { + var shading = !MorphicPreferences.isFlat || this.is3D; + if (this.label === null) { if (this.captionString) { this.label = new TextMorph( @@ -1133,7 +1152,7 @@ ToggleMorph.prototype.createLabel = function () { true, false, false, - new Point(1, 1), + shading ? new Point(1, 1) : null, new Color(240, 240, 240) ); this.add(this.tick); @@ -1309,23 +1328,31 @@ ToggleElementMorph.prototype.init = function ( // ToggleElementMorph drawing: ToggleElementMorph.prototype.createBackgrounds = function () { + var shading = !MorphicPreferences.isFlat || this.is3D; + this.color = this.element.color; this.element.removeShadow(); this.element[this.builder](); - this.element.addShadow(this.shadowOffset, this.shadowAlpha); + if (shading) { + this.element.addShadow(this.shadowOffset, this.shadowAlpha); + } this.silentSetExtent(this.element.fullBounds().extent()); // w/ shadow this.pressImage = this.element.fullImage(); this.element.removeShadow(); this.element.setColor(this.inactiveColor); this.element[this.builder](this.contrast); - this.element.addShadow(this.shadowOffset, 0); + if (shading) { + this.element.addShadow(this.shadowOffset, 0); + } this.normalImage = this.element.fullImage(); this.element.removeShadow(); this.element.setColor(this.color.lighter(this.contrast)); this.element[this.builder](this.contrast); - this.element.addShadow(this.shadowOffset, this.shadowAlpha); + if (shading) { + this.element.addShadow(this.shadowOffset, this.shadowAlpha); + } this.highlightImage = this.element.fullImage(); this.element.removeShadow(); @@ -1443,6 +1470,7 @@ function DialogBoxMorph(target, action, environment) { DialogBoxMorph.prototype.init = function (target, action, environment) { // additional properties: + this.is3D = false; // for "flat" design exceptions this.target = target || null; this.action = action || null; this.environment = environment || null; @@ -2131,6 +2159,8 @@ DialogBoxMorph.prototype.normalizeSpaces = function (string) { // DialogBoxMorph submorph construction DialogBoxMorph.prototype.createLabel = function () { + var shading = !MorphicPreferences.isFlat || this.is3D; + if (this.label) { this.label.destroy(); } @@ -2142,7 +2172,7 @@ DialogBoxMorph.prototype.createLabel = function () { true, false, false, - new Point(2, 1), + shading ? new Point(2, 1) : null, this.titleBarColor.darker(this.contrast) ); this.label.color = this.titleTextColor; @@ -2387,16 +2417,20 @@ DialogBoxMorph.prototype.drawNew = function () { context = this.image.getContext('2d'); // title bar - gradient = context.createLinearGradient(0, 0, 0, th); - gradient.addColorStop( - 0, - this.titleBarColor.lighter(this.contrast / 2).toString() - ); - gradient.addColorStop( - 1, - this.titleBarColor.darker(this.contrast).toString() - ); - context.fillStyle = gradient; + if (MorphicPreferences.isFlat && !this.is3D) { + context.fillStyle = this.titleBarColor.toString(); + } else { + gradient = context.createLinearGradient(0, 0, 0, th); + gradient.addColorStop( + 0, + this.titleBarColor.lighter(this.contrast / 2).toString() + ); + gradient.addColorStop( + 1, + this.titleBarColor.darker(this.contrast).toString() + ); + context.fillStyle = gradient; + } context.beginPath(); this.outlinePathTitle( context, @@ -2416,6 +2450,13 @@ DialogBoxMorph.prototype.drawNew = function () { context.closePath(); context.fill(); + if (MorphicPreferences.isFlat && !this.is3D) { + DialogBoxMorph.uber.addShadow.call(this); + Morph.prototype.trackChanges = true; + this.fullChanged(); + return; + } + // 3D-effect // bottom left corner gradient = context.createLinearGradient( @@ -2959,6 +3000,8 @@ InputFieldMorph.prototype.drawRectBorder = function (context) { var shift = this.edge * 0.5, gradient; + if (MorphicPreferences.isFlat && !this.is3D) {return; } + context.lineWidth = this.edge; context.lineJoin = 'round'; context.lineCap = 'round'; |