BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 3d16f7cd by Tim Zallmann
Options

Merge branch '37508-lock-confidential-issuable-sidebar-custom-svg-icons-iteration' into 'master'

Resolve "lock/confidential issuable sidebar custom svg icons iteration" Closes #37508 See merge request gitlab-org/gitlab-ce!15372
parents c5720382 d0f7e4df
Showing with 96 additions and 60 deletions
app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
<script>
import Icon from '../../vue_shared/components/icon.vue';
export default {
computed: {
lockIcon() {
return gl.utils.spriteIcon('lock');
},
component: {
Icon,
},
};
</script>
<template>
<div class="disabled-comment text-center">
<span class="issuable-note-warning">
<span class="icon" v-html="lockIcon"></span>
<span class="issuable-note-warning inline">
<icon
name="lock"
:size="16"
class="icon">
</icon>
<span>This issue is locked. Only <b>project members</b> can comment.</span>
</span>
</div>
......
app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
<script>
import Flash from '../../../flash';
import editForm from './edit_form.vue';
import Icon from '../../../vue_shared/components/icon.vue';
export default {
components: {
editForm,
Icon,
},
props: {
isConfidential: {
......@@ -26,11 +28,8 @@ export default {
};
},
computed: {
faEye() {
const eye = this.isConfidential ? 'fa-eye-slash' : 'fa-eye';
return {
[eye]: true,
};
confidentialityIcon() {
return this.isConfidential ? 'eye-slash' : 'eye';
},
},
methods: {
......@@ -49,7 +48,11 @@ export default {
<template>
<div class="block issuable-sidebar-item confidentiality">
<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 class="title hide-collapsed">
Confidentiality
......@@ -70,11 +73,21 @@ export default {
:update-confidential-attribute="updateConfidentialAttribute"
/>
<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
</div>
<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
</div>
</div>
......
app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
......@@ -2,6 +2,7 @@
/* global Flash */
import editForm from './edit_form.vue';
import issuableMixin from '../../../vue_shared/mixins/issuable';
import Icon from '../../../vue_shared/components/icon.vue';
export default {
props: {
......@@ -35,11 +36,12 @@ export default {
components: {
editForm,
Icon,
},
computed: {
lockIconClass() {
return this.isLocked ? 'fa-lock' : 'fa-unlock';
lockIcon() {
return this.isLocked ? 'lock' : 'lock-open';
},
isLockDialogOpen() {
......@@ -66,11 +68,12 @@ export default {
<template>
<div class="block issuable-sidebar-item lock">
<div class="sidebar-collapsed-icon">
<i
class="fa"
:class="lockIconClass"
<icon
:name="lockIcon"
:size="16"
aria-hidden="true"
></i>
class="sidebar-item-icon is-active">
</icon>
</div>
<div class="title hide-collapsed">
......@@ -98,10 +101,12 @@ export default {
v-if="isLocked"
class="value sidebar-item-value"
>
<i
<icon
name="lock"
:size="16"
aria-hidden="true"
class="fa fa-lock sidebar-item-icon is-active"
></i>
class="sidebar-item-icon inline is-active">
</icon>
{{ __('Locked') }}
</div>
......@@ -109,10 +114,12 @@ export default {
v-else
class="no-value sidebar-item-value hide-collapsed"
>
<i
<icon
name="lock-open"
:size="16"
aria-hidden="true"
class="fa fa-unlock sidebar-item-icon"
></i>
class="sidebar-item-icon inline">
</icon>
{{ __('Unlocked') }}
</div>
</div>
......
app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
<script>
import Icon from '../../../vue_shared/components/icon.vue';
export default {
props: {
isLocked: {
......@@ -14,12 +16,16 @@
},
},
components: {
Icon,
},
computed: {
iconClass() {
return {
'fa-eye-slash': this.isConfidential,
'fa-lock': this.isLocked,
};
warningIcon() {
if (this.isConfidential) return 'eye-slash';
if (this.isLocked) return 'lock';
return '';
},
isLockedAndConfidential() {
......@@ -30,12 +36,13 @@
</script>
<template>
<div class="issuable-note-warning">
<i
aria-hidden="true"
class="fa icon"
:class="iconClass"
v-if="!isLockedAndConfidential"
></i>
<icon
:name="warningIcon"
:size="16"
class="icon inline"
aria-hidden="true"
v-if="!isLockedAndConfidential">
</icon>
<span v-if="isLockedAndConfidential">
{{ __('This issue is confidential and locked.') }}
......
app/assets/stylesheets/pages/issuable.scss
......@@ -6,28 +6,20 @@
}
.issuable-warning-icon {
color: $orange-600;
background-color: $orange-100;
border-radius: $border-radius-default;
padding: 5px;
margin: 0 $btn-side-margin 0 0;
width: $issuable-warning-size;
height: $issuable-warning-size;
text-align: center;
&:first-of-type {
margin-right: $issuable-warning-icon-margin;
.icon {
fill: $orange-600;
vertical-align: text-bottom;
}
}
.sidebar-item-icon {
border-radius: $border-radius-default;
padding: 5px;
margin: 0 3px 0 -4px;
&.is-active {
color: $orange-600;
background-color: $orange-50;
&:first-of-type {
margin-right: $issuable-warning-icon-margin;
}
}
......
app/assets/stylesheets/pages/note_form.scss
......@@ -113,6 +113,8 @@
.icon {
margin-right: $issuable-warning-icon-margin;
vertical-align: text-bottom;
fill: $orange-600;
}
+ .md-area {
......@@ -137,12 +139,24 @@
}
}
.sidebar-item-value {
.fa {
background-color: inherit;
.sidebar-item-icon {
border-radius: $border-radius-default;
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 {
line-height: 1.5;
padding: 16px;
......
app/views/projects/issues/show.html.haml
......@@ -27,9 +27,9 @@
.issuable-meta
- 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?
= icon('lock', class: 'issuable-warning-icon')
.issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
= issuable_meta(@issue, @project, "Issue")
.issuable-actions.js-issuable-actions
......
app/views/projects/merge_requests/_mr_title.html.haml
......@@ -16,7 +16,7 @@
.issuable-meta
- 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-actions.js-issuable-actions
......
spec/javascripts/vue_shared/components/issue/issue_warning_spec.js
......@@ -16,7 +16,7 @@ describe('Issue Warning Component', () => {
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.');
});
});
......@@ -27,7 +27,7 @@ describe('Issue Warning Component', () => {
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.');
});
});
......@@ -39,7 +39,7 @@ describe('Issue Warning Component', () => {
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.');
});
});
......
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