fix add-section css

projects/app-vniigaz/src/assets/css/basics.scss

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

projects/app-vniigaz/src/assets/css/dropdown.scss

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

projects/app-vniigaz/src/assets/html/header.component.html

@@ -8,41 +8,5 @@
   <pages-menu class="top-menu"></pages-menu>
   <a class="btn vnii" href="https://ais.vniigaz-cert.ru/" target="_blank">АИС СЦ ВНИИГАЗ</a>
 </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> -->
-
 
 

projects/app-vniigaz/src/assets/html/left-content.component.html

@@ -1,15 +1,2 @@
-<div class="background"  [ngStyle]="{'background-image':background}" *ngIf="pageName">
-    <div class="left-content">
-        <header-user-bar></header-user-bar>
-        <h1 class="h1-jumbotron">
-            {{pageName}}
-        </h1>
-        <div class="menu" *ngIf="editMode">
-            <div class="block">
-                <a (click)="editBackground()"><ico ico="edit_24"></ico></a>
-                <a (click)="removeBackground()"><ico ico="delete_24"></ico></a>
-            </div>
-        </div>      
-    </div>
-</div>
+<jumbotron></jumbotron>
 <edit-switch></edit-switch>

projects/app/_modules/layout/header/header.component.ts

@@ -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 => {

projects/app/_modules/layout/left-content/left-content.component.ts

@@ -1,8 +1,4 @@
 import { Component } from '@angular/core';
-import { Router, NavigationEnd } from '@angular/router';
-import { Subscription } from "rxjs";
-import { PagesService } from '@app/_services/pages.service';
-import { FormsService } from '@app/_services';
 import { html } from '@environments/htmlenv';
 
 
@@ -13,56 +9,6 @@ import { html } from '@environments/htmlenv';
 })
 export class LeftContentComponent {
 
-  public url: string = "";
-  public background:string;
-  public pageName:string;
-  public editable:string;
-  public editMode: boolean = false;
-  private pageID: string;
-  private routeSubscription: Subscription;
-
-
-
-  constructor(
-    private router: Router,
-    private pagesService:PagesService,
-    private formsService: FormsService) {
-    
-  }
-
-  ngOnInit(){
-    this.pagesService.editMode.subscribe(
-      mode => {
-        this.editMode = mode;
-      }
-    )
-    this.pagesService.currentPage.subscribe(
-      page => {
-        if (page){
-          this.background = page.image?.data?.links?.full;
-          if (this.background) this.background = `url(${this.background})`;
-          this.pageName = (page.parents?.data[2]||page).name;
-          this.editable = page.permissions?.edit || page.permissions?.anything;
-          this.pageID = page.id
-        }else{
-          this.pageName = null;
-          this.editable = null;
-          this.pagesService.editMode.next(false)
-        }
-      }
-    )
-  }
-
-  editBackground() {
-    this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.pageID}}});
-  }
-
-  removeBackground() {
-    if (confirm('Вы деествительно хотите удалить этот фон?')) {
-      this.pagesService.deleteBackground(this.pageID).subscribe(res => {
-      });
-    }
-  }
 
 }
 

projects/app/_modules/pages/sections/add/add-section.component.html

@@ -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>
-
-
-
-<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 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 #submenu>
-          <div *ngFor="let childrenType of type?.children?.data"  class="block"
-          (click)="add(childrenType.name)">
-            <div [innerText]="childrenType.title" class="item"></div>
-          </div>
-        </div>        
-    </div>
-
-    <ng-template #addItem>
-      <div (click)="add(type.name)">
-        <div [innerText]="type.title" class="item"></div>
+          <div class="sub-row" *ngFor="let childrenType of type?.children?.data" (click)="add(childrenType.name)" [innerText]="childrenType.title"></div>
+        </div>
+        <ng-template #addItem>
+          <div class="row" (click)="add(type.name)"><div class="title" [innerText]="type.title"></div></div>
+        </ng-template>
       </div>
-    </ng-template>
-
+    </div>
   </div>
 </div>
-
-</div>
-

projects/app/_modules/pages/sections/add/add-section.component.ts

@@ -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;
   }
 }

projects/app/_modules/pages/sections/menu/page-menu.component.html

@@ -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>

projects/app/_modules/viget/drop-down/drop-down.component.ts

@@ -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;

projects/app/_modules/viget/jumbotron/jumbotron.component.html

@@ -0,0 +1,14 @@
+<div class="background"  [ngStyle]="{'background-image':background}" *ngIf="pageName">
+    <div class="left-content">
+        <header-user-bar></header-user-bar>
+        <h1 class="h1-jumbotron">
+            {{pageName}}
+        </h1>
+        <div class="menu" *ngIf="editMode">
+            <div class="block">
+                <a (click)="editBackground()"><ico ico="edit_24"></ico></a>
+                <a (click)="removeBackground()"><ico ico="delete_24"></ico></a>
+            </div>
+        </div>      
+    </div>
+</div>

projects/app/_modules/viget/jumbotron/jumbotron.component.ts

@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from "rxjs";
+import { PagesService } from '@app/_services/pages.service';
+import { FormsService } from '@app/_services';
+
+@Component({
+  selector: 'jumbotron',
+  templateUrl: './jumbotron.component.html',
+  styleUrls: ['./jumbotron.component.scss']
+})
+export class Jumbotron {
+    public url: string = "";
+    public background:string;
+    public pageName:string;
+    public editable:string;
+    public editMode: boolean = false;
+    private pageID: string;
+    private routeSubscription: Subscription;
+  
+  
+  
+    constructor(
+      private router: Router,
+      private pagesService:PagesService,
+      private formsService: FormsService) {
+      
+    }
+  
+    ngOnInit(){
+      this.pagesService.editMode.subscribe(
+        mode => {
+          this.editMode = mode;
+        }
+      )
+      this.pagesService.currentPage.subscribe(
+        page => {
+          if (page){
+            this.background = page.image?.data?.links?.full;
+            if (this.background) this.background = `url(${this.background})`;
+            this.pageName = (page.parents?.data[2]||page).name;
+            this.editable = page.permissions?.edit || page.permissions?.anything;
+            this.pageID = page.id
+          }else{
+            this.pageName = null;
+            this.editable = null;
+            this.pagesService.editMode.next(false)
+          }
+        }
+      )
+    }
+  
+    editBackground() {
+      this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.pageID}}});
+    }
+  
+    removeBackground() {
+      if (confirm('Вы деествительно хотите удалить этот фон?')) {
+        this.pagesService.deleteBackground(this.pageID).subscribe(res => {
+        });
+      }
+    }
+}
+
+ 
+

projects/app/_modules/viget/viget.module.ts

@@ -7,6 +7,7 @@ import {DropDownComponent } from "./drop-down/drop-down.component";
 import { SliderComponent } from './slider/slider.component';
 import { SwitchComponent } from './switch/switch.component';
 import { EditSwitch } from "./edit-switch/edit-switch.component";
+import { Jumbotron } from "./jumbotron/jumbotron.component";
 
 
 @NgModule({
@@ -20,7 +21,8 @@ import { EditSwitch } from "./edit-switch/edit-switch.component";
         DropDownComponent,
         SliderComponent,
         SwitchComponent,
-        EditSwitch
+        EditSwitch,
+        Jumbotron
     ],
     exports: [
         IcoComponent,
@@ -28,7 +30,8 @@ import { EditSwitch } from "./edit-switch/edit-switch.component";
         DropDownComponent,
         SliderComponent,
         SwitchComponent,
-        EditSwitch
+        EditSwitch,
+        Jumbotron
     ]
 })
 export class VigetModule {