mirror of
https://github.com/google/blockly.git
synced 2026-01-04 15:40:08 +01:00
Changes Css.register API to accept string param (#5472)
* Chnages Css.register API to accept string param * Address self review comments and nits * Fix code-comment * Address minor review comments and nits * Allow passing an array of strings when registering CSS * Fix lint errors Co-authored-by: Aaron Dodson <adodson@google.com>
This commit is contained in:
Sandeep Dubey
GitHub
@@ -402,12 +402,17 @@ Comment.prototype.dispose = function() {
|
||||
/**
|
||||
* CSS for block comment. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
/* eslint-disable indent */
|
||||
'.blocklyCommentTextarea {', 'background-color: #fef49c;', 'border: 0;',
|
||||
'outline: 0;', 'margin: 0;', 'padding: 3px;', 'resize: none;',
|
||||
'display: block;', 'text-overflow: hidden;', '}'
|
||||
/* eslint-enable indent */
|
||||
]);
|
||||
Css.register(`
|
||||
.blocklyCommentTextarea {
|
||||
background-color: #fef49c;
|
||||
border: 0;
|
||||
display: block;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
padding: 3px;
|
||||
resize: none;
|
||||
text-overflow: hidden;
|
||||
}
|
||||
`);
|
||||
|
||||
exports = Comment;
|
||||
|
||||
806
core/css.js
806
core/css.js
@@ -16,6 +16,8 @@
|
||||
*/
|
||||
goog.module('Blockly.Css');
|
||||
|
||||
const deprecation = goog.require('Blockly.utils.deprecation');
|
||||
|
||||
|
||||
/**
|
||||
* Has CSS already been injected?
|
||||
@@ -27,17 +29,24 @@ let injected = false;
|
||||
/**
|
||||
* Add some CSS to the blob that will be injected later. Allows optional
|
||||
* components such as fields and the toolbox to store separate CSS.
|
||||
* The provided array of CSS will be destroyed by this function.
|
||||
* @param {!Array<string>} cssArray Array of CSS strings.
|
||||
* @param {string|!Array<string>} cssContent Multiline CSS string or an array of
|
||||
* single lines of CSS.
|
||||
* @alias Blockly.Css.register
|
||||
*/
|
||||
const register = function(cssArray) {
|
||||
const register = function(cssContent) {
|
||||
if (injected) {
|
||||
throw Error('CSS already injected');
|
||||
}
|
||||
// Concatenate cssArray onto CONTENT.
|
||||
Array.prototype.push.apply(CONTENT, cssArray);
|
||||
cssArray.length = 0; // Garbage collect provided CSS content.
|
||||
|
||||
if (Array.isArray(cssContent)) {
|
||||
deprecation.warn(
|
||||
'Registering CSS by passing an array of strings', 'September 2021',
|
||||
'September 2022', 'css.register passing a multiline string');
|
||||
content += ('\n' + cssContent.join('\n'));
|
||||
} else {
|
||||
// Add new cssContent in the global content.
|
||||
content += ('\n' + cssContent);
|
||||
}
|
||||
};
|
||||
exports.register = register;
|
||||
|
||||
@@ -58,502 +67,503 @@ const inject = function(hasCss, pathToMedia) {
|
||||
return;
|
||||
}
|
||||
injected = true;
|
||||
let text = CONTENT.join('\n');
|
||||
CONTENT.length = 0; // Garbage collect CSS content.
|
||||
if (!hasCss) {
|
||||
return;
|
||||
}
|
||||
// Strip off any trailing slash (either Unix or Windows).
|
||||
const mediaPath = pathToMedia.replace(/[\\/]$/, '');
|
||||
text = text.replace(/<<<PATH>>>/g, mediaPath);
|
||||
let cssContent = content.replace(/<<<PATH>>>/g, mediaPath);
|
||||
// Cleanup the collected css content after injecting it to the DOM.
|
||||
content = '';
|
||||
|
||||
// Inject CSS tag at start of head.
|
||||
const cssNode = document.createElement('style');
|
||||
cssNode.id = 'blockly-common-style';
|
||||
const cssTextNode = document.createTextNode(text);
|
||||
const cssTextNode = document.createTextNode(cssContent);
|
||||
cssNode.appendChild(cssTextNode);
|
||||
document.head.insertBefore(cssNode, document.head.firstChild);
|
||||
};
|
||||
exports.inject = inject;
|
||||
|
||||
/**
|
||||
* Array making up the CSS content for Blockly.
|
||||
* @alias Blockly.Css.CONTENT
|
||||
* The CSS content for Blockly.
|
||||
* @alias Blockly.Css.content
|
||||
*/
|
||||
const CONTENT = [
|
||||
`.blocklySvg {
|
||||
background-color: #fff;
|
||||
outline: none;
|
||||
overflow: hidden; /* IE overflows by default. */
|
||||
position: absolute;
|
||||
display: block;
|
||||
}`,
|
||||
let content = (`
|
||||
.blocklySvg {
|
||||
background-color: #fff;
|
||||
outline: none;
|
||||
overflow: hidden; /* IE overflows by default. */
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
`.blocklyWidgetDiv {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 99999; /* big value for bootstrap3 compatibility */
|
||||
}`,
|
||||
.blocklyWidgetDiv {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 99999; /* big value for bootstrap3 compatibility */
|
||||
}
|
||||
|
||||
`.injectionDiv {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden; /* So blocks in drag surface disappear at edges */
|
||||
touch-action: none;
|
||||
}`,
|
||||
.injectionDiv {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden; /* So blocks in drag surface disappear at edges */
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
`.blocklyNonSelectable {
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}`,
|
||||
.blocklyNonSelectable {
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
`.blocklyWsDragSurface {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}`,
|
||||
.blocklyWsDragSurface {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Added as a separate rule with multiple classes to make it more specific
|
||||
than a bootstrap rule that selects svg:root. See issue #1275 for context.
|
||||
*/
|
||||
`.blocklyWsDragSurface.blocklyOverflowVisible {
|
||||
overflow: visible;
|
||||
}`,
|
||||
.blocklyWsDragSurface.blocklyOverflowVisible {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
`.blocklyBlockDragSurface {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: visible !important;
|
||||
z-index: 50; /* Display below toolbox, but above everything else. */
|
||||
}`,
|
||||
.blocklyBlockDragSurface {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: visible !important;
|
||||
z-index: 50; /* Display below toolbox, but above everything else. */
|
||||
}
|
||||
|
||||
`.blocklyBlockCanvas.blocklyCanvasTransitioning,
|
||||
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
|
||||
transition: transform .5s;
|
||||
}`,
|
||||
.blocklyBlockCanvas.blocklyCanvasTransitioning,
|
||||
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
|
||||
transition: transform .5s;
|
||||
}
|
||||
|
||||
`.blocklyTooltipDiv {
|
||||
background-color: #ffffc7;
|
||||
border: 1px solid #ddc;
|
||||
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
|
||||
color: #000;
|
||||
display: none;
|
||||
font: 9pt sans-serif;
|
||||
opacity: .9;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
z-index: 100000; /* big value for bootstrap3 compatibility */
|
||||
}`,
|
||||
.blocklyTooltipDiv {
|
||||
background-color: #ffffc7;
|
||||
border: 1px solid #ddc;
|
||||
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
|
||||
color: #000;
|
||||
display: none;
|
||||
font: 9pt sans-serif;
|
||||
opacity: .9;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
z-index: 100000; /* big value for bootstrap3 compatibility */
|
||||
}
|
||||
|
||||
`.blocklyDropDownDiv {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
border: 1px solid;
|
||||
border-color: #dadce0;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
|
||||
}`,
|
||||
.blocklyDropDownDiv {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
border: 1px solid;
|
||||
border-color: #dadce0;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
`.blocklyDropDownDiv.blocklyFocused {
|
||||
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
|
||||
}`,
|
||||
`.blocklyDropDownContent {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}`,
|
||||
.blocklyDropDownDiv.blocklyFocused {
|
||||
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
`.blocklyDropDownArrow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: -1;
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
}`,
|
||||
.blocklyDropDownContent {
|
||||
max-height: 300px; // @todo: spec for maximum height.
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
`.blocklyDropDownButton {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
border: 1px solid;
|
||||
transition: box-shadow .1s;
|
||||
cursor: pointer;
|
||||
}`,
|
||||
.blocklyDropDownArrow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: -1;
|
||||
background-color: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
`.blocklyArrowTop {
|
||||
border-top: 1px solid;
|
||||
border-left: 1px solid;
|
||||
border-top-left-radius: 4px;
|
||||
border-color: inherit;
|
||||
}`,
|
||||
.blocklyDropDownButton {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 4px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
border: 1px solid;
|
||||
transition: box-shadow .1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
`.blocklyArrowBottom {
|
||||
border-bottom: 1px solid;
|
||||
border-right: 1px solid;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-color: inherit;
|
||||
}`,
|
||||
.blocklyArrowTop {
|
||||
border-top: 1px solid;
|
||||
border-left: 1px solid;
|
||||
border-top-left-radius: 4px;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
`.blocklyResizeSE {
|
||||
cursor: se-resize;
|
||||
fill: #aaa;
|
||||
}`,
|
||||
.blocklyArrowBottom {
|
||||
border-bottom: 1px solid;
|
||||
border-right: 1px solid;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
`.blocklyResizeSW {
|
||||
cursor: sw-resize;
|
||||
fill: #aaa;
|
||||
}`,
|
||||
.blocklyResizeSE {
|
||||
cursor: se-resize;
|
||||
fill: #aaa;
|
||||
}
|
||||
|
||||
`.blocklyResizeLine {
|
||||
stroke: #515A5A;
|
||||
stroke-width: 1;
|
||||
}`,
|
||||
.blocklyResizeSW {
|
||||
cursor: sw-resize;
|
||||
fill: #aaa;
|
||||
}
|
||||
|
||||
`.blocklyHighlightedConnectionPath {
|
||||
fill: none;
|
||||
stroke: #fc3;
|
||||
stroke-width: 4px;
|
||||
}`,
|
||||
.blocklyResizeLine {
|
||||
stroke: #515A5A;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
`.blocklyPathLight {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 1;
|
||||
}`,
|
||||
.blocklyHighlightedConnectionPath {
|
||||
fill: none;
|
||||
stroke: #fc3;
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
`.blocklySelected>.blocklyPathLight {
|
||||
display: none;
|
||||
}`,
|
||||
.blocklyPathLight {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
`.blocklyDraggable {
|
||||
/* backup for browsers (e.g. IE11) that don't support grab */
|
||||
cursor: url("<<<PATH>>>/handopen.cur"), auto;
|
||||
cursor: grab;
|
||||
cursor: -webkit-grab;
|
||||
}`,
|
||||
.blocklySelected>.blocklyPathLight {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* backup for browsers (e.g. IE11) that don't support grabbing */
|
||||
`.blocklyDragging {
|
||||
/* backup for browsers (e.g. IE11) that don't support grabbing */
|
||||
cursor: url("<<<PATH>>>/handclosed.cur"), auto;
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}`,
|
||||
.blocklyDraggable {
|
||||
/* backup for browsers (e.g. IE11) that don't support grab */
|
||||
cursor: url("<<<PATH>>>/handopen.cur"), auto;
|
||||
cursor: grab;
|
||||
cursor: -webkit-grab;
|
||||
}
|
||||
|
||||
/* Changes cursor on mouse down. Not effective in Firefox because of
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
|
||||
`.blocklyDraggable:active {
|
||||
/* backup for browsers (e.g. IE11) that don't support grabbing */
|
||||
cursor: url("<<<PATH>>>/handclosed.cur"), auto;
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}`,
|
||||
/* backup for browsers (e.g. IE11) that don't support grabbing */
|
||||
.blocklyDragging {
|
||||
/* backup for browsers (e.g. IE11) that don't support grabbing */
|
||||
cursor: url("<<<PATH>>>/handclosed.cur"), auto;
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
|
||||
/* Changes cursor on mouse down. Not effective in Firefox because of
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
|
||||
.blocklyDraggable:active {
|
||||
/* backup for browsers (e.g. IE11) that don't support grabbing */
|
||||
cursor: url("<<<PATH>>>/handclosed.cur"), auto;
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
|
||||
/* Change the cursor on the whole drag surface in case the mouse gets
|
||||
ahead of block during a drag. This way the cursor is still a closed hand.
|
||||
*/
|
||||
`.blocklyBlockDragSurface .blocklyDraggable {
|
||||
/* backup for browsers (e.g. IE11) that don't support grabbing */
|
||||
cursor: url("<<<PATH>>>/handclosed.cur"), auto;
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}`,
|
||||
*/
|
||||
.blocklyBlockDragSurface .blocklyDraggable {
|
||||
/* backup for browsers (e.g. IE11) that don't support grabbing */
|
||||
cursor: url("<<<PATH>>>/handclosed.cur"), auto;
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
|
||||
`.blocklyDragging.blocklyDraggingDelete {
|
||||
cursor: url("<<<PATH>>>/handdelete.cur"), auto;
|
||||
}`,
|
||||
.blocklyDragging.blocklyDraggingDelete {
|
||||
cursor: url("<<<PATH>>>/handdelete.cur"), auto;
|
||||
}
|
||||
|
||||
`.blocklyDragging>.blocklyPath,
|
||||
.blocklyDragging>.blocklyPathLight {
|
||||
fill-opacity: .8;
|
||||
stroke-opacity: .8;
|
||||
}`,
|
||||
.blocklyDragging>.blocklyPath,
|
||||
.blocklyDragging>.blocklyPathLight {
|
||||
fill-opacity: .8;
|
||||
stroke-opacity: .8;
|
||||
}
|
||||
|
||||
`.blocklyDragging>.blocklyPathDark {
|
||||
display: none;
|
||||
}`,
|
||||
.blocklyDragging>.blocklyPathDark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
`.blocklyDisabled>.blocklyPath {
|
||||
fill-opacity: .5;
|
||||
stroke-opacity: .5;
|
||||
}`,
|
||||
.blocklyDisabled>.blocklyPath {
|
||||
fill-opacity: .5;
|
||||
stroke-opacity: .5;
|
||||
}
|
||||
|
||||
`.blocklyDisabled>.blocklyPathLight,
|
||||
.blocklyDisabled>.blocklyPathDark {
|
||||
display: none;
|
||||
}`,
|
||||
.blocklyDisabled>.blocklyPathLight,
|
||||
.blocklyDisabled>.blocklyPathDark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
`.blocklyInsertionMarker>.blocklyPath,
|
||||
.blocklyInsertionMarker>.blocklyPathLight,
|
||||
.blocklyInsertionMarker>.blocklyPathDark {
|
||||
fill-opacity: .2;
|
||||
stroke: none;
|
||||
}`,
|
||||
.blocklyInsertionMarker>.blocklyPath,
|
||||
.blocklyInsertionMarker>.blocklyPathLight,
|
||||
.blocklyInsertionMarker>.blocklyPathDark {
|
||||
fill-opacity: .2;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
`.blocklyMultilineText {
|
||||
font-family: monospace;
|
||||
}`,
|
||||
.blocklyMultilineText {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
`.blocklyNonEditableText>text {
|
||||
pointer-events: none;
|
||||
}`,
|
||||
.blocklyNonEditableText>text {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
`.blocklyFlyout {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
}`,
|
||||
.blocklyFlyout {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
`.blocklyText text {
|
||||
cursor: default;
|
||||
}`,
|
||||
.blocklyText text {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
Don't allow users to select text. It gets annoying when trying to
|
||||
drag a block and selected text moves instead.
|
||||
*/
|
||||
`.blocklySvg text,
|
||||
.blocklyBlockDragSurface text {
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: inherit;
|
||||
}`,
|
||||
.blocklySvg text,
|
||||
.blocklyBlockDragSurface text {
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
`.blocklyHidden {
|
||||
display: none;
|
||||
}`,
|
||||
.blocklyHidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
`.blocklyFieldDropdown:not(.blocklyHidden) {
|
||||
display: block;
|
||||
}`,
|
||||
.blocklyFieldDropdown:not(.blocklyHidden) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
`.blocklyIconGroup {
|
||||
cursor: default;
|
||||
}`,
|
||||
.blocklyIconGroup {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
`.blocklyIconGroup:not(:hover),
|
||||
.blocklyIconGroupReadonly {
|
||||
opacity: .6;
|
||||
}`,
|
||||
.blocklyIconGroup:not(:hover),
|
||||
.blocklyIconGroupReadonly {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
`.blocklyIconShape {
|
||||
fill: #00f;
|
||||
stroke: #fff;
|
||||
stroke-width: 1px;
|
||||
}`,
|
||||
.blocklyIconShape {
|
||||
fill: #00f;
|
||||
stroke: #fff;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
`.blocklyIconSymbol {
|
||||
fill: #fff;
|
||||
}`,
|
||||
.blocklyIconSymbol {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
`.blocklyMinimalBody {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}`,
|
||||
.blocklyMinimalBody {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
`.blocklyHtmlInput {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}`,
|
||||
.blocklyHtmlInput {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Edge and IE introduce a close icon when the input value is longer than a
|
||||
certain length. This affects our sizing calculations of the text input.
|
||||
Hiding the close icon to avoid that. */
|
||||
`.blocklyHtmlInput::-ms-clear {
|
||||
display: none;
|
||||
}`,
|
||||
.blocklyHtmlInput::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
`.blocklyMainBackground {
|
||||
stroke-width: 1;
|
||||
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
|
||||
}`,
|
||||
.blocklyMainBackground {
|
||||
stroke-width: 1;
|
||||
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
|
||||
}
|
||||
|
||||
`.blocklyMutatorBackground {
|
||||
fill: #fff;
|
||||
stroke: #ddd;
|
||||
stroke-width: 1;
|
||||
}`,
|
||||
.blocklyMutatorBackground {
|
||||
fill: #fff;
|
||||
stroke: #ddd;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
`.blocklyFlyoutBackground {
|
||||
fill: #ddd;
|
||||
fill-opacity: .8;
|
||||
}`,
|
||||
.blocklyFlyoutBackground {
|
||||
fill: #ddd;
|
||||
fill-opacity: .8;
|
||||
}
|
||||
|
||||
`.blocklyMainWorkspaceScrollbar {
|
||||
z-index: 20;
|
||||
}`,
|
||||
.blocklyMainWorkspaceScrollbar {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
`.blocklyFlyoutScrollbar {
|
||||
z-index: 30;
|
||||
}`,
|
||||
.blocklyFlyoutScrollbar {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
`.blocklyScrollbarHorizontal,
|
||||
.blocklyScrollbarVertical {
|
||||
position: absolute;
|
||||
outline: none;
|
||||
}`,
|
||||
.blocklyScrollbarHorizontal,
|
||||
.blocklyScrollbarVertical {
|
||||
position: absolute;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
`.blocklyScrollbarBackground {
|
||||
opacity: 0;
|
||||
}`,
|
||||
.blocklyScrollbarBackground {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
`.blocklyScrollbarHandle {
|
||||
fill: #ccc;
|
||||
}`,
|
||||
.blocklyScrollbarHandle {
|
||||
fill: #ccc;
|
||||
}
|
||||
|
||||
`.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
|
||||
.blocklyScrollbarHandle:hover {
|
||||
fill: #bbb;
|
||||
}`,
|
||||
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
|
||||
.blocklyScrollbarHandle:hover {
|
||||
fill: #bbb;
|
||||
}
|
||||
|
||||
/* Darken flyout scrollbars due to being on a grey background. */
|
||||
/* By contrast, workspace scrollbars are on a white background. */
|
||||
`.blocklyFlyout .blocklyScrollbarHandle {
|
||||
fill: #bbb;
|
||||
}`,
|
||||
.blocklyFlyout .blocklyScrollbarHandle {
|
||||
fill: #bbb;
|
||||
}
|
||||
|
||||
`.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
|
||||
.blocklyFlyout .blocklyScrollbarHandle:hover {
|
||||
fill: #aaa;
|
||||
}`,
|
||||
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
|
||||
.blocklyFlyout .blocklyScrollbarHandle:hover {
|
||||
fill: #aaa;
|
||||
}
|
||||
|
||||
`.blocklyInvalidInput {
|
||||
background: #faa;
|
||||
}`,
|
||||
.blocklyInvalidInput {
|
||||
background: #faa;
|
||||
}
|
||||
|
||||
`.blocklyVerticalMarker {
|
||||
stroke-width: 3px;
|
||||
fill: rgba(255,255,255,.5);
|
||||
pointer-events: none;
|
||||
}`,
|
||||
.blocklyVerticalMarker {
|
||||
stroke-width: 3px;
|
||||
fill: rgba(255,255,255,.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
`.blocklyComputeCanvas {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}`,
|
||||
.blocklyComputeCanvas {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
`.blocklyNoPointerEvents {
|
||||
pointer-events: none;
|
||||
}`,
|
||||
.blocklyNoPointerEvents {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
`.blocklyContextMenu {
|
||||
border-radius: 4px;
|
||||
max-height: 100%;
|
||||
}`,
|
||||
.blocklyContextMenu {
|
||||
border-radius: 4px;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
`.blocklyDropdownMenu {
|
||||
border-radius: 2px;
|
||||
padding: 0 !important;
|
||||
}`,
|
||||
.blocklyDropdownMenu {
|
||||
border-radius: 2px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
`.blocklyDropdownMenu .blocklyMenuItem {
|
||||
/* 28px on the left for icon or checkbox. */
|
||||
padding-left: 28px;
|
||||
}`,
|
||||
.blocklyDropdownMenu .blocklyMenuItem {
|
||||
/* 28px on the left for icon or checkbox. */
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
/* BiDi override for the resting state. */
|
||||
`.blocklyDropdownMenu .blocklyMenuItemRtl {
|
||||
/* Flip left/right padding for BiDi. */
|
||||
padding-left: 5px;
|
||||
padding-right: 28px;
|
||||
}`,
|
||||
.blocklyDropdownMenu .blocklyMenuItemRtl {
|
||||
/* Flip left/right padding for BiDi. */
|
||||
padding-left: 5px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
`.blocklyWidgetDiv .blocklyMenu {
|
||||
background: #fff;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
|
||||
font: normal 13px Arial, sans-serif;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 4px 0;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 100%;
|
||||
z-index: 20000; /* Arbitrary, but some apps depend on it... */
|
||||
}`,
|
||||
.blocklyWidgetDiv .blocklyMenu {
|
||||
background: #fff;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
|
||||
font: normal 13px Arial, sans-serif;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 4px 0;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 100%;
|
||||
z-index: 20000; /* Arbitrary, but some apps depend on it... */
|
||||
}
|
||||
|
||||
`.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
|
||||
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
|
||||
}`,
|
||||
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
|
||||
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
`.blocklyDropDownDiv .blocklyMenu {
|
||||
background: inherit; /* Compatibility with gapi, reset from goog-menu */
|
||||
border: inherit; /* Compatibility with gapi, reset from goog-menu */
|
||||
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
|
||||
outline: none;
|
||||
position: relative; /* Compatibility with gapi, reset from goog-menu */
|
||||
z-index: 20000; /* Arbitrary, but some apps depend on it... */
|
||||
}`,
|
||||
.blocklyDropDownDiv .blocklyMenu {
|
||||
background: inherit; /* Compatibility with gapi, reset from goog-menu */
|
||||
border: inherit; /* Compatibility with gapi, reset from goog-menu */
|
||||
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
|
||||
outline: none;
|
||||
position: relative; /* Compatibility with gapi, reset from goog-menu */
|
||||
z-index: 20000; /* Arbitrary, but some apps depend on it... */
|
||||
}
|
||||
|
||||
/* State: resting. */
|
||||
`.blocklyMenuItem {
|
||||
border: none;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
/* 7em on the right for shortcut. */
|
||||
min-width: 7em;
|
||||
padding: 6px 15px;
|
||||
white-space: nowrap;
|
||||
}`,
|
||||
.blocklyMenuItem {
|
||||
border: none;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
/* 7em on the right for shortcut. */
|
||||
min-width: 7em;
|
||||
padding: 6px 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* State: disabled. */
|
||||
`.blocklyMenuItemDisabled {
|
||||
color: #ccc;
|
||||
cursor: inherit;
|
||||
}`,
|
||||
.blocklyMenuItemDisabled {
|
||||
color: #ccc;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
/* State: hover. */
|
||||
`.blocklyMenuItemHighlight {
|
||||
background-color: rgba(0,0,0,.1);
|
||||
}`,
|
||||
.blocklyMenuItemHighlight {
|
||||
background-color: rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
/* State: selected/checked. */
|
||||
`.blocklyMenuItemCheckbox {
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
}`,
|
||||
.blocklyMenuItemCheckbox {
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
`.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
|
||||
background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px;
|
||||
float: left;
|
||||
margin-left: -24px;
|
||||
position: static; /* Scroll with the menu. */
|
||||
}`,
|
||||
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
|
||||
background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px;
|
||||
float: left;
|
||||
margin-left: -24px;
|
||||
position: static; /* Scroll with the menu. */
|
||||
}
|
||||
|
||||
`.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
|
||||
float: right;
|
||||
margin-right: -24px;
|
||||
}`,
|
||||
];
|
||||
exports.CONTENT = CONTENT;
|
||||
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
|
||||
float: right;
|
||||
margin-right: -24px;
|
||||
}
|
||||
`);
|
||||
exports.content = content;
|
||||
|
||||
@@ -540,29 +540,32 @@ FieldAngle.prototype.wrapValue_ = function(value) {
|
||||
/**
|
||||
* CSS for angle field. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
`.blocklyAngleCircle {
|
||||
stroke: #444;
|
||||
stroke-width: 1;
|
||||
fill: #ddd;
|
||||
fill-opacity: .8;
|
||||
}`,
|
||||
`.blocklyAngleMarks {
|
||||
stroke: #444;
|
||||
stroke-width: 1;
|
||||
}`,
|
||||
`.blocklyAngleGauge {
|
||||
fill: #f88;
|
||||
fill-opacity: .8;
|
||||
pointer-events: none;
|
||||
}`,
|
||||
`.blocklyAngleLine {
|
||||
stroke: #f00;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
pointer-events: none;
|
||||
}`
|
||||
]);
|
||||
Css.register(`
|
||||
.blocklyAngleCircle {
|
||||
stroke: #444;
|
||||
stroke-width: 1;
|
||||
fill: #ddd;
|
||||
fill-opacity: .8;
|
||||
}
|
||||
|
||||
.blocklyAngleMarks {
|
||||
stroke: #444;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.blocklyAngleGauge {
|
||||
fill: #f88;
|
||||
fill-opacity: .8;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.blocklyAngleLine {
|
||||
stroke: #f00;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
pointer-events: none;
|
||||
}
|
||||
`);
|
||||
|
||||
fieldRegistry.register('field_angle', FieldAngle);
|
||||
|
||||
|
||||
@@ -608,38 +608,36 @@ FieldColour.prototype.dropdownDispose_ = function() {
|
||||
/**
|
||||
* CSS for colour picker. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
/* eslint-disable indent */
|
||||
'.blocklyColourTable {',
|
||||
'border-collapse: collapse;',
|
||||
'display: block;',
|
||||
'outline: none;',
|
||||
'padding: 1px;',
|
||||
'}',
|
||||
Css.register(`
|
||||
.blocklyColourTable {
|
||||
border-collapse: collapse;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
'.blocklyColourTable>tr>td {',
|
||||
'border: .5px solid #888;',
|
||||
'box-sizing: border-box;',
|
||||
'cursor: pointer;',
|
||||
'display: inline-block;',
|
||||
'height: 20px;',
|
||||
'padding: 0;',
|
||||
'width: 20px;',
|
||||
'}',
|
||||
.blocklyColourTable>tr>td {
|
||||
border: .5px solid #888;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
'.blocklyColourTable>tr>td.blocklyColourHighlighted {',
|
||||
'border-color: #eee;',
|
||||
'box-shadow: 2px 2px 7px 2px rgba(0,0,0,.3);',
|
||||
'position: relative;',
|
||||
'}',
|
||||
.blocklyColourTable>tr>td.blocklyColourHighlighted {
|
||||
border-color: #eee;
|
||||
box-shadow: 2px 2px 7px 2px rgba(0,0,0,.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
'.blocklyColourSelected, .blocklyColourSelected:hover {',
|
||||
'border-color: #eee !important;',
|
||||
'outline: 1px solid #333;',
|
||||
'position: relative;',
|
||||
'}'
|
||||
/* eslint-enable indent */
|
||||
]);
|
||||
.blocklyColourSelected, .blocklyColourSelected:hover {
|
||||
border-color: #eee !important;
|
||||
outline: 1px solid #333;
|
||||
position: relative;
|
||||
}
|
||||
`);
|
||||
|
||||
fieldRegistry.register('field_colour', FieldColour);
|
||||
|
||||
|
||||
@@ -317,7 +317,7 @@ FieldDropdown.prototype.showEditor_ = function(opt_e) {
|
||||
}
|
||||
|
||||
// Remove any pre-existing elements in the dropdown.
|
||||
Blockly.DropDownDiv.clearContent();
|
||||
DropDownDiv.clearContent();
|
||||
// Element gets created in render.
|
||||
this.menu_.render(DropDownDiv.getContentDiv());
|
||||
const menuElement = /** @type {!Element} */ (this.menu_.getElement());
|
||||
|
||||
@@ -433,19 +433,19 @@ FieldMultilineInput.prototype.onHtmlInputKeyDown_ = function(e) {
|
||||
/**
|
||||
* CSS for multiline field. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
`.blocklyHtmlTextAreaInput {
|
||||
font-family: monospace;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
}`,
|
||||
`.blocklyHtmlTextAreaInputOverflowedY {
|
||||
overflow-y: scroll;
|
||||
}`
|
||||
]);
|
||||
Css.register(`
|
||||
.blocklyHtmlTextAreaInput {
|
||||
font-family: monospace;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.blocklyHtmlTextAreaInputOverflowedY {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
`);
|
||||
|
||||
fieldRegistry.register('field_multilinetext', FieldMultilineInput);
|
||||
|
||||
|
||||
@@ -312,31 +312,29 @@ FlyoutButton.prototype.onMouseUp_ = function(e) {
|
||||
};
|
||||
|
||||
/**
|
||||
* CSS for buttons and labels. See css.js for use.
|
||||
* CSS for buttons and labels. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
/* eslint-disable indent */
|
||||
'.blocklyFlyoutButton {',
|
||||
'fill: #888;',
|
||||
'cursor: default;',
|
||||
'}',
|
||||
Css.register(`
|
||||
.blocklyFlyoutButton {
|
||||
fill: #888;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
'.blocklyFlyoutButtonShadow {',
|
||||
'fill: #666;',
|
||||
'}',
|
||||
.blocklyFlyoutButtonShadow {
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
'.blocklyFlyoutButton:hover {',
|
||||
'fill: #aaa;',
|
||||
'}',
|
||||
.blocklyFlyoutButton:hover {
|
||||
fill: #aaa;
|
||||
}
|
||||
|
||||
'.blocklyFlyoutLabel {',
|
||||
'cursor: default;',
|
||||
'}',
|
||||
.blocklyFlyoutLabel {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
'.blocklyFlyoutLabelBackground {',
|
||||
'opacity: 0;',
|
||||
'}',
|
||||
/* eslint-enable indent */
|
||||
]);
|
||||
.blocklyFlyoutLabelBackground {
|
||||
opacity: 0;
|
||||
}
|
||||
`);
|
||||
|
||||
exports = FlyoutButton;
|
||||
|
||||
@@ -645,79 +645,79 @@ ToolboxCategory.prototype.dispose = function() {
|
||||
/**
|
||||
* CSS for Toolbox. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
`.blocklyTreeRow:not(.blocklyTreeSelected):hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}`,
|
||||
Css.register(`
|
||||
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
`.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
|
||||
margin: 1px 5px 1px 0;
|
||||
}`,
|
||||
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
|
||||
margin: 1px 5px 1px 0;
|
||||
}
|
||||
|
||||
`.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
|
||||
margin: 1px 0 1px 5px;
|
||||
}`,
|
||||
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
|
||||
margin: 1px 0 1px 5px;
|
||||
}
|
||||
|
||||
`.blocklyTreeRow {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 3px;
|
||||
padding-right: 8px;
|
||||
white-space: nowrap;
|
||||
}`,
|
||||
.blocklyTreeRow {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 3px;
|
||||
padding-right: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
`.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
|
||||
margin-left: 8px;
|
||||
padding-right: 0;
|
||||
}`,
|
||||
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
|
||||
margin-left: 8px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
`.blocklyTreeIcon {
|
||||
background-image: url(<<<PATH>>>/sprites.png);
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
width: 16px;
|
||||
}`,
|
||||
.blocklyTreeIcon {
|
||||
background-image: url(<<<PATH>>>/sprites.png);
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
visibility: hidden;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
`.blocklyTreeIconClosed {
|
||||
background-position: -32px -1px;
|
||||
}`,
|
||||
.blocklyTreeIconClosed {
|
||||
background-position: -32px -1px;
|
||||
}
|
||||
|
||||
`.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
|
||||
background-position: 0 -1px;
|
||||
}`,
|
||||
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
|
||||
background-position: 0 -1px;
|
||||
}
|
||||
|
||||
`.blocklyTreeSelected>.blocklyTreeIconClosed {
|
||||
background-position: -32px -17px;
|
||||
}`,
|
||||
.blocklyTreeSelected>.blocklyTreeIconClosed {
|
||||
background-position: -32px -17px;
|
||||
}
|
||||
|
||||
`.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected>.blocklyTreeIconClosed {
|
||||
background-position: 0 -17px;
|
||||
}`,
|
||||
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected>.blocklyTreeIconClosed {
|
||||
background-position: 0 -17px;
|
||||
}
|
||||
|
||||
`.blocklyTreeIconOpen {
|
||||
background-position: -16px -1px;
|
||||
}`,
|
||||
.blocklyTreeIconOpen {
|
||||
background-position: -16px -1px;
|
||||
}
|
||||
|
||||
`.blocklyTreeSelected>.blocklyTreeIconOpen {
|
||||
background-position: -16px -17px;
|
||||
}`,
|
||||
.blocklyTreeSelected>.blocklyTreeIconOpen {
|
||||
background-position: -16px -17px;
|
||||
}
|
||||
|
||||
`.blocklyTreeLabel {
|
||||
cursor: default;
|
||||
font: 16px sans-serif;
|
||||
padding: 0 3px;
|
||||
vertical-align: middle;
|
||||
}`,
|
||||
.blocklyTreeLabel {
|
||||
cursor: default;
|
||||
font: 16px sans-serif;
|
||||
padding: 0 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
`.blocklyToolboxDelete .blocklyTreeLabel {
|
||||
cursor: url("<<<PATH>>>/handdelete.cur"), auto;
|
||||
}`,
|
||||
.blocklyToolboxDelete .blocklyTreeLabel {
|
||||
cursor: url("<<<PATH>>>/handdelete.cur"), auto;
|
||||
}
|
||||
|
||||
`.blocklyTreeSelected .blocklyTreeLabel {
|
||||
color: #fff;
|
||||
}`
|
||||
]);
|
||||
.blocklyTreeSelected .blocklyTreeLabel {
|
||||
color: #fff;
|
||||
}
|
||||
`);
|
||||
|
||||
registry.register(
|
||||
registry.Type.TOOLBOX_ITEM, ToolboxCategory.registrationName,
|
||||
|
||||
@@ -102,21 +102,22 @@ ToolboxSeparator.prototype.dispose = function() {
|
||||
/**
|
||||
* CSS for Toolbox. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
`.blocklyTreeSeparator {
|
||||
border-bottom: solid #e5e5e5 1px;
|
||||
height: 0;
|
||||
margin: 5px 0;
|
||||
}`,
|
||||
`.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
|
||||
border-right: solid #e5e5e5 1px;
|
||||
border-bottom: none;
|
||||
height: auto;
|
||||
margin: 0 5px 0 5px;
|
||||
padding: 5px 0;
|
||||
width: 0;
|
||||
}`,
|
||||
]);
|
||||
Css.register(`
|
||||
.blocklyTreeSeparator {
|
||||
border-bottom: solid #e5e5e5 1px;
|
||||
height: 0;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
|
||||
border-right: solid #e5e5e5 1px;
|
||||
border-bottom: none;
|
||||
height: auto;
|
||||
margin: 0 5px 0 5px;
|
||||
padding: 5px 0;
|
||||
width: 0;
|
||||
}
|
||||
`);
|
||||
|
||||
registry.register(
|
||||
registry.Type.TOOLBOX_ITEM, ToolboxSeparator.registrationName,
|
||||
|
||||
@@ -1116,27 +1116,38 @@ Toolbox.prototype.dispose = function() {
|
||||
/**
|
||||
* CSS for Toolbox. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
/* eslint-disable indent */
|
||||
'.blocklyToolboxDelete {', 'cursor: url("<<<PATH>>>/handdelete.cur"), auto;',
|
||||
'}',
|
||||
Css.register(`
|
||||
.blocklyToolboxDelete {
|
||||
cursor: url("<<<PATH>>>/handdelete.cur"), auto;
|
||||
}
|
||||
|
||||
'.blocklyToolboxGrab {', 'cursor: url("<<<PATH>>>/handclosed.cur"), auto;',
|
||||
'cursor: grabbing;', 'cursor: -webkit-grabbing;', '}',
|
||||
.blocklyToolboxGrab {
|
||||
cursor: url("<<<PATH>>>/handclosed.cur"), auto;
|
||||
cursor: grabbing;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
|
||||
/* Category tree in Toolbox. */
|
||||
'.blocklyToolboxDiv {', 'background-color: #ddd;', 'overflow-x: visible;',
|
||||
'overflow-y: auto;', 'padding: 4px 0 4px 0;', 'position: absolute;',
|
||||
'z-index: 70;', /* so blocks go under toolbox when dragging */
|
||||
'-webkit-tap-highlight-color: transparent;', /* issue #1345 */
|
||||
'}',
|
||||
.blocklyToolboxDiv {
|
||||
background-color: #ddd;
|
||||
overflow-x: visible;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0 4px 0;
|
||||
position: absolute;
|
||||
z-index: 70; /* so blocks go under toolbox when dragging */
|
||||
-webkit-tap-highlight-color: transparent; /* issue #1345 */
|
||||
}
|
||||
|
||||
'.blocklyToolboxContents {', 'display: flex;', 'flex-wrap: wrap;',
|
||||
'flex-direction: column;', '}',
|
||||
.blocklyToolboxContents {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
'.blocklyToolboxContents:focus {', 'outline: none;', '}',
|
||||
/* eslint-enable indent */
|
||||
]);
|
||||
.blocklyToolboxContents:focus {
|
||||
outline: none;
|
||||
}
|
||||
`);
|
||||
|
||||
registry.register(registry.Type.TOOLBOX, registry.DEFAULT, Toolbox);
|
||||
|
||||
|
||||
@@ -1080,68 +1080,64 @@ WorkspaceCommentSvg.prototype.blurFocus = function() {
|
||||
/**
|
||||
* CSS for workspace comment. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
// clang-format off
|
||||
/* eslint-disable indent */
|
||||
'.blocklyCommentForeignObject {',
|
||||
'position: relative;',
|
||||
'z-index: 0;',
|
||||
'}',
|
||||
Css.register(`
|
||||
.blocklyCommentForeignObject {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
'.blocklyCommentRect {',
|
||||
'fill: #E7DE8E;',
|
||||
'stroke: #bcA903;',
|
||||
'stroke-width: 1px;',
|
||||
'}',
|
||||
.blocklyCommentRect {
|
||||
fill: #E7DE8E;
|
||||
stroke: #bcA903;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
'.blocklyCommentTarget {',
|
||||
'fill: transparent;',
|
||||
'stroke: #bcA903;',
|
||||
'}',
|
||||
.blocklyCommentTarget {
|
||||
fill: transparent;
|
||||
stroke: #bcA903;
|
||||
}
|
||||
|
||||
'.blocklyCommentTargetFocused {',
|
||||
'fill: none;',
|
||||
'}',
|
||||
.blocklyCommentTargetFocused {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
'.blocklyCommentHandleTarget {',
|
||||
'fill: none;',
|
||||
'}',
|
||||
.blocklyCommentHandleTarget {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
'.blocklyCommentHandleTargetFocused {',
|
||||
'fill: transparent;',
|
||||
'}',
|
||||
.blocklyCommentHandleTargetFocused {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
'.blocklyFocused>.blocklyCommentRect {',
|
||||
'fill: #B9B272;',
|
||||
'stroke: #B9B272;',
|
||||
'}',
|
||||
.blocklyFocused>.blocklyCommentRect {
|
||||
fill: #B9B272;
|
||||
stroke: #B9B272;
|
||||
}
|
||||
|
||||
'.blocklySelected>.blocklyCommentTarget {',
|
||||
'stroke: #fc3;',
|
||||
'stroke-width: 3px;',
|
||||
'}',
|
||||
.blocklySelected>.blocklyCommentTarget {
|
||||
stroke: #fc3;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
'.blocklyCommentDeleteIcon {',
|
||||
'cursor: pointer;',
|
||||
'fill: #000;',
|
||||
'display: none;',
|
||||
'}',
|
||||
.blocklyCommentDeleteIcon {
|
||||
cursor: pointer;
|
||||
fill: #000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
'.blocklySelected > .blocklyCommentDeleteIcon {',
|
||||
'display: block;',
|
||||
'}',
|
||||
.blocklySelected > .blocklyCommentDeleteIcon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
'.blocklyDeleteIconShape {',
|
||||
'fill: #000;',
|
||||
'stroke: #000;',
|
||||
'stroke-width: 1px;',
|
||||
'}',
|
||||
.blocklyDeleteIconShape {
|
||||
fill: #000;
|
||||
stroke: #000;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
'.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {',
|
||||
'stroke: #fc3;',
|
||||
'}'
|
||||
/* eslint-enable indent */
|
||||
// clang-format on
|
||||
]);
|
||||
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
|
||||
stroke: #fc3;
|
||||
}
|
||||
`);
|
||||
|
||||
exports = WorkspaceCommentSvg;
|
||||
|
||||
@@ -499,18 +499,18 @@ ZoomControls.prototype.fireZoomEvent_ = function() {
|
||||
/**
|
||||
* CSS for zoom controls. See css.js for use.
|
||||
*/
|
||||
Css.register([
|
||||
`.blocklyZoom>image, .blocklyZoom>svg>image {
|
||||
opacity: .4;
|
||||
}`,
|
||||
Css.register(`
|
||||
.blocklyZoom>image, .blocklyZoom>svg>image {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
`.blocklyZoom>image:hover, .blocklyZoom>svg>image:hover {
|
||||
opacity: .6;
|
||||
}`,
|
||||
.blocklyZoom>image:hover, .blocklyZoom>svg>image:hover {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
`.blocklyZoom>image:active, .blocklyZoom>svg>image:active {
|
||||
opacity: .8;
|
||||
}`
|
||||
]);
|
||||
.blocklyZoom>image:active, .blocklyZoom>svg>image:active {
|
||||
opacity: .8;
|
||||
}
|
||||
`);
|
||||
|
||||
exports = ZoomControls;
|
||||
|
||||
@@ -31,7 +31,7 @@ goog.addDependency('../../core/constants.js', ['Blockly.constants'], [], {'lang'
|
||||
goog.addDependency('../../core/contextmenu.js', ['Blockly.ContextMenu'], ['Blockly.Events.BlockCreate', 'Blockly.Events.utils', 'Blockly.Menu', 'Blockly.MenuItem', 'Blockly.Msg', 'Blockly.WidgetDiv', 'Blockly.Xml', 'Blockly.browserEvents', 'Blockly.clipboard', 'Blockly.internalConstants', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Rect', 'Blockly.utils.aria', 'Blockly.utils.deprecation', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/contextmenu_items.js', ['Blockly.ContextMenuItems'], ['Blockly.ContextMenuRegistry', 'Blockly.Events.utils', 'Blockly.Msg', 'Blockly.clipboard', 'Blockly.dialog', 'Blockly.inputTypes', 'Blockly.utils.idGenerator', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/contextmenu_registry.js', ['Blockly.ContextMenuRegistry'], [], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/css.js', ['Blockly.Css'], [], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/css.js', ['Blockly.Css'], ['Blockly.utils.deprecation'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/delete_area.js', ['Blockly.DeleteArea'], ['Blockly.BlockSvg', 'Blockly.DragTarget', 'Blockly.IDeleteArea', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/dialog.js', ['Blockly.dialog'], [], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/drag_target.js', ['Blockly.DragTarget'], ['Blockly.IDragTarget'], {'lang': 'es6', 'module': 'goog'});
|
||||
|
||||
@@ -31,7 +31,7 @@ goog.addDependency('../../core/constants.js', ['Blockly.constants'], [], {'lang'
|
||||
goog.addDependency('../../core/contextmenu.js', ['Blockly.ContextMenu'], ['Blockly.Events.BlockCreate', 'Blockly.Events.utils', 'Blockly.Menu', 'Blockly.MenuItem', 'Blockly.Msg', 'Blockly.WidgetDiv', 'Blockly.Xml', 'Blockly.browserEvents', 'Blockly.clipboard', 'Blockly.internalConstants', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Rect', 'Blockly.utils.aria', 'Blockly.utils.deprecation', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/contextmenu_items.js', ['Blockly.ContextMenuItems'], ['Blockly.ContextMenuRegistry', 'Blockly.Events.utils', 'Blockly.Msg', 'Blockly.clipboard', 'Blockly.dialog', 'Blockly.inputTypes', 'Blockly.utils.idGenerator', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/contextmenu_registry.js', ['Blockly.ContextMenuRegistry'], [], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/css.js', ['Blockly.Css'], [], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/css.js', ['Blockly.Css'], ['Blockly.utils.deprecation'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/delete_area.js', ['Blockly.DeleteArea'], ['Blockly.BlockSvg', 'Blockly.DragTarget', 'Blockly.IDeleteArea', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/dialog.js', ['Blockly.dialog'], [], {'lang': 'es6', 'module': 'goog'});
|
||||
goog.addDependency('../../core/drag_target.js', ['Blockly.DragTarget'], ['Blockly.IDragTarget'], {'lang': 'es6', 'module': 'goog'});
|
||||
|
||||
Reference in New Issue
Block a user