From f289492f49abb7e52a4ad7f172c4658c763512df Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Mon, 23 Oct 2023 14:18:57 +0300 Subject: [PATCH] dropdown menu --- .../layout/footer/footer.component.scss | 2 +- .../layout/header/header.component.scss | 2 +- .../user-bar/header-user-bar.component.html | 41 ++---- .../user-bar/header-user-bar.component.scss | 58 +------- src/app/_modules/layout/layout.module.ts | 5 +- .../setting-site/setting-site.component.scss | 2 +- .../_modules/pages/page/page.component.scss | 2 +- .../sections/add/add-section.component.html | 20 +-- .../sections/add/add-section.component.scss | 136 ++---------------- .../sections/add/add-section.component.ts | 6 + .../pages/sections/page-sections.module.ts | 3 + .../basic/html/html-section.component.scss | 2 +- .../image-group-section.component.scss | 2 +- .../viget/drop-down/drop-down.component.html | 2 +- src/app/_modules/viget/ico/ico.component.scss | 19 ++- src/app/_modules/viget/ico/ico.component.ts | 2 +- src/app/_modules/viget/viget.module.ts | 10 +- src/assets/css/basics.scss | 9 +- src/assets/css/dropdown.scss | 74 ++++++---- src/assets/css/forms.scss | 4 +- 20 files changed, 139 insertions(+), 262 deletions(-) diff --git a/src/app/_modules/layout/footer/footer.component.scss b/src/app/_modules/layout/footer/footer.component.scss index 45346f5..b67f381 100644 --- a/src/app/_modules/layout/footer/footer.component.scss +++ b/src/app/_modules/layout/footer/footer.component.scss @@ -2,7 +2,7 @@ width: 100%; padding: 40px 100px; - background-color: var(--blue-3); + background-color: var(--prime-act); color: white; display: flex; flex-direction: column; diff --git a/src/app/_modules/layout/header/header.component.scss b/src/app/_modules/layout/header/header.component.scss index 20cce29..022d937 100644 --- a/src/app/_modules/layout/header/header.component.scss +++ b/src/app/_modules/layout/header/header.component.scss @@ -61,7 +61,7 @@ } display: block; - background: var(--blue-3); + background: var(--prime-act); color: white; width: 480px; padding: 32px 40px; diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.html b/src/app/_modules/layout/header/user-bar/header-user-bar.component.html index 0ace074..0339f3f 100644 --- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.html +++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.html @@ -1,36 +1,25 @@ -
+
{{user.initials}}
-
-
    -
  • Личный кабинет
    • +
    +
    +
    +
    Личный кабинет
    +
    -
  • Структура сайта
    • -
  • Выход из системы
    • -
