spawntree
/
matsen-tool-fe
2
0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
Преглед изворни кода

refactoring toggle

master
Florian Eisenmenger пре 1 година
родитељ
48c96d86db
комит
c006e508b7
12 измењених фајлова са 218 додато и 167 уклоњено
Један поглед
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      matsen-tool/src/app/_components/toggle/toggle.component.html
  2. +44
    -45
      matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html
  3. +2
    -0
      matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts
  4. +52
    -53
      matsen-tool/src/app/home/home.component.html
  5. +1
    -1
      matsen-tool/src/app/layout/two-column/two-column.component.html
  6. +7
    -13
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.html
  7. +2
    -0
      matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts
  8. +1
    -1
      matsen-tool/src/app/postings/new-posting/new-posting.component.ts
  9. +44
    -45
      matsen-tool/src/app/sales/sales-detail/sales-detail.component.html
  10. +60
    -4
      matsen-tool/src/assets/scss/_basics.scss
  11. +1
    -1
      matsen-tool/src/assets/scss/_form.scss
  12. +3
    -3
      matsen-tool/src/assets/scss/_sales.scss

+ 1
- 1
matsen-tool/src/app/_components/toggle/toggle.component.html Прегледај датотеку

@@ -1,5 +1,5 @@
<div class="toggle-component"> <div class="toggle-component">
<div class="toggle" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + toggleId"
<div class="toggle collapsed" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + toggleId"
aria-expanded="false"> aria-expanded="false">
<h2>{{ headline }}</h2> <h2>{{ headline }}</h2>
</div> </div>


+ 44
- 45
matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html Прегледај датотеку

@@ -24,59 +24,58 @@
</div> </div>
</div> </div>
</div> </div>
<div class="spt-container">
<div class="posts">
<div class="d-flex justify-content-between align-items-start">
<h2>{{'basic.posts' | translate}}</h2>
<button class="btn btn-primary" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
</div>
<div class="post mb-3" *ngFor="let post of posts">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ post.ownerName }}</p>
</div>
<div>
<h3>{{ post.headline }}</h3>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
</div>
<span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
data-action="edit" (click)="openModalEditPosting(post)"></span>
</div>
</div>
<div *ngIf="post.id && commentsVisibility.get(post.id)">
<div class="card ms-5" *ngFor="let comment of post.comments">
<app-toggle #togglePosts [headline]="'basic.posts' | translate">
<div class="spt-container">
<div class="posts position-relative">
<button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
<div class="post mb-3" *ngFor="let post of posts">
<div class="card">
<div class="card-body"> <div class="card-body">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ comment.ownerName }}</p>
<p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ post.ownerName }}</p>
</div> </div>
<div> <div>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
<h3>{{ post.headline }}</h3>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
</div>
<span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
data-action="edit" (click)="openModalEditPosting(post)"></span>
</div>
</div>
<div *ngIf="post.id && commentsVisibility.get(post.id)">
<div class="card ms-5" *ngFor="let comment of post.comments">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ comment.ownerName }}</p>
</div>
<div>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
</div>
<span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
data-action="edit" (click)="openModalEditComment(comment)"></span>
</div> </div>
<span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
data-action="edit" (click)="openModalEditComment(comment)"></span>
</div> </div>
</div> </div>
</div>


<div class="d-flex justify-content-end mt-1">
<span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showComments(post)">
<ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
<div class="d-flex justify-content-end mt-1">
<span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showComments(post)">
<ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
</div>
</div> </div>
<mat-paginator *ngIf="posts.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"
showFirstLastButtons>
</mat-paginator>
</div> </div>
<mat-paginator *ngIf="posts.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"
showFirstLastButtons>
</mat-paginator>
</div> </div>
</div>
</app-toggle>

+ 2
- 0
matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts Прегледај датотеку

