edit-menu
Boris Voropaev
parent
c723cb1d97
commit
97c978fd1d
|
|
@ -10,11 +10,12 @@
|
|||
list-style-type: none;
|
||||
margin-right: 22px;
|
||||
position: relative;
|
||||
color: #86898E;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 18px;
|
||||
line-height: 16px; /* 160% */
|
||||
text-wrap: none;
|
||||
color: var(--blue-1);
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
|
|
@ -24,7 +25,7 @@
|
|||
height: 20px;
|
||||
right: -22px;
|
||||
top: 0;
|
||||
background: url("~src/assets/images/icons/chevron_right_20dp.svg") no-repeat center;
|
||||
background: url("~src/assets/images/icons/chevron_right_24dp.svg") no-repeat center;
|
||||
}
|
||||
&:last-child {
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="limiter">
|
||||
<div class="limiter nav-info">
|
||||
<page-breadcrumbs [page]="page"></page-breadcrumbs>
|
||||
</div>
|
||||
<div class="col right" *ngIf="isEditable" (click)="toggleEditMode()">
|
||||
<div class="label">Режим редактирования</div><div class="switch" [class.active]="editMode"></div>
|
||||
</div>
|
||||
<div class="col right" *ngIf="isEditable" (click)="toggleEditMode()">
|
||||
<div class="label">Режим редактирования</div><div class="switch" [class.active]="editMode"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="holder" [ngSwitch]="page?.type?.name || page?.type">
|
||||
<div class="limiter" [ngSwitch]="page?.type?.name || page?.type">
|
||||
<content-page *ngSwitchCase="'content'" [page]="page" [editMode]="editMode"></content-page>
|
||||
<publications-page *ngSwitchCase="'publications'" [page]="page" [editMode]="editMode"></publications-page>
|
||||
<registry-page *ngSwitchCase="'registry'" [page]="page" [editMode]="editMode"></registry-page>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
.row {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #C0C0C0;
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -43,12 +44,18 @@
|
|||
cursor: pointer;
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
color: #86898E;
|
||||
font-size: 20px;
|
||||
color: #2D2D2D;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.holder {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="dual-cols">
|
||||
<div class="col left">
|
||||
<!-- <div class="dual-cols">
|
||||
<div class="col left"> -->
|
||||
<page-sections [page]="page" [editMode]="editMode"></page-sections>
|
||||
</div>
|
||||
<!-- </div>
|
||||
<div *ngIf="page?.sidebars?.data?.length > 0 || editMode" class="col right">
|
||||
<page-sidebars [page]="page" [editMode]="editMode"></page-sidebars>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="add">
|
||||
<div class="toggle" (click)="toggleDD()"></div>
|
||||
<div class="toggle" (click)="toggleDD()">Добавить элемент</div>
|
||||
<div class="dropdown" [class.active]="ddVisible" (mouseleave)="hideDD()">
|
||||
<div class="menu">
|
||||
<div *ngFor="let type of types" class="type">
|
||||
|
|
|
|||
|
|
@ -2,75 +2,80 @@
|
|||
position: relative;
|
||||
height: 24px;
|
||||
margin-bottom: 24px;
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 11px;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #CFD1D4;
|
||||
content: '';
|
||||
z-index: 0;
|
||||
}
|
||||
display: inline-block;
|
||||
margin-top: 40px;
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 auto;
|
||||
background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center;
|
||||
padding-left: 32px;
|
||||
// background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
&:before {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--white) url("~src/assets/images/icons/add_circle_24.svg") no-repeat center;
|
||||
content: '';
|
||||
z-index: 0;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
&:after {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--white) url("~src/assets/images/icons/arrow_drop_down_24dp.svg") no-repeat center;
|
||||
content: '';
|
||||
z-index: 0;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
right: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: none;
|
||||
width: 250px;
|
||||
left: calc(50% - 126px);
|
||||
top: calc(100% + 8px);
|
||||
left: 48px;
|
||||
top: 24px;
|
||||
z-index: 10;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:before {
|
||||
width: 250px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -20px;
|
||||
background: url("~src/assets/images/triangle.png") no-repeat center;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
.type {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:first-child {
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 12px 12px;
|
||||
a, span {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
padding: 12px 20px;
|
||||
border-bottom: #E0E0E0 solid 1px;
|
||||
column-gap: 12px;
|
||||
cursor: pointer;
|
||||
&:first-child {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 8px 8px;
|
||||
a, span {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
color: #2D2D2D;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ input, select, textarea {
|
|||
content: '';
|
||||
}
|
||||
&.active {
|
||||
background-color: #F9B417;
|
||||
background-color:var(--blue-1);
|
||||
&:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 17H13V13H17V11H13V7H11V11H7V13H11V17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#0070BA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,10 +1,3 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2307_21664)">
|
||||
<path d="M12 15L7 10H17L12 15Z" fill="#86898E"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2307_21664">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<path d="M12 15L7 10H17L12 15Z" fill="#0070BA"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 300 B After Width: | Height: | Size: 152 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.0001 12L0.600098 10.6L5.2001 6L0.600098 1.4L2.0001 0L8.0001 6L2.0001 12Z" fill="#86898E"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M16.0001 12L10.0001 18L8.6001 16.6L13.2001 12L8.6001 7.4L10.0001 6L16.0001 12Z" fill="#0070BA"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 204 B After Width: | Height: | Size: 208 B |
Loading…
Reference in New Issue