Commit d0f7e4df authored by Luke "Jared" Bennett's avatar Luke "Jared" Bennett Committed by Tim Zallmann

Resolve "lock/confidential issuable sidebar custom svg icons iteration"

parent c5720382
<script> <script>
import Icon from '../../vue_shared/components/icon.vue';
export default { export default {
computed: { component: {
lockIcon() { Icon,
return gl.utils.spriteIcon('lock');
},
}, },
}; };
</script> </script>
<template> <template>
<div class="disabled-comment text-center"> <div class="disabled-comment text-center">
<span class="issuable-note-warning"> <span class="issuable-note-warning inline">
<span class="icon" v-html="lockIcon"></span> <icon
name="lock"
:size="16"
class="icon">
</icon>
<span>This issue is locked. Only <b>project members</b> can comment.</span> <span>This issue is locked. Only <b>project members</b> can comment.</span>
</span> </span>
</div> </div>
......
<script> <script>
import Flash from '../../../flash'; import Flash from '../../../flash';
import editForm from './edit_form.vue'; import editForm from './edit_form.vue';
import Icon from '../../../vue_shared/components/icon.vue';
export default { export default {
components: { components: {
editForm, editForm,
Icon,
}, },
props: { props: {
isConfidential: { isConfidential: {
...@@ -26,11 +28,8 @@ export default { ...@@ -26,11 +28,8 @@ export default {
}; };
}, },
computed: { computed: {
faEye() { confidentialityIcon() {
const eye = this.isConfidential ? 'fa-eye-slash' : 'fa-eye'; return this.isConfidential ? 'eye-slash' : 'eye';
return {
[eye]: true,
};
}, },
}, },
methods: { methods: {
...@@ -49,7 +48,11 @@ export default { ...@@ -49,7 +48,11 @@ export default {
<template> <template>
<div class="block issuable-sidebar-item confidentiality"> <div class="block issuable-sidebar-item confidentiality">
<div class="sidebar-collapsed-icon"> <div class="sidebar-collapsed-icon">
<i class="fa" :class="faEye" aria-hidden="true"></i> <icon
:name="confidentialityIcon"
:size="16"
aria-hidden="true">
</icon>
</div> </div>
<div class="title hide-collapsed"> <div class="title hide-collapsed">
Confidentiality Confidentiality
...@@ -70,11 +73,21 @@ export default { ...@@ -70,11 +73,21 @@ export default {
:update-confidential-attribute="updateConfidentialAttribute" :update-confidential-attribute="updateConfidentialAttribute"
/> />
<div v-if="!isConfidential" class="no-value sidebar-item-value"> <div v-if="!isConfidential" class="no-value sidebar-item-value">
<i class="fa fa-eye sidebar-item-icon"></i> <icon
name="eye"
:size="16"
aria-hidden="true"
class="sidebar-item-icon inline">
</icon>
Not confidential Not confidential
</div> </div>
<div v-else class="value sidebar-item-value hide-collapsed"> <div v-else class="value sidebar-item-value hide-collapsed">
<i aria-hidden="true" class="fa fa-eye-slash sidebar-item-icon is-active"></i> <icon
name="eye-slash"
:size="16"
aria-hidden="true"
class="sidebar-item-icon inline is-active">
</icon>
This issue is confidential This issue is confidential
</div> </div>
</div> </div>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
/* global Flash */ /* global Flash */
import editForm from './edit_form.vue'; import editForm from './edit_form.vue';
import issuableMixin from '../../../vue_shared/mixins/issuable'; import issuableMixin from '../../../vue_shared/mixins/issuable';
import Icon from '../../../vue_shared/components/icon.vue';
export default { export default {
props: { props: {
...@@ -35,11 +36,12 @@ export default { ...@@ -35,11 +36,12 @@ export default {
components: { components: {
editForm, editForm,
Icon,
}, },
computed: { computed: {
lockIconClass() { lockIcon() {
return this.isLocked ? 'fa-lock' : 'fa-unlock'; return this.isLocked ? 'lock' : 'lock-open';
}, },
isLockDialogOpen() { isLockDialogOpen() {
...@@ -66,11 +68,12 @@ export default { ...@@ -66,11 +68,12 @@ export default {
<template> <template>
<div class="block issuable-sidebar-item lock"> <div class="block issuable-sidebar-item lock">
<div class="sidebar-collapsed-icon"> <div class="sidebar-collapsed-icon">
<i <icon
class="fa" :name="lockIcon"
:class="lockIconClass" :size="16"
aria-hidden="true" aria-hidden="true"
></i> class="sidebar-item-icon is-active">
</icon>
</div> </div>
<div class="title hide-collapsed"> <div class="title hide-collapsed">
...@@ -98,10 +101,12 @@ export default { ...@@ -98,10 +101,12 @@ export default {
v-if="isLocked" v-if="isLocked"
class="value sidebar-item-value" class="value sidebar-item-value"
> >
<i <icon
name="lock"
:size="16"
aria-hidden="true" aria-hidden="true"
class="fa fa-lock sidebar-item-icon is-active" class="sidebar-item-icon inline is-active">
></i> </icon>
{{ __('Locked') }} {{ __('Locked') }}
</div> </div>
...@@ -109,10 +114,12 @@ export default { ...@@ -109,10 +114,12 @@ export default {
v-else v-else
class="no-value sidebar-item-value hide-collapsed" class="no-value sidebar-item-value hide-collapsed"
> >
<i <icon
name="lock-open"
:size="16"
aria-hidden="true" aria-hidden="true"
class="fa fa-unlock sidebar-item-icon" class="sidebar-item-icon inline">
></i> </icon>
{{ __('Unlocked') }} {{ __('Unlocked') }}
</div> </div>
</div> </div>
......
<script> <script>
import Icon from '../../../vue_shared/components/icon.vue';
export default { export default {
props: { props: {
isLocked: { isLocked: {
...@@ -14,12 +16,16 @@ ...@@ -14,12 +16,16 @@
}, },
}, },
components: {
Icon,
},
computed: { computed: {
iconClass() { warningIcon() {
return { if (this.isConfidential) return 'eye-slash';
'fa-eye-slash': this.isConfidential, if (this.isLocked) return 'lock';
'fa-lock': this.isLocked,
}; return '';
}, },
isLockedAndConfidential() { isLockedAndConfidential() {
...@@ -30,12 +36,13 @@ ...@@ -30,12 +36,13 @@
</script> </script>
<template> <template>
<div class="issuable-note-warning"> <div class="issuable-note-warning">
<i <icon
:name="warningIcon"
:size="16"
class="icon inline"
aria-hidden="true" aria-hidden="true"
class="fa icon" v-if="!isLockedAndConfidential">
:class="iconClass" </icon>
v-if="!isLockedAndConfidential"
></i>
<span v-if="isLockedAndConfidential"> <span v-if="isLockedAndConfidential">
{{ __('This issue is confidential and locked.') }} {{ __('This issue is confidential and locked.') }}
......
...@@ -6,28 +6,20 @@ ...@@ -6,28 +6,20 @@
} }
.issuable-warning-icon { .issuable-warning-icon {
color: $orange-600;
background-color: $orange-100; background-color: $orange-100;
border-radius: $border-radius-default; border-radius: $border-radius-default;
padding: 5px;
margin: 0 $btn-side-margin 0 0; margin: 0 $btn-side-margin 0 0;
width: $issuable-warning-size; width: $issuable-warning-size;
height: $issuable-warning-size; height: $issuable-warning-size;
text-align: center; text-align: center;
&:first-of-type { .icon {
margin-right: $issuable-warning-icon-margin; fill: $orange-600;
vertical-align: text-bottom;
} }
}
.sidebar-item-icon { &:first-of-type {
border-radius: $border-radius-default; margin-right: $issuable-warning-icon-margin;
padding: 5px;
margin: 0 3px 0 -4px;
&.is-active {
color: $orange-600;
background-color: $orange-50;
} }
} }
......
...@@ -113,6 +113,8 @@ ...@@ -113,6 +113,8 @@
.icon { .icon {
margin-right: $issuable-warning-icon-margin; margin-right: $issuable-warning-icon-margin;
vertical-align: text-bottom;
fill: $orange-600;
} }
+ .md-area { + .md-area {
...@@ -137,12 +139,24 @@ ...@@ -137,12 +139,24 @@
} }
} }
.sidebar-item-value { .sidebar-item-icon {
.fa { border-radius: $border-radius-default;
background-color: inherit; margin: 0 3px 0 -4px;
vertical-align: middle;
&.is-active {
fill: $orange-600;
} }
} }
.sidebar-collapsed-icon .sidebar-item-icon {
margin: 0;
}
.sidebar-item-value .sidebar-item-icon {
fill: $theme-gray-700;
}
.sidebar-item-warning-message { .sidebar-item-warning-message {
line-height: 1.5; line-height: 1.5;
padding: 16px; padding: 16px;
......
...@@ -27,9 +27,9 @@ ...@@ -27,9 +27,9 @@
.issuable-meta .issuable-meta
- if @issue.confidential - if @issue.confidential
= icon('eye-slash', class: 'issuable-warning-icon') .issuable-warning-icon.inline= sprite_icon('eye-slash', size: 16, css_class: 'icon')
- if @issue.discussion_locked? - if @issue.discussion_locked?
= icon('lock', class: 'issuable-warning-icon') .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
= issuable_meta(@issue, @project, "Issue") = issuable_meta(@issue, @project, "Issue")
.issuable-actions.js-issuable-actions .issuable-actions.js-issuable-actions
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
.issuable-meta .issuable-meta
- if @merge_request.discussion_locked? - if @merge_request.discussion_locked?
= icon('lock', class: 'issuable-warning-icon') .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
= issuable_meta(@merge_request, @project, "Merge request") = issuable_meta(@merge_request, @project, "Merge request")
.issuable-actions.js-issuable-actions .issuable-actions.js-issuable-actions
......
...@@ -16,7 +16,7 @@ describe('Issue Warning Component', () => { ...@@ -16,7 +16,7 @@ describe('Issue Warning Component', () => {
isLocked: true, isLocked: true,
}); });
expect(vm.$el.querySelector('i').className).toEqual('fa icon fa-lock'); expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/lock$/);
expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This issue is locked. Only project members can comment.'); expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This issue is locked. Only project members can comment.');
}); });
}); });
...@@ -27,7 +27,7 @@ describe('Issue Warning Component', () => { ...@@ -27,7 +27,7 @@ describe('Issue Warning Component', () => {
isConfidential: true, isConfidential: true,
}); });
expect(vm.$el.querySelector('i').className).toEqual('fa icon fa-eye-slash'); expect(vm.$el.querySelector('.icon use').href.baseVal).toMatch(/eye-slash$/);
expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This is a confidential issue. Your comment will not be visible to the public.'); expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This is a confidential issue. Your comment will not be visible to the public.');
}); });
}); });
...@@ -39,7 +39,7 @@ describe('Issue Warning Component', () => { ...@@ -39,7 +39,7 @@ describe('Issue Warning Component', () => {
isConfidential: true, isConfidential: true,
}); });
expect(vm.$el.querySelector('i')).toBeFalsy(); expect(vm.$el.querySelector('.icon')).toBeFalsy();
expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This issue is confidential and locked. People without permission will never get a notification and won\'t be able to comment.'); expect(formatWarning(vm.$el.querySelector('span').textContent)).toEqual('This issue is confidential and locked. People without permission will never get a notification and won\'t be able to comment.');
}); });
}); });
......
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