|
1 | 1 | <script> |
2 | | -import { GlLoadingIcon, GlIcon, GlIntersectionObserver, GlTooltipDirective } from '@gitlab/ui'; |
| 2 | +import { |
| 3 | + GlCard, |
| 4 | + GlLoadingIcon, |
| 5 | + GlIcon, |
| 6 | + GlIntersectionObserver, |
| 7 | + GlTooltipDirective, |
| 8 | +} from '@gitlab/ui'; |
3 | 9 | import { n__, __ } from '~/locale'; |
4 | 10 | import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; |
5 | 11 | import { ROUTES } from '../../constants'; |
6 | 12 |
|
7 | 13 | export default { |
8 | 14 | components: { |
| 15 | + GlCard, |
9 | 16 | GlLoadingIcon, |
10 | 17 | GlIntersectionObserver, |
11 | 18 | GlIcon, |
@@ -55,15 +62,15 @@ export default { |
55 | 62 | required: false, |
56 | 63 | default: null, |
57 | 64 | }, |
| 65 | + useRouter: { |
| 66 | + type: Boolean, |
| 67 | + required: true, |
| 68 | + }, |
58 | 69 | isDragging: { |
59 | 70 | type: Boolean, |
60 | 71 | required: false, |
61 | 72 | default: false, |
62 | 73 | }, |
63 | | - useRouter: { |
64 | | - type: Boolean, |
65 | | - required: true, |
66 | | - }, |
67 | 74 | workItemWebUrl: { |
68 | 75 | type: String, |
69 | 76 | required: true, |
@@ -162,65 +169,70 @@ export default { |
162 | 169 | :is="linkComponent" |
163 | 170 | :to="routerLinkProps" |
164 | 171 | :href="nonRouterHref" |
165 | | - class="card js-design-list-item design-list-item gl-mb-0 gl-cursor-pointer gl-text-default hover:gl-text-default" |
| 172 | + class="gl-block gl-rounded-base gl-text-default hover:gl-text-default focus:gl-focus" |
166 | 173 | > |
167 | | - <div |
168 | | - class="card-body gl-relative gl-flex gl-items-center gl-justify-center gl-overflow-hidden gl-rounded-t-base gl-p-0" |
| 174 | + <gl-card |
| 175 | + class="js-design-list-item design-list-item gl-mb-0" |
| 176 | + header-class="gl-bg-subtle dark:gl-bg-gray-100 gl-p-0 gl-flex gl-grow gl-items-center gl-justify-center gl-overflow-hidden gl-relative gl-rounded-t-base" |
| 177 | + body-class="gl-p-0 gl-flex gl-w-full gl-bg-default gl-py-3 gl-px-4 gl-rounded-base" |
169 | 178 | @click="onTileClick" |
170 | 179 | > |
171 | | - <div |
172 | | - v-if="icon.name" |
173 | | - data-testid="design-event" |
174 | | - class="gl-absolute gl-right-3 gl-top-3 gl-mr-1" |
175 | | - > |
176 | | - <span :title="icon.tooltip" :aria-label="icon.tooltip"> |
177 | | - <gl-icon |
178 | | - :name="icon.name" |
179 | | - :size="16" |
180 | | - :class="icon.classes" |
181 | | - data-testid="design-status-icon" |
182 | | - :data-qa-status="icon.name" |
183 | | - /> |
184 | | - </span> |
185 | | - </div> |
186 | | - <gl-intersection-observer |
187 | | - class="gl-flex gl-grow gl-justify-center" |
188 | | - data-testid="design-image" |
189 | | - :data-qa-filename="filename" |
190 | | - @appear="onAppear" |
191 | | - > |
192 | | - <gl-loading-icon v-if="showLoadingSpinner" size="lg" /> |
193 | | - <gl-icon v-else-if="showImageErrorIcon" name="media-broken" :size="32" variant="subtle" /> |
194 | | - <img |
195 | | - v-show="showImage" |
196 | | - :src="imageLink" |
197 | | - :alt="filename" |
198 | | - class="design-img gl-mx-auto gl-block gl-max-h-full gl-w-auto gl-max-w-full" |
199 | | - :data-testid="`design-img-${id}`" |
200 | | - @load="onImageLoad" |
201 | | - @error="onImageError" |
202 | | - /> |
203 | | - </gl-intersection-observer> |
204 | | - </div> |
205 | | - <div class="card-footer gl-flex gl-w-full gl-bg-white gl-px-4 gl-py-3"> |
206 | | - <div class="str-truncated-100 gl-flex gl-flex-col"> |
207 | | - <span |
208 | | - v-gl-tooltip |
209 | | - class="str-truncated-100 gl-text-sm" |
210 | | - :data-testid="`design-img-filename-${id}`" |
211 | | - :title="filename" |
212 | | - >{{ filename }}</span |
| 180 | + <template #header> |
| 181 | + <div |
| 182 | + v-if="icon.name" |
| 183 | + data-testid="design-event" |
| 184 | + class="gl-absolute gl-right-3 gl-top-2 gl-mr-1 gl-mt-1" |
213 | 185 | > |
214 | | - <span v-if="updatedAt" class="str-truncated-100"> |
215 | | - {{ __('Updated') }} <timeago :time="updatedAt" tooltip-placement="bottom" /> |
216 | | - </span> |
217 | | - </div> |
218 | | - <div v-if="notesCount" class="gl-ml-auto gl-flex gl-items-center gl-text-subtle"> |
219 | | - <gl-icon name="comments" class="gl-ml-2" /> |
220 | | - <span :aria-label="notesLabel" class="gl-ml-2 gl-text-sm"> |
221 | | - {{ notesCount }} |
222 | | - </span> |
223 | | - </div> |
224 | | - </div> |
| 186 | + <span :title="icon.tooltip" :aria-label="icon.tooltip"> |
| 187 | + <gl-icon |
| 188 | + :name="icon.name" |
| 189 | + :size="16" |
| 190 | + :class="icon.classes" |
| 191 | + data-testid="design-status-icon" |
| 192 | + :data-qa-status="icon.name" |
| 193 | + /> |
| 194 | + </span> |
| 195 | + </div> |
| 196 | + <gl-intersection-observer |
| 197 | + class="gl-flex gl-grow gl-items-center gl-justify-center" |
| 198 | + data-testid="design-image" |
| 199 | + :data-qa-filename="filename" |
| 200 | + @appear="onAppear" |
| 201 | + > |
| 202 | + <gl-loading-icon v-if="showLoadingSpinner" size="md" /> |
| 203 | + <gl-icon v-else-if="showImageErrorIcon" name="media-broken" :size="32" variant="subtle" /> |
| 204 | + <img |
| 205 | + v-show="showImage" |
| 206 | + :src="imageLink" |
| 207 | + :alt="filename" |
| 208 | + class="design-img gl-mx-auto gl-block gl-max-h-full gl-w-auto gl-max-w-full" |
| 209 | + :data-testid="`design-img-${id}`" |
| 210 | + @load="onImageLoad" |
| 211 | + @error="onImageError" |
| 212 | + /> |
| 213 | + </gl-intersection-observer> |
| 214 | + </template> |
| 215 | + |
| 216 | + <template #default> |
| 217 | + <div class="gl-flex gl-flex-col gl-truncate"> |
| 218 | + <span |
| 219 | + v-gl-tooltip |
| 220 | + class="gl-truncate gl-text-sm" |
| 221 | + :data-testid="`design-img-filename-${id}`" |
| 222 | + :title="filename" |
| 223 | + >{{ filename }}</span |
| 224 | + > |
| 225 | + <span v-if="updatedAt" class="gl-truncate"> |
| 226 | + {{ __('Updated') }} <timeago :time="updatedAt" tooltip-placement="bottom" /> |
| 227 | + </span> |
| 228 | + </div> |
| 229 | + <div v-if="notesCount" class="gl-ml-auto gl-flex gl-items-center gl-text-subtle"> |
| 230 | + <gl-icon name="comments" class="gl-ml-2" /> |
| 231 | + <span :aria-label="notesLabel" class="gl-ml-2 gl-text-sm"> |
| 232 | + {{ notesCount }} |
| 233 | + </span> |
| 234 | + </div> |
| 235 | + </template> |
| 236 | + </gl-card> |
225 | 237 | </component> |
226 | 238 | </template> |
0 commit comments