frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Update radialMenu to use standard theme colours

Browse Source
This commit is contained in:
Nick O'Leary 2019-09-20 12:57:24 +01:00
parent 2601cc898c
commit 30c402eb83
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 64 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/node_modules/@node-red/editor-client/src/js/ui/touch/radialMenu.js vendored
View File

@ -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();
});

54
packages/node_modules/@node-red/editor-client/src/sass/radialMenu.scss vendored Normal file
View File

@ -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;
}

2
packages/node_modules/@node-red/editor-client/src/sass/style.scss vendored
View File

@ -65,3 +65,5 @@
@import "keyboard";
@import "debug";
@import "radialMenu";