Fixed relative positioning.

Squidex · Apr 16, 2024 · ea1b03f · ea1b03f
1 parent 93d9852
commit ea1b03f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 10 deletions.
diff --git a/frontend/src/app/features/content/pages/content/editor/content-editor.component.scss b/frontend/src/app/features/content/pages/content/editor/content-editor.component.scss
@@ -38,6 +38,5 @@
 }
 
 .cursors {
-    position: relative;
     padding: 1.5rem;
 }
diff --git a/frontend/src/app/framework/angular/list-view.component.html b/frontend/src/app/framework/angular/list-view.component.html
@@ -9,7 +9,7 @@
         </div>
     </div>
 
-    <div class="list-content normal" [class.loading-indicator]="isLoading" #contentElement sqxCompensateScrollbar>
+    <div class="list-content normal" [class.loading-indicator]="isLoading" #contentElement [sqxCompensateScrollbar]="innerWidth !== '100%'">
         <div class="inner normal" [style.minWidth]="innerWidth" [style.maxWidth]="innerWidth" [class.tabled]="table" [class.tabled2]="noPadding">
             <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
         </div>

diff --git a/frontend/src/app/framework/angular/pipes/colors.pipes.ts b/frontend/src/app/framework/angular/pipes/colors.pipes.ts
@@ -46,7 +46,11 @@ export class LightenPipe implements PipeTransform {
     standalone: true,
 })
 export class StringColorPipe implements PipeTransform {
-    public transform(value: string) {
+    public transform(value?: string) {
+        if (!value) {
+            return 'transparent';
+        }
+
         return ColorHelper.fromStringHash(value);
     }
 }
diff --git a/frontend/src/app/shared/components/focus-marker.component.html b/frontend/src/app/shared/components/focus-marker.component.html
@@ -1,11 +1,9 @@
-<div class="focus-container" (click)="onClick($event)">
-    <ng-content></ng-content>
-
-    <ng-container *ngIf="focusedUser | async; let user">
-        <div class="focus-border" [style.borderColor]="user.id | sqxStringColor"></div>
-
+<div class="focus-container" (click)="onClick($event)" [style.borderColor]="(focusedUser | async)?.id | sqxStringColor">
+    <div class="focused" *ngIf="focusedUser | async; let user">
         <div class="focus-user" [style.background]="user.id | sqxStringColor">
             {{user.displayName}}
         </div>
-    </ng-container>
+    </div>
+
+    <ng-content></ng-content>
 </div>
diff --git a/frontend/src/app/shared/components/focus-marker.component.scss b/frontend/src/app/shared/components/focus-marker.component.scss
@@ -2,13 +2,20 @@
 @import 'vars';
 
 .focus-container {
+    border: 2px solid transparent;
+    border-radius: 4px;
+    margin: -2px;
+}
+
+.focused {
     position: relative;
 }
 
 .focus-border {
     @include absolute(-2px, -2px, -2px, -2px);
     border: 2px solid transparent;
     border-radius: 6px;
+    pointer-events: none;
 }
 
 .focus-user {
@@ -19,5 +26,6 @@
     margin-right: 0;
     margin-bottom: 2px;
     padding: .125rem .25rem;
+    pointer-events: none;
     white-space: nowrap;
 }