@@ -127,6 +127,8 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
let posting: PostJsonld = {} as PostJsonld; let posting: PostJsonld = {} as PostJsonld;
posting.contact = this.contact.id ?? null; posting.contact = this.contact.id ?? null;
posting.partner = this.contact.partner ?? null; posting.partner = this.contact.partner ?? null;
// TODO: REAL PRODUCT
posting.product = "/api/products/101";
modalRefPosting.componentInstance.posting = posting; modalRefPosting.componentInstance.posting = posting;
modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => { modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
if (modalStatus === ModalStatus.Submitted) { if (modalStatus === ModalStatus.Submitted) {


+ 52
- 53
matsen-tool/src/app/home/home.component.html Прегледај датотеку

@@ -61,66 +61,65 @@
</div> </div>


<div class="container spt-container"> <div class="container spt-container">
<div class="spt-accordion">
<div class="d-flex justify-content-between align-items-start">
<h2>{{'user.my' | translate}} {{'basic.tasks' | translate}}</h2>
<button class="btn btn-primary" (click)="openModalNewTask()">{{'basic.new-task' | translate}}</button>
</div>
<div class="tasks mb-3" *ngFor="let task of tasks">
<div class="card p-3">
<div class="position-relative" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
aria-expanded="false"
aria-controls="collapseExample">
<h3 class="m-0">{{task.partnerName}}</h3>
<span class="info d-flex position-absolute">
<span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
<span class="importance" [attr.data-importance]="task.prio"></span>
</span>
<h2 class="m-0">{{task.headline}}</h2>
</div>
<div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
<div class="pt-3 pe-5 position-relative">
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
<p>Zugewiesen an: {{task.assignedToName}}</p>
<span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
<app-toggle #togglePosts [headline]="('user.my' | translate) + ' ' + ('basic.tasks' | translate)">
<div class="spt-accordion position-relative">
<button class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{'basic.new-task' | translate}}</button>
<div class="tasks mb-3" *ngFor="let task of tasks">
<div class="card p-3">
<div class="position-relative" data-bs-toggle="collapse" [attr.data-bs-target]="'#collapse-' + ApiConverter.extractId(task.id)"
aria-expanded="false"
aria-controls="collapseExample">
<h3 class="m-0">{{task.partnerName}}</h3>
<span class="info d-flex position-absolute">
<span class="due-date">{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}</span>
<span class="importance" [attr.data-importance]="task.prio"></span>
</span>
<h2 class="m-0">{{task.headline}}</h2>
</div> </div>
</div>
</div>
<ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">
<div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ taskNote.ownerName }}</p>
</div>
<div>
<p>{{ taskNote.message }}</p>
<div class="collapse" id="collapse-{{ApiConverter.extractId(task.id)}}">
<div class="pt-3 pe-5 position-relative">
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(task.description)"></p>
<p>Zugewiesen an: {{task.assignedToName}}</p>
<span *ngIf="task.createdBy === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTask(task)"></span>
</div> </div>
<span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
</div> </div>
</div> </div>
</ng-container>
<ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">
<div class="card ms-5" *ngFor="let taskNote of task.taskNotes">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ taskNote.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ taskNote.ownerName }}</p>
</div>
<div>
<p>{{ taskNote.message }}</p>
</div>
<span *ngIf="taskNote.owner === user?.id" class="position-absolute bi bi-pencil p-2"
data-type="user-tool" data-action="edit" (click)="openModalEditTaskNote(taskNote)"></span>
</div>
</div>
</ng-container>


<div class="d-flex justify-content-end mt-1">
<span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showTaskNotes(task)">
<ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2" (click)="openModalNewTaskNote(task)">{{'basic.comment-it' | translate}}</span>
<div class="d-flex justify-content-end mt-1">
<span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showTaskNotes(task)">
<ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2" (click)="openModalNewTaskNote(task)">{{'basic.comment-it' | translate}}</span>
</div>
</div> </div>
<mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="tasksLength"
(page)="tasksHandlePageEvent($event)"
[pageSize]="tasksPageSize"
[pageIndex]="tasksPageIndex"
showFirstLastButtons>
</mat-paginator>
</div> </div>
<mat-paginator *ngIf="tasks.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="tasksLength"
(page)="tasksHandlePageEvent($event)"
[pageSize]="tasksPageSize"
[pageIndex]="tasksPageIndex"
showFirstLastButtons>
</mat-paginator>
</div>
</app-toggle>
</div> </div>


<!-- <div class="container spt-container">--> <!-- <div class="container spt-container">-->


+ 1
- 1
matsen-tool/src/app/layout/two-column/two-column.component.html Прегледај датотеку

@@ -52,7 +52,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="col-10">
<div class="col-10 pb-5">
<div class="pe-3 pt-3"> <div class="pe-3 pt-3">
<button class="btn btn-secondary mb-3" (click)="goBack()">{{'basic.back' | translate}}</button> <button class="btn btn-secondary mb-3" (click)="goBack()">{{'basic.back' | translate}}</button>
<router-outlet></router-outlet> <router-outlet></router-outlet>


+ 7
- 13
matsen-tool/src/app/partners/partners-detail/partners-detail.component.html Прегледај датотеку

