Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improved mobile navbar/sidebar #574

Merged
merged 5 commits into from
Nov 9, 2021
Merged

improved mobile navbar/sidebar #574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
df46e4e
improved mobile navbar/sidebar
sweetppro Nov 8, 2021
b516e50
improvements to menu rendering
sweetppro Nov 9, 2021
b712f3b
Update Navigation.vue
sweetppro Nov 9, 2021
c147424
Add minor refactors to the mobile menu PR.
knadh Nov 9, 2021
0060a79
Update App.vue
sweetppro Nov 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 28 additions & 14 deletions frontend/fontello/config.json
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -552,6 +552,20 @@
"speedometer"
]
},
{
"uid": "86efd4d8903ab613b84953efcef01406",
"css": "logout-variant",
"code": 984573,
"src": "custom_icons",
"selected": true,
"svg": {
"path": "M585.9 650.4L695.3 541H291V459H695.3L585.9 349.6 646.5 291 853.5 500 646.5 709ZM791 125Q826.2 125 850.6 149.4T875 209V402.3L791 320.3V209H209V791H791V679.7L875 597.7V791Q875 826.2 850.6 850.6T791 875H209Q173.8 875 149.4 850.6T125 791V209Q125 173.8 149.4 149.4T209 125H791Z",
"width": 1000
},
"search": [
"logout-variant"
]
},
{
"uid": "f4ad3f6d071a0bfb3a8452b514ed0892",
"css": "vector-square",
Expand Down Expand Up @@ -21790,20 +21804,6 @@
"lock-plus"
]
},
{
"uid": "86efd4d8903ab613b84953efcef01406",
"css": "logout-variant",
"code": 984573,
"src": "custom_icons",
"selected": false,
"svg": {
"path": "M585.9 650.4L695.3 541H291V459H695.3L585.9 349.6 646.5 291 853.5 500 646.5 709ZM791 125Q826.2 125 850.6 149.4T875 209V402.3L791 320.3V209H209V791H791V679.7L875 597.7V791Q875 826.2 850.6 850.6T791 875H209Q173.8 875 149.4 850.6T125 791V209Q125 173.8 149.4 149.4T209 125H791Z",
"width": 1000
},
"search": [
"logout-variant"
]
},
{
"uid": "90e8ca4d57b7f017c8a63b1dc2917046",
"css": "music-note-bluetooth",
Expand Down Expand Up @@ -74835,6 +74835,20 @@
"search": [
"set-split"
]
},
{
"uid": "b39a043bdb10d9d11ccecca6f17a07fe",
"css": "logout-variant",
"code": 64737,
"src": "custom_icons",
"selected": false,
"svg": {
"path": "M586.7 649.6L694.6 541.7H291.7V458.3H694.6L586.7 350.4 645.8 291.7 854.2 500 645.8 708.3 586.7 649.6M791.7 125C837.5 125 875 162.5 875 208.3V402.9L791.7 319.6V208.3H208.3V791.7H791.7V680.4L875 597.1V791.7C875 837.5 837.5 875 791.7 875H208.3C162.1 875 125 837.5 125 791.7V208.3C125 162.1 162.1 125 208.3 125H791.7Z",
"width": 1000
},
"search": [
"logout-variant"
]
}
]
}
118 changes: 24 additions & 94 deletions frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,98 +10,27 @@
</div>
</template>
<template slot="end">
<b-navbar-item tag="div">
<a href="#" @click.prevent="doLogout">{{ $t('users.logout') }}</a>
</b-navbar-item>
<navigation v-if="isMobile" :isMobile="isMobile"
:activeItem="activeItem" :activeGroup="activeGroup" @toggleGroup="toggleGroup" />
<b-navbar-item v-else tag="div">
<a href="#" @click.prevent="doLogout">{{ $t('users.logout') }}</a>
</b-navbar-item>
</template>
</b-navbar>

<div class="wrapper" v-if="$root.isLoaded">
<section class="sidebar">
<b-sidebar
position="static"
mobile="reduce"
mobile="hide"
:fullheight="true"
:open="true"
:can-cancel="false"
>
<div>
<b-menu :accordion="false">
<b-menu-list>
<b-menu-item :to="{name: 'dashboard'}" tag="router-link"
:active="activeItem.dashboard"
icon="view-dashboard-variant-outline" :label="$t('menu.dashboard')">
</b-menu-item><!-- dashboard -->

<b-menu-item :expanded="activeGroup.lists"
:active="activeGroup.lists" data-cy="lists"
v-on:update:active="(state) => toggleGroup('lists', state)"
icon="format-list-bulleted-square" :label="$t('globals.terms.lists')">
<b-menu-item :to="{name: 'lists'}" tag="router-link"
:active="activeItem.lists" data-cy="all-lists"
icon="format-list-bulleted-square" :label="$t('menu.allLists')"></b-menu-item>

<b-menu-item :to="{name: 'forms'}" tag="router-link"
:active="activeItem.forms" class="forms"
icon="newspaper-variant-outline" :label="$t('menu.forms')"></b-menu-item>
</b-menu-item><!-- lists -->

