Closed joshcomley closed 4 years ago
@joshcomley fixed in the new version
@farfromrefug I have tried the new version, using, I'm assuming, the view
property - but it still doesn't appear over the top of my modal, unfortunately
Just to clarify, I passed in the injected Page
from the modal dialog component to the view
parameter on the SnackbarOptions
@joshcomley it should work in 3.1.2. You must be in a case i did not handle. Can you try the demo-vue app from the repo?
npm run build.plugin
demo-vue
@farfromrefug I'm using Angular, though, is the Vue example useful as a test in this case?
@joshcomley yes it is vue but it should not make any difference
I cannot run build.plugin
as I get:
'cp' is not recognized as an internal or external command, operable program or batch file.
I'm assuming perhaps the build is not compatible with Windows?
@joshcomley shoot indeed it seems it s not :D Pull and run npm run build.plugin.win
To be fair I should have figured that out as I added that tsc-win
command in:
For some reason it's still not working, but whilst I look into that, could you please check my demo github repo:
https://github.com/joshcomley/ns-snackbar-dialog-bug
I've updated it to reflect the latest version but it still isn't showing the snackbar.
@joshcomley you mean it is not working with the demo-vue? We can chat on slack that would be simpler i think
Sorry no I meant tsc-win
isn't working, but I'm about to submit a PR that fixes it
So the Vue demo doesn't work for me, I get an Unexpected identifier
error in bundle.js
, and when I look to see what it is, I see this:
/***/ (function(module, exports, __webpack_require__) {
/* WEBPACK VAR INJECTION */(function(global) {module.exports = {"type":"stylesheet","stylesheet":{"rules":[{"type":"rule","selectors":["button"],"declarations":[{"type":"declaration","property":"elevation","value":"2"}]},{"type":"rule","selectors":[".falseFAb"],"declarations":[{"type":"declaration","property":"elevation","value":"2"},{"type":"declaration","property":"font-size","value":"40"},{"type":"declaration","property":"border-radius","value":"32"},{"type":"declaration","property":"width","value":"64"},{"type":"declaration","property":"height","value":"64"},{"type":"declaration","property":"margin","value":"30"}]},{"type":"rule","selectors":[".buttonYellow"],"declarations":[{"type":"declaration","property":"background-color","value":"yellow"}]},{"type":"rule","selectors":["mdslider"],"declarations":[{"type":"comment","comment":" track-background-color: #E0E0E0; "}]},{"type":"rule","selectors":["bottomnavigationbar"],"declarations":[{"type":"declaration","property":"inactive-color","value":"gray"}]},{"type":"rule","selectors":[".item-with-border"],"declarations":[{"type":"declaration","property":"height","value":"50"},{"type":"declaration","property":"border-bottom-color","value":"green"},{"type":"declaration","property":"border-bottom-width","value":"2"}]},{"type":"rule","selectors":[".cardviewtest"],"declarations":[{"type":"declaration","property":"border-color","value":"green"},{"type":"declaration","property":"border-width","value":"4"},{"type":"declaration","property":"border-radius","value":"20"},{"type":"declaration","property":"ripple-color","value":"blue"},{"type":"declaration","property":"elevation","value":"5"},{"type":"declaration","property":"background-color","value":"lightgray"}]},{"type":"rule","selectors":[".cardView"],"declarations":[{"type":"declaration","property":"margin","value":"20"},{"type":"declaration","property":"border-radius","value":"2"},{"type":"declaration","property":"elevation","value":"2"},{"type":"declaration","property":"dynamic-elevation-offset","value":"5"},{"type":"declaration","property":"ripple-color","value":"red"},{"type":"declaration","property":"background-color","value":"white"}]}],"parsingErrors":[]}};;
if (true) {
module.hot.accept();
module.hot.dispose(() => {
global.hmrRefresh({ type: 'style', path: './app.scss' });
})
}
u
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("../node_modules/nativescript-dev-webpack/node_modules/webpack/buildin/global.js")))ndefinedundefinedundefinedundefinedundefinedundefined
/***/ }),
/***/ "./examples/ActivityIndicators.vue":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _ActivityIndicators_vue_vue_type_template_id_17a213bb___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./examples/ActivityIndicators.vue?vue&type=template&id=17a213bb&");
/* harmony import */ var _ActivityIndicators_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./examples/ActivityIndicators.vue?vue&type=script&lang=ts&");
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _ActivityIndicators_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _ActivityIndicators_vue_vue_type_script_lang_ts___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));
/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("../node_modules/vue-loader/lib/runtime/componentNormalizer.js");
You can see the solitary u
right in the middle, have no idea why?!
@joshcomley weird. Can you try by adding --no-hmr --env.sourceMap=false
?
That might fix it for now
@farfromrefug Thanks for your help on this. I can confirm it works in the Vue demo, so I inspected the code and you're passing in this.nativeView
. Not having used Vue, I'm assuming that is the equivalent to injecting Page
in a modal and using this.page.nativeView
in Angular?
I did try passing this.page.nativeView
in but I get the following error:
No suitable parent found from the given view. Please provide a valid view.
@joshcomley when i am "in" the material plugin, there is no Vue/Angular.. Just Core classes.
Now you use the view
option for the snackbar?
View
class object. Don't really know how to get it in Angular though :s Yeah, that's what I thought. It was platform agnostic. So that's the key - how do I get hold of the core View
class? Perhaps it's Page
I can inject in AppComponent.ts
. I'll investigate.
What do you mean by "core" View
, exactly, though?
OK so I've tried:
Page
object, injected via app.component.ts
.
Page
object's nativeView
property, injected via app.component.ts
.
Page
object, injected via the modal dialog.
Page
object's nativeView
property, injected via the modal dialog.
Nothing works :(
Edit: I've also tried without a view
parameter but it still doesn't work
OK so I've managed to recreate the same effect that you have in Vue in Angular:
constructor(private page: Page) {
this.viewForSnackbar = this.page.content;
}
However, even in the Vue example this does not have the desired effect when the modal is not full screen:
The snackbar should always appear at the bottom of the viewable area of the app, not overlaying itself over the content of the modal.
@joshcomley Yes i know but i can't get it work right now. Something wrong with the fragments. Might even be a native lib issue. If you dont use fullscreen i cant really help right now. I mean no solution
Gotcha, OK, thank you for the update.
In case it's any help, I've found nativescript-toasty
works as expected, only it's not "Material". Nevertheless, maybe there's a pointer in the source code:
https://www.npmjs.com/package/nativescript-toasty https://github.com/triniwiz/nativescript-toasty
@joshcomley thanks but toasts have nothing to do with snacks. They are handled by the system and appear on top of anything. They are drawn last in the android stack.
Make sure to check the demo app(s) for sample usage
Done (there is none for snackbar, but I've followed the instructions to set-up)
Make sure to check the existing issues in this repository
Done
If the demo apps cannot help and there is no issue for your problem, tell us about it
On Android (not tested on iOS), the snackbar sits behind the modal dialog, making it invisible for full-screen modals, or potentially invisible (or at least faded behind the darkened background) in non full-screen modals.
I'm pretty sure it used to work, but I may have not noticed until now!
Which platform(s) does your issue occur on?
Please, provide the following version numbers that your issue occurs with:
Please, tell us how to recreate the issue in as much detail as possible.
nativescript-material-snackbar
OR:
Is there any code involved?