chore: Design improvements for thumbnail and dropdown (#5822)
This commit is contained in:
parent
47c90e2085
commit
4f82859bba
4 changed files with 34 additions and 5 deletions
|
@ -48,5 +48,6 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
|
background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
|
||||||
color: var(--w-600);
|
color: var(--w-600);
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="thumbnailBoxClass" :style="{ height: size, width: size }">
|
<div
|
||||||
|
:class="thumbnailBoxClass"
|
||||||
|
:style="{ height: size, width: size }"
|
||||||
|
:title="title"
|
||||||
|
>
|
||||||
<!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements. -->
|
<!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements. -->
|
||||||
<img
|
<img
|
||||||
v-show="shouldShowImage"
|
v-show="shouldShowImage"
|
||||||
|
@ -72,6 +76,10 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
variant: {
|
variant: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'circle',
|
default: 'circle',
|
||||||
|
|
|
@ -3,11 +3,13 @@
|
||||||
<thumbnail
|
<thumbnail
|
||||||
v-for="user in usersList"
|
v-for="user in usersList"
|
||||||
:key="user.id"
|
:key="user.id"
|
||||||
|
v-tooltip="user.name"
|
||||||
|
:title="user.name"
|
||||||
:src="user.thumbnail"
|
:src="user.thumbnail"
|
||||||
:username="user.name"
|
:username="user.name"
|
||||||
:has-border="true"
|
:has-border="true"
|
||||||
:size="size"
|
:size="size"
|
||||||
class="overlapping-thumbnail"
|
:class="`overlapping-thumbnail gap-${gap}`"
|
||||||
/>
|
/>
|
||||||
<span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
|
<span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
|
||||||
{{ moreThumbnailsText }}
|
{{ moreThumbnailsText }}
|
||||||
|
@ -38,6 +40,14 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
gap: {
|
||||||
|
type: String,
|
||||||
|
default: 'normal',
|
||||||
|
validator(value) {
|
||||||
|
// The value must match one of these strings
|
||||||
|
return ['normal', '', 'tight'].includes(value);
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -52,6 +62,10 @@ export default {
|
||||||
box-shadow: var(--shadow-small);
|
box-shadow: var(--shadow-small);
|
||||||
|
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
|
margin-left: var(--space-minus-smaller);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-tight {
|
||||||
margin-left: var(--space-minus-small);
|
margin-left: var(--space-minus-small);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
>
|
>
|
||||||
<woot-button
|
<woot-button
|
||||||
class="multiselect-dropdown--item"
|
class="multiselect-dropdown--item"
|
||||||
variant="clear"
|
:variant="isActive(option) ? 'hollow' : 'clear'"
|
||||||
color-scheme="secondary"
|
color-scheme="secondary"
|
||||||
:class="{
|
:class="{
|
||||||
active: option.id === (selectedItem && selectedItem.id),
|
active: option.id === (selectedItem && selectedItem.id),
|
||||||
|
@ -33,6 +33,7 @@
|
||||||
size="24px"
|
size="24px"
|
||||||
:username="option.name"
|
:username="option.name"
|
||||||
:status="option.availability_status"
|
:status="option.availability_status"
|
||||||
|
has-border
|
||||||
/>
|
/>
|
||||||
<div class="name-wrap">
|
<div class="name-wrap">
|
||||||
<span
|
<span
|
||||||
|
@ -171,14 +172,19 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: var(--w-25);
|
background: var(--s-25);
|
||||||
color: var(--w-800);
|
border-color: var(--s-50);
|
||||||
font-weight: var(--font-weight-medium);
|
font-weight: var(--font-weight-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
background-color: var(--color-background-light);
|
background-color: var(--color-background-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--s-800);
|
||||||
|
background-color: var(--color-background);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-wrap {
|
.user-wrap {
|
||||||
|
|
Loading…
Reference in a new issue