Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

admin control panel

master
Boris Voropaev 2023-11-22 14:10:48 +03:00
parent b5e999d7d9
commit 2194432c09
13 changed files with 210 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/_modules/administration/page/administration-page.component.html
View File

@ -1,15 +1,16 @@
<div class="limiter">
<div class="line">
<h1>Панель управления</h1>
<div class="administration-page">
<div>
<h2>Панель управления</h2>
</div>
<!-- <div class="tabs default">
<button type="button" *ngFor="let tab of tabs" [class.active]="tab.active" routerLink="/administrate/{{tab.name}}">{{tab.title}}</button>
</div> -->
<div class="limiter" [ngSwitch]="tab.name">
<div [ngSwitch]="tab.name">
<administrate-company *ngSwitchCase="'company'" [companyId]="'main'"></administrate-company>
<administrate-committee *ngSwitchCase="'committee'"></administrate-committee>
<administrate-site-pages *ngSwitchCase="'site-pages'"></administrate-site-pages>
<p *ngSwitchDefault>Страница не найдена</p>
</div>
</div>

21
src/app/_modules/administration/page/administration-page.component.scss
View File

@ -1,22 +1 @@
.line{
display: inline-block;
border-bottom: 12px solid var(--blue-0);
margin-top: 24px;
margin-bottom: 40px;
h1{
display: inline;
padding-right: 40px;
vertical-align: 2px;
font-family: PT Sans Narrow;
font-size: 76px;
font-style: normal;
font-weight: 700;
line-height: 60px; /* 100% */
letter-spacing: 0.76px;
color: var(--second-act);
}
}
:host{
font-size: 20px;
}

9
src/app/_modules/administration/site-pages/administrate-site-pages.component.html
View File

@ -1,3 +1,8 @@
<button (click)="addLocale()">Добавить языковую версию</button>
<span (click)="toggle()"><switch [val]="showDeleted"></switch> Показать удаленные</span>
<div class="site-admin-control">
<button (click)="addLocale()" class="outline">Добавить языковую версию</button>
<span class="site-admin-control-toggle" (click)="toggle()">
Показать удаленные
<switch [val]="showDeleted"></switch>
</span>
</div>
<pages-tree></pages-tree>

171
src/app/_modules/administration/site-pages/administrate-site-pages.component.scss
View File

@ -1,171 +0,0 @@
.item.home .bar .mid .info .logo::before{
background-image: url('~src/assets/images/icons/home_page_24dp.svg');
}
.item:not(.home){
.bar{
padding-left: 50px;
}
.item .bar{
padding-left: 100px;
}
.item .item .bar{
padding-left: 150px;
}
.item .item .item .bar{
padding-left: 200px;
}
.item .item .item .item .bar{
padding-left: 250px;
}
}
.item {
.bar {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px 0;
border-bottom: #E0E0E0 solid 1px;
.left {
flex-shrink: 0;
width: 40px;
height: 24px;
cursor: pointer;
.toggle {
border:none;
width: 100%;
height: 100%;
background: transparent url("~src/assets/images/icons/expand_less_20.svg") 50% 50% no-repeat;
transform: rotate(90deg);
transition: transform .3s;
}
}
.mid {
flex-grow: 1;
padding: 0 16px;
.info {
display: flex;
flex-direction: row;
align-items: center;
.logo {
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
margin-right: 16px;
border-radius: 100px;
background-color: var(--prime);
color: #ffffff;
span{
display: none;
}
&::before {
content: "";
display: block;
background: transparent url("~src/assets/images/icons/web_page_24dp.svg")no-repeat;
width: 24px;
height: 24px;
}
img {
width: 100%;
height: 100%;
border-radius: 100px;
object-fit: cover;
background-color: #ffffff;
}
}
.name {
p {
margin: 0;
a {
color: var(--grey-7);
}
&.sub {
font-size: 0.875rem;
color: #7f7f7f;
}
}
}
}
}
.right {
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
button {
margin-left: 24px;
&.edit {
background-image: url('~src/assets/images/icons/edit_24dp.svg');
}
&.add {
background-image: url('~src/assets/images/icons/add_library_dark_24.svg');
}
&.delete {
background-image: url('~src/assets/images/icons/close_24dp.svg');
}
&.move {
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
cursor: move;
}
}
}
.right-home {
width: 144px;
}
}
.items {
display: none;
}
&.active {
>.bar {
.left {
.toggle {
transform: rotate(180deg);
}
}
}
>.items {
display: block;
}
}
}
@media screen and (max-width: 1330px) {
.item {
.bar {
.mid {
padding: 0 12px;
.info .logo {
display: none;
}
}
.right {
display: none;
}
}
.items {
padding-left: 16px;
}
&.company {
.items {
padding-left: 40px;
}
}
}
}

