frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add user presence indication to tabs and nodes

Browse Source
This commit is contained in:
Nick O'Leary
2024-04-23 09:27:35 +02:00
parent d218af8619
commit 789426f80e
12 changed files with 590 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -314,6 +314,16 @@ $spinner-color: #999;
$tab-icon-color: #dedede;
// Anonymous User Colors
$user-profile-colors: (
1: #822e81,
2: #955e42,
3: #9c914f,
4: #748e54,
5: #06bcc1
);
// Deprecated
$text-color-green: $text-color-success;
$info-text-code-color: $text-color-code;

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

@@ -274,18 +274,44 @@
#usermenu-item-username > .red-ui-menu-label {
color: var(--red-ui-header-menu-heading-color);
}
}
.user-profile {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
.red-ui-user-profile {
background-color: var(--red-ui-header-background);
border: 2px solid var(--red-ui-header-menu-color);
border-radius: 30px;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
width: 30px;
height: 30px;
font-size: 20px;
&.red-ui-user-profile-color-1 {
background-color: var(--red-ui-user-profile-colors-1);
}
&.red-ui-user-profile-color-2 {
background-color: var(--red-ui-user-profile-colors-2);
}
&.red-ui-user-profile-color-3 {
background-color: var(--red-ui-user-profile-colors-3);
}
&.red-ui-user-profile-color-4 {
background-color: var(--red-ui-user-profile-colors-4);
}
&.red-ui-user-profile-color-5 {
background-color: var(--red-ui-user-profile-colors-5);
}
}
@media only screen and (max-width: 450px) {
span.red-ui-header-logo > span {
display: none;

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

@@ -5,23 +5,18 @@
li {
display: inline-flex;
align-items: center;
width: 30px;
margin: 0 2px;
}
}
.red-ui-multiplayer-user-icon {
background: var(--red-ui-header-background);
border: 2px solid var(--red-ui-header-menu-color);
border-radius: 30px;
background: none;
border: none;
display: inline-flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
text-decoration: none;
color: var(--red-ui-header-menu-color);
@@ -36,13 +31,86 @@
.red-ui-multiplayer-user.inactive & {
opacity: 0.5;
}
.user-profile {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle;
width: 28px;
height: 28px;
.red-ui-user-profile {
width: 20px;
border-radius: 20px;
height: 20px;
font-size: 12px
}
}
.red-ui-multiplayer-users-tray {
position: absolute;
top: 5px;
right: 20px;
line-height: normal;
cursor: pointer;
// &:hover {
// .red-ui-multiplayer-user-location {
// margin-left: 1px;
// }
// }
}
$multiplayer-user-icon-background: var(--red-ui-primary-background);
$multiplayer-user-icon-border: var(--red-ui-view-background);
$multiplayer-user-icon-text-color: var(--red-ui-header-menu-color);
$multiplayer-user-icon-count-text-color: var(--red-ui-primary-color);
$multiplayer-user-icon-shadow: 0px 0px 4px var(--red-ui-shadow);
.red-ui-multiplayer-user-location {
display: inline-block;
margin-left: -6px;
transition: margin-left 0.2s;
.red-ui-user-profile {
border: 1px solid $multiplayer-user-icon-border;
color: $multiplayer-user-icon-text-color;
width: 18px;
height: 18px;
border-radius: 18px;
font-size: 10px;
font-weight: normal;
box-shadow: $multiplayer-user-icon-shadow;
&.red-ui-multiplayer-user-count {
color: $multiplayer-user-icon-count-text-color;
background-color: $multiplayer-user-icon-background;
}
}
}
.red-ui-multiplayer-annotation {
.red-ui-multiplayer-annotation-background {
filter: drop-shadow($multiplayer-user-icon-shadow);
fill: $multiplayer-user-icon-background;
&.red-ui-user-profile-color-1 {
fill: var(--red-ui-user-profile-colors-1);
}
&.red-ui-user-profile-color-2 {
fill: var(--red-ui-user-profile-colors-2);
}
&.red-ui-user-profile-color-3 {
fill: var(--red-ui-user-profile-colors-3);
}
&.red-ui-user-profile-color-4 {
fill: var(--red-ui-user-profile-colors-4);
}
&.red-ui-user-profile-color-5 {
fill: var(--red-ui-user-profile-colors-5);
}
}
.red-ui-multiplayer-annotation-border {
stroke: $multiplayer-user-icon-border;
stroke-width: 1px;
fill: none;
}
.red-ui-multiplayer-annotation-anon-label {
fill: $multiplayer-user-icon-text-color;
stroke: none;
}
text {
user-select: none;
fill: $multiplayer-user-icon-text-color;
stroke: none;
font-size: 10px;
&.red-ui-multiplayer-user-count {
fill: $multiplayer-user-icon-count-text-color;
}
}
}

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

@@ -299,4 +299,7 @@
--red-ui-tab-icon-color: #{$tab-icon-color};
@each $current-color in 1 2 3 4 5 {
--red-ui-user-profile-colors-#{"" + $current-color}: #{map-get($user-profile-colors, $current-color)};
}
}