KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: Add background to inbox channel badges (#3152)

Browse source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Nithin David Thomas 2021-10-06 19:34:34 +05:30 • committed by GitHub
parent 219a8c4bc5
commit ec9903ae82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 48 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/javascript/dashboard/components/widgets/Thumbnail.vue
View file

@ -19,56 +19,56 @@
id="badge"
class="source-badge"
:style="badgeStyle"
src="~dashboard/assets/images/instagram_direct.png"
src="/integrations/channels/badges/instagram-dm.png"
/>
<img
v-if="badge === 'Channel::FacebookPage'"
v-else-if="badge === 'facebook'"
id="badge"
class="source-badge"
:style="badgeStyle"
src="~dashboard/assets/images/messenger_direct.png"
src="/integrations/channels/badges/messenger.png"
/>
<img
v-if="badge === 'twitter-tweet'"
v-else-if="badge === 'twitter-tweet'"
id="badge"
class="source-badge"
:style="badgeStyle"
src="~dashboard/assets/images/twitter-badge.png"
src="/integrations/channels/badges/twitter-tweet.png"
/>
<img
v-if="badge === 'twitter-chat'"
v-else-if="badge === 'twitter-dm'"
id="badge"
class="source-badge"
:style="badgeStyle"
src="~dashboard/assets/images/twitter-chat-badge.png"
src="/integrations/channels/badges/twitter-dm.png"
/>
<img
v-if="badge === 'whatsapp'"
v-else-if="badge === 'whatsapp'"
id="badge"
class="source-badge"
:style="badgeStyle"
src="~dashboard/assets/images/channels/whatsapp.png"
src="/integrations/channels/badges/whatsapp.png"
/>
<img
v-if="badge === 'sms'"
v-else-if="badge === 'sms'"
id="badge"
class="source-badge"
:style="badgeStyle"
src="~dashboard/assets/images/channels/sms.png"
src="/integrations/channels/badges/sms.png"
/>
<img
v-if="badge === 'Channel::Line'"
v-else-if="badge === 'Channel::Line'"
id="badge"
class="source-badge"
:style="badgeStyle"
src="~dashboard/assets/images/channels/line.png"
src="/integrations/channels/badges/line.png"
/>
<img
v-if="badge === 'Channel::Telegram'"
v-else-if="badge === 'Channel::Telegram'"
id="badge"
class="source-badge"
:style="badgeStyle"
src="~dashboard/assets/images/channels/telegram.png"
src="/integrations/channels/badges/telegram.png"
/>
<div
v-if="showStatusIndicator"
@ -130,8 +130,10 @@ export default {
return Number(this.size.replace(/\D+/g, ''));
},
badgeStyle() {
const badgeSize = `${this.avatarSize / 3}px`;
return { width: badgeSize, height: badgeSize };
const size = Math.floor(this.avatarSize / 3);
const badgeSize = `${size + 2}px`;
const borderRadius = `${size / 2}px`;
return { width: badgeSize, height: badgeSize, borderRadius };
},
statusStyle() {
const statusSize = `${this.avatarSize / 4}px`;
@ -181,8 +183,12 @@ export default {
}
.source-badge {
background: white;
border-radius: var(--border-radius-small);
bottom: -$space-micro;
box-shadow: var(--shadow-small);
height: $space-slab;
padding: var(--space-micro);
position: absolute;
right: $zero;
width: $space-slab;