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

fix: Update styles for canned responses modal (#6350)

Browse Source
This commit is contained in:
Pranav Raj S
2023-01-25 19:11:54 -08:00
committed by GitHub
parent 5d331f0bb2
commit 6bd4e8853b
5 changed files with 65 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
View File

@@ -1,5 +1,9 @@
<template> <template>
<mention-box :items="items" @mention-select="handleMentionClick" /> <mention-box :items="items" @mention-select="handleMentionClick">
<template slot-scope="{ item }">
<strong>{{ item.label }}</strong> - {{ item.description }}
</template>
</mention-box>
</template> </template>
<script> <script>

14
app/javascript/dashboard/components/widgets/conversation/VariableList.vue
View File

@@ -1,5 +1,12 @@
<template> <template>
<mention-box :items="items" @mention-select="handleVariableClick" /> <mention-box :items="items" @mention-select="handleVariableClick">
<template slot-scope="{ item }">
<span class="text-capitalize variable--list-label">
{{ item.description }}
</span>
({{ item.label }})
</template>
</mention-box>
</template> </template>
<script> <script>
@@ -35,3 +42,8 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.variable--list-label {
font-weight: var(--font-weight-bold);
}
</style>

2
app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
View File

@@ -13,7 +13,7 @@
@mouseover="onHover(index)" @mouseover="onHover(index)"
> >
<a class="text-truncate"> <a class="text-truncate">
<strong>{{ item.label }}</strong> - {{ item.description }} <slot :item="item" />
</a> </a>
</li> </li>
</ul> </ul>

18
app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
View File

@@ -21,7 +21,8 @@
<div class="medium-12 columns"> <div class="medium-12 columns">
<label :class="{ error: $v.content.$error }"> <label :class="{ error: $v.content.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }} {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
<label class="editor-wrap"> </label>
<div class="editor-wrap">
<woot-message-editor <woot-message-editor
v-model="content" v-model="content"
class="message-editor" class="message-editor"
@@ -31,8 +32,7 @@
:placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')" :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
@blur="$v.content.$touch" @blur="$v.content.$touch"
/> />
</label> </div>
</label>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class="medium-12 columns"> <div class="medium-12 columns">
@@ -137,5 +137,17 @@ export default {
.ProseMirror-menubar { .ProseMirror-menubar {
display: none; display: none;
} }
.ProseMirror-woot-style {
min-height: 20rem;
p {
font-size: var(--font-size-default);
}
}
.message-editor {
border: 1px solid var(--s-200);
}
} }
</style> </style>

18
app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
View File

@@ -18,7 +18,8 @@
<div class="medium-12 columns"> <div class="medium-12 columns">
<label :class="{ error: $v.content.$error }"> <label :class="{ error: $v.content.$error }">
{{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }} {{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
<label class="editor-wrap"> </label>
<div class="editor-wrap">
<woot-message-editor <woot-message-editor
v-model="content" v-model="content"
class="message-editor" class="message-editor"
@@ -28,8 +29,7 @@
:placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')" :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
@blur="$v.content.$touch" @blur="$v.content.$touch"
/> />
</label> </div>
</label>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class="medium-12 columns"> <div class="medium-12 columns">
@@ -149,5 +149,17 @@ export default {
.ProseMirror-menubar { .ProseMirror-menubar {
display: none; display: none;
} }
.ProseMirror-woot-style {
min-height: 20rem;
p {
font-size: var(--font-size-default);
}
}
.message-editor {
border: 1px solid var(--s-200);
}
} }
</style> </style>