Browse Source

Fixed relative positioning.

pull/1086/head
Sebastian 2 years ago
parent
commit
ea1b03f9df
  1. 1
      frontend/src/app/features/content/pages/content/editor/content-editor.component.scss
  2. 2
      frontend/src/app/framework/angular/list-view.component.html
  3. 6
      frontend/src/app/framework/angular/pipes/colors.pipes.ts
  4. 12
      frontend/src/app/shared/components/focus-marker.component.html
  5. 8
      frontend/src/app/shared/components/focus-marker.component.scss

1
frontend/src/app/features/content/pages/content/editor/content-editor.component.scss

@ -38,6 +38,5 @@
}
.cursors {
position: relative;
padding: 1.5rem;
}

2
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>

6
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);
}
}

12
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>

8
frontend/src/app/shared/components/focus-marker.component.scss

@ -2,6 +2,12 @@
@import 'vars';
.focus-container {
border: 2px solid transparent;
border-radius: 4px;
margin: -2px;
}
.focused {
position: relative;
}
@ -9,6 +15,7 @@
@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;
}
Loading…
Cancel
Save