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

feat: Remove ionicons v2 dependency on widget (#3402)

Browse Source
This commit is contained in:
Pranav Raj S
2021-11-18 15:18:51 +05:30
committed by GitHub
parent c2b4991fd8
commit a3ba8f9e35
15 changed files with 119 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/widget/assets/scss/_utilities.scss Normal file
View File

@@ -0,0 +1,3 @@
.icon-button {
@include button-size;
}

1
app/javascript/widget/assets/scss/_variables.scss
View File

@@ -84,7 +84,6 @@ Roboto,
Tahoma,
Arial,
sans-serif;
$ionicons-font-path: '~ionicons/fonts';
// Break points
$break-point-medium: 667px;

2
app/javascript/widget/assets/scss/woot.scss
View File

@@ -6,8 +6,8 @@
@import 'buttons';
@import 'mixins';
@import 'forms';
@import 'utilities';
@import 'shared/assets/fonts/widget_fonts';
@import '~shared/assets/stylesheets/ionicons';
@import '~spinkit/scss/spinners/7-three-bounce';
html,

32
app/javascript/widget/components/ChatAttachment.vue
View File

@@ -4,10 +4,10 @@
accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
@input-file="onFileUpload"
>
<span class="attachment-button">
<i v-if="!isUploading.image" class="ion-android-attach" />
<button class="icon-button flex items-center justify-center">
<fluent-icon v-if="!isUploading.image" icon="attach" />
<spinner v-if="isUploading" size="small" />
</span>
</button>
</file-upload>
</template>
@@ -17,9 +17,9 @@ import Spinner from 'shared/components/Spinner.vue';
import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
export default {
components: { FileUpload, Spinner },
components: { FluentIcon, FileUpload, Spinner },
props: {
onAttach: {
type: Function,
@@ -66,28 +66,6 @@ export default {
},
};
</script>
<style scoped lang="scss">
@import '~widget/assets/scss/variables.scss';
@import '~widget/assets/scss/mixins.scss';
.attachment-button {
@include button-size;
background: transparent;
border: 0;
cursor: pointer;
position: relative;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
i {
font-size: $font-size-large;
color: $color-gray;
}
}
</style>
<style lang="scss">
.file-uploads .attachment-button + label {
cursor: pointer;

27
app/javascript/widget/components/ChatInputWrap.vue
View File

@@ -23,13 +23,13 @@
/>
<button
v-if="hasEmojiPickerEnabled"
class="emoji-toggle"
class="icon-button flex justify-center items-center"
aria-label="Emoji picker"
@click="toggleEmojiPicker()"
@click="toggleEmojiPicker"
>
<i
class="icon ion-happy-outline"
:class="{ active: showEmojiPicker }"
<fluent-icon
icon="emoji"
:class="{ 'text-woot-500': showEmojiPicker }"
/>
</button>
<emoji-input
@@ -50,11 +50,13 @@
<script>
import { mapGetters } from 'vuex';
import { mixin as clickaway } from 'vue-clickaway';
import ChatSendButton from 'widget/components/ChatSendButton.vue';
import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
import ResizableTextArea from 'shared/components/ResizableTextArea';
import EmojiInput from 'shared/components/emoji/EmojiInput';
import ChatSendButton from 'widget/components/ChatSendButton.vue';
import configMixin from '../mixins/configMixin';
import EmojiInput from 'shared/components/emoji/EmojiInput';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import ResizableTextArea from 'shared/components/ResizableTextArea';
export default {
name: 'ChatInputWrap',
@@ -62,6 +64,7 @@ export default {
ChatAttachmentButton,
ChatSendButton,
EmojiInput,
FluentIcon,
ResizableTextArea,
},
mixins: [clickaway, configMixin],
@@ -178,14 +181,6 @@ export default {
}
}
.emoji-toggle {
@include button-size;
font-size: $font-size-large;
color: $color-gray;
cursor: pointer;
}
.emoji-dialog {
right: $space-one;
}

31
app/javascript/widget/components/ChatSendButton.vue
View File

@@ -2,23 +2,21 @@
<button
type="submit"
:disabled="disabled"
class="send-button ml-1"
class="icon-button flex items-center justify-center ml-1"
@click="onClick"
>
<i
v-if="!loading"
class="ion-android-send icon-holder"
:style="`color: ${color}`"
/>
<fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
<spinner v-else size="small" />
</button>
</template>
<script>
import Spinner from 'shared/components/Spinner.vue';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
export default {
components: {
FluentIcon,
Spinner,
},
props: {
@@ -41,24 +39,3 @@ export default {
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '~widget/assets/scss/variables.scss';
.send-button {
background: transparent;
border: 0;
cursor: pointer;
position: relative;
padding-right: $space-smaller;
.icon-holder {
display: flex;
align-items: center;
justify-content: center;
font-size: $font-size-big;
font-weight: $font-weight-medium;
}
}
</style>

16
app/javascript/widget/components/FileBubble.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="file message-text__wrap">
<div class="file flex flex-row items-center p-3 cursor-pointer">
<div class="icon-wrap">
<i class="ion-document-text"></i>
<fluent-icon icon="document" size="28" />
</div>
<div class="meta">
<div class="title">
{{ title }}
</div>
<div class="link-wrap">
<div class="link-wrap mb-1">
<a
class="download"
rel="noreferrer noopener nofollow"
@@ -22,7 +22,12 @@
</template>
<script>
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
export default {
components: {
FluentIcon,
},
props: {
url: {
type: String,
@@ -61,11 +66,6 @@ export default {
@import '~widget/assets/scss/variables.scss';
.file {
display: flex;
flex-direction: row;
padding: $space-slab;
cursor: pointer;
.icon-wrap {
font-size: $font-size-mega;
color: $color-woot;

13
app/javascript/widget/components/HeaderActions.vue
View File

@@ -2,27 +2,30 @@
<div v-if="showHeaderActions" class="actions flex items-center">
<button
v-if="showPopoutButton"
class="button transparent compact new-window--button"
class="button transparent compact new-window--button "
@click="popoutWindow"
>
<span class="ion-android-open"></span>
<fluent-icon icon="open" size="22" class="text-black-900" />
</button>
<button
class="button transparent compact close-button"
:class="{
'rn-close-button': isRNWebView,
}"
@click="closeWindow"
>
<span class="ion-android-close" @click="closeWindow"></span>
<fluent-icon icon="dismiss" size="24" class="text-black-900" />
</button>
</div>
</template>
<script>
import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
import { buildPopoutURL } from '../helpers/urlParamsHelper';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
export default {
name: 'HeaderActions',
components: { FluentIcon },
props: {
showPopoutButton: {
type: Boolean,
@@ -85,10 +88,6 @@ export default {
span {
color: $color-heading;
font-size: $font-size-large;
&.ion-android-close {
font-size: $font-size-big;
}
}
.close-button {

25
app/javascript/widget/components/template/Article.vue
View File

@@ -2,10 +2,13 @@
<div v-if="!!items.length" class="chat-bubble agent">
<div v-for="item in items" :key="item.link" class="article-item">
<a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
<span class="title">
<i class="ion-link icon"></i>{{ item.title }}
<span class="title flex items-center text-black-900 font-medium">
<fluent-icon icon="link" class="mr-1" />
<span>{{ item.title }}</span>
</span>
<span class="description">
{{ truncateMessage(item.description) }}
</span>
<span class="description">{{ truncateMessage(item.description) }}</span>
</a>
</div>
</div>
@@ -13,8 +16,12 @@
<script>
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
export default {
components: {
FluentIcon,
},
mixins: [messageFormatterMixin],
props: {
items: {
@@ -38,18 +45,6 @@ export default {
text-decoration: none;
}
.title {
color: $color-woot;
display: block;
font-weight: $font-weight-medium;
.icon {
color: $color-body;
font-size: $font-size-medium;
padding-right: $space-small;
}
}
.description {
display: block;
margin-top: $space-smaller;

13
app/javascript/widget/components/template/EmailInput.vue
View File

@@ -3,7 +3,7 @@
<form
v-if="!hasSubmitted"
class="email-input-group"
@submit.prevent="onSubmit()"
@submit.prevent="onSubmit"
>
<input
v-model.trim="email"
@@ -14,12 +14,12 @@
@keyup.enter="onSubmit"
/>
<button
class="button"
class="button small"
:disabled="$v.email.$invalid"
:style="{ background: widgetColor, borderColor: widgetColor }"
>
<i v-if="!isUpdating" class="ion-ios-arrow-forward" />
<spinner v-else />
<fluent-icon v-if="!isUpdating" icon="chevron-right" />
<spinner v-else class="mx-2" />
</button>
</form>
</div>
@@ -27,11 +27,14 @@
<script>
import { mapGetters } from 'vuex';
import Spinner from 'shared/components/Spinner';
import { required, email } from 'vuelidate/lib/validators';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import Spinner from 'shared/components/Spinner';
export default {
components: {
FluentIcon,
Spinner,
},
props: {

20
app/javascript/widget/views/Unread.vue
View File

@@ -6,8 +6,10 @@
class="button small close-unread-button"
@click="closeFullView"
>
<i class="ion-android-close" />
{{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
<div class="flex items-center">
<fluent-icon class="mr-1" icon="dismiss" size="12" />
{{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
</div>
</button>
</div>
<div class="unread-messages">
@@ -29,8 +31,10 @@
class="button clear-button"
@click="openFullView"
>
<i class="ion-arrow-right-c" />
{{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
<div class="flex items-center">
<fluent-icon class="mr-2" size="16" icon="arrow-right" />
{{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
</div>
</button>
</div>
</div>
@@ -38,14 +42,16 @@
<script>
import { IFrameHelper } from 'widget/helpers/utils';
import UnreadMessage from 'widget/components/UnreadMessage.vue';
import configMixin from '../mixins/configMixin';
import { mapGetters } from 'vuex';
import configMixin from '../mixins/configMixin';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import UnreadMessage from 'widget/components/UnreadMessage.vue';
export default {
name: 'Unread',
components: {
FluentIcon,
UnreadMessage,
},
mixins: [configMixin],