diff --git a/blocks.js b/blocks.js index e6dceb17..ced699f8 100644 --- a/blocks.js +++ b/blocks.js @@ -8894,7 +8894,8 @@ SymbolMorph.prototype.names = [ 'arrowDownOutline', 'arrowRight', 'arrowRightOutline', - 'robot' + 'robot', + 'magnifiyingGlass' ]; // SymbolMorph instance creation: @@ -9060,6 +9061,8 @@ SymbolMorph.prototype.symbolCanvasColored = function (aColor) { return this.drawSymbolArrowRightOutline(canvas, aColor); case 'robot': return this.drawSymbolRobot(canvas, aColor); + case 'magnifiyingGlass': + return this.drawSymbolMagnifyingGlass(canvas, aColor); default: return canvas; } @@ -10146,6 +10149,48 @@ SymbolMorph.prototype.drawSymbolRobot = function (canvas, color) { return canvas; }; +SymbolMorph.prototype.drawSymbolMagnifyingGlass = function (canvas, color) { + // answer a canvas showing a magnifying glass + var ctx = canvas.getContext('2d'), + gradient, + w = canvas.width, + h = canvas.height, + r = w * 0.3, + x = w * 2 / 3 - Math.sqrt(r), + y = h / 3 + Math.sqrt(r), + l = Math.max(w / 5, 0.5); + + ctx.strokeStyle = color.toString(); + + gradient = ctx.createRadialGradient( + x, + y, + 0, + x + r, + y + r, + w + ); + + gradient.addColorStop(0, color.inverted().lighter(50).toString()); + gradient.addColorStop(1, color.inverted().darker(25).toString()); + ctx.fillStyle = gradient; + ctx.arc(x, y, r, radians(0), radians(360), false); + ctx.fill(); + + ctx.lineWidth = l / 2; + ctx.arc(x, y, r, radians(0), radians(360), false); + ctx.stroke(); + + ctx.lineWidth = l; + ctx.beginPath(); + ctx.moveTo(l / 2, h - l / 2); + ctx.lineTo(x - Math.sqrt(r + l), y + Math.sqrt(r + l)); + ctx.closePath(); + ctx.stroke(); + + return canvas; +}; + // ColorSlotMorph ////////////////////////////////////////////////////// /* diff --git a/gui.js b/gui.js index 485d242f..492f3100 100644 --- a/gui.js +++ b/gui.js @@ -5192,6 +5192,8 @@ ProjectDialogMorph.prototype.init = function (ide, task) { this.handle = null; this.srcBar = null; this.nameField = null; + this.filterField = null; + this.magnifiyingGlass = null; this.listField = null; this.preview = null; this.notesText = null; @@ -5475,11 +5477,17 @@ ProjectDialogMorph.prototype.fixListFieldItemColors = function () { ProjectDialogMorph.prototype.buildFilterField = function () { var myself = this; - // we reuse the nameField attribute - this.nameField = new InputFieldMorph(this.ide.projectName); - this.body.add(this.nameField); + this.filterField = new InputFieldMorph(''); + this.magnifiyingGlass = + new SymbolMorph( + 'magnifiyingGlass', + this.filterField.height(), + this.titleBarColor.darker(50)); - this.nameField.reactToKeystroke = function (evt) { + this.body.add(this.magnifiyingGlass); + this.body.add(this.filterField); + + this.filterField.reactToKeystroke = function (evt) { var text = this.getValue(); myself.listField.elements = @@ -5499,6 +5507,10 @@ ProjectDialogMorph.prototype.buildFilterField = function () { notes.toLowerCase().indexOf(text.toLowerCase()) > -1; }); + if (myself.listField.elements.length === 0) { + myself.listField.elements.push('(no matches)') + } + myself.clearDetails(); myself.listField.buildListContents(); myself.fixListFieldItemColors(); @@ -5548,11 +5560,7 @@ ProjectDialogMorph.prototype.setSource = function (source) { this.projectList, this.projectList.length > 0 ? function (element) { - if (element.name) { - return element.name; - } else { - return element; - } + return element.name || element; } : null, null, function () {myself.ok(); } @@ -5670,11 +5678,7 @@ ProjectDialogMorph.prototype.installCloudProjectList = function (pl) { this.projectList, this.projectList.length > 0 ? function (element) { - if (element.ProjectName) { - return element.ProjectName; - } else { - return element; - } + return element.ProjectName || element; } : null, [ // format: display shared project names bold [ @@ -6030,6 +6034,8 @@ ProjectDialogMorph.prototype.unshareProject = function () { ProjectDialogMorph.prototype.edit = function () { if (this.nameField) { this.nameField.edit(); + } else if (this.filterField) { + this.filterField.edit(); } }; @@ -6038,6 +6044,7 @@ ProjectDialogMorph.prototype.edit = function () { ProjectDialogMorph.prototype.fixLayout = function () { var th = fontHeight(this.titleFontSize) + this.titlePadding * 2, thin = this.padding / 2, + inputField = this.nameField || this.filterField; oldFlag = Morph.prototype.trackChanges; Morph.prototype.trackChanges = false; @@ -6056,14 +6063,13 @@ ProjectDialogMorph.prototype.fixLayout = function () { this.height() - this.padding * 3 - th - this.buttons.height() )); this.srcBar.setPosition(this.body.position()); - if (this.nameField) { - this.nameField.setWidth( + + inputField.setWidth( this.body.width() - this.srcBar.width() - this.padding * 6 ); - this.nameField.setLeft(this.srcBar.right() + this.padding * 3); - this.nameField.setTop(this.srcBar.top()); - this.nameField.drawNew(); - } + inputField.setLeft(this.srcBar.right() + this.padding * 3); + inputField.setTop(this.srcBar.top()); + inputField.drawNew(); this.listField.setLeft(this.srcBar.right() + this.padding); this.listField.setWidth( @@ -6075,22 +6081,18 @@ ProjectDialogMorph.prototype.fixLayout = function () { ); this.listField.contents.children[0].adjustWidths(); - if (this.nameField) { - this.listField.setTop(this.nameField.bottom() + this.padding); - this.listField.setHeight( - this.body.height() - this.nameField.height() - this.padding - ); - } else { - this.listField.setTop(this.body.top()); - this.listField.setHeight(this.body.height()); + this.listField.setTop(inputField.bottom() + this.padding); + this.listField.setHeight( + this.body.height() - inputField.height() - this.padding + ); + + if (this.magnifiyingGlass) { + this.magnifiyingGlass.setTop(inputField.top()); + this.magnifiyingGlass.setLeft(this.listField.left()); } this.preview.setRight(this.body.right()); - if (this.nameField) { - this.preview.setTop(this.nameField.bottom() + this.padding); - } else { - this.preview.setTop(this.body.top()); - } + this.preview.setTop(inputField.bottom() + this.padding); this.notesField.setTop(this.preview.bottom() + thin); this.notesField.setLeft(this.preview.left()); diff --git a/morphic.js b/morphic.js index 3dc14eab..ba3f6b7d 100644 --- a/morphic.js +++ b/morphic.js @@ -1888,6 +1888,14 @@ Color.prototype.dansDarker = function () { return result; }; +Color.prototype.inverted = function () { + return new Color( + 255 - this.r, + 255 - this.g, + 255 - this.b + ); +} + // Points ////////////////////////////////////////////////////////////// // Point instance creation: