diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js index 29daa6510..a7c9704d9 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js @@ -27,15 +27,7 @@ RED.touch.radialMenu = (function() { function createRadial(obj,pos,options) { isActive = true; try { - touchMenu = d3.select("body").append("div") - .style({ - position:"absolute", - top: 0, - left:0, - bottom:0, - right:0, - "z-index": 1000 - }) + touchMenu = d3.select("body").append("div").classed("red-ui-editor-radial-menu",true) .on('touchstart',function() { hide(); d3.event.preventDefault(); @@ -43,43 +35,27 @@ RED.touch.radialMenu = (function() { var menu = touchMenu.append("div") .style({ - position: "absolute", - top: (pos[1]-80)+"px", - left:(pos[0]-80)+"px", - "border-radius": "80px", - width: "160px", - height: "160px", - background: "rgba(255,255,255,0.6)", - border: "1px solid #666" + top: (pos[1]-80)+"px", + left:(pos[0]-80)+"px", }); var menuOpts = []; var createMenuOpt = function(x,y,opt) { - opt.el = menu.append("div") + opt.el = menu.append("div").classed("red-ui-editor-radial-menu-opt",true) .style({ - position: "absolute", top: (y+80-25)+"px", - left:(x+80-25)+"px", - "border-radius": "20px", - width: "50px", - height: "50px", - background: "#fff", - border: "2px solid #666", - "text-align": "center", - "line-height":"50px" - }); + left:(x+80-25)+"px" + }) + .classed("red-ui-editor-radial-menu-opt-disabled",!!opt.disabled) opt.el.html(opt.name); - if (opt.disabled) { - opt.el.style({"border-color":"#ccc",color:"#ccc"}); - } opt.x = x; opt.y = y; menuOpts.push(opt); opt.el.on('touchstart',function() { - opt.el.style("background","#999"); + opt.el.classed("red-ui-editor-radial-menu-opt-active",true) d3.event.preventDefault(); d3.event.stopPropagation(); }); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss new file mode 100644 index 000000000..114919460 --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss @@ -0,0 +1,54 @@ +/** +* Copyright JS Foundation and other contributors, http://js.foundation +* +* Licensed under the Apache License, Version 2.0 (the License); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an AS IS BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +**/ + +.red-ui-editor-radial-menu { + font-size: $primary-font-size; + font-family: $primary-font; + position: absolute; + top: 0; + left:0; + bottom:0; + right:0; + z-index: 1000; + + & > div { + position: absolute; + border-radius: 80px; + width: 160px; + height: 160px; + background: $shadow; + border: 1px solid $primary-border-color; + } +} + +.red-ui-editor-radial-menu-opt { + position: absolute; + border-radius: 20px; + width: 50px; + height: 50px; + background: $secondary-background; + border: 2px solid $primary-border-color; + text-align: center; + line-height:50px +} + +.red-ui-editor-radial-menu-opt-disabled { + border-color: $tertiary-border-color; + color: $tertiary-border-color; +} +.red-ui-editor-radial-menu-opt-active { + background: $secondary-background-hover; +} diff --git a/packages/node_modules/@node-red/editor-client/src/sass/style.scss b/packages/node_modules/@node-red/editor-client/src/sass/style.scss index 69504fa3b..088e5c1b8 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/style.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/style.scss @@ -65,3 +65,5 @@ @import "keyboard"; @import "debug"; + +@import "radialMenu";