@@ -48,11 +48,9 @@
</div> </div>
<app-toggle #toggleContacts [headline]="'basic.contacts' | translate"> <app-toggle #toggleContacts [headline]="'basic.contacts' | translate">
<div class="spt-container"> <div class="spt-container">
<div class="contacts">
<div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
<button class="btn btn-primary" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
</button>
</div>
<div class="contacts position-relative">
<button class="btn btn-primary toggle-btn" (click)="openModalNewContact()">{{ 'basic.new-contact' | translate }}
</button>
<div class="row"> <div class="row">
<div class="col-4" *ngFor="let contact of contacts"> <div class="col-4" *ngFor="let contact of contacts">
<div class="card"> <div class="card">
@@ -91,10 +89,8 @@


<app-toggle #toggleTasks [headline]="'basic.tasks' | translate"> <app-toggle #toggleTasks [headline]="'basic.tasks' | translate">
<div class="spt-container"> <div class="spt-container">
<div class="spt-accordion">
<div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
<button class="btn btn-primary" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
</div>
<div class="spt-accordion position-relative">
<button class="btn btn-primary toggle-btn" (click)="openModalNewTask()">{{ 'basic.new-task' | translate }}</button>
<div class="tasks mb-3" *ngFor="let task of tasks"> <div class="tasks mb-3" *ngFor="let task of tasks">
<div class="card p-3"> <div class="card p-3">
<div class="position-relative" data-bs-toggle="collapse" <div class="position-relative" data-bs-toggle="collapse"
@@ -158,10 +154,8 @@
</app-toggle> </app-toggle>
<app-toggle #togglePosts [headline]="'basic.posts' | translate"> <app-toggle #togglePosts [headline]="'basic.posts' | translate">
<div class="spt-container"> <div class="spt-container">
<div class="posts">
<div class="d-flex justify-content-end align-items-start mb-3 toggle-btn">
<button class="btn btn-primary" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
</div>
<div class="posts position-relative">
<button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{ 'basic.new-post' | translate }}</button>
<div class="post mb-3" *ngFor="let post of posts"> <div class="post mb-3" *ngFor="let post of posts">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">


+ 2
- 0
matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts Прегледај датотеку

@@ -295,6 +295,8 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
const modalRefPosting = this.modalService.open(NewPostingComponent, this.modalOptions); const modalRefPosting = this.modalService.open(NewPostingComponent, this.modalOptions);
let posting: PostJsonld = {} as PostJsonld; let posting: PostJsonld = {} as PostJsonld;
posting.partner = this.partner.id ?? null; posting.partner = this.partner.id ?? null;
// TODO: REAL PRODUCT
posting.product = "/api/products/101";
modalRefPosting.componentInstance.posting = posting; modalRefPosting.componentInstance.posting = posting;
modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => { modalRefPosting.componentInstance.submit.subscribe((modalStatus: ModalStatus) => {
if (modalStatus === ModalStatus.Submitted) { if (modalStatus === ModalStatus.Submitted) {


+ 1
- 1
matsen-tool/src/app/postings/new-posting/new-posting.component.ts Прегледај датотеку

@@ -2,7 +2,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {ModalStatus} from "@app/_helpers/modal.states"; import {ModalStatus} from "@app/_helpers/modal.states";
import {FormGroup} from "@angular/forms"; import {FormGroup} from "@angular/forms";
import {postForm} from "@app/_forms/apiForms"; import {postForm} from "@app/_forms/apiForms";
import {PostJsonld, PostService} from "@app/core/api/v1";
import {PartnerJsonld, PostJsonld, PostService} from "@app/core/api/v1";
import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer"; import {FormGroupInitializer} from "@app/_helpers/formgroup.initializer";
import {ApiConverter} from "@app/_helpers/api.converter"; import {ApiConverter} from "@app/_helpers/api.converter";
import {Subscription} from "rxjs"; import {Subscription} from "rxjs";


+ 44
- 45
matsen-tool/src/app/sales/sales-detail/sales-detail.component.html Прегледај датотеку

@@ -23,59 +23,58 @@
</div> </div>
</div> </div>


<div class="spt-container">
<div class="posts">
<div class="d-flex justify-content-between align-items-start">
<h2>{{'basic.posts' | translate}}</h2>
<button class="btn btn-primary" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
</div>
<div class="post mb-3" *ngFor="let post of posts">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ post.ownerName }}</p>
</div>
<div>
<h3>{{ post.headline }}</h3>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
</div>
<span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
data-action="edit" (click)="openModalEditPosting(post)"></span>
</div>
</div>
<div *ngIf="post.id && commentsVisibility.get(post.id)">
<div class="card ms-5" *ngFor="let comment of post.comments">
<app-toggle #togglePosts [headline]="'basic.posts' | translate">
<div class="spt-container">
<div class="posts position-relative">
<button class="btn btn-primary toggle-btn" (click)="openModalNewPosting()">{{'basic.new-post' | translate}}</button>
<div class="post mb-3" *ngFor="let post of posts">
<div class="card">
<div class="card-body"> <div class="card-body">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ comment.ownerName }}</p>
<p>{{ post.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ post.ownerName }}</p>
</div> </div>
<div> <div>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
<h3>{{ post.headline }}</h3>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(post.message)"></p>
</div>
<span *ngIf="post.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
data-action="edit" (click)="openModalEditPosting(post)"></span>
</div>
</div>
<div *ngIf="post.id && commentsVisibility.get(post.id)">
<div class="card ms-5" *ngFor="let comment of post.comments">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<p>{{ comment.createdAt | date:'dd.MM.YYYY' }}</p>
<p>{{ comment.ownerName }}</p>
</div>
<div>
<p class="m-0" [innerHTML]="apiConverter.getSafeLongtext(comment.message)"></p>
</div>
<span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
data-action="edit" (click)="openModalEditComment(comment)"></span>
</div> </div>
<span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
data-action="edit" (click)="openModalEditComment(comment)"></span>
</div> </div>
</div> </div>
</div>


<div class="d-flex justify-content-end mt-1">
<span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showComments(post)">
<ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
<div class="d-flex justify-content-end mt-1">
<span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
(click)="showComments(post)">
<ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
<ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
</span>
<span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
</div>
</div> </div>
<mat-paginator *ngIf="posts.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"
showFirstLastButtons>
</mat-paginator>
</div> </div>
<mat-paginator *ngIf="posts.length > 0" class="rounded-1"
[pageSizeOptions]="[10,20,30]"
[length]="postsLength"
(page)="postsHandlePageEvent($event)"
[pageSize]="postsPageSize"
[pageIndex]="postsPageIndex"
showFirstLastButtons>
</mat-paginator>
</div> </div>
</div>
</app-toggle>

+ 60
- 4
matsen-tool/src/assets/scss/_basics.scss Прегледај датотеку

@@ -1,5 +1,11 @@
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
html, body {
height: 100%;
}

body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}


