Add floating snackbar #6683
Add floating snackbar #6683
Conversation
alexander-schranz
force-pushed
the
feature/snackbar
branch
from
bfd1888
to
65067d2
Compare
alexander-schranz
force-pushed
the
feature/snackbar
branch
3 times, most recently
from
09a58fd
to
c0a4b02
Compare
| "sulu_admin.info": "Info", | ||
| "sulu_admin.success": "Success", |
There was a problem hiding this comment.
Those are missing in admin.de.json, right?
| @@ -24,6 +24,7 @@ type Props<T: string, U: {type: T}> = {| | |||
| onChange: (value: Array<U>) => void, | |||
| onSettingsClick?: (index: number) => void, | |||
| onSortEnd?: (oldIndex: number, newIndex: number) => void, | |||
| onTriggerMessage?: (message: Message) => void, | |||
There was a problem hiding this comment.
I don't think trigger is the correct term for this use case, but I also can't find another one that fits better ...
There was a problem hiding this comment.
I even didnt wanted to use "on" here but our eslint rule doesnt allow it. Alternative to trigger would be onDispatchMessage. What do you think?
There was a problem hiding this comment.
i think would go with onShowSnackbar or onDisplaySnackbar
There was a problem hiding this comment.
I would go with onDisplaySnackbar then @luca-rath what do you think?
|
nice feature ;) |
| @@ -1,6 +1,6 @@ | |||
| // @flow | |||
| import React from 'react'; | |||
| import classNames from 'classnames'; | |||
| import classnames from 'classnames'; | |||
There was a problem hiding this comment.
i think we imported this as classNames in all other componenets. not sure if there is a reason, but i think i would keep things consistent 🙈
| </div> | ||
| ``` | ||
|
|
||
| There is also a behaviour `floating` option used for floating snackbar: |
There was a problem hiding this comment.
this is already described this above right? 🤔
| @@ -0,0 +1,13 @@ | |||
| .container { | |||
There was a problem hiding this comment.
do you think we can reuse this somewhere? if this is specific to the <Application>, i think i would not extract a separate component
There was a problem hiding this comment.
yes inside an overlay that is way I created a component for it. While it is currented decided not to implement it, I would keep the component here.
There was a problem hiding this comment.
This is general style and the application is handling when it is used in the application context.
src/Sulu/Bundle/AdminBundle/Resources/js/containers/Application/Application.js
Show resolved
Hide resolved
| @@ -24,6 +24,7 @@ type Props<T: string, U: {type: T}> = {| | |||
| onChange: (value: Array<U>) => void, | |||
| onSettingsClick?: (index: number) => void, | |||
| onSortEnd?: (oldIndex: number, newIndex: number) => void, | |||
| onTriggerMessage?: (message: Message) => void, | |||
There was a problem hiding this comment.
i think would go with onShowSnackbar or onDisplaySnackbar
|
|
||
| type Props = {| | ||
| behaviour: 'static' | 'floating', |
There was a problem hiding this comment.
this prop does not really change any behaviour, right? 🙈
There was a problem hiding this comment.
it affects the style and the text, right? i think we have skin on a few other components. think that would describe it better
There was a problem hiding this comment.
Is fine for me, was also unsure about it.
alexander-schranz
force-pushed
the
feature/snackbar
branch
from
66298b5
to
063cca2
Compare
| if (onDisplaySnackbar) { | ||
| onDisplaySnackbar({ | ||
| type: 'info', | ||
| text: translate('sulu_admin.%count%_blocks_pasted', {count: newElements.length}), |
There was a problem hiding this comment.
think i would call this message as it is also called message on the Snackbar and in the Overlay
| @@ -10,3 +10,9 @@ export type RenderBlockContentCallback<T: string, U: {type: T}> | |||
| = (value: U, type: T, index: number, expanded: boolean) => Node; | |||
|
|
|||
| export type BlockMode = 'static' | 'sortable' | 'selectable'; | |||
|
|
|||
| export type Message = { | |||
There was a problem hiding this comment.
maybe call this SnackbarMessage
| // @flow | ||
| export type Message = { | ||
| icon?: string, | ||
| text: string, |
There was a problem hiding this comment.
think i would call this message as it is also called message on the Snackbar and in the Overlay
There was a problem hiding this comment.
find message.message strange.
There was a problem hiding this comment.
as discussed we will curently keep message.text maybe in future we should migrate all components using the message object instead have separate props for every thing. This effects the Snackbar, but also Dialog and maybe overlays which has a snackbarMessage and snackbarType.
What's in this PR?
Add floating snackbar.
Why?
To show snackbar messages for copy and pasting of blocks.
To Do