Switched from vue-material to mdl #2
Conversation
There was a problem hiding this comment.
Some weird things (like the max-height on the expandable items, or the manual DOM manipulations on checkboxes), but really nice overall, great job!
Some of the changes can be done later (like moving things into components), but some needs to be fixed before I can merge
src/components/layout/ExpandList.vue
Outdated
| } | ||
| .expand-list.expanded { | ||
| overflow: visible; | ||
| max-height: 1024px; |
There was a problem hiding this comment.
This makes the closing animation really weird.
Ideally this value is calculated on the fly when opening, and set to the element
| </template> | ||
|
|
||
| <script> | ||
| import router from '@/router'; |
| <div class="mdl-layout-spacer"></div> | ||
|
|
||
| <!-- Actions --> | ||
| <button class="mdl-button mdl-js-button mdl-button--icon"> |
There was a problem hiding this comment.
Maybe move this in a component with a sane lifecycle (and not a global DOM upgrade after each transition)
There was a problem hiding this comment.
(doesn't have to be in this PR though)
| </button> | ||
|
|
||
| <!-- Menu --> | ||
| <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="header-menu-lower-right"> |
There was a problem hiding this comment.
Same as for the buttons, as it will certainly be reused
| } | ||
| .expand-list.expanded { | ||
| overflow: visible; | ||
| max-height: 1024px; |
|
|
||
| <script> | ||
| export default { | ||
| name: 'expand-list-two', |
There was a problem hiding this comment.
those could have been one component with some props
| @@ -60,10 +68,30 @@ export default { | |||
| }, | |||
| }, | |||
| computed: mapGetters('jmap', ['mailboxes']), | |||
| mounted() { | |||
| const table = document.querySelector('table'); | |||
There was a problem hiding this comment.
this seems hacky as fuck. wth
There was a problem hiding this comment.
it's just that the checkboxes feature are depreciated for this mdl version and that's the patch for making it working again.
See https://github.com/google/material-design-lite/wiki/Deprecations#automatic-selection-checkboxes for more informations about it..
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <script src="//code.getmdl.io/1.3.0/material.min.js"></script> |
There was a problem hiding this comment.
this will need to be integrated in the build pipeline somehow. Will do later.
| @@ -0,0 +1,42 @@ | |||
| <template> | |||
There was a problem hiding this comment.
those header could be refactored
There was a problem hiding this comment.
have a generic header with a named route view for tabs & buttons?
src/components/headers/Default.vue
Outdated
| @@ -0,0 +1,42 @@ | |||
| <template> | |||
| <header class="mdl-layout__header"> | |||
| <div class="mdl-layout__header-row"> | |||
There was a problem hiding this comment.
No hamburger button for closing the sidebar?
There was a problem hiding this comment.
No hamburger button for closing the sidebar for the desktop version yet; not a priority for the moment. Will do later.
ludovicm67
changed the title
Removed vue-material for Material Design Lite instead, for performances reasons.
All fonctionalities that worked before are also working well here, and I added the support for custom header bar depending of routes.