fix add-section css

master
Boris Voropaev 2023-11-07 10:18:53 +03:00
parent 902dc39b88
commit 87b9571f68
8 changed files with 48 additions and 89 deletions

View File

@ -141,7 +141,7 @@ body {
}
.menu{
position: absolute;
left: 0px;
left: 40px;
top: 32px;
}
}

View File

@ -1,3 +1,11 @@
add-section{
position: relative;
.dropdown{
top:22px;
left:0px;
}
}
.dropdown {
position: absolute;
width: 250px;

View File

@ -10,39 +10,3 @@
</div>
<!-- <div class="header">
<div class="bottom">
<a href="/glavnaia/" class="logo hidemobile"></a>
<div class="grid-menu" >
<button class="close" (click)="showBottom=false"></button>
<pages-menu [items]="menuItems" (onSelected)="itemSelect($event)"></pages-menu>
<a class="ais">АИС СЦ ВНИИГАЗ</a>
</div>
<div class="right" style="position: relative;">
<a href="/glavnaia/" class="logo showmobile"></a>
<a class="btn hidemobile" href="https://ais.vniigaz-cert.ru/" target="_blank">АИС СЦ ВНИИГАЗ</a>
<header-user-bar *ngIf="user" [user]="user"></header-user-bar>
</div>
</div>
</div>
<div class="header showmobile" *ngIf="showBottom">
<retainer></retainer>
<div class="bottom">
<div class="grid-menu">
<div class="left-block">
<button class="close" (click)="showBottom=false"></button>
<pages-menu [items]="menuItems" (onSelected)="itemSelect($event)"></pages-menu>
<a class="ais" href="https://ais.vniigaz-cert.ru/" target="_blank">АИС СЦ ВНИИГАЗ</a>
</div>
</div>
<div class="fog" (click)="showBottom=false" [ngClass]="{hidemobile:!showBottom,showmobile:showBottom}"></div>
</div>
</div> -->

View File

@ -1,5 +1,4 @@
import {Component} from '@angular/core';
import {PagesService} from "@app/_services/pages.service";
import {AuthenticationService, ListsService} from "@app/_services";
import {Subscription} from "rxjs";
import { Router } from '@angular/router';
@ -11,17 +10,13 @@ import { html } from '@environments/htmlenv';
styleUrls: ['header.component.scss']
})
export class HeaderComponent {
public menuItems = <any>[];
public user: any;
public loading: boolean = false;
public error: string = '';
routeSubscription?: Subscription;
subscription: Subscription;
showMobileMenu = false;
constructor(
private router:Router,
private pagesService: PagesService,
public authenticationService: AuthenticationService,
private listsService: ListsService) {
this.subscription = this.authenticationService.user.subscribe(user => {

View File

@ -1,41 +1,23 @@
<div (mouseleave)="hideDD()">
<div class="header">
<a class="toggle" [class.active]="ddVisible" (click)="toggleDD()">
<ico ico="plus_filled_24" [color]="ddVisible?'var(--active)':null" [size]="24"></ico>
<span [style.color]="ddVisible?'var(--active)':null">Добавить элемент</span>
<drop-down [visible]="ddVisible" [target]="menu"></drop-down>
</a>
<div class="add" (mouseleave)="hideDD()">
<div class="toggle prime" [class.active]="ddVisible" (click)="toggleDD()">
<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>
<div class="dropdown" #menu>
<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)">
<div class="title">{{type.title}}</div>
<drop-down ico="expand_less_24" [target]="submenu" [visible]="sub[i]" [angle] = "[180,0]"></drop-down>
</div>
<div class="menu" #menu>
<div *ngFor="let type of types" class="block">
<div *ngIf="type?.children?.data?.length > 0; else addItem">
<a class="item" (click)="subClick(type)">
{{type.title}}
<drop-down [visible]="type.showChilren" [target]="submenu"></drop-down>
</a>
<div #submenu>
<div *ngFor="let childrenType of type?.children?.data" class="block"
(click)="add(childrenType.name)">
<div [innerText]="childrenType.title" class="item"></div>
<div class="sub-row" *ngFor="let childrenType of type?.children?.data" (click)="add(childrenType.name)" [innerText]="childrenType.title"></div>
</div>
</div>
</div>
<ng-template #addItem>
<div (click)="add(type.name)">
<div [innerText]="type.title" class="item"></div>
</div>
<div class="row" (click)="add(type.name)"><div class="title" [innerText]="type.title"></div></div>
</ng-template>
</div>
</div>
</div>
</div>

View File

@ -12,6 +12,7 @@ export class AddSectionComponent {
@Input() modelType: string;
public types = <any>[];
public ddVisible = false;
public sub:boolean[] =[]
constructor(private formsService: FormsService, private objectsService: ObjectsService) {
}
@ -22,7 +23,7 @@ export class AddSectionComponent {
fetchTypes() {
this.objectsService.fetchType('page-section', {include: 'children.children.children.children'}).subscribe(res => {
this.objectsService.fetchType('page-section', {include: 'children.children'}).subscribe(res => {
this.types = res.data?.children?.data;
this.types = this.types.map(item => {
item.parent = item?.children?.data?.length > 0;
@ -31,7 +32,6 @@ export class AddSectionComponent {
});
});
}
add(type: string) {
this.types = this.types.map(item => {
item.showChilren = false;
@ -42,15 +42,25 @@ export class AddSectionComponent {
this.hideDD();
}
submenu(type: any) {
this.types = this.types.map(item => {
item.showChilren = item.showChilren ? false : item.id === type.id;
return item;
});
}
toggleDD() {
this.ddVisible = !this.ddVisible;
}
showDD() {
this.ddVisible = true;
}
hideDD() {
this.ddVisible = false;
}
subClick(type){
type.showChilren = !type.showChilren;
toggleSub(i:number){
let val=!this.sub[i];
this.sub = this.sub.map(item=>false);
this.sub[i]=val;
}
}

View File

@ -1,16 +1,16 @@
<div class="menu" *ngIf="editMode">
<div class="block">
<a type="button" *ngIf="!isFirst" (click)="move(ord - 1)">
<ico ico="upward_24"></ico>
<ico ico="arrow_upward_24"></ico>
</a>
<a type="button" *ngIf="!isLast" (click)="move(ord + 1)">
<ico ico="downward_24"></ico>
<ico ico="arrow_downward_24"></ico>
</a>
<a type="button" (click)="edit()">
<ico ico="edit_24"></ico>
</a>
<a type="button" (click)="delete()">
<ico ico="trash_24"></ico>
<ico ico="delete_24"></ico>
</a>
</div>
</div>

View File

@ -7,7 +7,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
})
export class DropDownComponent {
@Input() ico = 'drop_down_24';
@Input() ico = 'arrow_drop_down_24';
@Input() angle = [0,-180];
@Input() visible = false;
@Input() target:HTMLElement;