@ckeditor/ckeditor5-real-time-collaboration 44.3.0 → 45.0.0-alpha.1

package/build/translations/be.js

@@ -0,0 +1 @@
+!function(e){const o=e.be=e.be||{};o.dictionary=Object.assign(o.dictionary||{},{"Collapsed connected users list (press ENTER to open it)":"","Connected users list":"","Connected users list dropdown menu":"",CONNECTED_USERS:["","",""],PENDING_ACTION_SENDING_DATA:"","Synchronization issue":"","The document cannot be connected back to the server. To not lose your content save it locally and refresh the editor.":"","The document details could not be taken during the reconnection. To not lose your content save it locally and refresh the editor.":"","The last saved version of the document does not match the local version. To not lose your content save it locally and refresh the editor.":"","The local document and server document differ and merging them can cause unexpected behavior. To not lose your content save it locally and refresh the editor.":""})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/ckeditor5-metadata.json

@@ -23,7 +23,7 @@
         {
           "type": "Button",
           "name": "comment",
-          "iconPath": "@ckeditor/ckeditor5-comments/theme/icons/add-comment.svg",
+          "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/add-comment.svg",
           "toolbars": [
             "main",
             "image.toolbar",
@@ -34,7 +34,7 @@
         {
           "type": "Button",
           "name": "commentsArchive",
-          "iconPath": "@ckeditor/ckeditor5-comments/theme/icons/comments-archive.svg"
+          "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/comments-archive.svg"
         }
       ]
     },
@@ -58,7 +58,7 @@
         {
           "type": "Button",
           "name": "trackChanges",
-          "iconPath": "@ckeditor/ckeditor5-track-changes/theme/icons/track-changes.svg"
+          "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/track-changes.svg"
         }
       ],
       "requires": [
@@ -76,7 +76,7 @@
         {
           "type": "SplitButton",
           "name": "revisionHistory",
-          "iconPath": "@ckeditor/ckeditor5-core/theme/icons/history.svg"
+          "iconPath": "@ckeditor/ckeditor5-icons/theme/icons/history.svg"
         }
       ],
       "requires": [

package/dist/index-editor.css

@@ -107,7 +107,7 @@
 }
 
 .ck.ck-presence-list{
-	display:flex;
+	display:inline-flex;
 	align-items:center;
 	margin-right:var(--ck-spacing-standard);
 	transition:margin-right 200ms ease-in-out;
@@ -121,13 +121,19 @@
 .ck.ck-presence-list__list{
 	display:flex;
 	flex-direction:row;
+	position:relative;
 	justify-content:flex-end;
 }
 
-.ck.ck-presence-list__counter{
-	color:var(--ck-color-base-text);
-	margin-right:var(--ck-spacing-large);
-}
+.ck.ck-presence-list__list::after{
+		content:"";
+		position:absolute;
+		bottom:-15px;
+		left:0;
+		width:100%;
+		height:15px;
+		background:transparent;
+	}
 
 .ck.ck-presence-list__counter--hidden{
 	display:none;
@@ -139,9 +145,10 @@
 	border:1px solid transparent;
 	outline:none;
 	background:none;
+	padding:0;
 
 	position:relative;
-	margin-left:var(--ck-spacing-small);
+	margin-left:var(--ck-spacing-medium);
 }
 
 .ck.ck-presence-list__list-item:focus{
@@ -162,6 +169,10 @@
 		width:0px;
 	}
 
+.ck.ck-presence-list__list-item:first-child{
+		margin-left:0;
+	}
+
 .ck.ck-tooltip.ck-presence-list__list-item__tooltip > .ck-tooltip__text{
 		display:inline-block;
 		max-width:var(--ck-presence-list-users-tooltip-max-width);
@@ -176,7 +187,7 @@
 	display:block;
 	width:100%;
 	height:3px;
-	margin-top:3px;
+	margin-top:5px;
 }
 .ck-presence-list__list button.ck-presence-list__list-item *,
 .ck-presence-list__balloon button.ck-presence-list__dropdown-list-item *{
@@ -185,6 +196,7 @@
 
 .ck.ck-presence-list--collapsed .ck-presence-list__list{
 		border:1px solid transparent;
+		padding-left:1px;
 		min-width:calc( var(--ck-user-avatar-size) * 2);
 	}
 
@@ -206,33 +218,29 @@
 	}
 
 .ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item{
-		margin-left:calc( var(--ck-user-avatar-size) * -1 + 7px);
+		margin-left:calc( var(--ck-user-avatar-size) * -0.35);
 		border:0;
 		padding:0;
 	}
 
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:last-child{
-			order:unset;
-		}
-
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(2){
-			opacity:.75;
-		}
-
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(3){
-			opacity:.55;
+.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:first-child{
+			margin-left:0;
 		}
 
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(4){
-			opacity:.35;
+.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:last-child{
+			order:unset;
 		}
 
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(5){
-			opacity:.15;
+.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item .ck-user{
+			--ck-presence-list-avatar-border-color:var(--ck-color-base-foreground);
+			border:2px solid var(--ck-presence-list-avatar-border-color);
+			margin-left:0;
+			margin-right:0;
 		}
 
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(n+6){
-			display:none;
+.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item.ck-presence-list__users-counter{
+			margin-left:0;
+			margin-right:0;
 		}
 
 .ck.ck-presence-list__balloon{
@@ -252,6 +260,10 @@
 }
 	}
 
+.ck.ck-presence-list__balloon ul{
+		background-color:var(--ck-color-presence-list-dropdown-background);
+	}
+
 .ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-wrapper{
 		min-width:var(--ck-presence-list-dropdown-list-min-width);
 		max-width:var(--ck-presence-list-dropdown-list-max-width);
@@ -310,6 +322,36 @@
 			width:3px;
 		}
 
+.ck.ck-presence-list__users-counter{
+	--ck-presence-list-counter-border-color:var(--ck-user-avatar-background);
+	--ck-presence-list-counter-background-color:var(--ck-user-avatar-color);
+
+	border:2px solid var(--ck-presence-list-counter-border-color);
+	display:flex;
+	justify-content:center;
+	align-items:center;
+	position:relative;
+	border-radius:50%;
+	background-color:var(--ck-presence-list-counter-background-color);
+	box-sizing:border-box;
+	height:calc(var(--ck-user-avatar-size) - 4px);
+	width:calc(var(--ck-user-avatar-size) - 4px);
+	line-height:100%;
+	margin:2px;
+	margin-top:4px;
+}
+
+.ck.ck-presence-list__users-counter__text{
+	--ck-presence-list-counter-text-color:var(--ck-user-avatar-background);
+
+	color:var(--ck-presence-list-counter-text-color);
+	cursor:default;
+	-moz-user-select:none;
+	-webkit-user-select:none;
+	-ms-user-select:none;
+	user-select:none;
+}
+
 @keyframes fadeIn{
 	from{
 		opacity:0;

package/dist/index.css

@@ -177,7 +177,7 @@
 }
 
 .ck.ck-presence-list {
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 	margin-right: var(--ck-spacing-standard);
 	transition: margin-right 200ms ease-in-out;
@@ -191,15 +191,21 @@
 .ck.ck-presence-list__list {
 	display: flex;
 	flex-direction: row;
+	position: relative;
 
 	/* Taking care about margin animation in collapsed mode. */
 	justify-content: flex-end;
 }
 
-.ck.ck-presence-list__counter {
-	color: var(--ck-color-base-text);
-	margin-right: var(--ck-spacing-large);
-}
+.ck.ck-presence-list__list::after {
+		content: "";
+		position: absolute;
+		bottom: -15px;
+		left: 0;
+		width: 100%;
+		height: 15px;
+		background: transparent;
+	}
 
 .ck.ck-presence-list__counter--hidden {
 	display: none;
@@ -215,9 +221,10 @@
 	border: 1px solid transparent;
 	outline: none;
 	background: none;
+	padding: 0;
 
 	position: relative;
-	margin-left: var(--ck-spacing-small);
+	margin-left: var(--ck-spacing-medium);
 }
 
 .ck.ck-presence-list__list-item:focus {
@@ -243,6 +250,10 @@
 		width: 0px;
 	}
 
+.ck.ck-presence-list__list-item:first-child {
+		margin-left: 0;
+	}
+
 .ck.ck-tooltip.ck-presence-list__list-item__tooltip > .ck-tooltip__text {
 		display: inline-block;
 		max-width: var(--ck-presence-list-users-tooltip-max-width);
@@ -257,7 +268,7 @@
 	display: block;
 	width: 100%;
 	height: 3px;
-	margin-top: 3px;
+	margin-top: 5px;
 }
 
 /**
@@ -271,6 +282,7 @@
 
 .ck.ck-presence-list--collapsed .ck-presence-list__list {
 		border: 1px solid transparent;
+		padding-left: 1px;
 
 		/* Because of moving avatars to the right with margin-left we need to set min-width of container. */
 		min-width: calc( var(--ck-user-avatar-size) * 2 );
@@ -295,36 +307,32 @@
 	}
 
 .ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item {
-		/* Adding extra px to create collapsed effect. */
-		margin-left: calc( var(--ck-user-avatar-size) * -1 + 7px);
+		/* Adding negative margin (35% of avatar) to create collapsed effect. */
+		margin-left: calc( var(--ck-user-avatar-size) * -0.35);
 
 		/* Reset focus borders */
 		border: 0;
 		padding: 0;
 	}
 
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:last-child {
-			order: unset;
-		}
-
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(2) {
-			opacity: .75;
-		}
-
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(3) {
-			opacity: .55;
+.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:first-child {
+			margin-left: 0;
 		}
 
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(4) {
-			opacity: .35;
+.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:last-child {
+			order: unset;
 		}
 
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(5) {
-			opacity: .15;
+.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item .ck-user {
+			--ck-presence-list-avatar-border-color: var(--ck-color-base-foreground);
+			border: 2px solid var(--ck-presence-list-avatar-border-color);
+			margin-left: 0;
+			margin-right: 0;
 		}
 
-.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item:nth-last-child(n+6) {
-			display: none;
+.ck.ck-presence-list--collapsed .ck.ck-presence-list__list-item.ck-presence-list__users-counter {
+			margin-left: 0;
+			margin-right: 0;
 		}
 
 .ck.ck-presence-list__balloon {
@@ -345,6 +353,10 @@
 }
 	}
 
+.ck.ck-presence-list__balloon ul {
+		background-color: var(--ck-color-presence-list-dropdown-background);
+	}
+
 .ck.ck-presence-list__balloon .ck.ck-presence-list__dropdown-list-wrapper {
 		min-width: var(--ck-presence-list-dropdown-list-min-width);
 		max-width: var(--ck-presence-list-dropdown-list-max-width);
@@ -412,6 +424,36 @@
 			width: 3px;
 		}
 
+.ck.ck-presence-list__users-counter {
+	--ck-presence-list-counter-border-color: var(--ck-user-avatar-background);
+	--ck-presence-list-counter-background-color: var(--ck-user-avatar-color);
+
+	border: 2px solid var(--ck-presence-list-counter-border-color);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	border-radius: 50%;
+	background-color: var(--ck-presence-list-counter-background-color);
+	box-sizing: border-box;
+	height: calc(var(--ck-user-avatar-size) - 4px);
+	width: calc(var(--ck-user-avatar-size) - 4px);
+	line-height: 100%;
+	margin: 2px;
+	margin-top: 4px;
+}
+
+.ck.ck-presence-list__users-counter__text {
+	--ck-presence-list-counter-text-color: var(--ck-user-avatar-background);
+
+	color: var(--ck-presence-list-counter-text-color);
+	cursor: default;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
 @keyframes fadeIn {
 	from {
 		opacity: 0;