editor css

master
Boris Voropaev 2023-12-14 12:32:40 +03:00
parent ffa4a599d3
commit 3ec0b079ea
6 changed files with 50 additions and 28 deletions

View File

@ -1,10 +1,12 @@
<div class="add" (mouseleave)="hideDD()">
<div class="toggle prime" [class.active]="ddVisible" (click)="toggleDD()">
<div class="two-lines"></div>
<ico ico="add_circle_24"></ico>
<a [class.active]="ddVisible">Добавить элемент</a>
<drop-down ico="arrow_drop_down_24" [target]="menu" [visible]="ddVisible"></drop-down>
<div class="two-lines"></div>
<!-- <a [class.active]="ddVisible">Добавить элемент</a>
<drop-down ico="arrow_drop_down_24" [target]="menu" [visible]="ddVisible"></drop-down> -->
</div>
<div class="dropdown" #menu>
<div class="dropdown" *ngIf="ddVisible">
<div class="menu" *ngIf="types?.length">
<div *ngFor="let type of types; let i=index" class="type">
<div class="row" *ngIf="type?.children?.data?.length > 0; else addItem" (click)="toggleSub(i)">

View File

@ -1,8 +1,8 @@
<div class="menu" *ngIf="editMode">
<div class="block">
<a class="up"><ico ico="arrow_upward_24" (click)="move(ord - 1)"></ico></a>
<a class="down"><ico ico="arrow_downward_24" (click)="move(ord + 1)"></ico></a>
<a><ico ico="edit_24" (click)="edit()"></ico></a>
<a><ico ico="delete_24" (click)="delete()"></ico></a>
<ico class="up" ico="arrow_upward_24" (click)="move(ord - 1)"></ico>
<ico class="down" ico="arrow_downward_24" (click)="move(ord + 1)"></ico>
<ico ico="edit_24" (click)="edit()"></ico>
<ico ico="delete_24" (click)="delete()"></ico>
</div>
</div>

View File

@ -1,4 +1,4 @@
$bull: 18px;
$bull: 15px;
$offset: 2px;
$track: 20px;
@ -9,7 +9,7 @@ div{
div{
width: $bull;
height: $bull;
background-color: var(--second-dis);
background-color: var(--second);
border-radius: 50%;
margin: $offset $track $offset $offset;
border: none;

View File

@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { PagesService } from '@app/_services/pages.service';
import { Subscription } from 'rxjs';
import { AuthenticationService } from '@app/_services';
@Component({
selector: 'jumbotron',
@ -14,6 +15,7 @@ export class JumbotronComponent {
constructor(
private pagesService: PagesService,
public authService: AuthenticationService,
){}
ngOnInit(){
@ -87,7 +89,7 @@ export class JumbotronComponent {
}
get editable(){
return this.currentPage?.permissions?.edit || this.currentPage?.permissions?.anything;
return this.authService.privileges?.admin|| this.authService.privileges?.editor;
}
get editMode(){

View File

@ -6,11 +6,17 @@
z-index: 10;
z-index: 1000;
font-family: PT Sans;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
.menu {
display: flex;
flex-direction: column;
border: var(--second-dis) solid 1px;
border-radius: var(--radius-1);
border-radius: 4px;
box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
.type {
@ -20,10 +26,10 @@
border-bottom: var(--second-dis) solid 1px;
overflow: hidden;
&:first-child {
border-radius: var(--radius-1) var(--radius-1) 0 0;
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 var(--radius-1) var(--radius-1);
border-radius: 0 0 4px 4px;
.row {
border-bottom: none;
}

View File

@ -59,16 +59,19 @@ add-section{
.add{
position: relative;
margin: 24px 0;
ico{
margin-right: $pxs;
}
.toggle{
position:inherit;
display: flex;
align-items: center;
drop-down{
margin-top: $pxxs;
margin-left: $pxxs;
justify-content: center;
ico{
cursor: pointer;
}
.two-lines{
flex-grow: 1;
height: 4px;
border-top: 1px solid var(--second-dis);
border-bottom: 1px solid var(--second-dis);
}
&.active{
@ -78,8 +81,8 @@ add-section{
}
}
.dropdown{
left:48px;
top:28px;
left:calc( 50% - 125px );
top:22px;
}
}
@ -88,16 +91,25 @@ add-section{
.menu {
display: flex;
.block {
a{
ico{
height: 24px;
cursor: pointer;
svg{
color: var(--second)
};
&:hover{
svg{
color: var(--second-act)
};
}
}
background: #fff;
background: var(--light);
border: 1px solid var(--second-dis);
border-radius: $pxs;
padding: $pxs $ps;
border-radius: 4px;
padding: 8px 24px;
display: flex;
margin-bottom: $p;
column-gap: $ps;
margin-bottom: 24px;
gap: 24px
}
}