<b-menu-item :expanded="activeGroup.subscribers"
:active="activeGroup.subscribers" data-cy="subscribers"
v-on:update:active="(state) => toggleGroup('subscribers', state)"
icon="account-multiple" :label="$t('globals.terms.subscribers')">
<b-menu-item :to="{name: 'subscribers'}" tag="router-link"
:active="activeItem.subscribers" data-cy="all-subscribers"
icon="account-multiple" :label="$t('menu.allSubscribers')"></b-menu-item>

<b-menu-item :to="{name: 'import'}" tag="router-link"
:active="activeItem.import" data-cy="import"
icon="file-upload-outline" :label="$t('menu.import')"></b-menu-item>

<b-menu-item :to="{name: 'bounces'}" tag="router-link"
:active="activeItem.bounces" data-cy="bounces"
icon="email-bounce" :label="$t('globals.terms.bounces')"></b-menu-item>
</b-menu-item><!-- subscribers -->

<b-menu-item :expanded="activeGroup.campaigns"
:active="activeGroup.campaigns" data-cy="campaigns"
v-on:update:active="(state) => toggleGroup('campaigns', state)"
icon="rocket-launch-outline" :label="$t('globals.terms.campaigns')">
<b-menu-item :to="{name: 'campaigns'}" tag="router-link"
:active="activeItem.campaigns" data-cy="all-campaigns"
icon="rocket-launch-outline" :label="$t('menu.allCampaigns')"></b-menu-item>

<b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
:active="activeItem.campaign" data-cy="new-campaign"
icon="plus" :label="$t('menu.newCampaign')"></b-menu-item>

<b-menu-item :to="{name: 'media'}" tag="router-link"
:active="activeItem.media" data-cy="media"
icon="image-outline" :label="$t('menu.media')"></b-menu-item>

<b-menu-item :to="{name: 'templates'}" tag="router-link"
:active="activeItem.templates" data-cy="templates"
icon="file-image-outline" :label="$t('globals.terms.templates')"></b-menu-item>

<b-menu-item :to="{name: 'campaignAnalytics'}" tag="router-link"
:active="activeItem.campaignAnalytics" data-cy="analytics"
icon="chart-bar" :label="$t('globals.terms.analytics')"></b-menu-item>
</b-menu-item><!-- campaigns -->

<b-menu-item :expanded="activeGroup.settings"
:active="activeGroup.settings" data-cy="settings"
v-on:update:active="(state) => toggleGroup('settings', state)"
icon="cog-outline" :label="$t('menu.settings')">

<b-menu-item :to="{name: 'settings'}" tag="router-link"
:active="activeItem.settings" data-cy="all-settings"
icon="cog-outline" :label="$t('menu.settings')"></b-menu-item>

<b-menu-item :to="{name: 'logs'}" tag="router-link"
:active="activeItem.logs" data-cy="logs"
icon="newspaper-variant-outline" :label="$t('menu.logs')"></b-menu-item>
</b-menu-item><!-- settings -->
</b-menu-list>
<navigation v-if="!isMobile" :isMobile="isMobile"
:activeItem="activeItem" :activeGroup="activeGroup" @toggleGroup="toggleGroup" />
</b-menu>
</div>
</b-sidebar>
Expand Down Expand Up @@ -136,15 +65,22 @@
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import { uris } from './constants';

import Navigation from './components/Navigation.vue';

