Created
November 1, 2022 17:39
-
-
Save DingoEatingFuzz/5aa9fbd87df80e23d517569adeb6c0d7 to your computer and use it in GitHub Desktop.
New Avatar Source Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.avatar-source { | |
float: left; | |
margin-right: 20px; | |
padding-top: 3px; | |
position: relative; | |
width: 36px; | |
height: 36px; | |
img { | |
height: 36px; | |
width: 36px; | |
} | |
> img { | |
border-radius: 100%; | |
} | |
&.mini, &.mini img { | |
height: 26px; | |
width: 26px; | |
.icon { | |
&.source-icon { | |
height: 12px; | |
width: 12px; | |
right: 0px; | |
bottom: -2px; | |
font-size: 15px; | |
&:before { | |
left: 2px; | |
top: -2px; | |
} | |
} | |
} | |
} | |
} | |
.avatar-source-image-wrap { | |
background-image: image-url('default_avatar.jpg'); | |
background-size: 100% 100%; | |
border-radius: 100%; | |
display: block; | |
height: 36px; | |
overflow: hidden; | |
width: 36px; | |
.image-loaded & { | |
background: none; | |
} | |
} | |
.mini .avatar-source-image-wrap { | |
height: 26px; | |
width: 26px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { module, test } from 'qunit'; | |
import { setupRenderingTest } from 'test-app/tests/helpers'; | |
import { render } from '@ember/test-helpers'; | |
import { hbs } from 'ember-cli-htmlbars'; | |
module('Integration | Component | avatar-source', function (hooks) { | |
setupRenderingTest(hooks); | |
test('it requires an item', async function (assert) { | |
assert.expectAssertion( | |
() => render(hbs`<AvatarSource />`), | |
'avatar-source component requires item' | |
); | |
}); | |
test('it renders', async function (assert) { | |
this.set('item', { source: 'github' }); | |
await render(hbs`<AvatarSource @item={{this.item}} />`); | |
assert.dom(this.element).exists(); | |
}); | |
test('image-handling', async function (assert) { | |
this.set('item', { | |
source: 'github', | |
avatarUrl: 'http://example.com/nope.jpg', | |
}); | |
await render(hbs`<AvatarSource @item={{this.item}} />`); | |
assert.dom(this.element.querySelector('img')).doesNotExist(); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component from '@glimmer/component'; | |
import { tracked } from '@glimmer/tracking'; | |
import { action } from '@ember/object'; | |
import { assert } from '@ember/debug'; | |
export default class AvatarSourceComponent extends Component { | |
@tracked imageLoaded = false; | |
constructor() { | |
super(...arguments); | |
assert( | |
'avatar-source component requires item', | |
this.args.item != undefined | |
); | |
} | |
get isAtlasAuto() { | |
return this.args.item?.source === 'atlas-auto'; | |
} | |
get isAtlasArtifact() { | |
return this.args.item?.source === 'atlas-artifact'; | |
} | |
get isAtlasCompile() { | |
return this.args.item.source === 'atlas-compiled'; | |
} | |
get isAtlasUser() { | |
return this.args.item?.source === 'atlas-user'; | |
} | |
get isGithub() { | |
return this.args.item?.source === 'github'; | |
} | |
get isGitlab() { | |
return this.args.item?.source === 'gitlab'; | |
} | |
get isBitbucket() { | |
return this.args.item?.source === 'bitbucket'; | |
} | |
get isTerraform() { | |
return this.args.item?.source === 'terraform'; | |
} | |
get isState() { | |
return this.args.item?.isState; | |
} | |
get isVagrant() { | |
return this.args.item?.source === 'vagrant'; | |
} | |
@action | |
handleOnError(event) { | |
event.target.remove(); | |
this.args.onError?.(event); | |
} | |
@action | |
handleOnLoad() { | |
this.imageLoaded = true; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment