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

d0f7e4df · Luke "Jared" Bennett · Tim Zallmann · c5720382 · d0f7e4df · d0f7e4df
Commit d0f7e4df authored Nov 16, 2017 by Luke "Jared" Bennett Committed by Tim Zallmann Nov 16, 2017
9 changed files
--- a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
 <script>
+  import Icon from '../../vue_shared/components/icon.vue';
  export default {
-    computed: {
+    component: {
-      lockIcon() {
+      Icon,
-        return gl.utils.spriteIcon('lock');
-      },
    },
  };
 </script>
 <template>
  <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>
  </div>

--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/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() {
+    confidentialityIcon() {
-      const eye = this.isConfidential ? 'fa-eye-slash' : 'fa-eye';
+      return this.isConfidential ? 'eye-slash' : 'eye';
-      return {
-        [eye]: true,
-      };
    },
  },
  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>

--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/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() {
+    lockIcon() {
-      return this.isLocked ? 'fa-lock' : 'fa-unlock';
+      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
+      <icon
-        class="fa"
+        :name="lockIcon"
-        :class="lockIconClass"
+        :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"
+          class="sidebar-item-icon inline is-active">
-        ></i>
+        </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"
+          class="sidebar-item-icon inline">
-        ></i>
+        </icon>
        {{ __('Unlocked') }}
      </div>
    </div>

--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/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() {
+      warningIcon() {
-        return {
+        if (this.isConfidential) return 'eye-slash';
-          'fa-eye-slash': this.isConfidential,
+        if (this.isLocked) return 'lock';
-          'fa-lock': this.isLocked,
-        };
+        return '';
      },
      isLockedAndConfidential() {
@@ -30,12 +36,13 @@
 </script>
 <template>
  <div class="issuable-note-warning">
-    <i
+    <icon
-      aria-hidden="true"
+        :name="warningIcon"
-      class="fa icon"
+        :size="16"
-      :class="iconClass"
+        class="icon inline"
-      v-if="!isLockedAndConfidential"
+        aria-hidden="true"
-    ></i>
+        v-if="!isLockedAndConfidential">
+    </icon>
    <span v-if="isLockedAndConfidential">
      {{ __('This issue is confidential and locked.') }}

--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/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 {
+  .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;
  }
 }

--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/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 {
+.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 {
  line-height: 1.5;
  padding: 16px;

--- a/app/views/projects/issues/show.html.haml
+++ b/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

--- a/app/views/projects/merge_requests/_mr_title.html.haml
+++ b/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

--- a/spec/javascripts/vue_shared/components/issue/issue_warning_spec.js
+++ b/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.');
    });
  });