mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-27 12:36:14 +01:00
convert icon component to ts
This commit is contained in:
Kyle Spearrin
parent
f922b2e0cb
commit
b3c671cca0
@ -59,7 +59,6 @@ require('./directives/formDirective.js');
|
||||
require('./directives/stopClickDirective.js');
|
||||
require('./directives/stopPropDirective.js');
|
||||
require('./directives/fallbackSrcDirective.js');
|
||||
require('./components/iconComponent.js');
|
||||
require('./components/actionButtonsComponent.js');
|
||||
require('./services/backgroundService.js');
|
||||
require('./services/authService.js');
|
||||
|
||||
@ -15,7 +15,6 @@ class CipherItemsController implements ng.IController {
|
||||
select(cipher: any) {
|
||||
return this.onSelected()(cipher);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export const CipherItemsComponent = {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import * as angular from 'angular';
|
||||
import { CipherItemsComponent } from './cipher-items.component';
|
||||
import { IconComponent } from './icon.component';
|
||||
|
||||
export default angular
|
||||
.module('bit.components', [])
|
||||
.component('cipherItems', CipherItemsComponent)
|
||||
.component('icon', IconComponent)
|
||||
.name;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="icon">
|
||||
<div class="icon">
|
||||
<img ng-src="{{$ctrl.image}}" fallback-src="{{$ctrl.fallbackImage}}" ng-if="$ctrl.imageEnabled && $ctrl.image" alt="" />
|
||||
<i class="fa fa-fw fa-lg {{$ctrl.icon}}" ng-if="!$ctrl.imageEnabled || !$ctrl.image"></i>
|
||||
</div>
|
||||
91
src/popup/app/components/icon.component.ts
Normal file
91
src/popup/app/components/icon.component.ts
Normal file
@ -0,0 +1,91 @@
|
||||
import * as template from './icon.component.html';
|
||||
|
||||
class IconController implements ng.IController {
|
||||
onSelected: Function;
|
||||
onView: Function;
|
||||
|
||||
cipher: any;
|
||||
icon: string;
|
||||
image: string;
|
||||
fallbackImage: string;
|
||||
imageEnabled: boolean;
|
||||
|
||||
private iconsUrl: string;
|
||||
|
||||
constructor(private stateService: any, private constantsService: any, private environmentService: any) {
|
||||
this.imageEnabled = stateService.getState('faviconEnabled');
|
||||
|
||||
this.iconsUrl = environmentService.iconsUrl;
|
||||
if (!this.iconsUrl) {
|
||||
if (environmentService.baseUrl) {
|
||||
this.iconsUrl = environmentService.baseUrl + '/icons';
|
||||
}
|
||||
else {
|
||||
this.iconsUrl = 'https://icons.bitwarden.com';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$onChanges() {
|
||||
switch (this.cipher.type) {
|
||||
case this.constantsService.cipherType.login:
|
||||
this.icon = 'fa-globe';
|
||||
this.setLoginIcon();
|
||||
break;
|
||||
case this.constantsService.cipherType.secureNote:
|
||||
this.icon = 'fa-sticky-note-o';
|
||||
break;
|
||||
case this.constantsService.cipherType.card:
|
||||
this.icon = 'fa-credit-card';
|
||||
break;
|
||||
case this.constantsService.cipherType.identity:
|
||||
this.icon = 'fa-id-card-o';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private setLoginIcon() {
|
||||
if (this.cipher.login.uri) {
|
||||
let hostnameUri = this.cipher.login.uri;
|
||||
let isWebsite = false;
|
||||
|
||||
if (hostnameUri.indexOf('androidapp://') === 0) {
|
||||
this.icon = 'fa-android';
|
||||
this.image = null;
|
||||
}
|
||||
else if (hostnameUri.indexOf('iosapp://') === 0) {
|
||||
this.icon = 'fa-apple';
|
||||
this.image = null;
|
||||
}
|
||||
else if (this.imageEnabled && hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('.') > -1) {
|
||||
hostnameUri = 'http://' + hostnameUri;
|
||||
isWebsite = true;
|
||||
}
|
||||
else if (this.imageEnabled) {
|
||||
isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > -1;
|
||||
}
|
||||
|
||||
if (this.imageEnabled && isWebsite) {
|
||||
try {
|
||||
const url = new URL(hostnameUri);
|
||||
this.image = this.iconsUrl + '/' + url.hostname + '/icon.png';
|
||||
this.fallbackImage = chrome.extension.getURL('images/fa-globe.png');
|
||||
}
|
||||
catch (e) { }
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.image = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const IconComponent = {
|
||||
bindings: {
|
||||
cipher: '<',
|
||||
},
|
||||
controller: IconController,
|
||||
template,
|
||||
};
|
||||
@ -1,78 +0,0 @@
|
||||
angular
|
||||
.module('bit.components')
|
||||
|
||||
.component('icon', {
|
||||
bindings: {
|
||||
cipher: '<'
|
||||
},
|
||||
templateUrl: 'app/components/views/icon.html',
|
||||
controller: function (stateService, constantsService, environmentService) {
|
||||
var ctrl = this;
|
||||
ctrl.imageEnabled = stateService.getState('faviconEnabled');
|
||||
|
||||
var iconsUrl = environmentService.iconsUrl;
|
||||
if (!iconsUrl) {
|
||||
if (environmentService.baseUrl) {
|
||||
iconsUrl = environmentService.baseUrl + '/icons';
|
||||
}
|
||||
else {
|
||||
iconsUrl = 'https://icons.bitwarden.com';
|
||||
}
|
||||
}
|
||||
|
||||
ctrl.$onChanges = function () {
|
||||
switch (ctrl.cipher.type) {
|
||||
case constantsService.cipherType.login:
|
||||
ctrl.icon = 'fa-globe';
|
||||
setLoginIcon(ctrl.cipher);
|
||||
break;
|
||||
case constantsService.cipherType.secureNote:
|
||||
ctrl.icon = 'fa-sticky-note-o';
|
||||
break;
|
||||
case constantsService.cipherType.card:
|
||||
ctrl.icon = 'fa-credit-card';
|
||||
break;
|
||||
case constantsService.cipherType.identity:
|
||||
ctrl.icon = 'fa-id-card-o';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function setLoginIcon() {
|
||||
if (ctrl.cipher.login.uri) {
|
||||
var hostnameUri = ctrl.cipher.login.uri,
|
||||
isWebsite = false;
|
||||
|
||||
if (hostnameUri.indexOf('androidapp://') === 0) {
|
||||
ctrl.icon = 'fa-android';
|
||||
ctrl.image = null;
|
||||
}
|
||||
else if (hostnameUri.indexOf('iosapp://') === 0) {
|
||||
ctrl.icon = 'fa-apple';
|
||||
ctrl.image = null;
|
||||
}
|
||||
else if (ctrl.imageEnabled && hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('.') > -1) {
|
||||
hostnameUri = "http://" + hostnameUri;
|
||||
isWebsite = true;
|
||||
}
|
||||
else if (ctrl.imageEnabled) {
|
||||
isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > -1;
|
||||
}
|
||||
|
||||
if (ctrl.imageEnabled && isWebsite) {
|
||||
try {
|
||||
var url = new URL(hostnameUri);
|
||||
ctrl.image = iconsUrl + '/' + url.hostname + '/icon.png';
|
||||
ctrl.fallbackImage = chrome.extension.getURL('images/fa-globe.png');
|
||||
}
|
||||
catch (e) { }
|
||||
}
|
||||
}
|
||||
else {
|
||||
ctrl.image = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
58
tslint.json
58
tslint.json
@ -2,34 +2,40 @@
|
||||
"extends": "tslint:recommended",
|
||||
"rules": {
|
||||
"ban-types": {
|
||||
"options": [
|
||||
["Object", "Avoid using the `Object` type. Did you mean `object`?"],
|
||||
["Boolean", "Avoid using the `Boolean` type. Did you mean `boolean`?"],
|
||||
["Number", "Avoid using the `Number` type. Did you mean `number`?"],
|
||||
["String", "Avoid using the `String` type. Did you mean `string`?"],
|
||||
["Symbol", "Avoid using the `Symbol` type. Did you mean `symbol`?"]
|
||||
]
|
||||
"options": [
|
||||
[ "Object", "Avoid using the `Object` type. Did you mean `object`?" ],
|
||||
[ "Boolean", "Avoid using the `Boolean` type. Did you mean `boolean`?" ],
|
||||
[ "Number", "Avoid using the `Number` type. Did you mean `number`?" ],
|
||||
[ "String", "Avoid using the `String` type. Did you mean `string`?" ],
|
||||
[ "Symbol", "Avoid using the `Symbol` type. Did you mean `symbol`?" ]
|
||||
]
|
||||
},
|
||||
"member-access": [true, "no-public"],
|
||||
"member-ordering": [true, {"order": [
|
||||
"public-static-field",
|
||||
"public-static-method",
|
||||
"protected-static-field",
|
||||
"protected-static-method",
|
||||
"private-static-field",
|
||||
"private-static-method",
|
||||
"public-instance-field",
|
||||
"protected-instance-field",
|
||||
"private-instance-field",
|
||||
"public-constructor",
|
||||
"protected-constructor",
|
||||
"private-constructor",
|
||||
"public-instance-method",
|
||||
"protected-instance-method",
|
||||
"private-instance-method"
|
||||
]}],
|
||||
"member-access": [ true, "no-public" ],
|
||||
"member-ordering": [
|
||||
true,
|
||||
{
|
||||
"order": [
|
||||
"public-static-field",
|
||||
"public-static-method",
|
||||
"protected-static-field",
|
||||
"protected-static-method",
|
||||
"private-static-field",
|
||||
"private-static-method",
|
||||
"public-instance-field",
|
||||
"protected-instance-field",
|
||||
"private-instance-field",
|
||||
"public-constructor",
|
||||
"protected-constructor",
|
||||
"private-constructor",
|
||||
"public-instance-method",
|
||||
"protected-instance-method",
|
||||
"private-instance-method"
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-empty": [ true, "allow-empty-catch" ],
|
||||
"object-literal-sort-keys": false,
|
||||
"quotemark": [true, "single"],
|
||||
"quotemark": [ true, "single" ],
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user