new grid
Boris Voropaev
parent
f289492f49
commit
1e10a7b1dc
|
|
@ -4,12 +4,24 @@
|
|||
|
||||
|
||||
|
||||
<div class="wrapper {{classActive}}">
|
||||
<!-- <div class="wrapper {{classActive}}">
|
||||
<header></header>
|
||||
<div class="content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<footer></footer>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div class="wrapper">
|
||||
<header></header>
|
||||
<div class="content">
|
||||
<left-content></left-content>
|
||||
<div class="main-content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<!-- <right-content></right-content> -->
|
||||
</div>
|
||||
<footer></footer>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1 @@
|
|||
.wrapper {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
header, footer {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,23 @@
|
|||
<div class="header">
|
||||
<a class="burger">
|
||||
<ico ico="burger_blue_40dp"></ico>
|
||||
|
||||
</a>
|
||||
<a [routerLink]="'glavnaia'" class="logo" >
|
||||
<img src="assets/images/logo_vniigaz_1163x816.svg">
|
||||
</a>
|
||||
<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">
|
||||
<div class="main-menu-btn" (click)="showBottom=true">
|
||||
<button class=" clear"></button>
|
||||
</div>
|
||||
<a href="/glavnaia/" class="logo hidemobile"></a>
|
||||
<div class="grid-menu" >
|
||||
<button class="close" (click)="showBottom=false"></button>
|
||||
|
|
@ -28,7 +43,7 @@
|
|||
</div>
|
||||
<div class="fog" (click)="showBottom=false" [ngClass]="{hidemobile:!showBottom,showmobile:showBottom}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,185 +0,0 @@
|
|||
@media screen and (max-width: 1330px){
|
||||
|
||||
.hidemobile{
|
||||
display: none !important;
|
||||
}
|
||||
.header{
|
||||
flex-grow: 1;
|
||||
padding: 0px 24px;
|
||||
background-color: #FFF;
|
||||
min-height: 100%;
|
||||
|
||||
.bottom{
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
.main-menu-btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
button{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: url('~src/assets/images/icons/burger_blue_40dp.svg') no-repeat center;;
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
display: inline-flex;
|
||||
width:114px;
|
||||
height: 80px;
|
||||
margin: 12px 24px 12px 40px;
|
||||
background-image: url('~src/assets/images/logo_vniigaz_1163x816.svg');
|
||||
background-size: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.fog{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.grid-menu {
|
||||
display: none;
|
||||
}
|
||||
&.showmobile{
|
||||
position:fixed;
|
||||
top:0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color:rgba(45, 45, 45, 0.63);
|
||||
z-index:100;
|
||||
overflow-y: scroll;
|
||||
.bottom{
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
.grid-menu{
|
||||
overflow-y: scroll;
|
||||
.left-block{
|
||||
|
||||
}
|
||||
display: block;
|
||||
background: var(--prime-act);
|
||||
color: white;
|
||||
width: 480px;
|
||||
padding: 32px 40px;
|
||||
button.close{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent url('~src/assets/images/icons/close_white_24dp.svg') no-repeat center;
|
||||
}
|
||||
.ais{
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.63);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.right{
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1330px){
|
||||
.showmobile{
|
||||
display: none;
|
||||
}
|
||||
.header{
|
||||
position: relative;
|
||||
background-color: #FFF;
|
||||
.top{
|
||||
padding: 20px 0;
|
||||
background-color: var(--white);
|
||||
.limiter{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.main-menu-btn{
|
||||
display: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.menu{
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: normal;
|
||||
align-items: stretch;
|
||||
align-content: stretch;
|
||||
padding: 0 calc( (100% - 1400px) / 2);
|
||||
position: relative;
|
||||
.logo {
|
||||
width:114px;
|
||||
height: 80px;
|
||||
margin: 12px 24px 12px 60px;
|
||||
background-image: url('~src/assets/images/logo_vniigaz_1163x816.svg');
|
||||
background-size: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.grid-menu{
|
||||
display: flex;
|
||||
.close{
|
||||
display: none;
|
||||
}
|
||||
>a{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.main-menu {
|
||||
overflow: hidden;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ftr{
|
||||
display: none;
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
align-content: stretch;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-right: 60px;
|
||||
button{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
header-user-bar{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -96px;
|
||||
}
|
||||
|
|
@ -11,10 +11,10 @@ import {Subscription} from "rxjs";
|
|||
})
|
||||
export class HeaderComponent {
|
||||
public menuItems = <any>[];
|
||||
public user: any;
|
||||
|
||||
public loading: boolean = false;
|
||||
public error: string = '';
|
||||
subscriptionUser: Subscription;
|
||||
|
||||
showBottom = false;
|
||||
|
||||
controlsSubscriptionMenu: Subscription;
|
||||
|
|
@ -26,9 +26,7 @@ export class HeaderComponent {
|
|||
public authenticationService: AuthenticationService,
|
||||
private listsService: ListsService
|
||||
) {
|
||||
this.subscriptionUser = this.authenticationService.user.subscribe(user => {
|
||||
this.user = user;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -49,7 +47,7 @@ export class HeaderComponent {
|
|||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptionUser?.unsubscribe();
|
||||
|
||||
this.controlsSubscriptionMenu?.unsubscribe();
|
||||
this.resultSubscriptionMenu?.unsubscribe();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="user" (click)="ddHidden=!ddHidden"(mouseover)="ddHidden=false" (mouseleave)="ddHidden=true">
|
||||
<div class="user" (click)="ddHidden=!ddHidden"(mouseover)="ddHidden=false" (mouseleave)="ddHidden=true" *ngIf="user">
|
||||
<div class="avatar">
|
||||
<img *ngIf="avatar" [src]="avatar.links?.thumb" />
|
||||
<span *ngIf="!avatar" class="initials">{{user.initials}}</span>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,14 @@
|
|||
|
||||
|
||||
|
||||
|
||||
drop-down {
|
||||
|
||||
margin-top: 6px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media screen and (max-width: 1330px) {
|
||||
.user {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {AuthenticationService} from "@app/_services";
|
||||
import {Router} from "@angular/router";
|
||||
import {Subscription} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'header-user-bar',
|
||||
|
|
@ -8,11 +9,17 @@ import {Router} from "@angular/router";
|
|||
styleUrls: ['header-user-bar.component.scss']
|
||||
})
|
||||
export class HeaderUserBarComponent {
|
||||
@Input() user: any;
|
||||
public user: any;
|
||||
public menuItems = <any>[];
|
||||
public ddHidden = true;
|
||||
subscriptionUser: Subscription;
|
||||
|
||||
constructor(public authService: AuthenticationService, private router: Router) {
|
||||
constructor(
|
||||
public authService: AuthenticationService,
|
||||
private router: Router) {
|
||||
this.subscriptionUser = this.authService.user.subscribe(user => {
|
||||
this.user = user;
|
||||
});
|
||||
}
|
||||
|
||||
get avatar() {
|
||||
|
|
@ -26,6 +33,10 @@ export class HeaderUserBarComponent {
|
|||
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscriptionUser?.unsubscribe();
|
||||
}
|
||||
|
||||
|
||||
close() {
|
||||
setTimeout(() => {
|
||||
|
|
|
|||
|
|
@ -5,14 +5,12 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
|
|||
import { VigetModule } from '@app/_modules/viget/viget.module';
|
||||
|
||||
import {PagesModule} from "@app/_modules/pages/pages.module";
|
||||
import { PagesMenuModule } from '../pages/menu/pages-menu.module';
|
||||
import {HeaderComponent} from "@app/_modules/layout/header/header.component";
|
||||
import {FooterComponent} from "@app/_modules/layout/footer/footer.component";
|
||||
import {GridComponent} from "@app/_modules/layout/grid/grid.component";
|
||||
import {SettingSiteComponent} from "@app/_modules/layout/setting-site/setting-site.component";
|
||||
import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/header-user-bar.component";
|
||||
import { RetainerComponent } from './retainer/retainer.component';
|
||||
|
||||
import { LeftContentComponent } from './left-content/left-content.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -21,7 +19,6 @@ import { RetainerComponent } from './retainer/retainer.component';
|
|||
ReactiveFormsModule,
|
||||
RouterModule,
|
||||
PagesModule,
|
||||
PagesMenuModule,
|
||||
VigetModule
|
||||
],
|
||||
declarations: [
|
||||
|
|
@ -30,7 +27,7 @@ import { RetainerComponent } from './retainer/retainer.component';
|
|||
FooterComponent,
|
||||
SettingSiteComponent,
|
||||
HeaderUserBarComponent,
|
||||
// RetainerComponent,
|
||||
LeftContentComponent
|
||||
],
|
||||
exports: [
|
||||
GridComponent,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="background" [ngStyle]="{'background-image':background}">
|
||||
<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>
|
||||
<div class="edit-field" *ngIf="editable">
|
||||
<div class="edit-field-row switch-host" (click)="toggleEditMode()">
|
||||
Режим редактирования
|
||||
<switch [val]="editMode"></switch>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'left-content',
|
||||
templateUrl: './left-content.component.html',
|
||||
styleUrls: ['./left-content.component.scss']
|
||||
})
|
||||
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) {
|
||||
this.routeSubscription = this.router.events.subscribe(event => {
|
||||
if (event instanceof NavigationEnd) this.onNavigationEnd(event);
|
||||
});
|
||||
}
|
||||
|
||||
onNavigationEnd(event: NavigationEnd) {
|
||||
let url = event.url.split('(')[0];
|
||||
url = url.split('?')[0];
|
||||
if (url !== this.url) {
|
||||
this.url = url;
|
||||
this.fetch()
|
||||
}
|
||||
}
|
||||
|
||||
fetch(){
|
||||
let include = [
|
||||
'permissions',
|
||||
];
|
||||
this.pagesService.find(this.url, {include: include.join(',')}).subscribe(
|
||||
resp => {
|
||||
let page = resp.data;
|
||||
if (page){
|
||||
console.log(page);
|
||||
this.background = page.image?.data?.links?.full;
|
||||
if (this.background) this.background = 'url('+this.background+')';
|
||||
this.pageName = page.name;
|
||||
this.editable = page.permissions.edit || page.permissions.anything;
|
||||
this.pageID = page.id
|
||||
console.log(this.background);
|
||||
}
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
toggleEditMode(){
|
||||
this.editMode =!this.editMode;
|
||||
this.pagesService.editMode.next(this.editMode)
|
||||
}
|
||||
|
||||
editBackground() {
|
||||
this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.pageID}}});
|
||||
}
|
||||
|
||||
removeBackground() {
|
||||
if (confirm('Вы деествительно хотите удалить этот фон?')) {
|
||||
this.pagesService.deleteBackground(this.pageID).subscribe(res => {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
<div>AAA</div>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
::ng-deep app{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-retainer',
|
||||
templateUrl: './retainer.component.html',
|
||||
styleUrls: ['./retainer.component.scss']
|
||||
})
|
||||
export class RetainerComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
<div class="expand" [ngClass]="{toggle:children?.length, open:showChildren}" (click)="toggle()"></div>
|
||||
|
||||
<a routerLinkActive="active" (click)="click()"
|
||||
[ngClass]="cssClass"><span>{{item.name}}</span></a>
|
||||
|
||||
<pages-menu *ngIf="children?.length" [items]="children"
|
||||
(onSelected)="select($event)" [ngClass]="cssClass"></pages-menu>
|
||||
<div class="item" [ngClass]="itemClass">
|
||||
<drop-down *ngIf="children?.length"
|
||||
ico="chevron_right_24" [visible]="toggle" [target]="menu" [angle]="[0,90]">
|
||||
</drop-down>
|
||||
<a [routerLink]="item.link">
|
||||
{{item.name}}
|
||||
</a>
|
||||
</div>
|
||||
<div #menu class="sub-menu" [ngClass]="menuClass">
|
||||
<pages-menu *ngIf="children?.length" [items]="children" [lavel]="lavel+1"></pages-menu>
|
||||
</div>
|
||||
|
|
@ -1 +1,17 @@
|
|||
:host{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
drop-down{
|
||||
margin-left: -24px;
|
||||
}
|
||||
min-height: 24px;
|
||||
>a{
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, Output,OnInit} from '@angular/core';
|
||||
import { Router} from '@angular/router';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
|
|
@ -9,15 +9,12 @@ import {Subscription} from 'rxjs';
|
|||
})
|
||||
export class PagesMenuItemComponent {
|
||||
@Input() item: any;
|
||||
@Output() onSelected = new EventEmitter();
|
||||
showChildren = false;
|
||||
@Input() lavel: number;
|
||||
public toggle=false;
|
||||
|
||||
currentURL:string;
|
||||
constructor(private router: Router) {
|
||||
router.events.subscribe((event:any)=>{
|
||||
if(event.url)this.currentURL = event.url
|
||||
})
|
||||
this.currentURL = router.url
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -25,39 +22,39 @@ export class PagesMenuItemComponent {
|
|||
return this.item?.children?.data;
|
||||
}
|
||||
|
||||
get parentItem(){
|
||||
ngOnInit(){
|
||||
this.currentURL = this.router.url;
|
||||
this.toggle = this.current||this.parent;
|
||||
this.router.events.subscribe((event:any)=>{
|
||||
if (event.url){
|
||||
this.currentURL = event.url;
|
||||
this.toggle = this.current||this.parent;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
get parent(){
|
||||
return this.currentURL.startsWith(this.item.link)
|
||||
}
|
||||
|
||||
get link(){
|
||||
return ( this.item.depth>0 && this.item.parents?.data.length==1 )?null:this.item.link
|
||||
get current(){
|
||||
return this.currentURL==this.item.link
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.showChildren = this.parentItem;
|
||||
}
|
||||
|
||||
toggle(){
|
||||
this.showChildren=!this.showChildren
|
||||
}
|
||||
|
||||
click(){
|
||||
if (this.link) {
|
||||
this.select(this.item)
|
||||
this.router.navigate([this.link])
|
||||
}else{
|
||||
this.toggle()
|
||||
get menuClass(){
|
||||
let menuClass = {
|
||||
selected: this.toggle
|
||||
}
|
||||
menuClass['lavel-'+(this.lavel+1)] = true;
|
||||
return menuClass
|
||||
}
|
||||
|
||||
select(item:any){
|
||||
this.onSelected.emit(item);
|
||||
get itemClass(){
|
||||
let itemClass = {
|
||||
selected: this.toggle,
|
||||
parent: this.parent&&!this.current,
|
||||
current: this.current
|
||||
}
|
||||
return itemClass
|
||||
}
|
||||
get cssClass(){
|
||||
return {
|
||||
'hide-children':!this.showChildren,
|
||||
'current-item':this.item.link==this.currentURL,
|
||||
'parent-item':this.parentItem }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
<pages-menu-item
|
||||
(click)="setOpen(i,!open[i])"
|
||||
(mouseleave)="setOpen(i,false)"
|
||||
(mouseover)="setOpen(i,true)"
|
||||
(onSelected)="itemSelect($event)"
|
||||
[class.opened]="open[i]"
|
||||
[class.depth]="getDepth(item)"
|
||||
[item]="item" *ngFor="let item of visibleItems; let i=index;">
|
||||
<pages-menu-item [item]="item" [lavel]="lavel"
|
||||
*ngFor="let item of visibleItems">
|
||||
</pages-menu-item>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
:host(pages-menu){
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
pages-menu{
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
|
@ -1,44 +1,46 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, Output, OnInit} from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { PagesService } from '@app/_services/pages.service';
|
||||
|
||||
@Component({
|
||||
selector: 'pages-menu',
|
||||
templateUrl: 'pages-menu.component.html',
|
||||
styleUrls: ['pages-menu.component.scss']
|
||||
})
|
||||
export class PagesMenuComponent {
|
||||
@Input() items = <any>[];
|
||||
@Output() onSelected = new EventEmitter();
|
||||
public open:boolean[]=[]
|
||||
export class PagesMenuComponent implements OnInit {
|
||||
@Input() items: any[];
|
||||
@Input() lavel = 0;
|
||||
|
||||
|
||||
private currentURL:string;
|
||||
private root = false;
|
||||
|
||||
constructor(
|
||||
private pagesService: PagesService,
|
||||
private router: Router,
|
||||
|
||||
){
|
||||
router.events.subscribe((event:any)=>{
|
||||
if(event.url)this.currentURL = event.url
|
||||
})
|
||||
this.currentURL = router.url
|
||||
}
|
||||
|
||||
|
||||
private hiddenPages = ['/o-tsentre/protivodeistvie-korruptsii', '/o-tsentre/zashchita-personalnykh-dannykh', '/o-tsentre/okhrana-truda'];
|
||||
|
||||
|
||||
|
||||
get visibleItems() {
|
||||
return this.items?.filter(item => {
|
||||
return this.hiddenPages.indexOf(item.link) === -1;
|
||||
});
|
||||
}
|
||||
|
||||
itemSelect(event:any){
|
||||
this.onSelected.emit(event);
|
||||
}
|
||||
ngOnInit() {
|
||||
|
||||
setOpen(i:number,open:boolean){
|
||||
this.open=[];
|
||||
this.open[i]=open;
|
||||
if (!this.items){
|
||||
this.root = true;
|
||||
this.pagesService.pagesTree.subscribe(res=>{
|
||||
this.items = res.data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getDepth(item){
|
||||
if (item.hasOwnProperty('depth')) return item.depth
|
||||
if (!item.hasOwnProperty('depth')) item.depth=0;
|
||||
if (item.children?.data.length) {
|
||||
item.depth = 1;
|
||||
item.children.data.forEach(child => {
|
||||
let childDepth = this.getDepth(child)
|
||||
if (childDepth>=item.depth) item.depth=childDepth+1;
|
||||
});
|
||||
}
|
||||
return item.depth
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
import {PagesMenuComponent} from "@app/_modules/pages/menu/pages-menu.component";
|
||||
import {PagesMenuItemComponent} from "@app/_modules/pages/menu/item/pages-menu-item.component";
|
||||
import {RouterModule} from "@angular/router";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
|
||||
],
|
||||
declarations: [
|
||||
PagesMenuComponent,
|
||||
PagesMenuItemComponent,
|
||||
|
||||
],
|
||||
exports: [
|
||||
PagesMenuComponent,
|
||||
|
||||
]
|
||||
})
|
||||
export class PagesMenuModule {}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<slider [width]="'320px'" side="left">
|
||||
|
||||
<div body>
|
||||
<pages-menu ></pages-menu>
|
||||
<div class="btn-menu">
|
||||
<div>
|
||||
<a>МТК 523</a>
|
||||
<a>Портал ТК 023</a>
|
||||
</div>
|
||||
<div>
|
||||
<button>
|
||||
<ico [size]="24" ico="search_24"></ico>
|
||||
Поиск
|
||||
</button>
|
||||
<button>
|
||||
<ico [size]="24" ico="en_24"></ico>
|
||||
English
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</slider>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'slider-menu',
|
||||
templateUrl: './slider-menu.component.html',
|
||||
styleUrls: ['./slider-menu.component.scss']
|
||||
})
|
||||
export class SliderMenuComponent {
|
||||
|
||||
}
|
||||
|
|
@ -1,22 +1,4 @@
|
|||
<div class="content" *ngIf="page">
|
||||
<div class="row">
|
||||
<div class="page-header" style="background-image: url('{{page?.image?.data?.links?.full}}')">
|
||||
<div class="block" *ngIf="editMode">
|
||||
<button (click)="editBackground()" class="edit"></button>
|
||||
<button (click)="removeBackground()" class="delete"></button>
|
||||
</div>
|
||||
<div class="limiter">
|
||||
<div class="line">
|
||||
<h1>{{pageTopName}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="limiter nav-info" *ngIf="isEditable">
|
||||
<div class="col right" (click)="toggleEditMode()">
|
||||
<div class="label">Режим редактирования</div><div class="switch" [class.active]="editMode"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="limiter">
|
||||
<page-breadcrumbs [page]="page"></page-breadcrumbs>
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -44,8 +44,10 @@ export class PageComponent {
|
|||
ngAfterContentInit() {
|
||||
this.listsService.controls().subscribe(res => {
|
||||
this.inited ? this.fetch() : this.inited = true;
|
||||
|
||||
});
|
||||
});
|
||||
this.pagesService.editMode.subscribe(
|
||||
mode=>this.editMode = mode
|
||||
)
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
|
|
@ -102,22 +104,5 @@ export class PageComponent {
|
|||
}
|
||||
|
||||
|
||||
toggleEditMode() {
|
||||
this.editMode = !this.editMode;
|
||||
}
|
||||
|
||||
editBackground() {
|
||||
this.formsService.createModel('page-background', {extraProps: {attach: {pageId: this.page.id}}});
|
||||
}
|
||||
|
||||
itemSelect(event){
|
||||
|
||||
}
|
||||
|
||||
removeBackground() {
|
||||
if (confirm('Вы деествительно хотите удалить этот фон?')) {
|
||||
this.pagesService.deleteBackground(this.page.id).subscribe(res => {
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import {RegistriesModule} from "@app/_modules/registries/registries.module";
|
|||
import {PublicationsModule} from "@app/_modules/publications/publications.module";
|
||||
import {TkStructurePageComponent} from "@app/_modules/pages/page/types/tk-structure/tk-structure-page.component";
|
||||
import {HomepageModule} from "@app/_modules/pages/home/homepage.module";
|
||||
import { PagesMenuModule } from './menu/pages-menu.module';
|
||||
|
||||
const routes: Routes = [
|
||||
{path: '', component: HomepageComponent},
|
||||
|
|
@ -29,8 +28,7 @@ const routes: Routes = [
|
|||
PageSectionsModule,
|
||||
PageSidebarsModule,
|
||||
RegistriesModule,
|
||||
PublicationsModule,
|
||||
PagesMenuModule
|
||||
PublicationsModule
|
||||
],
|
||||
declarations: [
|
||||
PageComponent,
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import {RegistriesModule} from "@app/_modules/registries/registries.module";
|
|||
import {PublicationsModule} from "@app/_modules/publications/publications.module";
|
||||
import {PagesListComponent} from "@app/_modules/pages/list/pages-list.component";
|
||||
import {PagesListItemComponent} from "@app/_modules/pages/list/item/pages-list-item.component";
|
||||
import {PagesMenuComponent} from "@app/_modules/pages/menu/pages-menu.component";
|
||||
import {PagesMenuItemComponent} from "@app/_modules/pages/menu/item/pages-menu-item.component";
|
||||
import {RouterModule} from "@angular/router";
|
||||
import {PaginationModule} from "@app/_modules/pagination/pagination.module";
|
||||
import {SearchSectionsComponent} from "@app/_modules/pages/sections/search/search-sections.component";
|
||||
|
|
@ -14,6 +16,8 @@ import {SwiperModule} from "swiper/angular";
|
|||
import {PagesTreeComponent} from "@app/_modules/pages/tree/pages-tree.component";
|
||||
import {PagesTreeItemComponent} from "@app/_modules/pages/tree/item/pages-tree-item.component";
|
||||
import {SortablejsModule} from "ngx-sortablejs";
|
||||
import { VigetModule } from '../viget/viget.module';
|
||||
import { SliderMenuComponent } from './menu/slider-menu/slider-menu.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -26,20 +30,24 @@ import {SortablejsModule} from "ngx-sortablejs";
|
|||
PaginationModule,
|
||||
SwiperModule,
|
||||
SortablejsModule,
|
||||
VigetModule
|
||||
],
|
||||
declarations: [
|
||||
PagesMenuComponent,
|
||||
PagesMenuItemComponent,
|
||||
PagesListComponent,
|
||||
PagesListItemComponent,
|
||||
PagesTreeComponent,
|
||||
PagesTreeItemComponent,
|
||||
SearchSectionsComponent,
|
||||
SearchSectionsItemComponent,
|
||||
SliderMenuComponent,
|
||||
],
|
||||
exports: [
|
||||
PagesMenuComponent,
|
||||
PagesListComponent,
|
||||
SearchSectionsComponent,
|
||||
PagesTreeComponent,
|
||||
PagesTreeItemComponent,
|
||||
]
|
||||
})
|
||||
export class PagesModule {}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
$bull: 12px;
|
||||
$bull: 18px;
|
||||
$offset: 2px;
|
||||
$track: 14px;
|
||||
$track: 20px;
|
||||
div{
|
||||
border: 1px solid var(--second);
|
||||
display: inline-flex;
|
||||
|
|
@ -9,7 +9,7 @@ div{
|
|||
div{
|
||||
width: $bull;
|
||||
height: $bull;
|
||||
background-color: var(--second);
|
||||
background-color: var(--second-dis);
|
||||
border-radius: 50%;
|
||||
margin: $offset $track $offset $offset;
|
||||
border: none;
|
||||
|
|
@ -30,18 +30,21 @@ div.off{
|
|||
animation: switch-off 0.1s;
|
||||
}
|
||||
}
|
||||
::ng-deep .switch-host{
|
||||
cursor: pointer;
|
||||
}
|
||||
:host-context(.switch-host:hover){
|
||||
div.on{
|
||||
background-color: var(--active);
|
||||
background-color: var(--prime-act);
|
||||
div{
|
||||
background-color: var(--white);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
div{
|
||||
border-color: var(--active);
|
||||
border-color: var(--prime-act);
|
||||
div{
|
||||
background-color: var(--active);
|
||||
background-color: var(--prime-act);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,27 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {HttpClient} from '@angular/common/http';
|
||||
import {environment} from '@environments/environment';
|
||||
import {Observable} from "rxjs";
|
||||
import {Observable, BehaviorSubject} from "rxjs";
|
||||
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class PagesService {
|
||||
constructor(private http: HttpClient) {
|
||||
this.pagesTree = new BehaviorSubject({data:[]})
|
||||
this.changedPages()
|
||||
}
|
||||
|
||||
public pagesTree: BehaviorSubject<any>
|
||||
public editMode = new BehaviorSubject<boolean>(false);
|
||||
|
||||
changedPages(){
|
||||
let include = ['children.children.children.children.children.children.children'];
|
||||
this.root({include: include.join(',')}).subscribe(res => {
|
||||
this.pagesTree.next(res)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
root(params?: {}): Observable<any> {
|
||||
return this.http.get(`${environment.apiUrl}/api/pages/root`, {params: params});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
--prime-act: #004077;
|
||||
--prime-dis: #A1CAE5;
|
||||
|
||||
|
||||
|
||||
--second: #6C6C6C;
|
||||
--second-hov: #4D4D4D;
|
||||
--second-act: #2D2D2D;
|
||||
|
|
@ -77,6 +79,82 @@ body {
|
|||
margin: 0;
|
||||
color: var(--second-act);
|
||||
background-color: var(--light);
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
left-content{
|
||||
flex-basis: 100%;
|
||||
background-color: var(--second);
|
||||
.background{
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-bottom: 1px solid var(--second-dis);
|
||||
border-top: 1px solid var(--second-dis);
|
||||
.left-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 40px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.h1-jumbotron{
|
||||
display: inline-block;
|
||||
border-bottom: 12px solid var(--blue-0);
|
||||
font-family: PT Sans Narrow;
|
||||
font-size: 76px;
|
||||
font-weight: 700;
|
||||
line-height:100%;
|
||||
letter-spacing: 0.76px;
|
||||
color: white;
|
||||
}
|
||||
header-user-bar{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 32px;
|
||||
}
|
||||
.menu{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit-field{
|
||||
height: 58px;
|
||||
width: 100%;
|
||||
background-color: var(--white);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.edit-field-row{
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 40px;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.limiter {
|
||||
|
|
|
|||
|
|
@ -1,247 +1,81 @@
|
|||
header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--white);
|
||||
.header{
|
||||
width: 1360px;
|
||||
height: 80px;
|
||||
margin: 12px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
a.logo{
|
||||
img{
|
||||
width:114px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1330px){
|
||||
|
||||
.sub-menu{ display: none};
|
||||
|
||||
.grid-menu {
|
||||
a{
|
||||
color: #FFF;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
.header{
|
||||
>pages-menu.top-menu, >a.vnii{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// level 1
|
||||
pages-menu{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-items: stretch;
|
||||
align-content: normal;
|
||||
grid-gap: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
pages-menu-item {
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
a {
|
||||
flex-basis:50%;
|
||||
flex-grow: 1;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
align-self: auto;
|
||||
order: 0;
|
||||
@media screen and (min-width: 1330px){
|
||||
.header{
|
||||
.burger{
|
||||
display: none;
|
||||
}
|
||||
>pages-menu.top-menu{
|
||||
flex-direction: row;
|
||||
gap:24px;
|
||||
pages-menu-item{
|
||||
font-size: 20px;
|
||||
.item{
|
||||
drop-down{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
pages-menu{
|
||||
padding-left: 40px;
|
||||
flex-basis: 100%;
|
||||
&.hide-children{display: none;}
|
||||
pages-menu-item {
|
||||
|
||||
a{
|
||||
font-weight: 400;
|
||||
|
||||
}
|
||||
position: absolute;
|
||||
height: 68px;
|
||||
width: 100vw;
|
||||
background-color: var(--white);
|
||||
left: 0px;
|
||||
top: 104px;
|
||||
flex-direction: row;
|
||||
gap:24px;
|
||||
align-items: top;
|
||||
justify-content: center;
|
||||
pages-menu-item{
|
||||
pages-menu{
|
||||
pages-menu-item {
|
||||
a{
|
||||
color: rgba(255, 255, 255, 0.63);
|
||||
}
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.expand{
|
||||
flex-shrink: 0;
|
||||
flex-basis:24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.toggle{
|
||||
background: url('~src/assets/images/icons/chevron_cirle_right_24dp.svg') center no-repeat;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.open {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
|
||||
|
||||
a.current-item span{
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.63);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1330px){
|
||||
pages-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// level 1
|
||||
.grid-menu>pages-menu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
|
||||
>pages-menu-item {
|
||||
animation: slide-from-top-and-fade-in 0.2s;
|
||||
padding: 0 20px;
|
||||
margin: 0 -4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: var(--prime);
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
&.parent-item{
|
||||
>span{
|
||||
display: inline-block;
|
||||
border-bottom: 2px solid var(--prime);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// level 2
|
||||
|
||||
&.depth{
|
||||
>a::after{
|
||||
content:"";
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-image: url('~src/assets/images/icons/chevron_right_24dp.svg');
|
||||
transform: rotateZ(90deg);
|
||||
transition: transform 0.3s;
|
||||
vertical-align: -6px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
&.opened{
|
||||
>a::after{
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
>pages-menu {
|
||||
position:absolute ;
|
||||
height: 68px;
|
||||
background-color: #FFF;
|
||||
top:104px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
>pages-menu-item{
|
||||
animation: slide-from-top-and-fade-in 0.2s;
|
||||
padding: 0 20px;
|
||||
margin: 0 -4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu{
|
||||
a{
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
>pages-menu{
|
||||
display: block;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.27);
|
||||
|
||||
|
||||
>pages-menu-item{
|
||||
|
||||
|
||||
|
||||
>a.active>span{
|
||||
color: var(--prime)
|
||||
}
|
||||
|
||||
a{
|
||||
span{
|
||||
color: var(--second);
|
||||
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(--prime-hov)
|
||||
}
|
||||
.current-item{
|
||||
color:var(--prime)
|
||||
}
|
||||
|
||||
>pages-menu.parent-item{ //second level
|
||||
display: block;
|
||||
>pages-menu-item{
|
||||
>a{
|
||||
|
||||
>span{
|
||||
font-size: 20px;
|
||||
font-family: PT Sans;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
>a.active{
|
||||
background-color: #EDEDED;
|
||||
border-radius: 8px;
|
||||
span{
|
||||
color:var(--second-act)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" id="ico">
|
||||
<rect x="6" y="10" width="28" height="4" fill="#0070BA"/>
|
||||
<rect x="6" y="18" width="28" height="4" fill="#0070BA"/>
|
||||
<rect x="6" y="26" width="28" height="4" fill="#0070BA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 286 B |
Loading…
Reference in New Issue