Merge branch '219951-improve-styling-of-design-pins' into 'master'

Improve styling of design pins

See merge request gitlab-org/gitlab!39797

app/assets/javascripts/design_management/components/design_note_pin.vue

@@ -17,19 +17,11 @@ export default {
       required: false,
       default: null,
     },
-    repositioning: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     isNewNote() {
       return this.label === null;
     },
-    pinStyle() {
-      return this.repositioning ? { ...this.position, cursor: 'move' } : this.position;
-    },
     pinLabel() {
       return this.isNewNote
         ? __('Comment form position')
@@ -41,13 +33,13 @@ export default {
 
 <template>
   <button
-    :style="pinStyle"
+    :style="position"
     :aria-label="pinLabel"
     :class="{
-      'btn-transparent comment-indicator': isNewNote,
+      'btn-transparent comment-indicator gl-p-0': isNewNote,
       'js-image-badge badge badge-pill': !isNewNote,
     }"
-    class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0"
+    class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0!"
     type="button"
     @mousedown="$emit('mousedown', $event)"
     @mouseup="$emit('mouseup', $event)"

app/assets/javascripts/design_management/components/design_overlay.vue

@@ -266,7 +266,7 @@ export default {
       type="button"
       role="button"
       :aria-label="$options.i18n.newCommentButtonLabel"
-      class="gl-absolute gl-w-full gl-h-full gl-p-0 gl-top-0 gl-left-0 gl-outline-0! btn-transparent design-detail-overlay-add-comment"
+      class="gl-absolute gl-w-full gl-h-full gl-p-0 gl-top-0 gl-left-0 gl-outline-0! btn-transparent gl-hover-cursor-crosshair"
       data-qa-selector="design_image_button"
       @mouseup="onAddCommentMouseup"
     ></button>
@@ -276,7 +276,6 @@ export default {
       v-if="resolvedDiscussionsExpanded || !note.resolved"
       :key="note.id"
       :label="note.index"
-      :repositioning="isMovingNote(note.id)"
       :position="
         isMovingNote(note.id) && movingNoteNewPosition
           ? getNotePositionStyle(movingNoteNewPosition)
@@ -290,7 +289,6 @@ export default {
     <design-note-pin
       v-if="currentCommentForm"
       :position="currentCommentPositionStyle"
-      :repositioning="isMovingCurrentComment"
       @mousedown.stop="onNoteMousedown"
       @mouseup.stop="onNoteMouseup"
     />

app/assets/stylesheets/components/design_management/design.scss

+$design-pin-diameter: 28px;
+$t-gray-a-16-design-pin: rgba($black, 0.16);
+
 .layout-page.design-detail-layout {
   max-height: 100vh;
 }
@@ -9,34 +12,61 @@
     top: 35px;
   }
 
-  .design-pin {
-    transition: opacity $gl-transition-duration-medium $general-hover-transition-curve;
-
-    &.inactive {
-      @include gl-opacity-5;
-
-      &:hover {
-        @include gl-opacity-10;
-      }
-    }
-  }
-
   .badge.badge-pill {
     display: flex;
-    height: 28px;
-    width: 28px;
-    background-color: $blue-400;
+    height: $design-pin-diameter;
+    width: $design-pin-diameter;
+    box-sizing: content-box;
+    background-color: $purple-500;
     color: $white;
-    border: $white 1px solid;
+    font-weight: $gl-font-weight-bold;
     border-radius: 50%;
+    z-index: 1;
+    padding: 0;
 
     &.resolved {
       background-color: $gray-500;
     }
   }
 
-  .design-detail-overlay-add-comment {
-    cursor: crosshair;
+  .comment-indicator {
+    border-radius: 50%;
+  }
+
+  .comment-indicator,
+  .frame .badge.badge-pill {
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  /**
+   * Design pin that overlays the design
+   */
+  .frame .badge.badge-pill {
+    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
+    border: $white 2px solid;
+    will-change: transform, box-shadow, opacity;
+    // NOTE: verbose transition property required for Safari
+    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
+    transform-origin: 0 0;
+    transform: translate(-50%, -50%);
+
+    &:hover {
+      transform: scale(1.2) translate(-50%, -50%);
+    }
+
+    &:active {
+      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
+    }
+
+    &.inactive {
+      @include gl-opacity-5;
+
+      &:hover {
+        @include gl-opacity-10;
+      }
+    }
   }
 }
 
@@ -105,8 +135,8 @@
       border-left: 1px solid $gray-100;
       position: absolute;
       left: 28px;
-      top: -18px;
-      height: 18px;
+      top: -17px;
+      height: 17px;
     }
 
     .design-note {

changelogs/unreleased/219951-improve-styling-of-design-pins.yml

+---
+title: Update styling of design comment pins
+merge_request: 39797
+author:
+type: changed

spec/frontend/design_management/components/__snapshots__/design_note_pin_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Design note pin component should match the snapshot of note when repositioning 1`] = `
-<button
-  aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
-  style="left: 10px; top: 10px; cursor: move;"
-  type="button"
->
-  <gl-icon-stub
-    name="image-comment-dark"
-    size="24"
-  />
-</button>
-`;
-
 exports[`Design note pin component should match the snapshot of note with index 1`] = `
 <button
   aria-label="Comment '1' position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 js-image-badge badge badge-pill"
+  class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0! js-image-badge badge badge-pill"
   style="left: 10px; top: 10px;"
   type="button"
 >
@@ -30,7 +16,7 @@ exports[`Design note pin component should match the snapshot of note with index
 exports[`Design note pin component should match the snapshot of note without index 1`] = `
 <button
   aria-label="Comment form position"
-  class="design-pin gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-0 btn-transparent comment-indicator"
+  class="gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-font-lg gl-outline-0! btn-transparent comment-indicator gl-p-0"
   style="left: 10px; top: 10px;"
   type="button"
 >

spec/frontend/design_management/components/design_note_pin_spec.js

@@ -29,21 +29,4 @@ describe('Design note pin component', () => {
     createComponent({ label: 1 });
     expect(wrapper.element).toMatchSnapshot();
   });
-
-  it('should match the snapshot of note when repositioning', () => {
-    createComponent({ repositioning: true });
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  describe('pinStyle', () => {
-    it('sets cursor to `move` when repositioning = true', () => {
-      createComponent({ repositioning: true });
-      expect(wrapper.vm.pinStyle.cursor).toBe('move');
-    });
-
-    it('does not set cursor when repositioning = false', () => {
-      createComponent();
-      expect(wrapper.vm.pinStyle.cursor).toBe(undefined);
-    });
-  });
 });

spec/frontend/design_management/components/design_overlay_spec.js

@@ -202,7 +202,7 @@ describe('Design overlay component', () => {
         { x: position.x, y: position.y },
         { x: 20, y: 20 },
       ).then(() => {
-        expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px; cursor: move;');
+        expect(findFirstBadge().attributes().style).toBe('left: 20px; top: 20px;');
       });
     });
 
@@ -300,9 +300,7 @@ describe('Design overlay component', () => {
           { x: position.x, y: position.y },
           { x: 20, y: 20 },
         ).then(() => {
-          expect(findCommentBadge().attributes().style).toBe(
-            'left: 20px; top: 20px; cursor: move;',
-          );
+          expect(findCommentBadge().attributes().style).toBe('left: 20px; top: 20px;');
         });
       });