35
src/app/_modules/pages/tree/item/pages-tree-item.component.html
View File

@ -1,26 +1,35 @@
<div class="item" [class.active]="active" [class.deleted]="isDeleted" [class.hidden]="isHidden" [class.home]="!parent" (click)="touched = true">
<div class="item" [class.deleted]="isDeleted" [class.hidden]="isHidden" [class.home]="!parent" (click)="touched = true">
<div class="bar">
<div class="left">
<button *ngIf="hasChildren" type="button" class="toggle" (click)="toggle()"></button>
<drop-down ico="chevron_right_24" [angle]="[0,90]" *ngIf="hasChildren" (toggle)="active=$event"></drop-down>
</div>
<div class="mid">
<div class="info">
<div class="logo"></div>
<div class="logo">
<ico ico="web_page_24" color="#FFF"></ico>
</div>
<div class="name"><p><a [routerLink]="page.link" target="_blank">{{page.name}}</a></p></div>
</div>
</div>
<div class="right">
<div class="menu">
<!--div class="move" title="Переместить"></div-->
<button type="button" *ngIf="parent && !isDeleted" class="clear clone" title="Копировать" (click)="clone()">C</button>
<button type="button" *ngIf="!isDeleted" class="clear add-child" title="Добавить страницу" (click)="add()"></button>
<button type="button" *ngIf="!isDeleted" class="clear edit" title="Редактировать" (click)="edit()" [class.orphan]="!parent"></button>
<button type="button" *ngIf="isDeleted" class="clear restore" title="Восстановить" (click)="restore()">R</button>
<button type="button" *ngIf="page.slug" class="clear close-blue" title="{{isDeleted ? 'Удалить безвозвратно' : 'Удалить'}}" (click)="delete()"></button>
</div>
<a *ngIf="parent && !isDeleted" class="clear clone" title="Копировать" (click)="clone()">
<ico ico="add_circle_24"></ico>
</a>
<a *ngIf="!isDeleted" class="clear add-child" title="Добавить страницу" (click)="add()">
<ico ico="add_web_page_24"></ico>
</a>
<a *ngIf="!isDeleted" class="clear edit" title="Редактировать" (click)="edit()">
<ico ico="edit_24"></ico>
</a>
<a *ngIf="isDeleted" class="clear restore" title="Восстановить" (click)="restore()">
<ico ico="visibility_on_24"></ico>
</a>
<a *ngIf="page.slug" class="clear close-blue" title="{{isDeleted ? 'Удалить безвозвратно' : 'Удалить'}}" (click)="delete()">
<ico ico="delete_24"></ico>
</a>
</div>
</div>
<div class="items">
<pages-tree *ngIf="active" [parent]="page"></pages-tree>
<div class="items" *ngIf="active">
<pages-tree [parent]="page"></pages-tree>
</div>
</div>

5
src/app/_modules/pages/tree/item/pages-tree-item.component.ts
View File

