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

Chore: UI Cleanup in modals (#873)

Browse Source 
* Chore: UI Cleanup in modals

* Fix review comments
This commit is contained in:
Pranav Raj S
2020-05-17 21:07:45 +05:30
committed by GitHub
parent 59f4dd7ebe
commit 246d0b407f
25 changed files with 101 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
View File

@@ -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',
}),

32
app/javascript/dashboard/routes/dashboard/settings/agents/DeleteAgent.vue
View File

@@ -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>

8
app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
View File

@@ -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>

4
app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
View File

@@ -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],

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

@@ -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,

32
app/javascript/dashboard/routes/dashboard/settings/canned/DeleteCanned.vue
View File

@@ -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>

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

@@ -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>

4
app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
View File

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

41
app/javascript/dashboard/routes/dashboard/settings/inbox/DeleteInbox.vue
View File

@@ -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>

4
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
View File

@@ -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() {

32
app/javascript/dashboard/routes/dashboard/settings/integrations/Delete.vue
View File

@@ -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>

4
app/javascript/dashboard/routes/dashboard/settings/integrations/New.vue
View File

@@ -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>

4
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
View File

@@ -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() {