Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

right menu

master
Boris Voropaev 2023-09-20 14:22:11 +03:00
parent 89c2acb0cd
commit c722395a6e
9 changed files with 108 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/_modules/pages/menu/item/pages-menu-item.component.html
View File

@ -1,7 +1,7 @@
<div class="expand" [ngClass]="{toggle:children?.length, open:showChildren}" (click)="showChildren=!showChildren"></div>
<a [routerLink]="item.depth>=2?null:item.link" routerLinkActive="active" (click)="select(item)"
[ngClass]="{'active-mob':item.link==currentURL}"><span>{{item.name}}</span></a>
[ngClass]="{'current-item':item.link==currentURL,'parent-item':parentItem}"><span>{{item.name}}</span></a>
<pages-menu *ngIf="children?.length" [items]="children"
(onSelected)="select($event)" [ngClass]="{'hide-children':!showChildren}"></pages-menu>
(onSelected)="select($event)" [ngClass]="{'hide-children':!showChildren,'current-item':item.link==currentURL,'parent-item':parentItem}"></pages-menu>

4
src/app/_modules/pages/menu/item/pages-menu-item.component.ts
View File

@ -25,6 +25,10 @@ export class PagesMenuItemComponent {
return this.item?.children?.data;
}
get parentItem(){
return this.currentURL.startsWith(this.item.link)
}
ngOnInit() {
}

3
src/app/_modules/pages/menu/pages-menu.component.ts
View File

@ -19,7 +19,7 @@ export class PagesMenuComponent {
get visibleItems() {
return this.items.filter(item => {
return this.items?.filter(item => {
return this.hiddenPages.indexOf(item.link) === -1;
});
}
@ -41,5 +41,4 @@ export class PagesMenuComponent {
});
return item.depth
}
}

5
src/app/_modules/pages/page/page.component.html
View File

@ -7,7 +7,7 @@
</div>
<div class="limiter">
<div class="line">
<h1>{{pageTopName||page?.name}}</h1>
<h1 *ngIf="!loading">{{pageTopName}}</h1>
</div>
</div>
</div>
@ -29,7 +29,8 @@
<tk-structure-page *ngSwitchCase="'tk-structure'" [page]="page" [editMode]="editMode"></tk-structure-page>
<p *ngSwitchDefault>Page type {{page?.type?.name}} is undefined</p>
</div>
<div class="sub-menu" *ngIf="menuItems&&menuItems.length">
<div class="sub-menu">
<!-- <pre>{{page.children.data.length|json}}</pre> -->
<pages-menu [items]="menuItems" (onSelected)="itemSelect($event)"></pages-menu>
<!-- <pre>{{menuItems|json}}</pre> -->
</div>

6
src/app/_modules/pages/page/page.component.scss
View File

@ -87,10 +87,8 @@
flex-grow: 0;
flex-shrink: 0;
flex-basis: 360px;
padding: 20px;
border-radius: 8px;
background: #FFF;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
width: 360px;
margin-top: 40px;
}
}

31
src/app/_modules/pages/page/page.component.ts
View File

@ -39,14 +39,26 @@ export class PageComponent {
}
get pageTopName(){
return this.page?.parents?.data[1]?.name;
let item:any;
let name:string
if(this.menuItems){
item = this.menuItems.find(item=>this.page.link.startsWith(item.link))
name= item?.name;
if (item?.depth>=2){
item = item.children.data.find(item=>this.page.link.startsWith(item.link))
name= item?.name;
}
}
return name||this.page.name;
}
ngOnInit() {
// this.fetchMenu();
this.listsService.controls().subscribe(res => {
this.inited ? this.fetch() : this.inited = true;
this.fetchMenu();
});
}
ngOnDestroy() {
@ -76,14 +88,21 @@ export class PageComponent {
'children.children'
];
this.pagesService.find(this.url, {include: include.join(',')}).subscribe(res => {
this.page = res?.data;
this.menuItems = res?.data.children.data;
this.page = res?.data;
this.loading = false;
}, error => {
this.loading = false;
});
}
fetchMenu() {
let include = ['children.children'];
this.pagesService.root({include: include.join(',')}).subscribe(res => {
this.menuItems = res.data;
});
}
toggleEditMode() {
this.editMode = !this.editMode;
}
@ -92,6 +111,10 @@ export class PageComponent {
this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.page.id}}});
}
itemSelect(event){
console.log('EVENT',event)
}
removeBackground() {
if (confirm('Вы деествительно хотите удалить этот фон?')) {
this.pagesService.deleteBackground(this.page.id).subscribe(res => {

4
src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss
View File

@ -37,9 +37,9 @@
}
.image {
img{
width: 273px;
width: 265px;
object-fit: cover;
height: 204px;
height: 190px;
border-radius: 12px;
border: 1px solid rgba(45, 45, 45, 0.27);
}

4
src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss
View File

@ -42,7 +42,7 @@
display: flex;
flex-direction: column;
flex-grow: 0;
flex-basis: 270px;
flex-basis: 253px;
gap: 16px;
overflow: hidden;
>*{
@ -58,7 +58,7 @@
// background: url("/assets/images/view-man.svg") center no-repeat;
object-fit: cover;
height: 370px;
height: 338px;
border-radius: 12px;
border: 1px solid rgba(45, 45, 45, 0.27);

68
src/assets/css/main-menu.scss
View File

@ -1,7 +1,7 @@
@media screen and (max-width: 1330px){
.sub-menu{ display: none};
.grid-menu {
a{
@ -82,7 +82,7 @@
}
a.active-mob span{
a.current-item span{
border-bottom: 2px solid rgba(255, 255, 255, 0.63);
}
}
@ -122,7 +122,7 @@
font-style: normal;
font-weight: 400;
line-height: 32px;
&.active-mob{
&.current-item{
>span{
display: inline-block;
border-bottom: 2px solid #0070BA;
@ -180,8 +180,70 @@
.sub-menu{
pages-menu {
display: block;
padding-left: 8px;
}
a{
display: inline-block;
margin-bottom: 20px;
}
>pages-menu {
display: flex;
flex-direction: column;
>pages-menu-item{
>a{
display: none;
};
a{
span{
color: #6C6C6C;
font-family: PT Sans Narrow;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 133.333% */
letter-spacing: 0.24px;
}
}
:hover{
color:var(--blue-2)
}
.current-item{
color:var(--blue-1)
}
>pages-menu{
padding: 20px;
border-radius: 8px;
background: #FFF;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
}
>pages-menu:not(.parent-item){
display: none;
}
}
>pages-menu-item.depth{
>pages-menu{
>pages-menu-item{
>a{display: none;}
pages-menu{
display: none;
&.parent-item{
display: block;
}
}
}
}
}
}
}