Skip to content

Commit 335b961

Browse files
committed
Revert "hide the burgher menu and left menu for users without a team (no point in opening or showing an empty menu)"
This reverts commit 7348de3.
1 parent 7177e62 commit 335b961

7 files changed

Lines changed: 25 additions & 67 deletions

File tree

frontend/src/components/NotificationsButton.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export default {
4444
.notifications-button-wrapper {
4545
4646
.notifications-button {
47+
border-left: 1px solid $ff-grey-500;
4748
color: white;
4849
display: flex;
4950
align-items: center;

frontend/src/components/PageHeader.vue

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<template>
22
<div class="ff-header" data-sentry-unmask>
33
<!-- Mobile: Toggle(Team & Team Admin Options) -->
4-
<i v-if="team" class="ff-header--mobile-toggle" :class="{'active': mobileMenuOpen}">
4+
<i class="ff-header--mobile-toggle" :class="{'active': mobileMenuOpen}">
55
<MenuIcon class="ff-avatar" @click="$emit('menu-toggle')" />
66
</i>
77
<!-- FlowFuse Logo -->
88
<img class="ff-logo" src="/ff-logo--wordmark-caps--dark.png" @click="home()">
99
<!-- Mobile: Toggle(User Options) -->
10-
<div class="flex ff-mobile-navigation-right">
11-
<NotificationsButton class="ff-header--mobile-notificationstoggle" :class="{'active': mobileTeamSelectionOpen}" />
12-
<i v-if="teams.length > 0" class="ff-header--mobile-usertoggle" :class="{'active': mobileTeamSelectionOpen}">
10+
<div v-if="team" class="flex">
11+
<i class="ff-header--mobile-usertoggle" :class="{'active': mobileTeamSelectionOpen}">
1312
<img :src="team.avatar" class="ff-avatar" @click="mobileTeamSelectionOpen = !mobileTeamSelectionOpen">
1413
</i>
1514
<i class="ff-header--mobile-usertoggle" :class="{'active': mobileUserOptionsOpen}">
@@ -36,23 +35,17 @@
3635
@click="mobileTeamSelectionOpen = false; $router.push({name: 'CreateTeam'})"
3736
/>
3837
</div>
39-
<div class="hidden lg:flex ff-desktop-navigation-right">
38+
<div class="hidden lg:flex">
4039
<ff-team-selection data-action="team-selection" />
41-
<div class="px-4 flex flex-col justify-center" v-if="showInviteButton">
40+
<div class="px-4 flex flex-col justify-center ff-border-left" v-if="showInviteButton">
4241
<ff-button kind="secondary" @click="inviteTeamMembers">
4342
<template #icon-left><UserAddIcon /></template>
4443
Invite Members
4544
</ff-button>
4645
</div>
4746
<!-- Desktop: User Options -->
4847
<NotificationsButton />
49-
<ff-dropdown
50-
v-if="user"
51-
class="ff-navigation ff-user-options hidden lg:flex xl:flex md:flex sm:flex"
52-
options-align="right"
53-
data-action="user-options"
54-
data-cy="user-options"
55-
>
48+
<ff-dropdown v-if="user" class="ff-navigation ff-user-options" options-align="right" data-action="user-options" data-cy="user-options">
5649
<template #placeholder>
5750
<div class="ff-user">
5851
<img :src="user.avatar" class="ff-avatar">

frontend/src/components/TeamSelection.vue

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<ff-dropdown-option>
1515
<nav-item v-for="t in teams" :key="t.id" :label="t.name" :avatar="t?.avatar" @click="selectTeam(t)" data-action="switch-team" />
1616
</ff-dropdown-option>
17-
<ff-dropdown-option v-if="canCreateTeam">
17+
<ff-dropdown-option>
1818
<nav-item label="Create New Team" :icon="plusIcon" @click="createTeam(t);" data-action="create-team" />
1919
</ff-dropdown-option>
2020
</ul>
@@ -24,7 +24,7 @@
2424

2525
<script>
2626
import { PlusIcon } from '@heroicons/vue/solid'
27-
import { mapGetters, mapState } from 'vuex'
27+
import { mapState } from 'vuex'
2828
2929
import NavItem from './NavItem.vue'
3030
@@ -35,15 +35,7 @@ export default {
3535
NavItem
3636
},
3737
computed: {
38-
...mapState('account', ['team', 'teams', 'settings']),
39-
...mapGetters('account', ['isAdminUser']),
40-
canCreateTeam () {
41-
if (this.isAdminUser) {
42-
return true
43-
}
44-
45-
return Object.prototype.hasOwnProperty.call(this.settings, 'team:create') && this.settings['team:create']
46-
}
38+
...mapState('account', ['team', 'teams'])
4739
},
4840
data () {
4941
return {

frontend/src/layouts/Platform.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="ff-layout--platform">
33
<PageHeader :mobileMenuOpen="mobileMenuOpen" @menu-toggle="toggleMenu" />
4-
<div class="ff-layout--platform--wrapper" :class="{closed: !hasAvailableTeams}">
4+
<div class="ff-layout--platform--wrapper">
55
<div id="platform-sidenav" class="ff-navigation" :class="{'open': mobileMenuOpen}" data-sentry-unmask>
66
<!-- Each view uses a <Teleport> to fill this -->
77
</div>
@@ -33,7 +33,7 @@
3333
</template>
3434

3535
<script>
36-
import { mapGetters, mapState } from 'vuex'
36+
import { mapState } from 'vuex'
3737
3838
import InterviewPopup from '../components/InterviewPopup.vue'
3939
import PageHeader from '../components/PageHeader.vue'
@@ -55,8 +55,7 @@ export default {
5555
}
5656
},
5757
computed: {
58-
...mapState('product', ['interview']),
59-
...mapGetters('account', ['hasAvailableTeams'])
58+
...mapState('product', ['interview'])
6059
},
6160
watch: {
6261
$route: function () {

frontend/src/pages/account/NoTeamsUser.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<form class="py-8 text-center">
2+
<form class="px-4 sm:px-6 lg:px-8 mt-4 space-y-4 text-center">
33
<p class="text-gray-700 text-lg">You need to be in a team to create projects.</p>
44
<p v-if="invitationCount === 0 && !user.admin && !settings['team:create']" class="text-gray-700 text-lg mt-10 ">Ask an Admin or Team Owner to add you to a team.</p>
5-
<div class="pt-4 justify-center flex gap-5" :class="invitationCount > 0?'sm:grid-cols-2':'max-w-xs mx-auto'">
5+
<div class="flex justify-center" :class="invitationCount > 0?'sm:grid-cols-2':'max-w-xs mx-auto'">
66
<router-link v-if="user.admin || settings['team:create']" to="/team/create" class="forge-button-secondary p-4 sm:h-36 inline-flex sm:flex-col items-center sm:justify-center gap-4">
77
<UserGroupIcon class="w-10" />
88
Create a new team

frontend/src/store/account.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,7 @@ const getters = {
9494
hasNotifications: (state, getters) => getters.notificationsCount > 0,
9595

9696
teamInvitations: state => state.invitations,
97-
teamInvitationsCount: state => state.invitations?.length || 0,
98-
hasAvailableTeams: state => state.teams.length > 0
97+
teamInvitationsCount: state => state.invitations?.length || 0
9998
}
10099

101100
const mutations = {

frontend/src/stylesheets/layouts.scss

Lines changed: 9 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ $nav_height: 60px;
251251
.ff-dropdown-options {
252252
position: absolute;
253253
min-width: $sidenav_width;
254-
display: block;
254+
display: none;
255255
z-index: 10;
256256
border-bottom: 0;
257257
max-height: initial;
@@ -344,7 +344,6 @@ $nav_height: 60px;
344344
padding: 16px;
345345
svg {
346346
fill: white;
347-
min-width: 24px;
348347
}
349348
&.active {
350349
cursor: pointer;
@@ -355,7 +354,6 @@ $nav_height: 60px;
355354
padding: 16px;
356355
img {
357356
padding: 0;
358-
min-width: 24px;
359357
}
360358
&.active {
361359
cursor: pointer;
@@ -394,19 +392,8 @@ $nav_height: 60px;
394392
.ff-navigation-right {
395393
height: 100%;
396394
}
397-
.ff-desktop-navigation-right {
398-
& > * {
399-
border-left: 1px solid $ff-grey-500;
400-
}
401-
}
402-
.ff-mobile-navigation-right {
403-
img,
404-
button {
405-
cursor: pointer;
406-
}
407-
}
408395
.ff-dropdown {
409-
//display: none;
396+
display: none;
410397
height: calc(#{$nav_height} - 2px);
411398
color: white;
412399
min-width: $sidenav_width;
@@ -419,10 +406,9 @@ $nav_height: 60px;
419406
display: flex;
420407
justify-content: space-between;
421408
align-items: center;
422-
border: none;
423-
//border-width: 0 0 0 1px;
424-
//border-color: $ff-grey-500;
425-
//border-radius: 0;
409+
border-width: 0 0 0 1px;
410+
border-color: $ff-grey-500;
411+
border-radius: 0;
426412
background-color: $ff-grey-800;
427413
&:hover {
428414
background-color: $ff-grey-700;
@@ -459,10 +445,6 @@ $nav_height: 60px;
459445
.ff-user-options {
460446
width: auto;
461447
min-width: $nav_height;
462-
463-
&.ff-navigation {
464-
left: auto;
465-
}
466448
.ff-dropdown-options {
467449
width: $sidenav_width;
468450
}
@@ -668,9 +650,6 @@ $nav_height: 60px;
668650
&.open {
669651
left: 0;
670652
}
671-
&.closed {
672-
left: -$sidenav_width;
673-
}
674653
&.ff-navigation-right.open {
675654
left: initial;
676655
right: 0;
@@ -722,13 +701,6 @@ $nav_height: 60px;
722701
/* Platform */
723702
.ff-layout--platform--wrapper {
724703
grid-template-columns: $sidenav_width 1fr;
725-
726-
&.closed {
727-
grid-template-columns: 1fr;
728-
#platform-sidenav {
729-
display: none;
730-
}
731-
}
732704
}
733705
.ff-navigation {
734706
left: 0;
@@ -738,12 +710,14 @@ $nav_height: 60px;
738710
.ff-header--mobile-toggle {
739711
display: none;
740712
}
741-
.ff-header--mobile-usertoggle,
742-
.ff-header--mobile-notificationstoggle {
713+
.ff-header--mobile-usertoggle {
743714
display: none;
744715
}
745716
img.ff-logo {
746717
padding: 16px;
747718
}
719+
.ff-dropdown {
720+
display: block;
721+
}
748722
}
749723
}

0 commit comments

Comments
 (0)