KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 119 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

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: {