Chore: UI Cleanup in modals (#873)
* Chore: UI Cleanup in modals * Fix review comments
This commit is contained in:
Pranav Raj S
GitHub
parent
59f4dd7ebe
commit
246d0b407f
25 changed files with 101 additions and 231 deletions
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="504px" height="470px" viewBox="0 0 504 470" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>canned</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="canned" fill-rule="nonzero">
|
||||
<path d="M329.386,362.733 L39.253,362.733 C20.48,362.733 5.12,347.373 5.12,328.6 L5.12,38.467 C5.12,19.694 20.48,4.334 39.253,4.334 L465.92,4.334 C484.693,4.334 500.053,19.694 500.053,38.467 L500.053,328.6 C500.053,347.373 484.693,362.733 465.92,362.733 L431.787,362.733 L431.787,465.133 L329.386,362.733 Z" id="Shape" fill="#B9ECFF"></path>
|
||||
<path d="M431.786,469.4 C430.933,469.4 429.226,468.547 428.373,468.547 L308.907,349.08 C307.2,347.373 307.2,344.813 308.907,343.107 C310.614,341.4 313.174,341.4 314.88,343.107 L426.667,454.894 L426.667,362.734 C426.667,360.174 428.374,358.467 430.934,358.467 L465.067,358.467 C481.28,358.467 494.934,344.814 494.934,328.6 L494.934,38.467 C494.934,22.254 481.281,8.6 465.067,8.6 L38.4,8.6 C22.187,8.6 8.533,22.253 8.533,38.467 L8.533,328.6 C8.533,344.813 22.186,358.467 38.4,358.467 L285.867,358.467 C288.427,358.467 290.134,360.174 290.134,362.734 C290.134,365.294 288.427,367.001 285.867,367.001 L38.4,367.001 C17.067,367 0,349.933 0,328.6 L0,38.467 C0,17.134 17.067,0.067 38.4,0.067 L465.067,0.067 C486.4,0.067 503.467,17.134 503.467,38.467 L503.467,328.6 C503.467,349.933 486.4,367 465.067,367 L435.2,367 L435.2,465.133 C435.2,466.84 434.347,468.546 432.64,469.4 C432.64,469.4 432.64,469.4 431.786,469.4 Z M397.653,264.6 L295.253,264.6 C292.693,264.6 290.986,262.893 290.986,260.333 C290.986,257.773 292.693,256.066 295.253,256.066 L397.653,256.066 C400.213,256.066 401.92,257.773 401.92,260.333 C401.92,262.893 400.213,264.6 397.653,264.6 Z M261.12,264.6 L107.52,264.6 C104.96,264.6 103.253,262.893 103.253,260.333 C103.253,257.773 104.96,256.066 107.52,256.066 L261.12,256.066 C263.68,256.066 265.387,257.773 265.387,260.333 C265.387,262.893 263.68,264.6 261.12,264.6 Z M380.586,213.4 L278.186,213.4 C275.626,213.4 273.919,211.693 273.919,209.133 C273.919,206.573 275.626,204.866 278.186,204.866 L380.586,204.866 C383.146,204.866 384.853,206.573 384.853,209.133 C384.853,211.693 383.147,213.4 380.586,213.4 Z M244.053,213.4 L107.52,213.4 C104.96,213.4 103.253,211.693 103.253,209.133 C103.253,206.573 104.96,204.866 107.52,204.866 L244.053,204.866 C246.613,204.866 248.32,206.573 248.32,209.133 C248.32,211.693 246.613,213.4 244.053,213.4 Z M397.653,162.2 L346.453,162.2 C343.893,162.2 342.186,160.493 342.186,157.933 C342.186,155.373 343.893,153.666 346.453,153.666 L397.653,153.666 C400.213,153.666 401.92,155.373 401.92,157.933 C401.92,160.493 400.213,162.2 397.653,162.2 Z M312.32,162.2 L244.053,162.2 C241.493,162.2 239.786,160.493 239.786,157.933 C239.786,155.373 241.493,153.666 244.053,153.666 L312.32,153.666 C314.88,153.666 316.587,155.373 316.587,157.933 C316.586,160.493 314.88,162.2 312.32,162.2 Z M209.92,162.2 L107.52,162.2 C104.96,162.2 103.253,160.493 103.253,157.933 C103.253,155.373 104.96,153.666 107.52,153.666 L209.92,153.666 C212.48,153.666 214.187,155.373 214.187,157.933 C214.186,160.493 212.48,162.2 209.92,162.2 Z M380.586,111 L209.92,111 C207.36,111 205.653,109.293 205.653,106.733 C205.653,104.173 207.36,102.466 209.92,102.466 L380.587,102.466 C383.147,102.466 384.854,104.173 384.854,106.733 C384.853,109.293 383.147,111 380.586,111 Z M175.786,111 L107.52,111 C104.96,111 103.253,109.293 103.253,106.733 C103.253,104.173 104.96,102.466 107.52,102.466 L175.787,102.466 C178.347,102.466 180.054,104.173 180.054,106.733 C180.053,109.293 178.346,111 175.786,111 Z" id="Shape" fill="#6C6C6C"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.8 KiB |
|
|
@ -59,6 +59,9 @@ $secondary-color: #35c5ff;
|
|||
$success-color: #44ce4b;
|
||||
$warning-color: #ffc532;
|
||||
$alert-color: #ff382d;
|
||||
|
||||
$masked-bg: rgba(0, 0, 0, .4);
|
||||
|
||||
// Color-palettes
|
||||
|
||||
$color-primary-light: #c7e3ff;
|
||||
|
|
@ -70,8 +73,6 @@ $thumbnail-radius: 4rem;
|
|||
// chat-header
|
||||
$conv-header-height: 4rem;
|
||||
|
||||
// login
|
||||
|
||||
// Inbox List
|
||||
|
||||
$inbox-thumb-size: 4.8rem;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
.button {
|
||||
margin-bottom: 0;
|
||||
|
||||
&.icon {
|
||||
padding-left: $space-normal;
|
||||
padding-right: $space-normal;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
.modal-mask {
|
||||
@import '~dashboard/assets/scss/variables';
|
||||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
.modal-mask {
|
||||
@include flex;
|
||||
@include flex-align(center, middle);
|
||||
background-color: $color-white;
|
||||
background-color: $masked-bg;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
|
|
@ -19,8 +21,8 @@
|
|||
line-height: $space-normal;
|
||||
padding: $space-normal $space-two;
|
||||
position: absolute;
|
||||
right: $space-large;
|
||||
top: $space-large;
|
||||
right: $space-micro;
|
||||
top: $space-micro;
|
||||
|
||||
&:hover {
|
||||
background: $color-background;
|
||||
|
|
@ -29,7 +31,7 @@
|
|||
|
||||
|
||||
.page-top-bar {
|
||||
@include padding($zero $space-two);
|
||||
@include padding($space-large $space-large $zero);
|
||||
|
||||
img {
|
||||
max-height: 6rem;
|
||||
|
|
@ -37,8 +39,10 @@
|
|||
}
|
||||
|
||||
.modal-container {
|
||||
@include normal-shadow;
|
||||
|
||||
background-color: $color-white;
|
||||
border-radius: $space-small;
|
||||
border-radius: $space-smaller;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
|
|
@ -52,21 +56,21 @@
|
|||
|
||||
|
||||
h2 {
|
||||
color: $color-heading;
|
||||
font-size: $font-size-medium;
|
||||
color: $color-woot;
|
||||
font-weight: $font-weight-normal;
|
||||
@include padding($space-small $zero $zero $zero);
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $font-size-small;
|
||||
@include padding($zero);
|
||||
@include margin($zero);
|
||||
@include padding($zero);
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
form {
|
||||
@include padding($space-large);
|
||||
align-self: center;
|
||||
@include padding($space-two);
|
||||
|
||||
a {
|
||||
@include padding($space-normal);
|
||||
}
|
||||
|
|
@ -74,15 +78,16 @@
|
|||
|
||||
.modal-footer {
|
||||
@include flex;
|
||||
@include flex-align($x: justify, $y: middle);
|
||||
@include padding($space-small $zero $space-medium $zero);
|
||||
@include flex-align($x: flex-start, $y: middle);
|
||||
@include padding($space-small $zero);
|
||||
|
||||
button {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-item {
|
||||
@include padding($space-normal);
|
||||
@include padding($space-large);
|
||||
button {
|
||||
@include margin($zero);
|
||||
}
|
||||
|
|
@ -90,12 +95,12 @@
|
|||
|
||||
}
|
||||
|
||||
.modal-enter, .modal-leave {
|
||||
opacity: 0;
|
||||
.modal-enter,
|
||||
.modal-leave {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-enter .modal-container,
|
||||
.modal-leave .modal-container {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
table {
|
||||
font-size: $font-size-small;
|
||||
border-spacing: 0;
|
||||
font-size: $font-size-small;
|
||||
|
||||
thead {
|
||||
th {
|
||||
|
|
@ -10,9 +10,12 @@ table {
|
|||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid $color-border-light;
|
||||
}
|
||||
|
||||
td {
|
||||
@include padding($space-one $space-small);
|
||||
border-bottom: 1px solid $color-border-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -32,22 +35,22 @@ table {
|
|||
}
|
||||
|
||||
.agent-name {
|
||||
font-weight: $font-weight-medium;
|
||||
display: block;
|
||||
font-weight: $font-weight-medium;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.woot-thumbnail {
|
||||
border-radius: 50%;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
min-width: 20rem;
|
||||
@include flex;
|
||||
@include flex-align(left, null);
|
||||
@include flex;
|
||||
flex-direction: row;
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
transition="modal"
|
||||
@click="onBackDropClick"
|
||||
>
|
||||
<i class="ion-android-close modal--close" @click="close"></i>
|
||||
<div class="modal-container" :class="className" @click.stop>
|
||||
<i class="ion-android-close modal--close" @click="close"></i>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
/* eslint no-plusplus: 0 */
|
||||
/* eslint-env browser */
|
||||
|
||||
import Spinner from 'shared/components/Spinner';
|
||||
import Bar from './widgets/chart/BarChart';
|
||||
import Code from './Code';
|
||||
import DeleteModal from './widgets/modal/DeleteModal.vue';
|
||||
import LoadingState from './widgets/LoadingState';
|
||||
import Modal from './Modal';
|
||||
import ModalHeader from './ModalHeader';
|
||||
import ReportStatsCard from './widgets/ReportStatsCard';
|
||||
import SidemenuIcon from './SidemenuIcon';
|
||||
import Spinner from 'shared/components/Spinner';
|
||||
import SubmitButton from './buttons/FormSubmitButton';
|
||||
import Tabs from './ui/Tabs/Tabs';
|
||||
import TabsItem from './ui/Tabs/TabsItem';
|
||||
|
|
@ -16,6 +17,7 @@ import TabsItem from './ui/Tabs/TabsItem';
|
|||
const WootUIKit = {
|
||||
Bar,
|
||||
Code,
|
||||
DeleteModal,
|
||||
LoadingState,
|
||||
Modal,
|
||||
ModalHeader,
|
||||
|
|
|
|||
|
|
@ -2,18 +2,18 @@
|
|||
<modal :show.sync="show" :on-close="onClose">
|
||||
<woot-modal-header :header-title="title" :header-content="message" />
|
||||
<div class="modal-footer delete-item">
|
||||
<button class="button" @click="onClose">
|
||||
{{ rejectText }}
|
||||
</button>
|
||||
<button class="alert button" @click="onConfirm">
|
||||
<button class="alert button nice" @click="onConfirm">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
<button class="button clear" @click="onClose">
|
||||
{{ rejectText }}
|
||||
</button>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from '../../../../components/Modal';
|
||||
import Modal from '../../Modal';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -8,7 +8,8 @@
|
|||
{
|
||||
"name": "administrator",
|
||||
"label": "Administrator"
|
||||
}, {
|
||||
},
|
||||
{
|
||||
"name": "agent",
|
||||
"label": "Agent"
|
||||
}
|
||||
|
|
@ -27,17 +28,18 @@
|
|||
"ADD": {
|
||||
"TITLE": "Add agent to your team",
|
||||
"DESC": "You can add people who will be able to handle support for your inboxes.",
|
||||
"CANCEL_BUTTON_TEXT": "Cancel",
|
||||
"FORM": {
|
||||
"NAME" : {
|
||||
"NAME": {
|
||||
"LABEL": "Agent Name",
|
||||
"PLACEHOLDER": "Please enter a name of the agent"
|
||||
},
|
||||
"AGENT_TYPE" : {
|
||||
"AGENT_TYPE": {
|
||||
"LABEL": "Agent Type",
|
||||
"PLACEHOLDER": "Please select a type",
|
||||
"ERROR": "Agent type is required"
|
||||
},
|
||||
"EMAIL" : {
|
||||
"EMAIL": {
|
||||
"LABEL": "Email Address",
|
||||
"PLACEHOLDER": "Please enter an email address of the agent"
|
||||
},
|
||||
|
|
@ -59,22 +61,22 @@
|
|||
"TITLE": "Confirm Deletion",
|
||||
"MESSAGE": "Are you sure to delete ",
|
||||
"YES": "Yes, Delete ",
|
||||
"NO": "No, Keep it "
|
||||
"NO": "No, Keep "
|
||||
}
|
||||
},
|
||||
"EDIT": {
|
||||
"TITLE": "Edit agent",
|
||||
"FORM": {
|
||||
"NAME" : {
|
||||
"NAME": {
|
||||
"LABEL": "Agent Name",
|
||||
"PLACEHOLDER": "Please enter a name of the agent"
|
||||
},
|
||||
"AGENT_TYPE" : {
|
||||
"AGENT_TYPE": {
|
||||
"LABEL": "Agent Type",
|
||||
"PLACEHOLDER": "Please select a type",
|
||||
"ERROR": "Agent type is required"
|
||||
},
|
||||
"EMAIL" : {
|
||||
"EMAIL": {
|
||||
"LABEL": "Email Address",
|
||||
"PLACEHOLDER": "Please enter an email address of the agent"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,13 +18,14 @@
|
|||
"ADD": {
|
||||
"TITLE": "Add Canned Response",
|
||||
"DESC": "Canned Responses are saved reply templates which can be used to quickly send out reply to conversation .",
|
||||
"CANCEL_BUTTON_TEXT": "Cancel",
|
||||
"FORM": {
|
||||
"SHORT_CODE" : {
|
||||
"SHORT_CODE": {
|
||||
"LABEL": "Short Code",
|
||||
"PLACEHOLDER": "Please enter a shortcode",
|
||||
"ERROR": "Short Code is required"
|
||||
},
|
||||
"CONTENT" : {
|
||||
"CONTENT": {
|
||||
"LABEL": "Content",
|
||||
"PLACEHOLDER": "Please enter a content",
|
||||
"ERROR": "Content is required"
|
||||
|
|
@ -38,13 +39,14 @@
|
|||
},
|
||||
"EDIT": {
|
||||
"TITLE": "Edit Canned Response",
|
||||
"CANCEL_BUTTON_TEXT": "Cancel",
|
||||
"FORM": {
|
||||
"SHORT_CODE" : {
|
||||
"SHORT_CODE": {
|
||||
"LABEL": "Short Code",
|
||||
"PLACEHOLDER": "Please enter a shortcode",
|
||||
"ERROR": "Short Code is required"
|
||||
},
|
||||
"CONTENT" : {
|
||||
"CONTENT": {
|
||||
"LABEL": "Content",
|
||||
"PLACEHOLDER": "Please enter a content",
|
||||
"ERROR": "Content is required"
|
||||
|
|
@ -67,7 +69,7 @@
|
|||
"TITLE": "Confirm Deletion",
|
||||
"MESSAGE": "Are you sure to delete ",
|
||||
"YES": "Yes, Delete ",
|
||||
"NO": "No, Keep it "
|
||||
"NO": "No, Keep "
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
"TITLE": "Confirm Deletion",
|
||||
"MESSAGE": "Are you sure to delete ",
|
||||
"YES": "Yes, Delete ",
|
||||
"NO": "No, Keep it "
|
||||
"NO": "No, Keep "
|
||||
},
|
||||
"API": {
|
||||
"SUCCESS_MESSAGE": "Inbox deleted successfully",
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
"TITLE": "Confirm Deletion",
|
||||
"MESSAGE": "Are you sure to delete ",
|
||||
"YES": "Yes, Delete ",
|
||||
"NO": "No, Keep it "
|
||||
"NO": "No, Keep it"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<woot-modal :show.sync="show" :on-close="onClose">
|
||||
<div class="column content-box">
|
||||
<woot-modal-header
|
||||
:header-image="headerImage"
|
||||
:header-title="$t('AGENT_MGMT.ADD.TITLE')"
|
||||
:header-content="$t('AGENT_MGMT.ADD.DESC')"
|
||||
/>
|
||||
|
|
@ -59,7 +58,9 @@
|
|||
:button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
|
||||
:loading="uiFlags.isCreating"
|
||||
/>
|
||||
<a @click="onClose">Cancel</a>
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('AGENT_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -73,10 +74,13 @@
|
|||
import { required, minLength, email } from 'vuelidate/lib/validators';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
const agentImg = require('assets/images/agent.svg');
|
||||
|
||||
export default {
|
||||
props: ['onClose'],
|
||||
props: {
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
agentName: '',
|
||||
|
|
@ -89,9 +93,6 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
headerImage() {
|
||||
return agentImg;
|
||||
},
|
||||
...mapGetters({
|
||||
uiFlags: 'agents/getUIFlags',
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -42,15 +42,15 @@
|
|||
:button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
|
||||
:loading="uiFlags.isUpdating"
|
||||
/>
|
||||
<a @click="onClose">
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div class="medium-6 columns text-right">
|
||||
<a @click="resetPassword">
|
||||
<button class="button clear" @click.prevent="resetPassword">
|
||||
<i class="ion-locked"></i>
|
||||
{{ $t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_RESET_BUTTON') }}
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
/>
|
||||
</woot-modal>
|
||||
<!-- Delete Agent -->
|
||||
<delete-agent
|
||||
<woot-delete-modal
|
||||
:show.sync="showDeletePopup"
|
||||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
|
|
@ -119,13 +119,11 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
|||
import Thumbnail from '../../../../components/widgets/Thumbnail';
|
||||
import AddAgent from './AddAgent';
|
||||
import EditAgent from './EditAgent';
|
||||
import DeleteAgent from './DeleteAgent';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddAgent,
|
||||
EditAgent,
|
||||
DeleteAgent,
|
||||
Thumbnail,
|
||||
},
|
||||
mixins: [globalConfigMixin],
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<modal :show.sync="show" :on-close="onClose">
|
||||
<div class="column content-box">
|
||||
<woot-modal-header
|
||||
:header-image="headerImage"
|
||||
:header-title="$t('CANNED_MGMT.ADD.TITLE')"
|
||||
:header-content="$t('CANNED_MGMT.ADD.DESC')"
|
||||
/>
|
||||
|
|
@ -22,8 +21,9 @@
|
|||
<div class="medium-12 columns">
|
||||
<label :class="{ error: $v.content.$error }">
|
||||
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
|
||||
<input
|
||||
<textarea
|
||||
v-model.trim="content"
|
||||
rows="5"
|
||||
type="text"
|
||||
:placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
|
||||
@input="$v.content.$touch"
|
||||
|
|
@ -41,7 +41,9 @@
|
|||
:button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
|
||||
:loading="addCanned.showLoading"
|
||||
/>
|
||||
<a @click="onClose">Cancel</a>
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -57,14 +59,17 @@ import { required, minLength } from 'vuelidate/lib/validators';
|
|||
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
|
||||
import Modal from '../../../../components/Modal';
|
||||
|
||||
const cannedImg = require('assets/images/canned.svg');
|
||||
|
||||
export default {
|
||||
components: {
|
||||
WootSubmitButton,
|
||||
Modal,
|
||||
},
|
||||
props: ['onClose'],
|
||||
props: {
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shortCode: '',
|
||||
|
|
@ -81,11 +86,6 @@ export default {
|
|||
show: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
headerImage() {
|
||||
return cannedImg;
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
shortCode: {
|
||||
required,
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
<template>
|
||||
<modal :show.sync="show" :on-close="onClose">
|
||||
<woot-modal-header :header-title="title" :header-content="message" />
|
||||
<div class="modal-footer delete-item">
|
||||
<button class="button" @click="onClose">
|
||||
{{ rejectText }}
|
||||
</button>
|
||||
<button class="alert button" @click="onConfirm">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from '../../../../components/Modal';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
show: Boolean,
|
||||
onClose: Function,
|
||||
onConfirm: Function,
|
||||
title: String,
|
||||
message: String,
|
||||
confirmText: String,
|
||||
rejectText: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -18,8 +18,9 @@
|
|||
<div class="medium-12 columns">
|
||||
<label :class="{ error: $v.content.$error }">
|
||||
{{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
|
||||
<input
|
||||
<textarea
|
||||
v-model.trim="content"
|
||||
rows="5"
|
||||
type="text"
|
||||
:placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
|
||||
@input="$v.content.$touch"
|
||||
|
|
@ -37,7 +38,9 @@
|
|||
:button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
|
||||
:loading="editCanned.showLoading"
|
||||
/>
|
||||
<a @click="onClose">Cancel</a>
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('CANNED_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
</woot-modal>
|
||||
|
||||
<!-- Delete Canned Response -->
|
||||
<delete-canned
|
||||
<woot-delete-modal
|
||||
:show.sync="showDeleteConfirmationPopup"
|
||||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
|
|
@ -104,13 +104,11 @@ import { mapGetters } from 'vuex';
|
|||
|
||||
import AddCanned from './AddCanned';
|
||||
import EditCanned from './EditCanned';
|
||||
import DeleteCanned from './DeleteCanned';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddCanned,
|
||||
EditCanned,
|
||||
DeleteCanned,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<modal
|
||||
:show.sync="show"
|
||||
:on-close="onClose"
|
||||
>
|
||||
|
||||
<woot-modal-header
|
||||
:header-title="title"
|
||||
:header-content="message"
|
||||
/>
|
||||
<div class="modal-footer delete-item">
|
||||
<button class="button" @click="onClose">
|
||||
{{ rejectText }}
|
||||
</button>
|
||||
<button class="alert button" @click="onConfirm">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeader from '../SettingsSubPageHeader';
|
||||
import Modal from '../../../../components/Modal';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
PageHeader,
|
||||
},
|
||||
props: {
|
||||
show: Boolean,
|
||||
onClose: Function,
|
||||
onConfirm: Function,
|
||||
title: String,
|
||||
message: String,
|
||||
confirmText: String,
|
||||
rejectText: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
:inbox="selectedInbox"
|
||||
/>
|
||||
|
||||
<delete-inbox
|
||||
<woot-delete-modal
|
||||
:show.sync="showDeletePopup"
|
||||
:on-close="closeDelete"
|
||||
:on-confirm="confirmDeletion"
|
||||
|
|
@ -110,7 +110,6 @@
|
|||
|
||||
import { mapGetters } from 'vuex';
|
||||
import Settings from './Settings';
|
||||
import DeleteInbox from './DeleteInbox';
|
||||
import adminMixin from '../../../../mixins/isAdmin';
|
||||
import auth from '../../../../api/auth';
|
||||
import accountMixin from '../../../../mixins/account';
|
||||
|
|
@ -119,7 +118,6 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
|||
export default {
|
||||
components: {
|
||||
Settings,
|
||||
DeleteInbox,
|
||||
},
|
||||
mixins: [adminMixin, accountMixin, globalConfigMixin],
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
<template>
|
||||
<modal :show.sync="show" :on-close="onClose">
|
||||
<woot-modal-header :header-title="title" :header-content="message" />
|
||||
<div class="modal-footer delete-item">
|
||||
<button class="button" @click="onClose">
|
||||
{{ rejectText }}
|
||||
</button>
|
||||
<button class="alert button" @click="onConfirm">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from '../../../../components/Modal';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
show: Boolean,
|
||||
onClose: Function,
|
||||
onConfirm: Function,
|
||||
title: String,
|
||||
message: String,
|
||||
confirmText: String,
|
||||
rejectText: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -33,9 +33,9 @@
|
|||
:button-text="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.FORM.SUBMIT')"
|
||||
:loading="addWebHook.showLoading"
|
||||
/>
|
||||
<a @click="onClose">
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.ADD.CANCEL') }}
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
<new-webhook :on-close="hideAddPopup" />
|
||||
</woot-modal>
|
||||
|
||||
<delete-webhook
|
||||
<woot-delete-modal
|
||||
:show.sync="showDeleteConfirmationPopup"
|
||||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
|
|
@ -85,13 +85,11 @@
|
|||
/* global bus */
|
||||
import { mapGetters } from 'vuex';
|
||||
import NewWebhook from './New';
|
||||
import DeleteWebhook from './Delete';
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NewWebhook,
|
||||
DeleteWebhook,
|
||||
},
|
||||
mixins: [globalConfigMixin],
|
||||
data() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue