Commit 14d3b53a authored by Tim Zallmann's avatar Tim Zallmann

Comment user avatar Image, Changed Fixtures, added new shadow color

Needed to reorder css variables

Neede to reorder vars again

Added Changelog
parent f5eddb80
...@@ -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