Skip to content

Commit 960fd8e

Browse files
spadgettspadgett
committed
Add SVG icons
1 parent 0e43eba commit 960fd8e

File tree

8 files changed

+90
-39
lines changed

8 files changed

+90
-39
lines changed

‎dist/less/order-service.less

+6
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@
1818
max-height: 60px;
1919
max-width: 60px;
2020
}
21+
&[src$=".svg"] {
22+
height: 52px;
23+
@media (min-width: @order-service-title-sm-min) {
24+
height: 60px;
25+
}
26+
}
2127
}
2228
}
2329
}

‎dist/origin-web-catalogs.css

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/origin-web-catalogs.js

+29-20
Large diffs are not rendered by default.

‎src/components/create-from-builder/create-from-builder-info.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<div class="order-service-details">
22
<div class="order-service-details-top">
33
<div class="service-icon">
4-
<span class="icon {{$ctrl.imageStream.iconClass}}" aria-hidden="true"></span>
4+
<span ng-if="!$ctrl.imageStream.imageUrl" class="icon {{$ctrl.imageStreamiconClass}}" aria-hidden="true"></span>
5+
<span ng-if="$ctrl.imageStream.imageUrl" class="image"><img ng-src="{{$ctrl.imageStream.imageUrl}}" alt=""></span>
56
</div>
67
<div class="service-title-area">
78
<div class="service-title">

‎src/components/services-view/services-view.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,12 @@ <h1>Browse Catalog</h1>
6060
ng-class="{ active: $ctrl.currentSubFilter === subCategory.id }">
6161
<a href="" id="{{'services-sub-category-'+subCategory.id}}"
6262
class="services-sub-category-tab" ng-click="$ctrl.selectSubCategory(subCategory.id)">
63-
<div class="services-sub-category-tab-image" ng-if="subCategory.imageUrl">
64-
<img ng-src="{{subCategory.imageUrl}}" alt="">
63+
<div class="services-sub-category-tab-image" ng-if="imageUrl = (subCategory.imageUrl || (subCategory.icon | imageForIconClass))">
64+
<img ng-src="{{imageUrl}}" alt="">
6565
</div>
66-
<div class="services-sub-category-tab-icon {{subCategory.icon}}" ng-if="subCategory.icon && !subCategory.imageUrl"></div>
66+
<div class="services-sub-category-tab-icon {{subCategory.icon}}"
67+
ng-class="{ 'font-icon': !subCategory.icon.contains('fa ') }"
68+
ng-if="subCategory.icon && !subCategory.imageUrl && !(subCategory.icon | imageForIconClass)"></div>
6769
<div class="services-sub-category-tab-name">{{subCategory.label}}</div>
6870
</a>
6971
<a ng-click="$ctrl.mobileView = 'subcategories'" class="services-back-link" href="">Back</a>

‎src/constants.ts

+13-13
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,20 @@ var saasOfferings: any = [
2020

2121
var categories: any = [
2222
{id: 'languages', label: 'Languages', subCategories: [
23-
{id: 'java', label: 'Java', tags: ['java'], icon: 'font-icon icon-openjdk'},
24-
{id: 'javascript', tags: ['javascript', 'nodejs', 'js'], label: 'JavaScript', icon: 'font-icon icon-js'},
25-
{id: 'dotnet', label: '.NET', tags: ['dotnet'], icon: 'font-icon icon-dotnet'},
26-
{id: 'perl', label: 'Perl', tags: ['perl'], icon: 'font-icon icon-perl'},
27-
{id: 'ruby', label: 'Ruby', tags: ['ruby'], icon: 'font-icon icon-ruby'},
28-
{id: 'php', label: 'PHP', tags: ['php'], icon: 'font-icon icon-php'},
29-
{id: 'python', label: 'Python', tags: ['python'], icon: 'font-icon icon-python'},
30-
{id: 'golang', label: 'Go', tags: ['golang', 'go'], icon: 'font-icon icon-go-gopher'}
23+
{id: 'java', label: 'Java', tags: ['java'], icon: 'icon-openjdk'},
24+
{id: 'javascript', tags: ['javascript', 'nodejs', 'js'], label: 'JavaScript', icon: 'icon-js'},
25+
{id: 'dotnet', label: '.NET', tags: ['dotnet'], icon: 'icon-dotnet'},
26+
{id: 'perl', label: 'Perl', tags: ['perl'], icon: 'icon-perl'},
27+
{id: 'ruby', label: 'Ruby', tags: ['ruby'], icon: 'icon-ruby'},
28+
{id: 'php', label: 'PHP', tags: ['php'], icon: 'icon-php'},
29+
{id: 'python', label: 'Python', tags: ['python'], icon: 'icon-python'},
30+
{id: 'golang', label: 'Go', tags: ['golang', 'go'], icon: 'icon-go-gopher'},
3131
]},
3232
{id: 'databases', label: 'Databases', subCategories: [
33-
{id: 'mongodb', label: 'Mongo', tags: ['mongodb'], icon: 'font-icon icon-mongodb'},
34-
{id: 'mysql', label: 'mySQL', tags: ['mysql'], icon: 'font-icon icon-mysql-database'},
35-
{id: 'postgresql', label: 'Postgres', tags: ['postgresql'], icon: 'font-icon icon-postgresql'},
36-
{id: 'mariadb', label: 'MariaDB', tags: ['mariadb'], icon: 'font-icon icon-mariadb'}
33+
{id: 'mongodb', label: 'Mongo', tags: ['mongodb'], icon: 'icon-mongodb'},
34+
{id: 'mysql', label: 'mySQL', tags: ['mysql'], icon: 'icon-mysql-database'},
35+
{id: 'postgresql', label: 'Postgres', tags: ['postgresql'], icon: 'icon-postgresql'},
36+
{id: 'mariadb', label: 'MariaDB', tags: ['mariadb'], icon: 'icon-mariadb'}
3737
]},
3838
{id: 'middleware', label: 'Middleware', subCategories: [
3939
{id: 'integration', label: 'Integration', tags: ['amq', 'fuse', 'jboss-fuse', 'sso']},
@@ -42,7 +42,7 @@ var categories: any = [
4242
{id: 'runtimes', label: 'Runtimes & Frameworks', tags: ['eap', 'httpd', 'tomcat']}
4343
]},
4444
{id: 'cicd', label: 'CI/CD', subCategories: [
45-
{id: 'jenkins', label: 'Jenkins', tags: ['jenkins'], icon: 'font-icon icon-jenkins'},
45+
{id: 'jenkins', label: 'Jenkins', tags: ['jenkins'], icon: 'icon-jenkins'},
4646
{id: 'pipelines', label: 'Pipelines', tags: ['pipelines'], icon: 'fa fa-clone'}
4747
]}
4848
];

‎src/services/catalog.service.ts

+21-2
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,10 @@ export class CatalogService {
161161
return _.get(this.constants, ['PUBLISHER_SYNONYMS', rawVendor]) as string || rawVendor;
162162
}
163163

164+
public getImageForIconClass(iconClass: string): string {
165+
return this.$filter('imageForIconClass')(iconClass) as string;
166+
}
167+
164168
/**
165169
* Creates an items array under each sub-category and categorizes each
166170
* item accordingly. Dynamically creates 'all' and 'other' main and sub-
@@ -341,7 +345,14 @@ export class ServiceItem implements IServiceItem {
341345
}
342346

343347
private getImage(): string {
344-
return _.get(this.resource, 'externalMetadata.imageUrl') as string || '';
348+
let image: string = _.get(this.resource, 'externalMetadata.imageUrl') as string;
349+
if (image) {
350+
return image;
351+
}
352+
353+
354+
let iconClass: string = _.get(this.resource, ['externalMetadata', 'console.openshift.io/iconClass']) as string;
355+
return this.catalogSrv.getImageForIconClass(iconClass);
345356
}
346357

347358
private getIcon(): string {
@@ -392,6 +403,7 @@ export class ImageItem implements IServiceItem {
392403
this.builderSpecTagName = this.getBuilderSpecTagName();
393404
if (this.builderSpecTagName) {
394405
this.tags = this.getTags();
406+
this.imageUrl = this.getImage();
395407
this.iconClass = this.getIcon();
396408
this.name = this.getName();
397409
this.description = this.getDescription();
@@ -430,6 +442,11 @@ export class ImageItem implements IServiceItem {
430442
return this.catalogSrv.$filter('imageStreamTagTags')(this.resource, this.builderSpecTagName);
431443
}
432444

445+
private getImage() {
446+
let iconClass = this.catalogSrv.$filter('imageStreamTagIconClass')(this.resource, this.builderSpecTagName);
447+
return this.catalogSrv.getImageForIconClass(iconClass);
448+
}
449+
433450
private getIcon() {
434451
let icon = this.catalogSrv.$filter('imageStreamTagIconClass')(this.resource, this.builderSpecTagName);
435452
icon = (icon.indexOf('icon-') !== -1) ? 'font-icon ' + icon : icon;
@@ -483,7 +500,9 @@ export class TemplateItem implements IServiceItem {
483500
}
484501

485502
private getImage() {
486-
return '';
503+
// Show images instead for some icon classes that we recognize.
504+
let iconClass = _.get(this.resource, 'metadata.annotations.iconClass') as string;
505+
return this.catalogSrv.getImageForIconClass(iconClass);
487506
}
488507

489508
private getIcon() {

‎src/styles/order-service.less

+6
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@
1818
max-height: 60px;
1919
max-width: 60px;
2020
}
21+
&[src$=".svg"] {
22+
height: 52px;
23+
@media (min-width: @order-service-title-sm-min) {
24+
height: 60px;
25+
}
26+
}
2127
}
2228
}
2329
}

0 commit comments

Comments
 (0)