+
+
Структура сайта
+
+
+
Выход из системы
+
+
{{user.name}}
-
-
- + + \ No newline at end of file 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 65894b5..c9ed7f8 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 @@ -1,7 +1,5 @@ .user { - .ddHidden{ - display: none; - } + position: relative; display: flex; padding: 11px; @@ -39,61 +37,7 @@ white-space: nowrap; } - .toggle{ - height: 24px; - width: 24px; - background: url("~src/assets/images/icons/arrow_drop_down_grey_24dp.svg") no-repeat center; - margin-top: 7px; - } - .dropdown { - display: none; - } - - - .dropdown { - display: block; - width: 250px; - right: 12px; - top: 42px; - z-index: 1; - ul { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; - list-style: none; - border-radius: 12px; - li { - display: block; - padding: 12px 20px; - color: var(--second-act); - cursor: pointer; - border-bottom: #E0E0E0 solid 1px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - &:first-child { - border-radius: 8px 8px 0 0; - } - &:last-child { - border-radius: 0 0 8px 8px; - a, span { - border-bottom: none; - } - } - &:hover { - background-color: #f7f7f7; - } - } - } - - &.hidden { - display: none; - } - - - } } diff --git a/src/app/_modules/layout/layout.module.ts b/src/app/_modules/layout/layout.module.ts index 9cc578e..5aef2a5 100644 --- a/src/app/_modules/layout/layout.module.ts +++ b/src/app/_modules/layout/layout.module.ts @@ -2,6 +2,7 @@ import {NgModule} from '@angular/core'; import {BrowserModule} from "@angular/platform-browser"; import {RouterModule} from "@angular/router"; 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'; @@ -12,6 +13,7 @@ import {SettingSiteComponent} from "@app/_modules/layout/setting-site/setting-si import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/header-user-bar.component"; import { RetainerComponent } from './retainer/retainer.component'; + @NgModule({ imports: [ BrowserModule, @@ -19,7 +21,8 @@ import { RetainerComponent } from './retainer/retainer.component'; ReactiveFormsModule, RouterModule, PagesModule, - PagesMenuModule + PagesMenuModule, + VigetModule ], declarations: [ GridComponent, diff --git a/src/app/_modules/layout/setting-site/setting-site.component.scss b/src/app/_modules/layout/setting-site/setting-site.component.scss index 15771fd..23716c3 100644 --- a/src/app/_modules/layout/setting-site/setting-site.component.scss +++ b/src/app/_modules/layout/setting-site/setting-site.component.scss @@ -55,7 +55,7 @@ &.style-color { color: #28a814; - background-color: #F6F6F6; + background-color: var(--light); } &.style-brown { background-color: #f7f0d2; diff --git a/src/app/_modules/pages/page/page.component.scss b/src/app/_modules/pages/page/page.component.scss index 6c3a337..a60bdeb 100644 --- a/src/app/_modules/pages/page/page.component.scss +++ b/src/app/_modules/pages/page/page.component.scss @@ -1,5 +1,5 @@ .content { - background-color: #F6F6F6; + background-color: var(--light); padding-bottom: 120px; .limiter{ max-width: 1280px; diff --git a/src/app/_modules/pages/sections/add/add-section.component.html b/src/app/_modules/pages/sections/add/add-section.component.html index eb96081..8bac65a 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.html +++ b/src/app/_modules/pages/sections/add/add-section.component.html @@ -1,15 +1,19 @@
-
Добавить элемент
-
-
-
-
+
+ + Добавить элемент + +
+
+
+
+
{{type.title}}
-
+
- +
- +
diff --git a/src/app/_modules/pages/sections/add/add-section.component.scss b/src/app/_modules/pages/sections/add/add-section.component.scss index 1873f41..4cc3aa6 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.scss +++ b/src/app/_modules/pages/sections/add/add-section.component.scss @@ -1,127 +1,17 @@ -.add { +.add{ position: relative; - display: inline-block; - height: 24px; - margin-top: 16px; - margin-bottom: 40px; - - - .toggle { - position: relative; - padding-left: 32px; - color: var(--prime); - // background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center; - cursor: pointer; - z-index: 1; - &:before { - display: inline-block; - width: 24px; - height: 24px; - background: url("~src/assets/images/icons/add_cirle_24dp.svg") no-repeat center; - content: ''; - z-index: 0; - bottom: -2px; - position: absolute; - left: 0px; - } - &:hover{ - &:before{ - background-image: url("~src/assets/images/icons/add_cirle_active_24dp.svg"); - } - &:after{ - background-image: url("~src/assets/images/icons/arrow_drop_down_active_24dp.svg"); - }; - color: var(--blue-3); - } - &.active{ - &:before{ - background-image: url("~src/assets/images/icons/add_cirle_active_24dp.svg"); - } - &:after{ - transform: rotate(180deg); - background-image: url("~src/assets/images/icons/arrow_drop_down_active_24dp.svg"); - }; - color: var(--blue-3); - } - &:after { - display: inline-block; - width: 24px; - height: 24px; - background: url("~src/assets/images/icons/arrow_drop_down_24dp.svg") no-repeat center; - content: ''; - z-index: 0; - bottom: -2px; - position: absolute; - right: -28px; - transform: rotate(0deg); - transition: transform .3s; - +.toggle{ + position:inherit; + display: flex; + gap:8px; + align-items: center; + drop-down{ + margin-top: 4px; + } + &.active{ + a{ + color: var(--prime-act); } } - - .dropdown { - display: none; - width: 250px; - left: 48px; - top: 24px; - z-index: 10; - &.active { - display: block; - } - - .menu { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; - border-radius: 12px; - position: relative; - z-index: 30; - .type { - display: flex; - flex-direction: column; - &:first-child { - border-radius: 12px 12px 0 0; - } - &:last-child { - border-radius: 0 0 12px 12px; - .row { - border-bottom: none; - } - a, span { - border-bottom: none; - } - } - >&:hover { - background-color: #f7f7f7; - } - .row { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 12px 20px; - border-bottom: #E0E0E0 solid 1px; - column-gap: 12px; - cursor: pointer; - color: var(--second-act); - background: transparent; - - - - - } - - .sub-row { - padding: 12px 16px 12px 32px; - border-bottom: #E0E0E0 solid 1px; - color: var(--second); - cursor: pointer; - &:hover { - background-color: #f7f7f7; - } - } - } - } - } - } +} \ No newline at end of file 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 b339545..e560c52 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.ts +++ b/src/app/_modules/pages/sections/add/add-section.component.ts @@ -12,6 +12,7 @@ export class AddSectionComponent { @Input() modelType: string; public types = []; public ddVisible = false; + public sub:boolean[] =[] constructor(private formsService: FormsService, private objectsService: ObjectsService) { } @@ -57,4 +58,9 @@ export class AddSectionComponent { hideDD() { this.ddVisible = false; } + toggleSub(i:number){ + let val=!this.sub[i]; + this.sub = this.sub.map(item=>false); + this.sub[i]=val; + } } diff --git a/src/app/_modules/pages/sections/page-sections.module.ts b/src/app/_modules/pages/sections/page-sections.module.ts index f079bf5..37a5a0a 100644 --- a/src/app/_modules/pages/sections/page-sections.module.ts +++ b/src/app/_modules/pages/sections/page-sections.module.ts @@ -4,6 +4,7 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {SwiperModule} from "swiper/angular"; import {ObjectsModule} from "@app/_modules/objects/objects.module"; +import { VigetModule } from '@app/_modules/viget/viget.module'; import {PageSectionsComponent} from "@app/_modules/pages/sections/list/page-sections.component"; import {PageSectionComponent} from "@app/_modules/pages/sections/item/page-section.component"; @@ -27,6 +28,7 @@ import {ImageGroupSectionComponent} from "@app/_modules/pages/sections/types/bas import {MemberSectionItemComponent} from "@app/_modules/pages/sections/types/basic/member/item/member-section-item.component"; import {MemberSectionListComponent} from "@app/_modules/pages/sections/types/basic/member/list/member-section-list.component"; + @NgModule({ imports: [ CommonModule, @@ -34,6 +36,7 @@ import {MemberSectionListComponent} from "@app/_modules/pages/sections/types/bas ReactiveFormsModule, ObjectsModule, SwiperModule, + VigetModule ], declarations: [ PageMenuComponent, diff --git a/src/app/_modules/pages/sections/types/basic/html/html-section.component.scss b/src/app/_modules/pages/sections/types/basic/html/html-section.component.scss index 832c4f4..322271a 100644 --- a/src/app/_modules/pages/sections/types/basic/html/html-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/html/html-section.component.scss @@ -8,7 +8,7 @@ a { color: var(--prime); &:hover{ - color: var(--blue-3); + color: var(--prime-act); }; } >div{ 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 1a1ad59..8483871 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 @@ -47,7 +47,7 @@ } a { img { - border: 2px solid var(--blue-4); + border: 2px solid var(--prime-dis); cursor: pointer; } } diff --git a/src/app/_modules/viget/drop-down/drop-down.component.html b/src/app/_modules/viget/drop-down/drop-down.component.html index 3cc0287..2ee4d7d 100644 --- a/src/app/_modules/viget/drop-down/drop-down.component.html +++ b/src/app/_modules/viget/drop-down/drop-down.component.html @@ -1,3 +1,3 @@
- +
diff --git a/src/app/_modules/viget/ico/ico.component.scss b/src/app/_modules/viget/ico/ico.component.scss index 7bbfce9..2ce5007 100644 --- a/src/app/_modules/viget/ico/ico.component.scss +++ b/src/app/_modules/viget/ico/ico.component.scss @@ -7,9 +7,26 @@ } } -:host-context(a){ +:host-context(.prime, a){ svg.color{color: var(--prime)} } +:host-context(.prime:hover, a:hover){ + svg.color{color: var(--prime-hov)} +} +:host-context(.prime.active, a.active, .prime:active, a:active){ + svg.color{color: var(--prime-act)} +} + +:host-context(.second, button){ + svg.color{color: var(--second)} +} +:host-context(.second:hover, button:hover){ + svg.color{color: var(--second-hov)} +} +:host-context(.second.active, button.active, .second:active, button:active){ + svg.color{color: var(--second-act)} +} + :host{ display: inline-flex; } diff --git a/src/app/_modules/viget/ico/ico.component.ts b/src/app/_modules/viget/ico/ico.component.ts index 45edd34..752fdfe 100644 --- a/src/app/_modules/viget/ico/ico.component.ts +++ b/src/app/_modules/viget/ico/ico.component.ts @@ -27,7 +27,7 @@ export class IcoComponent { this.width = this.size[0] this.height = this.size[1] } - this.url = `assets/images/icons/${this.ico}.svg#ico` + this.url = `assets/images/ico/${this.ico}.svg#ico` } diff --git a/src/app/_modules/viget/viget.module.ts b/src/app/_modules/viget/viget.module.ts index ce88bf0..0d26188 100644 --- a/src/app/_modules/viget/viget.module.ts +++ b/src/app/_modules/viget/viget.module.ts @@ -1,8 +1,8 @@ import { NgModule } from "@angular/core"; import {BrowserModule} from "@angular/platform-browser"; import { IcoComponent } from "./ico/ico.component"; -import { QRCodeComponent } from "./qrcode/qrcode.component"; -import { QRCodeModule } from "angularx-qrcode"; +// import { QRCodeComponent } from "./qrcode/qrcode.component"; +// import { QRCodeModule } from "angularx-qrcode"; import {DropDownComponent } from "./drop-down/drop-down.component"; import { SliderComponent } from './slider/slider.component'; import { SwitchComponent } from './switch/switch.component'; @@ -11,18 +11,18 @@ import { SwitchComponent } from './switch/switch.component'; @NgModule({ imports:[ BrowserModule, - QRCodeModule + // QRCodeModule ], declarations: [ IcoComponent, - QRCodeComponent, + // QRCodeComponent, DropDownComponent, SliderComponent, SwitchComponent, ], exports: [ IcoComponent, - QRCodeComponent, + // QRCodeComponent, DropDownComponent, SliderComponent, SwitchComponent diff --git a/src/assets/css/basics.scss b/src/assets/css/basics.scss index 3ed247b..733b348 100644 --- a/src/assets/css/basics.scss +++ b/src/assets/css/basics.scss @@ -6,6 +6,7 @@ --radius-1: 12px; --radius-2: 20px; --white: #ffffff; + --light: #DDD; --prime: #0070BA; @@ -21,15 +22,12 @@ --blue-0: #2EB2E8; - - --blue-3: #004077; - --blue-4: #A1CAE5; } .style-color{ - background-color: #f6f6f6; + background-color: var(--light); } .mat-calendar-body-selected { @@ -78,6 +76,7 @@ body { padding: 0; margin: 0; color: var(--second-act); + background-color: var(--light); } .limiter { @@ -126,7 +125,7 @@ a { color: var(--prime); cursor: pointer; &:hover{ - color: var(--blue-3); + color: var(--prime-act); }; &.document { display: inline-flex; diff --git a/src/assets/css/dropdown.scss b/src/assets/css/dropdown.scss index 7c77050..2584d1b 100644 --- a/src/assets/css/dropdown.scss +++ b/src/assets/css/dropdown.scss @@ -1,41 +1,54 @@ .dropdown { position: absolute; - top: 100%; - right: 0; - width: 100%; - background-color: #ffffff; - border: #dedede solid 1px; - box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%); + width: 250px; + left: 48px; + top: 32px; + z-index: 10; z-index: 1000; - border-radius: 8px; + .menu { - margin: 0; - padding: 0; - list-style: none; - border-radius: 8px; + display: flex; + flex-direction: column; + border: var(--second-dis) solid 1px; + border-radius: var(--radius-1); + box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%); + .type { - width: 100%; + display: flex; + flex-direction: column; + background-color: var(--white); + border-bottom: var(--second-dis) solid 1px; + overflow: hidden; + &:first-child { + border-radius: var(--radius-1) var(--radius-1) 0 0; + } + &:last-child { + border-radius: 0 0 var(--radius-1) var(--radius-1); + .row { + border-bottom: none; + } + a, span { + border-bottom: none; + } + } + >&:hover { + background-color: var(--light); + } + .row { - width: 100%; display: flex; flex-direction: row; - justify-content: space-between; align-items: center; - column-gap: 16px; + padding: 12px 20px; + + column-gap: 12px; + cursor: pointer; + color: var(--second-act); .title { } - .submenu { - width: 20px; - height: 20px; - background: transparent url('~src/assets/images/icons/expand_less_20.svg') 50% 50% no-repeat; - transform: rotateZ(180deg); - transition: transform 0.3s; - &.active { - transform: rotateZ(0deg); - } - } + a, span { @@ -53,8 +66,17 @@ border-bottom: none; } } + } + + .sub-row { + padding: 12px 16px 12px 32px; + border-top: var(--second-dis) solid 1px; + color: var(--second); + background-color: var(--white); + + cursor: pointer; &:hover { - background-color: #f7f7f7; + background-color: var(--light); } } } diff --git a/src/assets/css/forms.scss b/src/assets/css/forms.scss index ac86926..a6b1c48 100644 --- a/src/assets/css/forms.scss +++ b/src/assets/css/forms.scss @@ -66,8 +66,8 @@ input, select, textarea { } } &:focus{ - background-color:var(--blue-3); - border-color:var(--blue-3); + background-color:var(--prime-act); + border-color:var(--prime-act); &:before { transform: translateX(20px); }