body { body {
background: #d2d2d2; background: #d2d2d2;
@@ -27,6 +33,7 @@ img {
} }


.spt-container { .spt-container {
min-height: 1px;
margin-bottom: 3rem; margin-bottom: 3rem;
} }


@@ -39,12 +46,15 @@ img {
position: absolute; position: absolute;
right: 0; right: 0;
top: -16px; top: -16px;

&[data-importance="low"] { &[data-importance="low"] {
background: #77bb33; background: #77bb33;
} }

&[data-importance="medium"] { &[data-importance="medium"] {
background: #ffee55; background: #ffee55;
} }

&[data-importance="high"] { &[data-importance="high"] {
background: #bb1414; background: #bb1414;
} }
@@ -58,6 +68,52 @@ img {
} }
} }


.toggle {
background: $color-matsen;
color: #fff;
padding: 3px 10px 3px 40px;
border-radius: 6px;
margin-bottom: 1rem;
position: relative;
cursor: pointer;

* {
margin: 0 !important;
}

&:before,
&:after {
content: "";
position: absolute;
top: 17px;
width: 15px;
height: 2px;
background: #fff;
@include transition();
}

&:before {
transform: rotate(45deg);
left: 10px;
}

&:after {
transform: rotate(-45deg);
left: 20px;
}
&.collapsed {
&:before {
transform: rotate(-45deg);
}
&:after {
transform: rotate(45deg);
}
}
}

.toggle-btn { .toggle-btn {
margin-top: -3.25rem;
}
position: absolute;
right: 0;
top: -3.38rem;
}


+ 1
- 1
matsen-tool/src/assets/scss/_form.scss Прегледај датотеку

@@ -5,7 +5,7 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
padding: 2px 0; padding: 2px 0;
border-radius: 5px;
border-radius: 6px;
@include transition(); @include transition();
&:hover { &:hover {
background: $color-matsen; background: $color-matsen;


+ 3
- 3
matsen-tool/src/assets/scss/_sales.scss Прегледај датотеку

@@ -1,15 +1,15 @@
.sales-summary-container { .sales-summary-container {


.sales-summary-bar { .sales-summary-bar {
border-radius: 5px;
border-radius: 6px;
background: #bbb; background: #bbb;
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
div { div {
animation: expand 2.5s ease; animation: expand 2.5s ease;
border-radius: 5px;
border-radius: 6px;
span { span {
display: block; display: block;
border-radius: 5px;
border-radius: 6px;
padding: 15px; padding: 15px;
white-space: nowrap; white-space: nowrap;
} }


Write Preview
Loading…
Откажи
Сачувај