LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Use Fluent SVG icons on the dashboard (#3482)

Browse Source
This commit is contained in:
Pranav Raj S
2021-11-30 21:03:18 -08:00
committed by GitHub
parent 98be3b33c1
commit c792cfc0be
151 changed files with 613 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
View File

@@ -2,38 +2,48 @@
<div class="message-text--metadata">
<span class="time">{{ readableTime }}</span>
<span v-if="showSentIndicator" class="time">
<i
<fluent-icon
v-tooltip.top-start="$t('CHAT_LIST.SENT')"
class="icon ion-checkmark"
icon="checkmark"
size="16"
/>
</span>
<i
<fluent-icon
v-if="isEmail"
v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
class="ion ion-android-mail"
icon="mail"
class="action--icon"
size="16"
/>
<i
<fluent-icon
v-if="isPrivate"
v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
class="icon ion-android-lock"
icon="lock-closed"
class="action--icon"
size="16"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
/>
<i
v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
class="icon ion-reply cursor-pointer"
@click="onTweetReply"
/>
<button @click="onTweetReply">
<fluent-icon
v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
icon="arrow-reply"
class="action--icon cursor-pointer"
size="16"
/>
</button>
<a
v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
:href="linkToTweet"
target="_blank"
rel="noopener noreferrer nofollow"
>
<i
<fluent-icon
v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
class="icon ion-android-open cursor-pointer"
icon="open"
class="action--icon cursor-pointer"
size="16"
/>
</a>
</div>
@@ -129,7 +139,7 @@ export default {
}
}
.icon {
.action--icon {
color: var(--white);
}
}
@@ -143,7 +153,7 @@ export default {
}
.message-text--metadata {
align-items: flex-end;
align-items: flex-start;
display: flex;
.time {
@@ -153,10 +163,9 @@ export default {
line-height: 1.8;
}
i {
line-height: 1.4;
padding-right: var(--space-small);
padding-left: var(--space-small);
.action--icon {
margin-right: var(--space-small);
margin-left: var(--space-small);
color: var(--s-900);
}