Skip to content

Commit

Permalink
Feature/ui layout (#81)
Browse files Browse the repository at this point in the history
* New UI Components (Desktop Topbar, Navigation drawer for mobile only)

* Removed KanbanLink from ProjectTitle, Fixed attachment route in ProjectMenu

* Search input can be toggled, breakpoints fixes

* removed useless method in TopBar

* Fix prevent search blur and semicolon for lint

* Fixes task display on organization dashboard + Fixed project with long title + Added a Wrapper component for two sides content

* Fix ShowTaskDetail display + Truncate organization title

* Navigation Drawer used for task tabs list instead of ContainerWrapper

* currentUser in main store + added a fullpage prop for emptystate + Removed topbar on auth page

* Moved vuex store project and filters to dedicated modules, Background mixin for backgrounds component methods

* eslint fixes

* Fixed currentProjectId store state calls

* Topbar Layout + ProjectSelector component + Tiny UI improvements + currentProject subscription in App

* Linting in store

* Fix currentProject from store in ProjectInfo

* Removed temporary attribute

* fixed currentProject not updated in projectInfo

* Change primary color to black

* Fixed typo/bug with project timeline

* Changing subscription directly in store

* meteor..project brought back in project related components + sub used to update store.currentProject object

* Reverted wording: Documents to Attachments

* Fixed eslint bug (not finding existing lint errors) by specifying js and vue files

* Fix linting errors

* Add overlap to notification badge + and user.hasAvatar added to main vuex store

* Fixing selectTask and showTaskDetail not working anymore by removing router-view keying with route path

* Fixed clone task to another project

* Removed tab transition in dashboardtasks side panel and fixed project settings not working

* Using currentProject in topbar project components + linting

* Fixed project tracking in topbar + Fixed projectId when project is null in projectMenu + generic component for editable text + moved edit project name in project general settings

* Fixed bug when project is still loaded in topbar in non related project page

* Fixed bug with currentProject and currentProjectId sync

* Linting

* Drawer to app for proper scroll

* Wording: Dashboard to Activity + Project History in dashboard task tab drawer

* Fixed history pagination + 10 history items per page + Linting

* fixed refresh project-history when changing project

* TaskTabs on dashboard page

* Passing currentProject as prop for project menu in navdrawer + linting

* Project menu: add different color & radius

* Adding Organization store and menu  + Rounded radius menu on center

* Using currentProject color for top bar

* Merging ProjectMenu and OrganizationMenu into MainMenu + Fixing MainMenu usage in ProjectDetail in timeline

* Fix project publication when members is empty

* Fixing dashboard taks tabs not updating when switching projects or organization, linting

* Fix click event firing after dragging on desktop

Fallback method fires the click event after a drag event.
Because of this behavior, the dragged task is automatically selected
which is weird.
Same problem when moving list items.

So fallback method is only forced on mobile devices
(where regular drag n drop does not work)

* Add missing EOL

* Pleasing linter

* Re-added SearchBar + linting

* Removed Projects.vue and ProjectsPage.vue. Added Organization Dashboard link to main menu

* Set focus programmatically when search is enabled + linting

* Revert drawer width to 360 for avoiding tabs arrows + Removed seemingly unused resize callback and css styles from the previous layout

* Fixed Escape key should close Search

* Fixed a bug where rightdrawer could open on resizing

* Fixed a bug where TaskDetail wasnt suppose to close when clicking inside drawer

* fix for safari

all parents must have height defined for height:100% to work

* Fix project activity background

* minor taskdetail UI improvements. + onlyIcons props in mainmen for hiding tabs text @todo: need to control TaskDetail content scrollbar behaviors

* Fix weid search input in project selector

* evert drawer width to 360 for avoiding tabs arrows on dashboard too

* Fixed toggling of rightDrawer with taskDetail and cosmetics changes in taskproperties

* Add offset on badges

* Fixed cosmetics for  completeAt field

* Sticky Tabs added back due to popular demand (and weird display)

* Fix sticky tabs & add color accent on sliders

* Revert task detail display

- title on top without number
- no duplicate title
- less dividers
- accentuated fonts & colors for dates
- description is now on properties tab

* Remove task completed info in task properties tab

* Let's try another font: Inter UI

* Linter + fix access to potential null object

* Fix height

100% not 100vh !

* Fix click outside

event.path is webkit only, on ff it is compostedPath.

on IE it does not exist but who cares?

* Remove click-outside handler

too much edge cases to handle

* Padding in edit task name

* Remove ref to click-outside in task drawer

* Do not call router twice

When clicking on org, @click & :to were doing the same thing

* Remove useless subscription

Organization is fetched above

* Home go back organization if project is tied to one

* Disable linter warning

Maybe we should work on this

* Revert "Removed Projects.vue and ProjectsPage.vue. Added Organization Dashboard link to main menu"

This reverts commit 5f95b6a.

* Revert organization menu

* Subscribe to labels in project publish composite

* Fix toolbar on xs breakpoint

* Add trashcan on project toolbar

* Edit label on select label widget

* Top bar: text color is based on  background color

dark text is applied if needed

* Fix organization management in dashboard desktop

* Display tasks on homepage

* Added media-query SCSS mixin using vuetify breakpoints vars

* First setup for MainMenu as Mobile Bottom Navigation with contextual items + Refactoring Topbar for mobile + Vuex store for reusable colors - @todo : Mobile Search Bar, and MainMenu Dashboard Items

* Fix home icon on light background

* Fix email display on label filter

when user comes from keyckloak, email is stored in elsewhere

* Fixed Menus Items display logic + fix resetColor when project has no color

* Removed reset in store and let App handle dispatch color change

* Fix v-col directive

* Added tasks menu item in bottom navigation

* Remove bloat in Dashboard Mobile + added margin to dashboard toolbar

* Fixed emptyState component + minor changes in projectList component

* Removed cheap tabs transition in SearchResults + Linting

* Removed useless hasBackground method

* Add organization switching + refactoring the project selector as content selector + merging titles component @todo : Handle FOUCs

* Fix DashboardMobile to make it work with switchOrganization

* Little fix for FOUCs on dashboard desktop and awful linting

* Fix tab color & please linter

* Added count for project and organization in ContentSelector and tabs accent sliders

* Handling navigation colors

* Fixed dark prop for bottomNav on mobile

* Fixed projectstimeline without project display

* Handling better route switching for organization pages via ContentSelector

* Fix timeline redraw when switching organization

* Preselect organization tab on organization page in content-selector

* Add sticky-tabs on tabs header when scrolling

* Removed v-hover and mini-variant for drawer not needed anymore with mobile layout

* Moved projectGroups on top of navDrawer probably will be deleted in future

* Fixed mainmenu menu bug by resetting currentOrganization and currentProjct when switching project/organization + tagging project related routes

* Refreshing correct projectweather when projectId changes

* Fix lint error & warnings

* Reset selected report when project is changed

* Fix lint error

* Fix top menu display in project

When navigating from organization, top menu was not set to project

* Home button redirect to organization page if relevant

Redirect to org page when project.organizationId is not null.

Note: this.organizationId is not refreshed when
reloading page. This is clearly a bug but quite
minor so we do not bother yet because the
only relevant attribute here is project.organizationId

* Display burger menu on sm & down

because the top menu is not displayed at sm & down too

* TaskDetails drawer: force z-index above bottom bar

on mobile/tablet, when drawer is temp the
bottom bar is hidding the bottom zone of
task details

* Fix task detail fill height on android/chrome

see https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

for details

* Project history: replace list item with timeline

* Improve project performance

Lazy load tasks

* Right drawer is fixed

Revert from previous behavior to improve performances

* Lazy loading on dashboard project list

* Remove wrong directive

* Lazy loading on dashboard project list (mobile)

* Improve task detail display performance

The computed property "selected" is very slow
and replacing it with a watcher on selectedTask
seems to have better performance

* Add space between line labels

* Add shortcuts

- "l" to add label
- "/" to display search menu
- "p" to display content selector (project/org)

* Select label: do not show search input unless "s" is pressed

* Remove wrong handler

* Allow text selection when editing list

SortableJS must be disabled to allow
text selection

* Better looking attachments page

* Improve project settings layout

* Fix format

* Fix labels display in settings

* Fix center tab issue

see vuetifyjs/vuetify#4733

* Fix sticky on webkit

* Cleaning old and seemingly unnecessary styles and props

* Brought back temporary drawer without overlay for hiding it when clicking outside

* Fixed closing when switching tasks in detail but still need to be able to close by clicking outside

* Added project groups as an autocomplete and removed it from navdrawer + toolbar gets its own component

* No category lang + margin on project group chip

* Fixed translate typo

* User prop not used in DashboardTaskList

* Avoid resize and scrollbar overlapping

* Remove useless divider

Co-authored-by: Mahëd Benzerga <mahed.benzerga@ac-lyon.fr>
  • Loading branch information
jbl2024 and mhdbaal committed May 25, 2020
1 parent 15f34af commit 52c37c8
Show file tree
Hide file tree
Showing 103 changed files with 4,090 additions and 3,309 deletions.
52 changes: 0 additions & 52 deletions client/components/HomeTitle.vue

This file was deleted.

8 changes: 6 additions & 2 deletions client/components/canvas/CanvasItem.vue
Expand Up @@ -26,10 +26,14 @@
@click-outside="updateContent"
/>
<v-btn icon text @click.native.stop="updateContent">
<v-icon>mdi-check-circle</v-icon>
<v-icon color="green">
mdi-check-circle
</v-icon>
</v-btn>
<v-btn icon text @click.native.stop="cancelUpdateContent">
<v-icon>mdi-close-circle</v-icon>
<v-icon color="red">
mdi-close-circle
</v-icon>
</v-btn>
</div>
</v-card-text>
Expand Down
175 changes: 50 additions & 125 deletions client/components/login/LoginMenu.vue
@@ -1,135 +1,66 @@
<template>
<div class="login-menu">
<template v-if="!isConnected">
<v-list class="pt-0">
<v-list-item :to="{ name: 'login' }">
<v-list-item-action>
<v-icon>mdi-account</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Se connecter</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item :to="{ name: 'register' }">
<v-list-item-action>
<v-icon>mdi-account-plus</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Créer un compte</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item :to="{ name: 'forgot-password' }">
<v-list-item-action>
<v-icon>mdi-security</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Mot de passe perdu</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</template>
<template v-if="isConnected && $subReady.user">
<div v-if="isConnected" class="login-menu">
<v-list class="pt-0">
<v-list-item v-if="isAdmin" :to="{ name: 'administration-page' }">
<v-list-item-action>
<v-icon>mdi-shield-check</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Administration</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item :to="{ name: 'profile-settings-page' }">
<v-list-item-action>
<v-icon>mdi-account-circle-outline</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t("Profile") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item @click="$store.dispatch('showSelectBackgroundDialog', true)">
<v-list-item-action>
<v-icon>mdi-image-multiple</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t("Background") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item :to="{ name: 'mail-settings-page' }">
<v-list-item-action>
<v-icon>mdi-email</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ $t("Email notifications") }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list class="pt-0">
<v-list-item :to="{ name: 'dashboard-page' }">
<v-list-item-action>
<v-icon>mdi-view-dashboard</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t("Dashboard") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="isAdmin()" :to="{ name: 'administration-page' }">
<v-list-item-action>
<v-icon>mdi-shield-check</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Administration</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item
@click="$store.dispatch('showSelectBackgroundDialog', true)"
>
<v-list-item-action>
<v-icon>mdi-image-multiple</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t("Background") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider />
<v-list-item :to="{ name: 'profile-settings-page' }">
<v-list-item-action>
<v-icon>mdi-account-circle-outline</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t("Profile") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item :to="{ name: 'mail-settings-page' }">
<v-list-item-action>
<v-icon>mdi-email</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ $t("Email notifications") }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item @click="logout()">
<v-list-item-action>
<v-icon>mdi-exit-to-app</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t("Log out") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</template>
<v-list-item @click="logout()">
<v-list-item-action>
<v-icon>mdi-exit-to-app</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ $t("login.logout") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</div>
</template>

<script>
import { Permissions } from "/imports/api/permissions/permissions";
import { mapGetters } from "vuex";
export default {
i18n: {
messages: {
en: {
Background: "Background",
"Log out": "Log out",
"Do you want to log out?": "Do you want to log out?"
},
fr: {
Background: "Fond d'écran",
"Log out": "Se déconnecter",
"Do you want to log out?": "Voulez-vous vous déconnecter ?"
}
}
},
data() {
return {};
},
meteor: {
isConnected() {
if (Meteor) {
return Meteor.userId();
}
return false;
},
$subscribe: {
user() {
return [];
}
}
computed: {
...mapGetters(["isConnected", "isAdmin"])
},
methods: {
logout() {
this.$confirm(this.$t("Do you want to log out?"), {
this.$confirm(this.$t("login.logoutConfirm"), {
title: this.$t("Confirm"),
cancelText: this.$t("Cancel"),
confirmText: this.$t("Log out")
confirmText: this.$t("login.logout")
}).then((res) => {
if (res) {
Meteor.call("users.getRedirectUrlAfterLogout", (error, url) => {
Expand All @@ -147,13 +78,7 @@ export default {
});
}
});
},
isAdmin() {
return Permissions.isAdmin(Meteor.userId());
}
}
};
</script>

<style scoped></style>
2 changes: 1 addition & 1 deletion client/components/notifications/NotificationButton.vue
Expand Up @@ -2,7 +2,7 @@
<div v-if="isConnected" class="notification-button">
<notifications-dialog :active.sync="showDialog" />
<v-btn icon @click="showDialog = true">
<v-badge color="red" :value="notificationsCount > 0">
<v-badge color="red" :value="notificationsCount > 0" overlap>
<template v-slot:badge>
<span>{{ notificationsCount }}</span>
</template>
Expand Down
1 change: 1 addition & 0 deletions client/components/notifications/NotificationsDialog.vue
Expand Up @@ -51,6 +51,7 @@
<empty-state
v-if="!loading && pagination.totalPages == 0"
class="empty-state"
full-height
small
:description="$t('No notification')"
illustration="notifications_empty"
Expand Down
68 changes: 0 additions & 68 deletions client/components/organizations/OrganizationMenu.vue

This file was deleted.

0 comments on commit 52c37c8

Please sign in to comment.