export default Vue.extend({
name: 'App',

components: {
Navigation,
},

data() {
return {
activeItem: {},
activeGroup: {},
showLogout: Boolean,
windowWidth: window.innerWidth,
};
},

Expand All @@ -168,20 +104,6 @@ export default Vue.extend({
this.activeGroup = state ? { [group]: true } : {};
},

doLogout() {
const http = new XMLHttpRequest();

const u = uris.root.substr(-1) === '/' ? uris.root : `${uris.root}/`;
http.open('get', `${u}api/logout`, false, 'logout_non_user', 'logout_non_user');
http.onload = () => {
document.location.href = uris.root;
};
http.onerror = () => {
document.location.href = uris.root;
};
http.send();
},

reloadApp() {
this.$api.reloadApp().then(() => {
this.$utils.toast('Reloading app ...');
Expand All @@ -204,12 +126,20 @@ export default Vue.extend({
version() {
return process.env.VUE_APP_VERSION;
},

isMobile() {
return this.windowWidth <= 768;
},
},

mounted() {
// Lists is required across different views. On app load, fetch the lists
// and have them in the store.
this.$api.getLists({ minimal: true });

window.addEventListener('resize', () => {
this.windowWidth = window.innerWidth;
});
},
});
</script>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/assets/icons/fontello.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,4 @@
.mdi-chart-bar:before { content: '\e824'; } /* '' */
.mdi-email-bounce:before { content: '\e825'; } /* '' */
.mdi-speedometer:before { content: '\e826'; } /* '' */
.mdi-logout-variant:before { content: '󰗽'; } /* '\f05fd' */
Binary file modified frontend/src/assets/icons/fontello.woff2
100644 → 100755
View file
Open in desktop
Binary file not shown.
117 changes: 117 additions & 0 deletions frontend/src/components/Navigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<template>
<b-menu-list>
<b-menu-item :to="{name: 'dashboard'}" tag="router-link" :active="activeItem.dashboard"
icon="view-dashboard-variant-outline" :label="$t('menu.dashboard')">
</b-menu-item><!-- dashboard -->

<b-menu-item :expanded="activeGroup.lists" :active="activeGroup.lists" data-cy="lists"
v-on:update:active="(state) => toggleGroup('lists', state)" icon="format-list-bulleted-square"
:label="$t('globals.terms.lists')">
<b-menu-item :to="{name: 'lists'}" tag="router-link" :active="activeItem.lists"
data-cy="all-lists" icon="format-list-bulleted-square" :label="$t('menu.allLists')">
</b-menu-item>

<b-menu-item :to="{name: 'forms'}" tag="router-link" :active="activeItem.forms"
class="forms" icon="newspaper-variant-outline" :label="$t('menu.forms')">
</b-menu-item>
</b-menu-item><!-- lists -->

<b-menu-item :expanded="activeGroup.subscribers" :active="activeGroup.subscribers"
data-cy="subscribers" v-on:update:active="(state) => toggleGroup('subscribers', state)"
icon="account-multiple" :label="$t('globals.terms.subscribers')">

<b-menu-item :to="{name: 'subscribers'}" tag="router-link"
:active="activeItem.subscribers" data-cy="all-subscribers" icon="account-multiple"
:label="$t('menu.allSubscribers')">
</b-menu-item>

<b-menu-item :to="{name: 'import'}" tag="router-link" :active="activeItem.import"
data-cy="import" icon="file-upload-outline" :label="$t('menu.import')">
</b-menu-item>

<b-menu-item :to="{name: 'bounces'}" tag="router-link" :active="activeItem.bounces"
data-cy="bounces" icon="email-bounce" :label="$t('globals.terms.bounces')">
</b-menu-item>
</b-menu-item><!-- subscribers -->

<b-menu-item :expanded="activeGroup.campaigns" :active="activeGroup.campaigns"
data-cy="campaigns" v-on:update:active="(state) => toggleGroup('campaigns', state)"
icon="rocket-launch-outline" :label="$t('globals.terms.campaigns')">

<b-menu-item :to="{name: 'campaigns'}" tag="router-link" :active="activeItem.campaigns"
data-cy="all-campaigns" icon="rocket-launch-outline" :label="$t('menu.allCampaigns')">
</b-menu-item>

<b-menu-item :to="{name: 'campaign', params: {id: 'new'}}" tag="router-link"
:active="activeItem.campaign" data-cy="new-campaign" icon="plus"
:label="$t('menu.newCampaign')">
</b-menu-item>

<b-menu-item :to="{name: 'media'}" tag="router-link" :active="activeItem.media"
data-cy="media" icon="image-outline" :label="$t('menu.media')">
</b-menu-item>

<b-menu-item :to="{name: 'templates'}" tag="router-link" :active="activeItem.templates"
data-cy="templates" icon="file-image-outline" :label="$t('globals.terms.templates')">
</b-menu-item>

<b-menu-item :to="{name: 'campaignAnalytics'}" tag="router-link"
:active="activeItem.campaignAnalytics" data-cy="analytics" icon="chart-bar"
:label="$t('globals.terms.analytics')">
</b-menu-item>
</b-menu-item><!-- campaigns -->

<b-menu-item :expanded="activeGroup.settings" :active="activeGroup.settings"
data-cy="settings" v-on:update:active="(state) => toggleGroup('settings', state)"
icon="cog-outline" :label="$t('menu.settings')">

<b-menu-item :to="{name: 'settings'}" tag="router-link" :active="activeItem.settings"
data-cy="all-settings" icon="cog-outline" :label="$t('menu.settings')">
</b-menu-item>

<b-menu-item :to="{name: 'logs'}" tag="router-link" :active="activeItem.logs"
data-cy="logs" icon="newspaper-variant-outline" :label="$t('menu.logs')">
</b-menu-item>
</b-menu-item><!-- settings -->

<b-menu-item v-if="isMobile" icon="logout-variant" :label="$t('users.logout')"
@click.prevent="doLogout">
</b-menu-item>
</b-menu-list>
</template>


<script>
import { uris } from '../constants';

export default {
name: 'navigation',

props: {
activeItem: Object,
activeGroup: Object,
isMobile: Boolean,
},

methods: {
toggleGroup(group, state) {
this.$emit('toggleGroup', group, state);
},

doLogout() {
const http = new XMLHttpRequest();

const u = uris.root.substr(-1) === '/' ? uris.root : `${uris.root}/`;
http.open('get', `${u}api/logout`, false, 'logout_non_user', 'logout_non_user');
http.onload = () => {
document.location.href = uris.root;
};
http.onerror = () => {
document.location.href = uris.root;
};
http.send();
},
},
};

</script>