@ -15,7 +15,10 @@ export class PagesTreeItemComponent {
public touched = false;
public subscription: Subscription;
constructor(public pagesService: PagesService, private formsService: FormsService, private listsService: ListsService) {
constructor(
public pagesService: PagesService,
private formsService: FormsService,
private listsService: ListsService) {
}
ngOnInit() {

181
src/app/_modules/pages/tree/pages-tree.component.scss
View File

@ -1,181 +0,0 @@
.item:not(.home){
.bar{
padding-left: 50px;
}
.item .bar{
padding-left: 100px;
}
.item .item .bar{
padding-left: 150px;
}
.item .item .item .bar{
padding-left: 200px;
}
.item .item .item .item .bar{
padding-left: 250px;
}
}
.item {
flex-direction: column;
align-items: stretch;
.bar {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px 0;
border-bottom: #E0E0E0 solid 1px;
.left {
flex-shrink: 0;
width: 40px;
height: 24px;
cursor: pointer;
.toggle {
border:none;
width: 100%;
height: 100%;
background: transparent url("~src/assets/images/icons/expand_less_20.svg") 50% 50% no-repeat;
transform: rotate(90deg);
transition: transform .3s;
}
}
.mid {
flex-grow: 1;
padding: 0 16px;
.info {
display: flex;
flex-direction: row;
align-items: center;
.logo {
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
margin-right: 16px;
border-radius: 100px;
background-color: var(--prime);
color: #ffffff;
cursor: move;
span{
display: none;
}
&::before {
content: "";
display: block;
background: transparent url("~src/assets/images/icons/web_page_24dp.svg")no-repeat;
width: 24px;
height: 24px;
}
&.orphan::before{
background-image: url('~src/assets/images/icons/home_page_24dp.svg');
}
img {
width: 100%;
height: 100%;
border-radius: 100px;
object-fit: cover;
background-color: #ffffff;
}
}
.name {
p {
margin: 0;
a {
color: var(--grey-7);
}
&.sub {
font-size: 0.875rem;
color: #7f7f7f;
}
}
}
}
}
.right {
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
button {
margin-left: 24px;
&.edit {
background-image: url('~src/assets/images/icons/edit_24dp.svg');
}
&.add {
background-image: url('~src/assets/images/icons/add_library_dark_24.svg');
}
&.delete {
background-image: url('~src/assets/images/icons/close_24dp.svg');
}
&.move {
background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
cursor: move;
}
&.clone {
width: 24px;
background-color: #dedede;
}
&.restore {
width: 24px;
background-color: #dedede;
}
}
.orphan{
margin-right: 48px;
}
}
.right-home {
width: 144px;
}
}
.items {
display: none;
}
&.active {
>.bar {
.left {
.toggle {
transform: rotate(180deg);
}
}
}
>.items {
display: block;
}
}
}
@media screen and (max-width: 1330px) {
.item {
.bar {
.mid {
padding: 0 12px;
.info .logo {
display: none;
}
}
.right {
display: none;
}
}
.items {
padding-left: 16px;
}
&.company {
.items {
padding-left: 40px;
}
}
}
}

5
src/app/_services/pages.service.ts
View File

@ -16,7 +16,10 @@ export class PagesService {
constructor(private http: HttpClient) {
//this.find('/').subscribe(res => {this.rootPages = res.data});
}
rootPage:any
rootPage={
link:'',
slug:environment.defaultLocale
}
get currentPage() {
return this.currentPageSubject.value;

148
src/assets/css/_admin.scss Normal file
View File

@ -0,0 +1,148 @@
.administration-page{
font-size: 20px;
h2{
color: var(--second-act);
margin-bottom: 48px;
}
}
.site-admin-control{
display: flex;
justify-content: space-between;
cursor: pointer;
.site-admin-control-toggle{
display: flex;
align-items: center;
gap: 16px;
}
}
administrate-site-pages>pages-tree{
display: block;
margin-bottom: 128px;
}
pages-tree{
.item:not(.home){
.bar{
padding-left: 50px;
}
.item .bar{
padding-left: 100px;
}
.item .item .bar{
padding-left: 150px;
}
.item .item .item .bar{
padding-left: 200px;
}
.item .item .item .item .bar{
padding-left: 250px;
}
.item .item .item .item .item .bar{
padding-left: 300px;
}
}
.item {
flex-direction: column;
align-items: stretch;
.bar {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px 0;
border-bottom: #E0E0E0 solid 1px;
.left {
flex-shrink: 0;
width: 40px;
height: 24px;
cursor: pointer;
}
.mid {
flex-grow: 1;
padding: 0 16px;
.info {
display: flex;
flex-direction: row;
align-items: center;
.logo {
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
margin-right: 16px;
border-radius: 100px;
background-color: var(--prime);
color: #ffffff;
cursor: move;
&:hover{
background-color: var(--prime-act);
}
span{
display: none;
}
}
.name {
p {
margin: 0;
a {
color: var(--grey-7);
}
&.sub {
font-size: 0.875rem;
color: #7f7f7f;
}
}
}
}
}
.right {
display: flex;
flex-direction: row;
align-items: center;
flex-shrink: 1;
gap: 8px;
}
}
}
@media screen and (max-width: 1330px) {
.item {
.bar {
.mid {
padding: 0 12px;
.info .logo {
display: none;
}
}
.right {
display: none;
}
}
.items {
padding-left: 16px;
}
&.company {
.items {
padding-left: 40px;
}
}
}
}
}

29
src/assets/css/_grid.scss
View File

@ -169,24 +169,25 @@ footer{
pages-menu-item{
display: flex;
flex-direction: column;
}
.item{
display: flex;
align-items: flex-start;
drop-down{
margin-left: -24px;
}
min-height: 24px;
>a{
margin-top: 4px;
&.active {
color: #000000;
.item{
display: flex;
align-items: flex-start;
drop-down{
margin-left: -24px;
}
min-height: 24px;
>a{
margin-top: 4px;
&.active {
color: #000000;
}
}
}
}
.pages{
width: 100%;
}

3
src/assets/images/ico/add_web_page_24.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="ico">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V7H5V19ZM8 12V14H11V17H13V14H16V12H13V9H11V12H8Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

0
src/assets/images/ico/arrow_drop_down_24-1.svg → src/assets/images/ico/drop_down_24.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 197 B

After

Width:  |  Height:  |  Size: 197 B

3
src/styles.scss
View File

@ -12,4 +12,5 @@
@import 'slider';
@import 'tables';
@import 'tabs.scss';
@import 'pages-section';
@import 'pages-section';
@import 'admin';