Skip to content

GitLab

A
ardublockly
Commit 19263bdd authored by Neil Fraser's avatar Neil Fraser
Browse files
Options

Vectorize icons.

parent 23251b51
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 71 deletions
core/comment.js
View file @ 19263bdd
......@@ -43,12 +43,6 @@ Blockly.Comment = function(block) {
};
goog.inherits(Blockly.Comment, Blockly.Icon);
/**
* Icon in base64 format.
* @private
*/
Blockly.Comment.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGgAnBf0Xj5sAAAIBSURBVDjLjZO9SxxRFMXPrFkWl2UFYSOIRtF210YtAiH/gGATRNZFgo19IBaB9Ipgk3SiEoKQgI19JIVgGaOIgpWJEAV1kZk3b1ad0V+KRYIzk5ALh1ecc88978tRSgHPg0Bjvq/BbFalMNR5oaBv+bzWHMfZjOudWPOg6+pDva6elRXlt7fVcnYmPX4sDQ3pdmpKQXu7frS16aXjON8T06OIMWOwtRp3jgNSEpkMTE5y5/v4UcSLePxnroutVNKb4xgYANfFAk/vDbLG8Gtk5P8M7jE6CsZwDDwSMLm5iYmLlpbg4ABOTmBjA4aHk0ZbWxigposLvlarScH5OSwvw9oaABwdJTW1GtTrfJHnUe/uTgqKxeZaKEAUgTEQP/CeHvA8LhRFhLlc+r6zWVhfbyaZn0/yuRxEEaGCAK9USjdZWGgarK5CS0uS7+gAa3EzjYaOy2WlludJi4vSzIx0e5vky2Xp6ko/M4WCPleruk4zsVa6vJSur9OHTEzoqljUJwEdQYDf25uMe3jY3E5fX5Lr7wdr8YGSJCkIeL23h9/a+lA4Pg7T039u6h75POzv4wcBrx5Ec11Wd3bwOzv//VK7umB3F991+Zj2/R1reWstdnaWm3L5YXOlAnNz3FiLbTR4Azj6WwFPjOG953EahoT1On4YEnoep8bwDuiO9/wG1sM4kG8A4fUAAAAASUVORK5CYII=';
/**
* Comment text (if bubble is not visible).
* @private
......@@ -67,6 +61,30 @@ Blockly.Comment.prototype.width_ = 160;
*/
Blockly.Comment.prototype.height_ = 80;
/**
* Draw the comment icon.
* @param {!Element} group The icon group.
* @private
*/
Blockly.Comment.prototype.drawIcon_ = function(group) {
// Circle.
Blockly.createSvgElement('circle',
{'class': 'blocklyIconShape', 'r': '8', 'cx': '8', 'cy': '8'},
group);
// Can't use a real '?' text character since different browsers and operating
// systems render it differently.
// Body of question mark.
Blockly.createSvgElement('path',
{'class': 'blocklyIconSymbol',
'd': 'm6.8,10h2c0.003,-0.617 0.271,-0.962 0.633,-1.266 2.875,-2.405 0.607,-5.534 -3.765,-3.874v1.7c3.12,-1.657 3.698,0.118 2.336,1.25 -1.201,0.998 -1.201,1.528 -1.204,2.19z'},
group);
// Dot of question point.
Blockly.createSvgElement('rect',
{'class': 'blocklyIconSymbol',
'x': '6.8', 'y': '10.78', 'height': '2', 'width': '2'},
group);
};
/**
* Create the editor for the comment's bubble.
* @return {!Element} The top-level node of the editor.
......
core/css.js
View file @ 19263bdd
......@@ -272,6 +272,16 @@ Blockly.Css.CONTENT = [
'opacity: .6;',
'}',
'.blocklyIconShape {',
'fill: #00f;',
'stroke: #fff;',
'stroke-width: 1px;',
'}',
'.blocklyIconSymbol {',
'fill: #fff;',
'}',
'.blocklyMinimalBody {',
'margin: 0;',
'padding: 0;',
......
core/icon.js
View file @ 19263bdd
......@@ -48,12 +48,6 @@ Blockly.Icon.prototype.collapseHidden = true;
*/
Blockly.Icon.prototype.SIZE = 17;
/**
* Icon in base64 format.
* @private
*/
Blockly.Icon.prototype.png_ = '';
/**
* Bubble UI (if visible).
* @type {Blockly.Bubble}
......@@ -83,16 +77,12 @@ Blockly.Icon.prototype.createIcon = function() {
}
/* Here's the markup that will be generated:
<g class="blocklyIconGroup">
<image width="17" height="17"
xlink:href="data:image/png;base64,iVBOR..."></image>
...
</g>
*/
this.iconGroup_ = Blockly.createSvgElement('g',
{'class': 'blocklyIconGroup'}, null);
var img = Blockly.createSvgElement('image',
{'width': this.SIZE, 'height': this.SIZE},
this.iconGroup_);
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', this.png_);
this.drawIcon_(this.iconGroup_);
this.block_.getSvgRoot().appendChild(this.iconGroup_);
Blockly.bindEvent_(this.iconGroup_, 'mouseup', this, this.iconClick_);
......
core/mutator.js
View file @ 19263bdd
......@@ -46,12 +46,6 @@ Blockly.Mutator = function(quarkNames) {
};
goog.inherits(Blockly.Mutator, Blockly.Icon);
/**
* Icon in base64 format.
* @private
*/
Blockly.Mutator.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGhULOIajyb8AAAHMSURBVDjLnZS9SiRBFIXP/CQ9iIHgPoGBTo8vIAaivoKaKJr6DLuxYqKYKIqRgSCMrblmIxqsICgOmAriziIiRXWjYPdnUDvT2+PMsOyBoop7qk71vedWS5KAkrWsGUMjSYjpgSQhNoZGFLEKeGoKGMNttUpULkOhAFL3USiA70MQEBnDDeDJWtaqVaJeB7uNICAKQ1ZkDI1yufOm+XnY2YHl5c6874MxPClJiDulkMvBxYWrw/095POdU0sS4hxALqcWtreloSGpVJLGxtL49bX0+Ci9vUkzM2kcXGFbypUKxHHLBXZ3YW4ONjfh4yN1aGIiPQOQEenrg6MjR+zvZz99Y8PFT09hYCArktdfsFY6PHTr83NlUKu5+eREennJchmR/n5pYcGtJyezG6em3Dw7Kw0OZrlMOr6f1gTg4ACWlmBvz9WoifHxbDpf3Flfd+54njQ9ncYvL6WHB+n9XVpcbHOnW59IUKu5m+p11zftfLHo+qRorZ6Hh/Xt7k5fsLUl1evS1dWfG9swMiJZq9+KIlaD4P/eztkZNgz5LsAzhpvjY6JK5d9e8eioE3h95SdQbDrkhSErxvArjkl6/U/imMQYnsKQH02BT7vbZZfVOiWhAAAAAElFTkSuQmCC';
/**
* Width of workspace.
* @private
......@@ -64,6 +58,29 @@ Blockly.Mutator.prototype.workspaceWidth_ = 0;
*/
Blockly.Mutator.prototype.workspaceHeight_ = 0;
/**
* Draw the mutator icon.
* @param {!Element} group The icon group.
* @private
*/
Blockly.Mutator.prototype.drawIcon_ = function(group) {
// Square with rounded corners.
Blockly.createSvgElement('rect',
{'class': 'blocklyIconShape',
'rx': '4', 'ry': '4',
'height': '16', 'width': '16'},
group);
// Gear.
Blockly.createSvgElement('path',
{'class': 'blocklyIconSymbol',
'd': 'm4.203,7.296c-0.039,0.2226 -0.063,0.45 -0.063,0.684 0,0.234 0.024,0.462 0.063,0.684l-0.9204,0.6774 -0.1098,0.4098 0.9,1.5588 0.4104,0.1104 1.0428,-0.4572c0.3486,0.294 0.75,0.525 1.1874,0.6828l0.1266,1.134 0.3,0.3h1.8l0.3,-0.2994 0.1266,-1.1376c0.4362,-0.1584 0.8364,-0.3888 1.185,-0.6822l1.0464,0.4584 0.4092,-0.1104 0.9,-1.5588 -0.1104,-0.4104 -0.9204,-0.6774c0.0396,-0.2208 0.0636,-0.4488 0.0636,-0.6822 0,-0.2334 -0.024,-0.4614 -0.0636,-0.6834l0.9204,-0.6774 0.1104,-0.4104 -0.9,-1.5588 -0.4092,-0.1092 -1.0464,0.4584c-0.348,-0.2928 -0.7488,-0.5238 -1.185,-0.6822l-0.1266,-1.1376 -0.3,-0.2994h-1.8l-0.3,0.3 -0.126,1.1352c-0.4374,0.1572 -0.8388,0.3888 -1.1874,0.6822l-1.0434,-0.4566 -0.4098,0.1098 -0.8994,1.5588 0.108,0.4092z'},
group);
// Axel hole.
Blockly.createSvgElement('circle',
{'class': 'blocklyIconShape', 'r': '2.7', 'cx': '8', 'cy': '8'},
group);
};
/**
* Clicking on the icon toggles if the mutator bubble is visible.
* Disable if block is uneditable.
......
core/warning.js
View file @ 19263bdd
......@@ -50,10 +50,29 @@ goog.inherits(Blockly.Warning, Blockly.Icon);
Blockly.Warning.prototype.collapseHidden = false;
/**
* Icon in base64 format.
* Draw the warning icon.
* @param {!Element} group The icon group.
* @private
*/
Blockly.Warning.prototype.png_ = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAANyAAADcgBffIlqAAAAAd0SU1FB98DGgApDBpIGrEAAAGfSURBVDjLnZM9S2NREIbfc2P8AF27BXshpIzK5g9ssUj8C2tnYyUoiBGSyk4sbCLs1vkRgoW1jYWFICwsMV2Se3JPboLe+FhcNCZcjXFgOMzHeec9M2ekDwTIAEUgo68IsOQczdNTIudoAksTg/g+5+UyDxKUyzz4PueTsvhZr+NmZkCC6Wmo1QiAX58FmLKWf4VCDPCiGxtgLf+B9FiQXo+9y0ucBIUCnJ3B+noMdHGBC0P2xrH4HoYEmUx8qVQCgMPD2F5ehjDEjTbZe2s4p5NKRenb2+Qid3dSpaK0tTp+j8VKq0VncXHQh2IxZrK/P/AtLECjQQf4McQEMNbq786O5qwdANfr8Xl/P/AFgbS7qzlr9Qcwr4EoYvPmBud5wxPJ5+HqCtbWhv3GwPU1Lor4/fKMeedo5vPDiRKsrsLWFuRyybFOhxbwTd0upWqVcDQpaTqjWq0SdruU5PvUkiol/ZNRzeXA96mp3aaRzSYnjdNsFtptGiYI2PY8HaVSmu33xWf3K5WS6ffVe3rSgXnzT+YlpSfY00djjJOkZ/wpr41bQMIsAAAAAElFTkSuQmCC';
Blockly.Warning.prototype.drawIcon_ = function(group) {
// Triangle with rounded corners.
Blockly.createSvgElement('path',
{'class': 'blocklyIconShape',
'd': 'M2,15Q-1,15 0.5,12L6.5,1.7Q8,-1 9.5,1.7L15.5,12Q17,15 14,15z'},
group);
// Can't use a real '!' text character since different browsers and operating
// systems render it differently.
// Body of exclamation point.
Blockly.createSvgElement('path',
{'class': 'blocklyIconSymbol',
'd': 'm7,4.8v3.16l0.27,2.27h1.46l0.27,-2.27v-3.16z'},
group);
// Dot of exclamation point.
Blockly.createSvgElement('rect',
{'class': 'blocklyIconSymbol',
'x': '7', 'y': '11', 'height': '2', 'width': '2'},
group);
};
/**
* Create the text for the warning's bubble.
......
media/icons.svg deleted 100644 → 0
View file @ 23251b51
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="57px" height="17px">
<style type="text/css">
#background {
fill: none;
}
.shield {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.mark {
fill: #fff;
font-family: sans-serif;
font-size: 9pt;
font-weight: bold;
text-anchor: middle;
}
#gear {
fill:#fff;
}
</style>
<rect id="background" width="57" height="17" x="0" y="0" />
<g transform="translate(0.5, 0.5)">
<g class="comment" transform="translate(0, 0)">
<circle class="shield" r="8" cx="8" cy="8" />
<text class="mark" x="8" y="12.75">?</text>
</g>
<g class="mutator" transform="translate(20, 0)">
<rect class="shield" width="16" height="16" rx="4" ry="4" />
<path id="gear" transform="scale(.6, .6) translate(2.9, 2.8)"
d="M4.105,9.36C4.04,9.731,4,10.11,4,10.5s0.04,0.77,0.105,1.14l-1.534,1.129l-0.183,0.683l1.5,2.598
l0.684,0.184l1.738-0.762c0.581,0.49,1.25,0.875,1.979,1.138L8.5,18.5L9,19h3l0.5-0.499l0.211-1.896
c0.727-0.264,1.394-0.648,1.975-1.137l1.744,0.764l0.682-0.184l1.5-2.598l-0.184-0.684l-1.534-1.129C16.96,11.269,17,10.889,17,10.5
s-0.04-0.769-0.106-1.139l1.534-1.129l0.184-0.684l-1.5-2.598L16.43,4.768l-1.744,0.764c-0.58-0.488-1.248-0.873-1.975-1.137
L12.5,2.499L12,2H9L8.5,2.5L8.29,4.392C7.561,4.654,6.892,5.04,6.311,5.529L4.572,4.768L3.889,4.951L2.39,7.549L2.57,8.231
L4.105,9.36z M6.85,10.5c0-2.016,1.635-3.65,3.65-3.65s3.65,1.635,3.65,3.65s-1.635,3.65-3.65,3.65S6.85,12.516,6.85,10.5z"/>
</g>
<g class="warning" transform="translate(40, 0)">
<path class="shield" d="M 2,15 Q -1,15 0.5,12 L 6.5,1.7 Q 8,-1 9.5,1.7 L 15.5,12 Q 17,15 14,15 z" />
<text class="mark" x="8" y="13">!</text>
</g>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment