fix: Fix modal responsiveness (#4149)

This commit is contained in:
Sivin Varghese 2022-03-14 18:14:16 +05:30 committed by GitHub
parent dd1fe4f93a
commit 5edf0f2bbe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 44 deletions

View file

@ -19,23 +19,6 @@
:current-role="currentRole" :current-role="currentRole"
@add-label="showAddLabelPopup" @add-label="showAddLabelPopup"
/> />
<woot-key-shortcut-modal
v-if="showShortcutModal"
@close="closeKeyShortcutModal"
@clickaway="closeKeyShortcutModal"
/>
<account-selector
:show-account-modal="showAccountModal"
@close-account-modal="toggleAccountModal"
@show-create-account-modal="openCreateAccountModal"
/>
<add-account-modal
:show="showCreateAccountModal"
@close-account-create-modal="closeCreateAccountModal"
/>
<woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
<add-label-modal @close="hideAddLabelPopup" />
</woot-modal>
</aside> </aside>
</template> </template>
@ -46,12 +29,8 @@ import adminMixin from '../../mixins/isAdmin';
import { getSidebarItems } from './config/default-sidebar'; import { getSidebarItems } from './config/default-sidebar';
import alertMixin from 'shared/mixins/alertMixin'; import alertMixin from 'shared/mixins/alertMixin';
import AccountSelector from './sidebarComponents/AccountSelector.vue';
import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
import PrimarySidebar from './sidebarComponents/Primary'; import PrimarySidebar from './sidebarComponents/Primary';
import SecondarySidebar from './sidebarComponents/Secondary'; import SecondarySidebar from './sidebarComponents/Secondary';
import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
import { import {
hasPressedAltAndCKey, hasPressedAltAndCKey,
hasPressedAltAndRKey, hasPressedAltAndRKey,
@ -65,21 +44,13 @@ import router from '../../routes';
export default { export default {
components: { components: {
AccountSelector,
AddAccountModal,
AddLabelModal,
PrimarySidebar, PrimarySidebar,
SecondarySidebar, SecondarySidebar,
WootKeyShortcutModal,
}, },
mixins: [adminMixin, alertMixin, eventListenerMixins], mixins: [adminMixin, alertMixin, eventListenerMixins],
data() { data() {
return { return {
showOptionsMenu: false, showOptionsMenu: false,
showAccountModal: false,
showCreateAccountModal: false,
showAddLabelModal: false,
showShortcutModal: false,
}; };
}, },
@ -162,10 +133,10 @@ export default {
} }
}, },
toggleKeyShortcutModal() { toggleKeyShortcutModal() {
this.showShortcutModal = true; this.$emit('open-key-shortcut-modal');
}, },
closeKeyShortcutModal() { closeKeyShortcutModal() {
this.showShortcutModal = false; this.$emit('close-key-shortcut-modal');
}, },
handleKeyEvents(e) { handleKeyEvents(e) {
if (hasPressedCommandAndForwardSlash(e)) { if (hasPressedCommandAndForwardSlash(e)) {
@ -200,20 +171,10 @@ export default {
window.$chatwoot.toggle(); window.$chatwoot.toggle();
}, },
toggleAccountModal() { toggleAccountModal() {
this.showAccountModal = !this.showAccountModal; this.$emit('toggle-account-modal');
},
openCreateAccountModal() {
this.showAccountModal = false;
this.showCreateAccountModal = true;
},
closeCreateAccountModal() {
this.showCreateAccountModal = false;
}, },
showAddLabelPopup() { showAddLabelPopup() {
this.showAddLabelModal = true; this.$emit('show-add-label-popup');
},
hideAddLabelPopup() {
this.showAddLabelModal = false;
}, },
}, },
}; };

View file

@ -1,9 +1,33 @@
<template> <template>
<div class="row app-wrapper"> <div class="row app-wrapper">
<sidebar :route="currentRoute" :class="sidebarClassName"></sidebar> <sidebar
:route="currentRoute"
:class="sidebarClassName"
@toggle-account-modal="toggleAccountModal"
@open-key-shortcut-modal="toggleKeyShortcutModal"
@close-key-shortcut-modal="closeKeyShortcutModal"
@show-add-label-popup="showAddLabelPopup"
></sidebar>
<section class="app-content columns" :class="contentClassName"> <section class="app-content columns" :class="contentClassName">
<router-view></router-view> <router-view></router-view>
<command-bar /> <command-bar />
<account-selector
:show-account-modal="showAccountModal"
@close-account-modal="toggleAccountModal"
@show-create-account-modal="openCreateAccountModal"
/>
<add-account-modal
:show="showCreateAccountModal"
@close-account-create-modal="closeCreateAccountModal"
/>
<woot-key-shortcut-modal
v-if="showShortcutModal"
@close="closeKeyShortcutModal"
@clickaway="closeKeyShortcutModal"
/>
<woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
<add-label-modal @close="hideAddLabelPopup" />
</woot-modal>
</section> </section>
</div> </div>
</template> </template>
@ -12,16 +36,28 @@
import Sidebar from '../../components/layout/Sidebar'; import Sidebar from '../../components/layout/Sidebar';
import CommandBar from './commands/commandbar.vue'; import CommandBar from './commands/commandbar.vue';
import { BUS_EVENTS } from 'shared/constants/busEvents'; import { BUS_EVENTS } from 'shared/constants/busEvents';
import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal';
import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
export default { export default {
components: { components: {
Sidebar, Sidebar,
CommandBar, CommandBar,
WootKeyShortcutModal,
AddAccountModal,
AccountSelector,
AddLabelModal,
}, },
data() { data() {
return { return {
isSidebarOpen: false, isSidebarOpen: false,
isOnDesktop: true, isOnDesktop: true,
showAccountModal: false,
showCreateAccountModal: false,
showAddLabelModal: false,
showShortcutModal: false,
}; };
}, },
computed: { computed: {
@ -68,6 +104,28 @@ export default {
toggleSidebar() { toggleSidebar() {
this.isSidebarOpen = !this.isSidebarOpen; this.isSidebarOpen = !this.isSidebarOpen;
}, },
openCreateAccountModal() {
this.showAccountModal = false;
this.showCreateAccountModal = true;
},
closeCreateAccountModal() {
this.showCreateAccountModal = false;
},
toggleAccountModal() {
this.showAccountModal = !this.showAccountModal;
},
toggleKeyShortcutModal() {
this.showShortcutModal = true;
},
closeKeyShortcutModal() {
this.showShortcutModal = false;
},
showAddLabelPopup() {
this.showAddLabelModal = true;
},
hideAddLabelPopup() {
this.showAddLabelModal = false;
},
}, },
}; };
</script> </script>