Commit 0e20c8eb authored by Clement Ho's avatar Clement Ho

Merge branch 'tz-user-popover-follow-up' into 'master'

Added Comment to user avatar Image, Changed Fixtures to created ones, added shadow color

See merge request gitlab-org/gitlab-ce!23768
parents 3a601737 14d3b53a
...@@ -67,6 +67,7 @@ export default { ...@@ -67,6 +67,7 @@ export default {
// In both cases we should render the defaultAvatarUrl // In both cases we should render the defaultAvatarUrl
sanitizedSource() { sanitizedSource() {
let baseSrc = this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc; let baseSrc = this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
// Only adds the width to the URL if its not a base64 data image
if (!baseSrc.startsWith('data:') && !baseSrc.includes('?')) baseSrc += `?width=${this.size}`; if (!baseSrc.startsWith('data:') && !baseSrc.includes('?')) baseSrc += `?width=${this.size}`;
return baseSrc; return baseSrc;
}, },
......
...@@ -32,6 +32,15 @@ $gray-dark: darken($gray-light, $darken-dark-factor); ...@@ -32,6 +32,15 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
$gray-darker: #eee; $gray-darker: #eee;
$gray-darkest: #c4c4c4; $gray-darkest: #c4c4c4;
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);
$almost-black: #242424;
$t-gray-a-02: rgba($black, 0.02);
$t-gray-a-04: rgba($black, 0.04);
$t-gray-a-06: rgba($black, 0.06);
$t-gray-a-08: rgba($black, 0.08);
$gl-gray-100: #dddddd; $gl-gray-100: #dddddd;
$gl-gray-200: #cccccc; $gl-gray-200: #cccccc;
$gl-gray-350: #aaaaaa; $gl-gray-350: #aaaaaa;
...@@ -170,11 +179,6 @@ $theme-light-red-500: #c24b38; ...@@ -170,11 +179,6 @@ $theme-light-red-500: #c24b38;
$theme-light-red-600: #b03927; $theme-light-red-600: #b03927;
$theme-light-red-700: #a62e21; $theme-light-red-700: #a62e21;
$black: #000;
$black-transparent: rgba(0, 0, 0, 0.3);
$shadow-color: rgba($black, 0.1);
$almost-black: #242424;
$border-white-light: darken($white-light, $darken-border-factor); $border-white-light: darken($white-light, $darken-border-factor);
$border-white-normal: darken($white-normal, $darken-border-factor); $border-white-normal: darken($white-normal, $darken-border-factor);
...@@ -187,6 +191,7 @@ $border-gray-dark: darken($white-normal, $darken-border-factor); ...@@ -187,6 +191,7 @@ $border-gray-dark: darken($white-normal, $darken-border-factor);
* UI elements * UI elements
*/ */
$border-color: #e5e5e5; $border-color: #e5e5e5;
$shadow-color: $t-gray-a-08;
$well-expand-item: #e8f2f7; $well-expand-item: #e8f2f7;
$well-inner-border: #eef0f2; $well-inner-border: #eef0f2;
$well-light-border: #f1f1f1; $well-light-border: #f1f1f1;
......
title: Changed Userpopover Fixtures and shadow color
merge_request: 23768
author:
type: other
...@@ -2,6 +2,9 @@ import initUserPopovers from '~/user_popovers'; ...@@ -2,6 +2,9 @@ import initUserPopovers from '~/user_popovers';
import UsersCache from '~/lib/utils/users_cache'; import UsersCache from '~/lib/utils/users_cache';
describe('User Popovers', () => { describe('User Popovers', () => {
const fixtureTemplate = 'merge_requests/diff_comment.html.raw';
preloadFixtures(fixtureTemplate);
const selector = '.js-user-link'; const selector = '.js-user-link';
const dummyUser = { name: 'root' }; const dummyUser = { name: 'root' };
...@@ -15,11 +18,7 @@ describe('User Popovers', () => { ...@@ -15,11 +18,7 @@ describe('User Popovers', () => {
}; };
beforeEach(() => { beforeEach(() => {
setFixtures(` loadFixtures(fixtureTemplate);
<a href="/root" data-user-id="1" class="js-user-link" data-username="root" data-original-title="" title="">
Root
</a>
`);
const usersCacheSpy = () => Promise.resolve(dummyUser); const usersCacheSpy = () => Promise.resolve(dummyUser);
spyOn(UsersCache, 'retrieveById').and.callFake(userId => usersCacheSpy(userId)); spyOn(UsersCache, 'retrieveById').and.callFake(userId => usersCacheSpy(userId));
...@@ -39,7 +38,7 @@ describe('User Popovers', () => { ...@@ -39,7 +38,7 @@ describe('User Popovers', () => {
expect(shownPopover).not.toBeNull(); expect(shownPopover).not.toBeNull();
expect(shownPopover.innerHTML).toContain(dummyUser.name); expect(shownPopover.innerHTML).toContain(dummyUser.name);
expect(UsersCache.retrieveById).toHaveBeenCalledWith('1'); expect(UsersCache.retrieveById).toHaveBeenCalledWith('58');
triggerEvent('mouseleave', document.querySelector(selector)); triggerEvent('mouseleave', document.querySelector(selector));
......
...@@ -17,14 +17,13 @@ const DEFAULT_PROPS = { ...@@ -17,14 +17,13 @@ const DEFAULT_PROPS = {
const UserPopover = Vue.extend(userPopover); const UserPopover = Vue.extend(userPopover);
describe('User Popover Component', () => { describe('User Popover Component', () => {
const fixtureTemplate = 'merge_requests/diff_comment.html.raw';
preloadFixtures(fixtureTemplate);
let vm; let vm;
beforeEach(() => { beforeEach(() => {
setFixtures(` loadFixtures(fixtureTemplate);
<a href="/root" data-user-id="1" class="js-user-link" title="testuser">
Root
</a>
`);
}); });
afterEach(() => { afterEach(() => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment