summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css9
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts33
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css (renamed from cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css)0
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html18
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts (renamed from cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts)11
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts (renamed from cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts)36
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html156
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts40
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html9
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts51
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html70
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts5
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css0
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html4
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts25
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts25
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html46
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts12
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts18
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts9
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts4
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts73
-rw-r--r--cds-ui/client-frankfurt/src/styles.css37
23 files changed, 419 insertions, 272 deletions
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
index 36abc9329..067d30d7f 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -184,7 +184,7 @@ button.rotate{
.input-search-controller{
height: 50px;
padding-left: 30px;
- background: url(/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
+ background: url(src/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
border-radius: 0;
border: 0;
border-bottom: solid 1px #D7E7F9;
@@ -333,7 +333,7 @@ p.compType-4{
padding-left: 36px;
border: 0;
font-size: 14px;
- background: url(/assets/img/icon-drag.svg) #fff 20px center no-repeat;
+ background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
}
/*CANVAS*/
@@ -366,10 +366,10 @@ p.compType-4{
padding-left: 30px;
}
.viewBtns .topologySource{
- background-image: url(/assets/img/icon-topologyView-active.svg);
+ background-image: url(src/assets/img/icon-topologyView-active.svg);
}
.viewBtns .topologyView{
- background-image: url(/assets/img/icon-topologySource.svg);
+ background-image: url(src/assets/img/icon-topologySource.svg);
}
.card.actionContainer{
margin: 20px 20px 40px 60px;
@@ -392,6 +392,7 @@ p.compType-4{
background: #C3CDDB;
}
.actionContainer .card-body{
+ min-height: 170px;
padding: 15px 20px !important;
border: solid 1px #C3CDDB;
background: #fff;
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
new file mode 100644
index 000000000..068e93160
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/model/packages-dashboard.state.ts
@@ -0,0 +1,33 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {BluePrintPage} from './BluePrint.model';
+
+export class PackagesDashboardState {
+
+ page: BluePrintPage;
+ command: string;
+ currentPage = 0;
+ totalPackages: number;
+ tags: string[];
+ sortBy = 'DATE';
+ totalPackagesWithoutSearchorFilters: number;
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css
index e69de29bb..e69de29bb 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.css
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
new file mode 100644
index 000000000..6ce3a53a1
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html
@@ -0,0 +1,18 @@
+<div class="dropdown packagesFilter w-100">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">ALL PACKAGES TAGS</div>
+ <ul class="dropdown-content w-100">
+ <li>
+ <div class="form-group">
+ <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus>
+ </div>
+ </li>
+ <li *ngFor="let tag of viewedTags">
+ <div class="custom-control custom-checkbox">
+ <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}>
+ <label class="custom-control-label" for={{tag}}>{{tag}}</label>
+ </div>
+ </li>
+ </ul>
+</div>
+
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts
index aaacfb9e8..8285d8962 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.spec.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.spec.ts
@@ -20,22 +20,21 @@ limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SearchByTagsComponent } from './search-by-tags.component';
+import { TagsFilteringComponent } from './filter-by-tags.component';
describe('SearchByTagsComponent', () => {
- let component: SearchByTagsComponent;
- let fixture: ComponentFixture<SearchByTagsComponent>;
+ let component: TagsFilteringComponent;
+ let fixture: ComponentFixture<TagsFilteringComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ SearchByTagsComponent ]
+ declarations: [ TagsFilteringComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(SearchByTagsComponent);
+ fixture = TestBed.createComponent(TagsFilteringComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
index b5cc52fc0..b4007215a 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts
@@ -24,12 +24,12 @@ import {PackagesStore} from '../../packages.store';
import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model';
@Component({
- selector: 'app-search-by-tags',
- templateUrl: './search-by-tags.component.html',
- styleUrls: ['./search-by-tags.component.css']
+ selector: 'app-filter-by-tags',
+ templateUrl: './filter-by-tags.component.html',
+ styleUrls: ['./filter-by-tags.component.css']
})
-export class SearchByTagsComponent implements OnInit {
+export class TagsFilteringComponent implements OnInit {
page: BluePrintPage;
tags: string[] = [];
@@ -37,10 +37,24 @@ export class SearchByTagsComponent implements OnInit {
searchTag = '';
viewedPackages: BlueprintModel[] = [];
private checkBoxTages = '';
- private searchPackage = '';
+
constructor(private packagesStore: PackagesStore,
) {
+ this.packagesStore.state$.subscribe(state => {
+ console.log(state);
+ if (state.page) {
+ this.viewedPackages = state.page.content;
+ this.viewedPackages.forEach(element => {
+ element.tags.split(',').forEach(tag => {
+ this.tags.push(tag.trim());
+ });
+ this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index);
+ this.assignTags();
+
+ });
+ }
+ });
}
ngOnInit() {
@@ -78,17 +92,9 @@ export class SearchByTagsComponent implements OnInit {
return;
}
this.viewedPackages = [];
- this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
+ // this.packagesStore.getPagesFilterByTags(this.checkBoxTages);
+ // this.viewedPackages = this.viewedPackages.filter((value, index, self) => self.indexOf(value) === index);
}
- searchPackages(event: any) {
- this.searchPackage = event.target.value;
- this.searchPackage = this.searchPackage.trim();
- if (this.searchPackage) {
- this.packagesStore.getPagedPackagesByKeyWord(this.searchPackage, 0, 2);
- } else {
- this.packagesStore.getPagedPackages(0, 2);
- }
- }
}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index f67b3ca6a..18428d4b4 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -1,92 +1,104 @@
-<div class="row packages-card"><div class="col-lg-3 col-md-6 p-0">
- <!--Add Package Card-->
- <div class="card addPaackage-card">
- <div class="card-body text-center">
- <img src="/assets/img/icon-addPackage.svg">
- </div>
- <div class="card-footer row">
- <div class="col text-right pr-0">
- <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
- </a>
+<div class="row packages-card">
+ <div class="col-lg-3 col-md-6">
+ <!--Add Package Card-->
+ <div class="card addPaackage-card">
+ <div class="card-body text-center">
+ <img src="/assets/img/icon-addPackage.svg">
</div>
- <div class="col pr-0">
- <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package
- </a>
+ <div class="card-footer row">
+ <div class="col">
+ <a href="#" role="button" aria-pressed="true" class="btn-create-package float">Create Package
+ </a>
+ </div>
+ <div class="col">
+ <a href="#" role="button" aria-pressed="true" class="btn-import-package float">Import Package
+ </a>
+ </div>
</div>
</div>
</div>
-</div>
-<div class="col-lg-3 col-md-6 p-0" *ngFor="let bluePrint of viewedPackages">
+ <div class="col-lg-3 col-md-6" *ngFor="let bluePrint of viewedPackages">
- <!--Card 1-->
- <div>
- <div class="card">
- <div class="card-body">
- <div class="row">
- <div class="col-9 pr-0">
- <h5 class="card-title">{{bluePrint.artifactName}}</h5>
- <p>Last modified {{bluePrint.createdDate}} by {{bluePrint.updatedBy}}</p>
- <ul class="package-contributers">
- <li>
- <button type="button" class="border-fade" data-toggle="tooltip" data-placement="bottom"
- title="User name">
- <img src="/assets/img/img-user1.jpeg">
- </button>
- </li>
- <li>
- <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name">
- <img src="/assets/img/img-user2.jpg">
- </button>
- </li>
- <li>
- <button type="button" data-toggle="tooltip" data-placement="bottom" title="User name">
- <img src="/assets/img/img-user3.jpg">
- </button>
- </li>
- <li>
- <a href="">5 contributors</a>
- </li>
- </ul>
- </div>
- <div class="col-3">
- <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
- <div class="dropdown">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">
- <img src="/assets/img/icon-menuDots.svg" title="Actions">
+ <!--Card 1-->
+ <div>
+ <div class="card">
+ <div class="card-body">
+ <div class="row">
+ <div class="col-9 pr-0">
+ <h5 class="card-title" [routerLink]="['/packages/package', bluePrint.id]" (click)="testDispatch(bluePrint)">
+ <img class="icon-deployed" src="/assets/img/icon-deploy.svg">
+ {{bluePrint.artifactName}}
+ </h5>
+
+ </div>
+ <div class="col-3">
+
+ <div class="dropdown">
+ <input class="dropdown-toggle" type="text">
+ <div class="dropdown-text">
+ <img src="/assets/img/icon-menuDots.svg" title="Actions">
+ </div>
+ <ul class="dropdown-content">
+ <li class="action-clone">
+ <a href="#">Clone</a>
+ </li>
+ <li class="action-archive">
+ <a href="#">Archive</a>
+ </li>
+ <li class="action-delete">
+ <a href="#">Delete</a>
+ </li>
+ </ul>
</div>
- <ul class="dropdown-content">
- <li class="action-clone">
- <a href="#">Clone</a>
+
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <p class="mb-0">Last modified {{ bluePrint.createdDate | date:'short' }}
+ </p>
+ <p>By {{bluePrint.updatedBy}}</p>
+ <ul class="package-contributers">
+ <li>
+ <button type="button" class="border-fade" data-toggle="tooltip"
+ data-placement="bottom"
+ title="User name">
+ <img src="/assets/img/img-user1.jpeg">
+ </button>
+ </li>
+ <li>
+ <button type="button" data-toggle="tooltip" data-placement="bottom"
+ title="User name">
+ <img src="/assets/img/img-user2.jpg">
+ </button>
</li>
- <li class="action-archive">
- <a href="#">Archive</a>
+ <li>
+ <button type="button" data-toggle="tooltip" data-placement="bottom"
+ title="User name">
+ <img src="/assets/img/img-user3.jpg">
+ </button>
</li>
- <li class="action-delete">
- <a href="#">Delete</a>
+ <li>
+ <a href="">5 contributors</a>
</li>
</ul>
</div>
</div>
- </div>
- <div class="card-footer">
- <div class="row">
- <div class="col">
- <button type="button" class="btn btn-card-topology">Topology View
- </button>
- </div>
- <div class="col">
- <button type="button" class="btn btn-card-config">Configuration</button>
+ <div class="card-footer">
+ <div class="row">
+ <div class="col">
+ <button type="button" class="btn btn-card-topology">Topology View
+ </button>
+ </div>
+ <div class="col">
+ <button type="button" class="btn btn-card-config">Configuration</button>
+ </div>
</div>
</div>
</div>
+
</div>
</div>
- <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
- <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
- <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
- </div>
</div>
</div>
-</div> \ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
index 4ef0faf45..c7ec0af20 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -1,28 +1,32 @@
-import { Component, OnInit } from '@angular/core';
-import { BlueprintModel } from '../../model/BluePrint.model';
-import { PackagesStore } from '../../packages.store';
+import {Component, OnInit} from '@angular/core';
+import {BlueprintModel} from '../../model/BluePrint.model';
+import {PackagesStore} from '../../packages.store';
@Component({
- selector: 'app-packages-list',
- templateUrl: './package-list.component.html',
- styleUrls: ['./package-list.component.css']
+ selector: 'app-packages-list',
+ templateUrl: './package-list.component.html',
+ styleUrls: ['./package-list.component.css']
})
export class PackageListComponent implements OnInit {
- viewedPackages: BlueprintModel[] = [];
- numberOfPackages: number;
+ viewedPackages: BlueprintModel[] = [];
- constructor(private packagesStore: PackagesStore) {
- console.log('PackageListComponent');
- this.packagesStore.state$.subscribe(page => {
- console.log(page);
- this.viewedPackages = page.content;
- });
- }
+ constructor(private packagesStore: PackagesStore) {
+ console.log('PackageListComponent');
+ this.packagesStore.state$.subscribe(state => {
+ console.log(state);
+ if (state.page) {
+ this.viewedPackages = state.page.content;
+ }
+ });
+ }
- ngOnInit() {
- // this.packagesStore.getPagedPackages(0, this.packagesStore.pageSize);
- }
+ ngOnInit() {
+ this.packagesStore.getAll();
+ }
+ testDispatch(bluePrint: BlueprintModel) {
+ console.log(bluePrint.id);
+ }
}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
index cdc0aaa1f..b5245f757 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.html
@@ -1,4 +1,7 @@
+<!--Package Paginator-->
<div class="col package-paginator pr-0">
- <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [(pageSize)]="pageSize" class="float-right"
- (pageChange)="getPageFromService($event)"></ngb-pagination>
-</div> \ No newline at end of file
+ <ngb-pagination [collectionSize]="totalCount" [(page)]="pageNumber" [pageSize]="pageSize" class="float-right"
+ (pageChange)="getPageFromService($event)"
+
+ ></ngb-pagination>
+</div>
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
index 49a88c6c2..49f91316b 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/package-pagination/package-pagination.component.ts
@@ -1,30 +1,41 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { PackagesStore } from '../../packages.store';
+import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+import {map} from 'rxjs/operators';
@Component({
- selector: 'app-package-pagination',
- templateUrl: './package-pagination.component.html',
- styleUrls: ['./package-pagination.component.css'],
+ selector: 'app-package-pagination',
+ templateUrl: './package-pagination.component.html',
+ styleUrls: ['./package-pagination.component.css'],
})
export class PackagePaginationComponent implements OnInit {
- pageNumber = 0;
- totalCount = 4;
- pageSize: number;
+ pageNumber: number;
+ totalCount: number;
+ pageSize: number;
+ previousPage: number;
- constructor(private packagesStore: PackagesStore) {
- this.pageSize = packagesStore.pageSize;
- }
+ constructor(private packagesStore: PackagesStore) {
+ this.pageSize = packagesStore.pageSize;
- ngOnInit() {
- }
+ this.packagesStore.state$
+ .subscribe(state => {
+ this.pageNumber = state.currentPage;
+ this.totalCount = state.totalPackages;
+ });
+ }
+
+ ngOnInit() {
+ }
- public getPageFromService(page) {
- console.log('getPageFromService', page);
- if (isNaN(page)) {
- page = 1;
- console.log('page change to first...', page);
+ public getPageFromService(page) {
+ console.log('getPageFromService', page);
+ if (isNaN(page)) {
+ page = 1;
+ console.log('page change to first...', page);
+ }
+ if (this.previousPage !== page) {
+ this.packagesStore.getPage(page - 1, this.packagesStore.pageSize);
+ this.previousPage = page;
+ }
}
- this.packagesStore.getPagedPackages(page - 1, this.packagesStore.pageSize);
- }
}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index 09a343546..ac510893b 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -2,66 +2,60 @@
</app-header>
<div class="new-wrapper">
<div class="container-fluid main-container">
- <!-- <router-outlet></router-outlet> -->
- <!--Page Title-->
- <header class="page-title">
- <div class="row">
- <h2 class="col m-0">CBA Packages
- <span>(20 packages)</span>
- </h2>
- <div class="col">
- </div>
- </div>
- </header>
<div class="container-fluid body-container">
<nav class="row">
<!--Nav Tabs-->
<div class="col pr-0">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home"
- aria-selected="true">All</a>
- <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile"
- aria-selected="false">Deployed</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact"
- aria-selected="false">Under Construction</a>
- <a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1" role="tab" aria-controls="nav-contact1"
- aria-selected="false">Archived</a>
+ <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
+ role="tab" aria-controls="nav-home"
+ aria-selected="true">All</a>
+ <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
+ role="tab" aria-controls="nav-profile"
+ aria-selected="false">Deployed</a>
+ <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
+ role="tab" aria-controls="nav-contact"
+ aria-selected="false">Under Construction</a>
+ <a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1"
+ role="tab" aria-controls="nav-contact1"
+ aria-selected="false">Archived</a>
+ </div>
+ </div>
+ <!--Nav Search & Filter-->
+ <div class="col search-filter-col">
+ <div class="row">
+ <div class="col-7">
+ <app-packages-search></app-packages-search>
+ </div>
+ <div class="col-5 pl-2">
+ <app-filter-by-tags class="w-100"></app-filter-by-tags>
+ </div>
+
</div>
</div>
- <app-search-by-tags class="w-50"></app-search-by-tags>
</nav>
<div class="row mt-4">
<div class="col">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="row">
- <!--Package Sort-->
<div class="col sort-packages">
- Sort by:
- <div class="dropdown">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">Recent</div>
- <ul class="dropdown-content">
- <li>
- <a href="#">Name</a>
- </li>
- <li>
- <a href="#">Recent</a>
- </li>
- </ul>
- </div>
+
</div>
- <!--Package Paginator-->
<app-package-pagination></app-package-pagination>
+
</div>
<app-packages-list></app-packages-list>
-
+
+ </div>
+ <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
+ <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
+ <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact1-tab">...
</div>
</div>
</div>
</div>
-
</div>
</div>
- </div> \ No newline at end of file
+</div>
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
index 0820d9356..4e33a9df1 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -19,6 +19,7 @@ limitations under the License.
============LICENSE_END============================================
*/
import {Component, OnInit} from '@angular/core';
+import {PackagesStore} from '../packages.store';
@Component({
selector: 'app-packages-dashboard',
@@ -27,10 +28,10 @@ import {Component, OnInit} from '@angular/core';
})
export class PackagesDashboardComponent implements OnInit {
- constructor() {
- }
+ constructor() { }
ngOnInit() {
+
console.log('PackagesDashboardComponent');
}
}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.css
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
new file mode 100644
index 000000000..e7c605fd1
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
@@ -0,0 +1,4 @@
+<div class="searchBox">
+ <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+ <button class="searchButton" href="#"></button>
+</div> \ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts
new file mode 100644
index 000000000..7e50c55cc
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PackagesSearchComponent } from './search-by-packages.component';
+
+describe('PackagesSearchComponent', () => {
+ let component: PackagesSearchComponent;
+ let fixture: ComponentFixture<PackagesSearchComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [PackagesSearchComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PackagesSearchComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts
new file mode 100644
index 000000000..91304e5c2
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.ts
@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {PackagesStore} from '../../packages.store';
+
+@Component({
+ selector: 'app-packages-search',
+ templateUrl: './search-by-packages.component.html',
+ styleUrls: ['./search-by-packages.component.css']
+})
+export class PackagesSearchComponent implements OnInit {
+
+ private searchQuery = '';
+
+ constructor(private packagesStore: PackagesStore) {
+ }
+
+ ngOnInit() {
+ }
+
+
+ searchPackages(event: any) {
+ this.searchQuery = event.target.value;
+ this.searchQuery = this.searchQuery.trim();
+ this.packagesStore.search(this.searchQuery);
+ }
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html
deleted file mode 100644
index ea6c742a0..000000000
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!--Nav Search & Filter-->
-<div class="col search-filter-col">
- <div class="row">
- <div class="col-7">
- <div class="searchBox">
- <input class="searchInput" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
- <button class="searchButton" href="#"></button>
- </div>
- </div>
- <div class="col-5 pl-2">
- <div class="dropdown packagesFilter w-100">
- <input class="dropdown-toggle" type="text">
- <div class="dropdown-text">ALL PACKAGES TAGS</div>
- <ul class="dropdown-content w-100">
- <li>
- <div class="form-group">
- <input type="text" (input)="reloadChanges($event)" class="form-control" placeholder="Search" autofocus>
- </div>
- </li>
- <li *ngFor="let tag of viewedTags">
- <div class="custom-control custom-checkbox">
- <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}>
- <label class="custom-control-label" for={{tag}}>{{tag}}</label>
- </div>
- <!--<div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheck2">
- <label class="custom-control-label" for="customCheck2">Check this custom
- checkbox</label>
- </div>
- <div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheck3">
- <label class="custom-control-label" for="customCheck3">Check this custom
- checkbox</label>
- </div>
- <div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheck4">
- <label class="custom-control-label" for="customCheck4">Check this custom
- checkbox</label>
- </div>-->
- </li>
-
- </ul>
- </div>
- </div>
- </div>
-</div>
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts
deleted file mode 100644
index 116441bc2..000000000
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-dashboard/search-by-tags/search-by-tags.service.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {TestBed} from '@angular/core/testing';
-
-import {SearchByTagsService} from './search-by-tags.service';
-
-describe('SearchByTagsService', () => {
- beforeEach(() => TestBed.configureTestingModule({}));
-
- it('should be created', () => {
- const service: SearchByTagsService = TestBed.get(SearchByTagsService);
- expect(service).toBeTruthy();
- });
-});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts
index deaa4d957..e8a98099c 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages-list.service.ts
@@ -31,18 +31,16 @@ import {BlueprintModel, BluePrintPage} from './model/BluePrint.model';
})
export class PackagesListService {
packages: BlueprintModel[] = [];
- originalPackage: BlueprintModel[] = [];
- private bluePrintModel: BlueprintModel;
private numberOfPackages: number;
constructor(private api: ApiService<BluePrintPage>) {
}
- getPagedPackages(pageNumber: number, pageSize: number): Observable<BluePrintPage[]> {
+ getPagedPackages(pageNumber: number, pageSize: number, sortBy: string): Observable<BluePrintPage[]> {
return this.api.get(BlueprintURLs.getPagedBlueprints, {
offset: pageNumber,
limit: pageSize,
- sort: 'DATE'
+ sort: sortBy
});
}
@@ -50,13 +48,6 @@ export class PackagesListService {
return this.api.get(BlueprintURLs.getMetaDate + '/' + keyword);
}
-
- // getPackageNumber(): number {
- // this.getCountOfAllPackages(this.api.get(BlueprintURLs.countOfAllBluePrints));
- // return this.numberOfPackages;
-
- // }
-
getCountOfAllPackages(observable: Observable<number>) {
observable.subscribe(data => {
this.numberOfPackages = data;
@@ -64,11 +55,12 @@ export class PackagesListService {
});
}
- getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) {
+ getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number, sortBy: string) {
+
return this.api.get(BlueprintURLs.getMetaDatePageable + '/' + keyWord, {
offset: pageNumber,
limit: pageSize,
- sort: 'DATE'
+ sort: sortBy
});
}
}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
index 0bcd0fa99..f24ae8b00 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
@@ -4,20 +4,23 @@ import {ApiService} from '../../../common/core/services/api.typed.service';
import {PackagesRoutingModule} from './packages.routing.module';
import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
import { SharedModulesModule } from '../../shared-modules/shared-modules.module';
-import {SearchByTagsComponent} from './packages-dashboard/search-by-tags/search-by-tags.component';
import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component';
import { PackageListComponent } from './packages-dashboard/package-list/package-list.component';
import { DesignerComponent } from './designer/designer.component';
import { SidebarModule } from 'ng-sidebar';
import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component';
+import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component';
+import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component';
+
@NgModule({
declarations: [PackagesDashboardComponent,
- SearchByTagsComponent,
+ TagsFilteringComponent,
PackageListComponent,
DesignerComponent,
- PackagePaginationComponent
+ PackagePaginationComponent,
+ PackagesSearchComponent,
],
imports: [
CommonModule,
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
index ad9f36979..83044dde5 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -1,7 +1,7 @@
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component';
-import { DesignerComponent } from './designer/designer.component';
+import {DesignerComponent} from './designer/designer.component';
const routes: Routes = [
@@ -9,7 +9,7 @@ const routes: Routes = [
path: '',
component: PackagesDashboardComponent
},
- { path: 'designer', component: DesignerComponent },
+ {path: 'designer', component: DesignerComponent},
];
@NgModule({
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts
index 799946dbc..d770bf737 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.store.ts
@@ -23,35 +23,82 @@ import {Injectable} from '@angular/core';
import {BluePrintPage} from './model/BluePrint.model';
import {Store} from '../../../common/core/stores/Store';
import {PackagesListService} from './packages-list.service';
+import {PackagesDashboardState} from './model/packages-dashboard.state';
@Injectable({
providedIn: 'root'
})
-export class PackagesStore extends Store<BluePrintPage> {
- private bluePrintModels: BluePrintPage;
-
+export class PackagesStore extends Store<PackagesDashboardState> {
// TDOD fixed for now as there is no requirement to change it from UI
- public pageSize = 2;
+ public pageSize = 5;
constructor(private packagesServiceList: PackagesListService) {
- super(new BluePrintPage());
+ super(new PackagesDashboardState());
+ }
+
+ public getAll() {
+ console.log('getting all packages...');
+ this.getPagedPackages(0, this.pageSize);
+ }
+
+ public search(command: string) {
+ if (command) {
+ this.searchPagedPackages(command, 0, this.pageSize);
+ } else {
+ this.getPagedPackages(0, this.pageSize);
+ }
+ }
+
+ public getPage(pageNumber: number, pageSize: number) {
+ if (this.isCommandExist()) {
+ this.searchPagedPackages(this.state.command, pageNumber, pageSize);
+ } else {
+ this.getPagedPackages(pageNumber, pageSize);
+ }
}
- getPagedPackages(pageNumber: number, pageSize: number) {
- this.packagesServiceList.getPagedPackages(pageNumber, pageSize)
+ public sortPagedPackages(sortBy: string) {
+ if (this.isCommandExist()) {
+ this.searchPagedPackages(this.state.command, this.state.currentPage, this.pageSize, sortBy);
+ } else {
+ this.getPagedPackages(this.state.currentPage, this.pageSize, sortBy);
+ }
+
+ }
+
+ private getPagedPackages(pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+
+ this.packagesServiceList.getPagedPackages(pageNumber, pageSize, sortBy)
.subscribe((pages: BluePrintPage[]) => {
- this.setState(pages[0]);
+ this.setState({
+ ...this.state,
+ page: pages[0],
+ command: '',
+ totalPackages: pages[0].totalElements,
+ currentPage: pageNumber,
+ // this param is set only in get all as it represents the total number of pacakges in the server
+ totalPackagesWithoutSearchorFilters: pages[0].totalElements,
+ sortBy
+ });
});
}
- getPagedPackagesByKeyWord(keyWord: string, pageNumber: number, pageSize: number) {
- this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize)
+ private searchPagedPackages(keyWord: string, pageNumber: number, pageSize: number, sortBy: string = this.state.sortBy) {
+ this.packagesServiceList.getPagedPackagesByKeyWord(keyWord, pageNumber, pageSize, sortBy)
.subscribe((pages: BluePrintPage[]) => {
- this.setState(pages[0]);
+ this.setState({
+ ...this.state,
+ page: pages[0],
+ command: keyWord,
+ totalPackages: pages[0].totalElements,
+ currentPage: pageNumber,
+ sortBy
+ });
});
-
}
-
+ private isCommandExist() {
+ return this.state.command;
+ }
}
diff --git a/cds-ui/client-frankfurt/src/styles.css b/cds-ui/client-frankfurt/src/styles.css
index 850f6824a..ff85e332f 100644
--- a/cds-ui/client-frankfurt/src/styles.css
+++ b/cds-ui/client-frankfurt/src/styles.css
@@ -330,7 +330,7 @@ height: 40px;
/**Packages Cards***/
/***Package Info Card***/
.packages-card .card{
- margin: 0 9px;
+ margin: 0;
border-radius: 2px;
border: 0;
box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
@@ -498,6 +498,10 @@ height: 40px;
.searchInput::placeholder{
color: #BABBC3;
}
+ .searchBox-expanded{
+ width: 240px;
+ border-bottom: solid 1px #C3CDDB;
+ }
/**Drop Down Menu**/
.dropdown{
position: relative;
@@ -694,6 +698,7 @@ height: 40px;
/**Packages Filter**/
.packagesFilter{
margin-top: 12px;
+ margin-bottom: 7px;
}
.packagesFilter .dropdown-toggle{
height: 36px !important;
@@ -827,7 +832,7 @@ height: 40px;
/**Packages Cards***/
/***Package Info Card***/
.packages-card .card{
- margin: 0 9px;
+ margin: 0;
border-radius: 2px;
border: 0;
box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
@@ -845,6 +850,16 @@ height: 40px;
font-size: 14px;
color: #D0D7E4;
}
+.packages-card .card-body{
+ padding-bottom: 0 !important;
+}
+.packages-card .card-footer .col{
+ padding: 0;
+ text-align: center;
+}
+.packages-card .card-footer .col:last-child{
+ padding-left: 20px;
+}
/***Add Package Card***/
.addPaackage-card{
background: #F4F9FE !important;
@@ -854,11 +869,11 @@ height: 40px;
box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important;
}
.addPaackage-card img{
- margin-bottom: 12px;
+ margin-bottom: 33px;
margin-top: 8px;
}
.addPaackage-card a{
- margin: 0 0 20px;
+ margin: 0 0 14px;
padding: 10px 10px 10px 32px;
font-weight: bold;
font-size: 10px;
@@ -873,6 +888,13 @@ height: 40px;
.addPaackage-card a:hover{
text-decoration: unset;
}
+ .addPaackage-card .card-footer .col{
+ padding: 0;
+ text-align: right;
+ }
+ .addPaackage-card .card-footer .col:last-child{
+ text-align: left;
+ }
.btn-create-package,
.btn-create-package:hover{
background-color: #1B3E6F;
@@ -957,7 +979,7 @@ height: 40px;
}
/***Contributers***/
ul.package-contributers{
- margin-bottom: 0 !important;
+ /*margin-bottom: 0 !important;*/
padding-left: 0 !important;
}
.package-contributers li{
@@ -973,6 +995,7 @@ height: 40px;
.package-contributers li:last-child{
margin-left: 9px;
}
+ .package-modifier,
.package-contributers button{
padding: 0 !important;
border-radius: 100%;
@@ -986,6 +1009,7 @@ height: 40px;
display: inline-block;
position: relative;
}
+ .package-modifier:before,
.package-contributers button:before{
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
@@ -999,10 +1023,12 @@ height: 40px;
right: 0;
top: 0;
}
+ .package-modifier:hover,
.package-contributers button:hover{
box-shadow: 0 0 0 2px #D7E7F9;
text-decoration: none;
}
+ .package-modifier:hover:before,
.package-contributers button:hover:before{
-webkit-transform: scale(0.925);
-moz-transform: scale(0.925);
@@ -1012,6 +1038,7 @@ height: 40px;
box-shadow: 0 0 0 1px #D7E7F9;
opacity: 0.5;
}
+ .package-modifier img,
.package-contributers button img{
width: 28px;
height: 28px;