editor css
parent
ffa4a599d3
commit
3ec0b079ea
|
|
@ -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)">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue