From 28474e24bb9e42db3ffdfd349f8b15dca5154487 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 19 Sep 2023 12:03:18 +0300 Subject: [PATCH 1/4] top menu --- .../menu/item/pages-menu-item.component.html | 2 +- .../pages/menu/pages-menu.component.html | 3 +- .../pages/menu/pages-menu.component.ts | 25 ++- src/assets/css/main-menu.scss | 190 ++++++------------ 4 files changed, 73 insertions(+), 147 deletions(-) diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.html b/src/app/_modules/pages/menu/item/pages-menu-item.component.html index bf62322..4f2db0f 100644 --- a/src/app/_modules/pages/menu/item/pages-menu-item.component.html +++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.html @@ -1,6 +1,6 @@
-{{item.name}} + diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts index ef7e594..15246ba 100644 --- a/src/app/_modules/pages/menu/pages-menu.component.ts +++ b/src/app/_modules/pages/menu/pages-menu.component.ts @@ -8,7 +8,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; export class PagesMenuComponent { @Input() items = []; @Output() onSelected = new EventEmitter(); - public hidden = false; + public hover:boolean[]=[] private hiddenPages = ['/o-tsentre/protivodeistvie-korruptsii', '/o-tsentre/zashchita-personalnykh-dannykh', '/o-tsentre/okhrana-truda']; @@ -20,17 +20,22 @@ export class PagesMenuComponent { }); } - - close() { - this.hidden = !this.hidden; - // setTimeout(() => {this.hidden = false;}, 100); - } - leave(){ - this.hidden = false; - } - itemSelect(event:any){ this.onSelected.emit(event); } + setHover(i:number,hover:boolean){ + this.hover=[]; + this.hover[i]=hover; + } + + getDepth(item){ + if (!item.hasOwnProperty('depth')) item.depth=0; + if (item.children?.data.length) item.depth = 1; + item.children?.data.forEach(child => { + if (this.getDepth(child)>=item.depth) item.depth++; + }); + return item.depth + } + } diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss index 86163c7..7f45da5 100644 --- a/src/assets/css/main-menu.scss +++ b/src/assets/css/main-menu.scss @@ -93,166 +93,88 @@ @media screen and (min-width: 1264px){ - pages-menu { - - pages-menu-item { - - a { - transition: all 0.3s; - &:not(:hover).active{ - - >span{ - display: inline-block; - box-sizing: border-box; - } - } - } - &:hover { - &>pages-menu { - display: flex; - } - } - &.hidden{ - pages-menu { - display:none !important; - } - } - } - } - .grid-menu>pages-menu>pages-menu-item>a.active:not(:hover)>span, - .grid-menu>pages-menu>pages-menu-item.hidden>a.active>span { - padding-top: 2px; - border-bottom: 2px solid var(--blue-1) ; - color: var(--blue-1); + display: none; } // level 1 - pages-menu { - + .grid-menu>pages-menu { width: 100%; display: flex; align-items: stretch; - overflow: hidden; - margin: 0 4px; + overflow: hidden; + flex-grow: 0; + flex-shrink: 0; + margin: 0; - &>pages-menu-item { - animation: slide-from-top-and-fade-in 0.2s; + >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; - justify-content: flex-start; - align-items: stretch; - flex-grow: 0; - flex-shrink: 0; - text-align: center; - padding: 0 20px; - margin: 0 -4px; - &:hover:not(.hidden) { - background-color: #004077; - a{ - color: #FFF; - } - } - + align-items: center; - &>a { - display: flex; - flex-direction: column; - justify-content: center; + a { color: #0070BA; font-size: 20px; font-style: normal; font-weight: 400; line-height: 32px; - - - // &:hover { - // text-decoration: none; - // color: white; - // background: #004077; - // } - } - - &>:hover { - & > pages-menu { - display: flex; - } - } - &>pages-menu:first-child { - &>pages-menu { - display: flex; + &.active-mob{ + >span{ + display: inline-block; + border-bottom: 2px solid #0070BA; + } } } // level 2 - &>pages-menu { - display: none; - justify-content: center; - align-items: stretch; - position: absolute; - top: 100%; - left: 0; - max-width: 100%; - background-color: #004077; - z-index: 1000; - padding: 24px calc( (100% - 1400px) / 2);; - margin: 0; - &>pages-menu-item { - display: flex; - flex-direction: column; - align-items: stretch; - flex-grow: 0; - flex-shrink: 1; - text-align: left; - - // &.hidden {display: none;} - - &>a { - font-family: PT Sans; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 32px; /* 160% */ - color: white; - - &>span { - display: block; - overflow: hidden; - } - - &:hover, &.active { - &:after { - opacity: 1; - } + &.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; + } + &.hover { + >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; } } - - // level 3 - &>pages-menu { - position: relative; - padding: 20px 0 0 0; - top: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: left; - &>pages-menu-item { - position: relative; - display: block; - padding: 0; - margin: 20px 0 0 0; - a{ - opacity: 0.63; - } - a:hover{ - opacity: 1; - } - } - } } } + + } } } \ No newline at end of file From 89c2acb0cd9b33daa42b6a09f00b5993db3accd4 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 19 Sep 2023 16:43:06 +0300 Subject: [PATCH 2/4] Sub Menu --- .../_modules/auth/login/login.component.scss | 2 +- .../companies/company/company.component.scss | 2 +- .../member/company-member.component.scss | 2 +- .../layout/footer/footer.component.scss | 2 +- .../layout/header/header.component.scss | 10 +++---- .../user-bar/header-user-bar.component.scss | 2 +- src/app/_modules/layout/layout.module.ts | 3 +- .../home/intro/homepage-intro.component.scss | 2 +- .../pages/menu/pages-menu.component.ts | 4 +++ .../_modules/pages/menu/pages-menu.module.ts | 25 ++++++++++++++++ .../_modules/pages/page/page.component.html | 24 +++++++++------ .../_modules/pages/page/page.component.scss | 30 +++++++++++++++++-- src/app/_modules/pages/page/page.component.ts | 6 +++- .../tk-structure-page.component.scss | 2 +- .../_modules/pages/pages-routing.module.ts | 4 ++- src/app/_modules/pages/pages.module.ts | 5 ---- .../sections/add/add-section.component.ts | 1 - .../image-group-section.component.ts | 2 +- .../pages/tree/pages-tree.component.scss | 2 +- .../entries/registry-entries.component.scss | 2 +- .../users/profile/user-profile.component.scss | 2 +- src/assets/css/basics.scss | 4 +-- src/assets/css/main-menu.scss | 12 ++++++-- 23 files changed, 110 insertions(+), 40 deletions(-) create mode 100644 src/app/_modules/pages/menu/pages-menu.module.ts diff --git a/src/app/_modules/auth/login/login.component.scss b/src/app/_modules/auth/login/login.component.scss index ccd1f46..04a086b 100644 --- a/src/app/_modules/auth/login/login.component.scss +++ b/src/app/_modules/auth/login/login.component.scss @@ -130,7 +130,7 @@ } } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .authentication { flex-direction: column; justify-content: center; diff --git a/src/app/_modules/companies/company/company.component.scss b/src/app/_modules/companies/company/company.component.scss index 367f342..5d5957b 100644 --- a/src/app/_modules/companies/company/company.component.scss +++ b/src/app/_modules/companies/company/company.component.scss @@ -136,7 +136,7 @@ } } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .main { .left { margin-right: 0; diff --git a/src/app/_modules/companies/members/member/company-member.component.scss b/src/app/_modules/companies/members/member/company-member.component.scss index 2c04be5..e2355be 100644 --- a/src/app/_modules/companies/members/member/company-member.component.scss +++ b/src/app/_modules/companies/members/member/company-member.component.scss @@ -47,7 +47,7 @@ } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .member { .left { .avatar { diff --git a/src/app/_modules/layout/footer/footer.component.scss b/src/app/_modules/layout/footer/footer.component.scss index 28c7dde..ef35f12 100644 --- a/src/app/_modules/layout/footer/footer.component.scss +++ b/src/app/_modules/layout/footer/footer.component.scss @@ -55,7 +55,7 @@ } -@media screen and (max-width: 1264px){ +@media screen and (max-width: 1330px){ .footer{ padding: 40px 24px; } diff --git a/src/app/_modules/layout/header/header.component.scss b/src/app/_modules/layout/header/header.component.scss index 35134d1..20cce29 100644 --- a/src/app/_modules/layout/header/header.component.scss +++ b/src/app/_modules/layout/header/header.component.scss @@ -1,4 +1,4 @@ -@media screen and (max-width: 1264px){ +@media screen and (max-width: 1330px){ .hidemobile{ display: none !important; @@ -95,7 +95,7 @@ -@media screen and (min-width: 1264px){ +@media screen and (min-width: 1330px){ .showmobile{ display: none; } @@ -130,12 +130,12 @@ justify-content: normal; align-items: stretch; align-content: stretch; - padding: 0 calc( (100% - 1300px) / 2); + padding: 0 calc( (100% - 1400px) / 2); position: relative; .logo { width:114px; height: 80px; - margin: 12px 24px 12px 40px; + margin: 12px 24px 12px 60px; background-image: url('~src/assets/images/logo_vniigaz_1163x816.svg'); background-size: contain; flex-shrink: 0; @@ -168,7 +168,7 @@ align-content: stretch; flex-grow: 1; flex-shrink: 1; - margin-right: 40px; + margin-right: 60px; button{ white-space: nowrap; } diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss index 2fb9adb..8482429 100644 --- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss +++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss @@ -97,7 +97,7 @@ } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .user { .avatar { background-color: var(--white); diff --git a/src/app/_modules/layout/layout.module.ts b/src/app/_modules/layout/layout.module.ts index fd1a9cd..aef1543 100644 --- a/src/app/_modules/layout/layout.module.ts +++ b/src/app/_modules/layout/layout.module.ts @@ -4,7 +4,7 @@ import {RouterModule} from "@angular/router"; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; 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"; @@ -18,6 +18,7 @@ import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/heade ReactiveFormsModule, RouterModule, PagesModule, + PagesMenuModule ], declarations: [ GridComponent, diff --git a/src/app/_modules/pages/home/intro/homepage-intro.component.scss b/src/app/_modules/pages/home/intro/homepage-intro.component.scss index f6af8e1..579d027 100644 --- a/src/app/_modules/pages/home/intro/homepage-intro.component.scss +++ b/src/app/_modules/pages/home/intro/homepage-intro.component.scss @@ -41,7 +41,7 @@ height: 500px; } } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .row { flex-direction: column; .tagline { diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts index 15246ba..5689c4b 100644 --- a/src/app/_modules/pages/menu/pages-menu.component.ts +++ b/src/app/_modules/pages/menu/pages-menu.component.ts @@ -12,6 +12,10 @@ export class PagesMenuComponent { private hiddenPages = ['/o-tsentre/protivodeistvie-korruptsii', '/o-tsentre/zashchita-personalnykh-dannykh', '/o-tsentre/okhrana-truda']; + // ngOnInit(){ + // console.log(this.items) + // } + get visibleItems() { diff --git a/src/app/_modules/pages/menu/pages-menu.module.ts b/src/app/_modules/pages/menu/pages-menu.module.ts new file mode 100644 index 0000000..f473fec --- /dev/null +++ b/src/app/_modules/pages/menu/pages-menu.module.ts @@ -0,0 +1,25 @@ +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 {} \ No newline at end of file diff --git a/src/app/_modules/pages/page/page.component.html b/src/app/_modules/pages/page/page.component.html index 10f3ec5..d1eb9a7 100644 --- a/src/app/_modules/pages/page/page.component.html +++ b/src/app/_modules/pages/page/page.component.html @@ -17,16 +17,22 @@ -
+ +
+
+ + + + + +

Page type {{page?.type?.name}} is undefined

+
+
+ + +
diff --git a/src/app/_modules/pages/page/page.component.scss b/src/app/_modules/pages/page/page.component.scss index 72c757a..07216d5 100644 --- a/src/app/_modules/pages/page/page.component.scss +++ b/src/app/_modules/pages/page/page.component.scss @@ -1,6 +1,9 @@ .content { background-color: #F6F6F6; padding-bottom: 120px; + .limiter{ + max-width: 1280px; + } .row { display: block; width: 100%; @@ -20,11 +23,12 @@ .block{ position: absolute; top:136px; - left: calc((100% - 900px) / 2); + left: calc((100% - 1280px) / 2); } .limiter{ display: block; + .line{ display: inline-block; border-bottom: 12px solid var(--blue-0); @@ -70,7 +74,29 @@ } - @media screen and (max-width: 1264px) { + @media screen and (min-width: 1330px){ + .double-column{ + display: flex; + align-items: flex-start; + gap: 40px; + .pages{ + flex-grow: 1; + flex-shrink: 1; + } + .sub-menu{ + 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); + margin-top: 40px; + } + } + } + + @media screen and (max-width: 1330px) { .nav-info{ display: none; } diff --git a/src/app/_modules/pages/page/page.component.ts b/src/app/_modules/pages/page/page.component.ts index 4147cef..2ffb540 100644 --- a/src/app/_modules/pages/page/page.component.ts +++ b/src/app/_modules/pages/page/page.component.ts @@ -12,6 +12,7 @@ export class PageComponent { public page: any; public editMode: boolean; public loading = false; + public menuItems:any[] private url: string; private inited = false; routeSubscription?: Subscription; @@ -42,6 +43,7 @@ export class PageComponent { } ngOnInit() { + // this.fetchMenu(); this.listsService.controls().subscribe(res => { this.inited ? this.fetch() : this.inited = true; }); @@ -70,10 +72,12 @@ export class PageComponent { 'sections.objectables.groups.fields.value', 'sidebars.groups.fields.value', 'sidebars.type', - 'permissions' + 'permissions', + 'children.children' ]; this.pagesService.find(this.url, {include: include.join(',')}).subscribe(res => { this.page = res?.data; + this.menuItems = res?.data.children.data; this.loading = false; }, error => { this.loading = false; diff --git a/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss b/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss index d19fcf0..0a40eda 100644 --- a/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss +++ b/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss @@ -117,7 +117,7 @@ } } } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .title { span { font-size: 1rem !important; diff --git a/src/app/_modules/pages/pages-routing.module.ts b/src/app/_modules/pages/pages-routing.module.ts index 3981825..451cd60 100644 --- a/src/app/_modules/pages/pages-routing.module.ts +++ b/src/app/_modules/pages/pages-routing.module.ts @@ -14,6 +14,7 @@ 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}, @@ -28,7 +29,8 @@ const routes: Routes = [ PageSectionsModule, PageSidebarsModule, RegistriesModule, - PublicationsModule + PublicationsModule, + PagesMenuModule ], declarations: [ PageComponent, diff --git a/src/app/_modules/pages/pages.module.ts b/src/app/_modules/pages/pages.module.ts index 11e36dd..33a9fe2 100644 --- a/src/app/_modules/pages/pages.module.ts +++ b/src/app/_modules/pages/pages.module.ts @@ -6,8 +6,6 @@ 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"; @@ -30,8 +28,6 @@ import {SortablejsModule} from "ngx-sortablejs"; SortablejsModule, ], declarations: [ - PagesMenuComponent, - PagesMenuItemComponent, PagesListComponent, PagesListItemComponent, PagesTreeComponent, @@ -40,7 +36,6 @@ import {SortablejsModule} from "ngx-sortablejs"; SearchSectionsItemComponent, ], exports: [ - PagesMenuComponent, PagesListComponent, SearchSectionsComponent, PagesTreeComponent, diff --git a/src/app/_modules/pages/sections/add/add-section.component.ts b/src/app/_modules/pages/sections/add/add-section.component.ts index 2c66b76..b339545 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.ts +++ b/src/app/_modules/pages/sections/add/add-section.component.ts @@ -37,7 +37,6 @@ export class AddSectionComponent { return item; }); let attach = {modelType: this.modelType, modelId: this.page.id, group: 'sections', ord: this.ord}; - console.log(type); this.formsService.createObject(type, {extraProps: {attach: attach}}); this.hideDD(); } diff --git a/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.ts b/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.ts index 6b1d96e..d49784b 100644 --- a/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.ts +++ b/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.ts @@ -15,7 +15,7 @@ export class ImageGroupSectionComponent { } ngOnInit() { - console.log(this.section); + // console.log(this.section); } diff --git a/src/app/_modules/pages/tree/pages-tree.component.scss b/src/app/_modules/pages/tree/pages-tree.component.scss index 044ae78..7cfb187 100644 --- a/src/app/_modules/pages/tree/pages-tree.component.scss +++ b/src/app/_modules/pages/tree/pages-tree.component.scss @@ -146,7 +146,7 @@ } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .item { .bar { .mid { diff --git a/src/app/_modules/registries/registry/entries/registry-entries.component.scss b/src/app/_modules/registries/registry/entries/registry-entries.component.scss index 3c542a4..0bd5b46 100644 --- a/src/app/_modules/registries/registry/entries/registry-entries.component.scss +++ b/src/app/_modules/registries/registry/entries/registry-entries.component.scss @@ -22,7 +22,7 @@ pagination { } } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { registry-entry { padding: 16px 0; } diff --git a/src/app/_modules/users/profile/user-profile.component.scss b/src/app/_modules/users/profile/user-profile.component.scss index 97d140e..b07c04c 100644 --- a/src/app/_modules/users/profile/user-profile.component.scss +++ b/src/app/_modules/users/profile/user-profile.component.scss @@ -58,7 +58,7 @@ } } } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .profile { padding: 24px 0; .user { diff --git a/src/assets/css/basics.scss b/src/assets/css/basics.scss index d4b35bb..d11e47e 100644 --- a/src/assets/css/basics.scss +++ b/src/assets/css/basics.scss @@ -160,7 +160,7 @@ html-section ul{ } -@media screen and (min-width: 1264px) { +@media screen and (min-width: 1330px) { .fullwidth { width: 100vw; margin-left: calc((1160px - 100vw) / 2); @@ -197,7 +197,7 @@ html-section ul{ } -@media screen and (max-width: 1264px) { +@media screen and (max-width: 1330px) { .limiter { padding: 0 24px; } diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss index 7f45da5..8dba957 100644 --- a/src/assets/css/main-menu.scss +++ b/src/assets/css/main-menu.scss @@ -1,5 +1,5 @@ -@media screen and (max-width: 1264px){ +@media screen and (max-width: 1330px){ @@ -92,7 +92,7 @@ -@media screen and (min-width: 1264px){ +@media screen and (min-width: 1330px){ pages-menu { display: none; } @@ -177,4 +177,12 @@ } } + + .sub-menu{ + pages-menu { + display: flex; + flex-direction: column; + } + + } } \ No newline at end of file From c722395a6eee9ba87ffa8887148bcc3589c6c541 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Wed, 20 Sep 2023 14:22:11 +0300 Subject: [PATCH 3/4] right menu --- .../menu/item/pages-menu-item.component.html | 4 +- .../menu/item/pages-menu-item.component.ts | 4 ++ .../pages/menu/pages-menu.component.ts | 3 +- .../_modules/pages/page/page.component.html | 5 +- .../_modules/pages/page/page.component.scss | 6 +- src/app/_modules/pages/page/page.component.ts | 31 +++++++-- .../image-group-section.component.scss | 4 +- .../list/member-section-list.component.scss | 4 +- src/assets/css/main-menu.scss | 68 ++++++++++++++++++- 9 files changed, 108 insertions(+), 21 deletions(-) diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.html b/src/app/_modules/pages/menu/item/pages-menu-item.component.html index 4f2db0f..1b378a7 100644 --- a/src/app/_modules/pages/menu/item/pages-menu-item.component.html +++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.html @@ -1,7 +1,7 @@
{{item.name}} +[ngClass]="{'current-item':item.link==currentURL,'parent-item':parentItem}">{{item.name}} +(onSelected)="select($event)" [ngClass]="{'hide-children':!showChildren,'current-item':item.link==currentURL,'parent-item':parentItem}"> diff --git a/src/app/_modules/pages/menu/item/pages-menu-item.component.ts b/src/app/_modules/pages/menu/item/pages-menu-item.component.ts index 07b146d..2127419 100644 --- a/src/app/_modules/pages/menu/item/pages-menu-item.component.ts +++ b/src/app/_modules/pages/menu/item/pages-menu-item.component.ts @@ -25,6 +25,10 @@ export class PagesMenuItemComponent { return this.item?.children?.data; } + get parentItem(){ + return this.currentURL.startsWith(this.item.link) + } + ngOnInit() { } diff --git a/src/app/_modules/pages/menu/pages-menu.component.ts b/src/app/_modules/pages/menu/pages-menu.component.ts index 5689c4b..d515ce2 100644 --- a/src/app/_modules/pages/menu/pages-menu.component.ts +++ b/src/app/_modules/pages/menu/pages-menu.component.ts @@ -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 } - } diff --git a/src/app/_modules/pages/page/page.component.html b/src/app/_modules/pages/page/page.component.html index d1eb9a7..d3eae0d 100644 --- a/src/app/_modules/pages/page/page.component.html +++ b/src/app/_modules/pages/page/page.component.html @@ -7,7 +7,7 @@
-

{{pageTopName||page?.name}}

+

{{pageTopName}}

@@ -29,7 +29,8 @@

Page type {{page?.type?.name}} is undefined

-
+
+
diff --git a/src/app/_modules/pages/page/page.component.scss b/src/app/_modules/pages/page/page.component.scss index 07216d5..d919642 100644 --- a/src/app/_modules/pages/page/page.component.scss +++ b/src/app/_modules/pages/page/page.component.scss @@ -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; } } diff --git a/src/app/_modules/pages/page/page.component.ts b/src/app/_modules/pages/page/page.component.ts index 2ffb540..fc9d20c 100644 --- a/src/app/_modules/pages/page/page.component.ts +++ b/src/app/_modules/pages/page/page.component.ts @@ -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 => { diff --git a/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss b/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss index 9fc93ed..0b369cb 100644 --- a/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/image-group/image-group-section.component.scss @@ -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); } diff --git a/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss b/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss index cf7db25..ebff3a0 100644 --- a/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss +++ b/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss @@ -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); diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss index 8dba957..ad73aa4 100644 --- a/src/assets/css/main-menu.scss +++ b/src/assets/css/main-menu.scss @@ -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; + } + + } + + } + + } + + } + + } } From 71fa86ebd0cbd9c02618aaaba239b9fef2c44ae0 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 26 Sep 2023 12:05:26 +0300 Subject: [PATCH 4/4] members refactoring --- .../item/member-section-item.component.html | 43 +++-- .../item/member-section-item.component.scss | 155 +++++++++++++++--- .../item/member-section-item.component.ts | 97 +++++++---- .../list/member-section-list.component.html | 11 +- .../list/member-section-list.component.scss | 145 +--------------- 5 files changed, 244 insertions(+), 207 deletions(-) diff --git a/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.html b/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.html index 58e3ddc..e93e56c 100644 --- a/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.html +++ b/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.html @@ -1,12 +1,35 @@
- -

- -

-

Документ

-

{{email}}

-

{{phone}}

-

-
- + + + + + +
+ +
+ + + + + +
+
+
+
+ +
+
+ +
+ + Подробнее + +
+
+
+
+ + + +
diff --git a/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss b/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss index 26f7ffc..7e92c1b 100644 --- a/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss +++ b/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.scss @@ -1,34 +1,137 @@ -.member { - - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 32px; - font-style: normal; - - - - color:#2D2D2D; - h1{ - font-family: PT Sans Narrow; - font-weight: 700; - letter-spacing: 0.5px; - font-size: 50px; - line-height: 60px; /* 120% */ - font-weight: 700; +.member{ + display: flex; + flex-direction: column; + gap: 16px; + >*{ + width: 100%; } - .doc{ - display: block; - background: url('~src/assets/images/icons/document/document_60dp.svg') top left no-repeat; - padding-left: 62px; - min-height: 60px; + >div{ + >*{margin-bottom: 16px;} } - img{ - max-width: 345px; + .menu { + + } + .image { + // background: url("/assets/images/view-man.svg") center no-repeat; + &.pointer{ + cursor: pointer; + } + width: 100%; + object-fit: cover; + height: 338px; border-radius: 12px; border: 1px solid rgba(45, 45, 45, 0.27); + + } + .name { + font-size: 24px; + font-weight: 700; + line-height: 32px; /* 133.333% */ + letter-spacing: 0.24px; + color:#6C6C6C + } + .position { + font-size: 20px; + } + .more { + font-size: 20px; + img{ + vertical-align: -6px; + } + } + .link{ + font-size: 20px; + display: inline-block; + &.tel::before{ + content: ''; + width: 24px; + height: 24px; + display: inline-block; + vertical-align: -3px; + margin-right: 4px; + background: url('~src/assets/images/icons/phone_blue_24dp.svg') center no-repeat; + } + &.mail::before{ + content: ''; + width: 24px; + height: 24px; + display: inline-block; + vertical-align: -5px; + margin-right: 4px; + background: url('~src/assets/images/icons/mail_blue_24dp.svg') center no-repeat; + } + + } + .doc{ + width: 100%; + display: flex; + .doc-icon{ + margin-left: -8px; + flex-basis: 60px; + align-items: flex-start; + flex-shrink: 0; + height: 60px; + background: center no-repeat; + background-image: url('~src/assets/images/icons/document/document_60dp.svg'); + background-size: contain; + } + .doc-link{ + flex-shrink: 0; + flex-grow: 0; + flex-basis: 200px; + white-space: nowrap; + overflow: hidden; + text-overflow:ellipsis; + } + a{ + font-size: 20px; + + } + .description{ + color: #6C6C6C; + } + } -} + + .full-screen{ + position: fixed; + top:0; + z-index: 200; + left: 0; + background-color: rgba(45, 45, 45, 0.63); + width: 100vw; + height: 100vh; + object-fit: contain; + cursor: pointer; + + } + .modal{ + position: fixed; + top:0; + z-index: 200; + left: 0; + background-color: rgba(45, 45, 45, 0.63); + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + div{ + background-color: #fff; + width: 50vw; + min-width: 400px; + border-radius: 12px; + padding: 0 24px; + } + } + .hidden{ + display: none; + } + + + + } diff --git a/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.ts b/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.ts index 77027f4..4f62ff7 100644 --- a/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.ts +++ b/src/app/_modules/pages/sections/types/basic/member/item/member-section-item.component.ts @@ -9,6 +9,12 @@ import {Router} from "@angular/router"; }) export class MemberSectionItemComponent { @Input() id: any; + @Input() editMode: boolean; + @Input() member:any; + @Input() section: any; + public cover = '/assets/images/icons/view_man_273_370dp.svg'; + + public showImage:boolean; constructor( private formsService: FormsService, @@ -18,57 +24,84 @@ export class MemberSectionItemComponent { } public item: any; - public fullScreen: boolean; + public fullScreen = false; + public showDescription = false; ngOnInit() { - this.fetch(); + } - fetch() { - this.objectsService.fetchObject(this.id, {include: 'groups.fields.value'}).subscribe(res => { - this.item = res.data; + get modelId() { + return this.section.id; + } + + + getFields(member){ + + let fields:any = {}; + member.groups.data.forEach(group =>{ + group.fields.data.forEach(field =>{ + if(field.name&&field?.value?.data[0]){ + + fields[field.name] = field?.value?.data[0] + } + }) }) + return fields } - parseParam(param: string): any { - let result = ''; - this?.item?.groups?.data[0]?.fields?.data.forEach(res => { - if (param === res.name) { - result = res.value.data[0]; - } - }); - return result; + get image(){ + return this.getFields(this.member)['member-image']?.links?.full || this.cover + } + get imageFull(){ + return !!this.getFields(this.member)['member-image']?.links?.full } - parseParamFile(param: string): string { - return this.parseParam(param)?.links?.full; + get name(){ + return this.getFields(this.member)['member-name-required'] } - get name() { - return this.parseParam('member-name-required'); + get position(){ + return this.getFields(this.member)['member-position-required'] } - get photo() { - return this.parseParamFile('member-image'); + get phone(){ + return this.getFields(this.member)['member-phone'] } - get position() { - return this.parseParam('member-position-required'); + get email(){ + return this.getFields(this.member)['member-email'] } - get document() { - return this.parseParamFile('member-doc'); + get docLink(){ + return this.getFields(this.member)['member-doc']?.links.download + } + get docIcon(){ + return this.iconUrl(this.getFields(this.member)['member-doc'].extension) + } + private iconUrl(name:string){ + if (name)return ICON_TYPE[name] && `url(/assets/images/icons/document/${ICON_TYPE[name]}.svg)` + } + get docName(){ + return this.getFields(this.member)['member-doc'].name } - get phone() { - return this.parseParam('member-phone'); + get description(){ + return this.getFields(this.member)['member-description'] } - get email() { - return this.parseParam('member-email'); - } - - get description() { - return this.parseParam('member-description'); - } +} + +const ICON_TYPE:any={ + rtf:'DOC', + docx:'DOC', + doc:'DOC', + xl:'XLS', + xls:'XLS', + xlsx:'XLS', + ppt:'PPT', + pptx:'PPT', + jpg:'JPG', + jpeg:'JPG', + pdf:'PDF' } diff --git a/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.html b/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.html index 2e49163..cec9f07 100644 --- a/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.html +++ b/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.html @@ -9,6 +9,10 @@
+ + + + Подробнее
- + + --> + +
diff --git a/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss b/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss index ebff3a0..59306b5 100644 --- a/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss +++ b/src/app/_modules/pages/sections/types/basic/member/list/member-section-list.component.scss @@ -36,151 +36,22 @@ align-content: flex-start; gap: 40px; - - .item { - object-fit: cover; - display: flex; - flex-direction: column; + .item{ flex-grow: 0; flex-basis: 253px; + width: 253px; gap: 16px; overflow: hidden; - >*{ - width: 100%; - } - >div{ - >*{margin-bottom: 16px;} - } - .menu { - - } - .image { - // background: url("/assets/images/view-man.svg") center no-repeat; - - object-fit: cover; - height: 338px; - border-radius: 12px; - border: 1px solid rgba(45, 45, 45, 0.27); - - } - .image { - cursor: pointer; - // background: url("/assets/images/view-man.svg") center no-repeat; - img { - width: 273px; - object-fit: cover; - height: 370px; - border-radius: 12px; - border: 1px solid rgba(45, 45, 45, 0.27); - } - } - .name { - font-size: 24px; - font-weight: 700; - line-height: 32px; /* 133.333% */ - letter-spacing: 0.24px; - color:#6C6C6C - } - .position { - font-size: 20px; - } - .more { - font-size: 20px; - img{ - vertical-align: -6px; - } - } - .link{ - font-size: 20px; - display: inline-block; - &.tel::before{ - content: ''; - width: 24px; - height: 24px; - display: inline-block; - vertical-align: -3px; - margin-right: 4px; - background: url('~src/assets/images/icons/phone_blue_24dp.svg') center no-repeat; - } - &.mail::before{ - content: ''; - width: 24px; - height: 24px; - display: inline-block; - vertical-align: -5px; - margin-right: 4px; - background: url('~src/assets/images/icons/mail_blue_24dp.svg') center no-repeat; - } - - - } + + - .doc{ - width: 100%; - display: flex; - .doc-icon{ - flex-basis: 60px; - align-items: flex-start; - flex-shrink: 0; - height: 60px; - background: center no-repeat; - background-image: url('~src/assets/images/icons/document/document_60dp.svg'); - background-size: contain; - } - .doc-link{ - flex-shrink: 0; - flex-grow: 0; - flex-basis: 200px; - white-space: nowrap; - overflow: hidden; - text-overflow:ellipsis; - } - a{ - font-size: 20px; - - } - .description{ - color: #6C6C6C; - } - } } + + + } - .full-screen{ - position: fixed; - top:0; - z-index: 200; - left: 0; - background-color: rgba(45, 45, 45, 0.63); - width: 100vw; - height: 100vh; - object-fit: contain; - cursor: pointer; - - } - .modal{ - position: fixed; - top:0; - z-index: 200; - left: 0; - background-color: rgba(45, 45, 45, 0.63); - width: 100vw; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - div{ - background-color: #fff; - width: 50vw; - min-width: 400px; - border-radius: 12px; - padding: 0 24px; - } - } - .hidden{ - display: none; - } + }