refactor(parameter-pane): implement the new parameter pane #82
Conversation
Lutra-Fs
changed the title
|
|
What do you mean by 'the style'? Do you mean that when reducing the horizontal distance of the browser, the simulation area will block the parameter pane? |
src/components/ParametersBar.tsx
Outdated
| function ShowHideButton(props: { | ||
| isVisible: boolean, | ||
| setVisible: (inp:boolean)=>void, | ||
| }) { | ||
| const isVisible = props.isVisible | ||
| const setVisible = props.setVisible | ||
|
|
||
| return( | ||
| <BackButton onClick={() => setVisible(!isVisible)}> | ||
| {isVisible ? (<DoubleLeftOutlined />) : (<DoubleRightOutlined />)} | ||
| </BackButton> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Another issue is that, when you click the 'ShowHide' button, when the par bar is retracted, the position of this button does not correspond to the position of the par bar when it is displayed. Normally, they should be at the same level.
Hide:
Display:
There was a problem hiding this comment.
buttons should now be roughly the same height now
|
Should the font size be smaller than the normal font size? |
other services like discord seem to use a similar font size for their labels and tooltips. personally, i'm okay with the size of the tooltips, making them smaller could reduce readability. thoughts? @LorenzoValentine |
|
new changes remove the component list idea and just conditionally renders each category. should hopefully fix any issues with |
|
@peipacut, as you are now working on the parameter pane, could you run formatting in |
But from your screenshot, the original text in Discord has a bold effect, this is different from the tooltips. |
|
latest push should resolve formatting issues. as for the tooltips, they weren't initially bold on my end but hopefully the extra styling I added should force the tooltip text to always be unbold. |
I believe his meaning is that the original text should be different with tooltip's (in format) |
|
bolded the label text and left the tooltip text |
Signed-off-by: Bill ZHANG <[email protected]>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
There was a problem hiding this comment.
ESLint found more than 10 potential problems in the proposed changes. Check the Files changed tab for more details.
decided to go with a slightly different design for categories
original design docs for reference
Currently, this PR doesn't animate hiding the parameter pane, though I don't think that should be a priority at this point.
With the code in this PR, we can introduce new parameter categories as separate function components. We can then add those components to the array in
getAllCategoriesand specify whether it is an easy or expert mode option with an enum bitmask.When reviewing, please check the way I'm selectively rendering different categories, namely the
filterOnDifficultyandgetAllCategoriesfunctions. I'm not sure if my method is best practice.closes #41