fix: Fix modal responsiveness (#4149)
This commit is contained in:
parent
dd1fe4f93a
commit
5edf0f2bbe
2 changed files with 63 additions and 44 deletions
|
@ -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;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue