Frame header #1159
Frame header #1159
Conversation
OskarDamkjaer
force-pushed
the
frame_header
branch
from
87e1e2c to
fcf4f90
Compare
| "plugins": ["@typescript-eslint/eslint-plugin"], | ||
| "rules": {} | ||
| "rules": { | ||
| "@typescript-eslint/explicit-function-return-type": "off" |
There was a problem hiding this comment.
Up for discussion if we want to keep this, I liked not needing to write return type on components mostly.
| return <button {...props}>×</button> | ||
| } | ||
|
|
||
| export const EditorButton = props => { |
There was a problem hiding this comment.
Made the editorbuttons flexible in size
| export { withBus, BusProvider, BusProps } | ||
| } | ||
|
|
||
| declare module 'suber' { |
There was a problem hiding this comment.
This is a start for typing up suber and react-suber. Some of the anys are unavoidable sadly. Perhaps we could do something with generics but not sure if it's worth it.
|
|
||
| const ActionButtons: React.FC<ActionButtonProps> = ({ buttons }) => ( | ||
| <ActionButtonSection containerWidth={buttons.length * 33}> | ||
| const ActionButtons = ({ buttons, width = 24 }: ActionButtonProps) => ( |
There was a problem hiding this comment.
Moved away from React.FC after reading this: facebook/create-react-app#8177
| buffer: '', | ||
| mode: 'cypher', | ||
| notifications: [], | ||
| expanded: false, |
There was a problem hiding this comment.
full screen state lifted to new component
| message: message | ||
| .split('\n') | ||
| .filter((nonEmpty: string) => nonEmpty) | ||
| .join(' '), |
There was a problem hiding this comment.
New behaviour! Like we talked about it makes no sense to show a collapse-button if you can't use it. To me it felt natural to join the lines together.
There was a problem hiding this comment.
Check with ABK if this is OK
| } | ||
| return "'editor header'" | ||
| }}; | ||
| grid-template-areas: 'editor header'; |
There was a problem hiding this comment.
This could perhaps be simpler with flexbox. I think it's good enough
| }}; | ||
| ${(props): string => (props.expanded ? '' : 'transition-duration: 0.1s;')} | ||
| transition-duration: 0.1s; |
There was a problem hiding this comment.
Looked buggy before when changing color on card view, the check is not needed anymore
| background-color: ${props => props.theme.secondaryBackground}; | ||
| margin: ${editorPadding}px 0px ${editorPadding}px 0; | ||
| border-radius: 2px; | ||
| box-shadow: 0px 0px 2px rgba(52, 58, 67, 0.1), |
There was a problem hiding this comment.
I thought it looked too flat, got this box-shadow from liza. Thoughts?
| &:hover .carousel-intro-animation { | ||
| opacity: 0; | ||
| } | ||
| box-shadow: 0px 0px 2px rgba(52, 58, 67, 0.1), |
There was a problem hiding this comment.
use "standardized" box shadow from designsystem
OskarDamkjaer
force-pushed
the
frame_header
branch
from
c91da01 to
ae4ecfe
Compare
| message: message | ||
| .split('\n') | ||
| .filter((nonEmpty: string) => nonEmpty) | ||
| .join(' '), |
There was a problem hiding this comment.
Check with ABK if this is OK
3 participants
Adds UI controls to the editor. Details in the comments
Gif demo of new looks
changelog: Make editor a frame that has control buttons