diff options
3 files changed, 30 insertions, 7 deletions
diff --git a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue index fa2ff6e5c58..f0429b82aaa 100644 --- a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue +++ b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue @@ -1,6 +1,10 @@ <script> export default { - name: 'discussionLockedWidget', + computed: { + icon() { + return gl.utils.spriteIcon('lock'); + }, + }, }; </script> @@ -8,7 +12,8 @@ <template> <div class="disabled-comment text-center"> <span class="issuable-note-warning"> - This issue is locked. Only <b>project members</b> can comment. + <span class="icon" v-html="icon"></span> + <span>This issue is locked. Only <b>project members</b> can comment.</span> </span> </div> </template> diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 8b7d42214e6..5b93ff5ce14 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -112,6 +112,22 @@ align-items: center; } +.disabled-comment .issuable-note-warning { + border: none; + border-radius: $label-border-radius; + padding-top: $gl-vert-padding; + padding-bottom: $gl-vert-padding; + + .icon svg { + position: relative; + top: 2px; + margin-right: $btn-xs-side-margin; + width: $gl-font-size; + height: $gl-font-size; + fill: $orange-600; + } +} + .sidebar-item-value { .fa { background-color: inherit; diff --git a/app/views/shared/notes/_notes_with_form.html.haml b/app/views/shared/notes/_notes_with_form.html.haml index 7da17e5b6db..c6e18108c7a 100644 --- a/app/views/shared/notes/_notes_with_form.html.haml +++ b/app/views/shared/notes/_notes_with_form.html.haml @@ -27,9 +27,11 @@ - elsif discussion_locked .disabled-comment.text-center.prepend-top-default %span.issuable-note-warning - This - = issuable.class.to_s.titleize.downcase - is locked. Only - %b project members - can comment. + %span.icon= sprite_icon('lock', size: 14) + %span + This + = issuable.class.to_s.titleize.downcase + is locked. Only + %b project members + can comment. %script.js-notes-data{ type: "application/json" }= initial_notes_data(autocomplete).to_json.html_safe |