diff --git a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts index 18993ae5d3..86b2339658 100644 --- a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts +++ b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts @@ -81,6 +81,8 @@ const OptionsTab = styled.div` box-shadow: 0px 2px 3px 2px #0d1117; align-items: end; + z-index: 1000; + margin: 4px; padding: 4px; @@ -107,6 +109,8 @@ const OptionsTabSize = styled.div<{ justify-content: center; cursor: pointer; + z-index: 1000; + background: ${({ backgroundColor }) => backgroundColor ? backgroundColor : 'transparent'}; diff --git a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx index 7a1c395721..af70b202f7 100644 --- a/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx +++ b/src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx @@ -35,6 +35,7 @@ import { LabelSettingsArrow, SliderContainer, AlphaSlider, + LineWidthOptionsCont, } from './FloatingToolbarSettingsCss'; import { SketchPicker } from 'react-color'; import { @@ -487,17 +488,25 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) { closeAllOptions('lineSize'); }} > - + + + + {selectedDrawnShape && - (isLineSizeOptionTabActive || - isBorderSizeOptionTabActive) && ( + isLineSizeOptionTabActive && ( {selectedDrawnShape && - (isLineStyleOptionTabActive || - isBorderStyleOptionTabActive) && ( + isLineStyleOptionTabActive && ( - + + + + + {selectedDrawnShape && + isBorderSizeOptionTabActive && ( + + {sizeOptions.map( + (item, index) => ( + , + ) => { + e.stopPropagation(); + handleEditSize( + item.value, + isLineSizeOptionTabActive, + isBorderSizeOptionTabActive, + ); + }} + > + {item.icon}{' '} + {item.name} + + ), + )} + + )} + {selectedDrawnShape && + isBorderStyleOptionTabActive && ( + + {styleOptions.map( + (item, index) => ( + , + ) => { + e.stopPropagation(); + handleEditStyle( + item.value, + isLineStyleOptionTabActive, + isBorderStyleOptionTabActive, + ); + }} + > + {' '} + {item.name} + + ), + )} + + )} @@ -884,7 +978,8 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) { > {isFibBackgroundTabActive && - index + 1 === selectedFibLevel && ( + index + 1 === + selectedFibLevel && ( - disabled ? 'brightness(1)' : 'brightness(1.2)'}; - } `; const LabelStyleContainer = styled.div` @@ -170,10 +165,14 @@ const LineSettingsLeft = styled.div` `; const LineSettingsRight = styled.div` - align-items: center; display: grid; grid-template-columns: 1fr 1fr 1fr; + align-items: center; + justify-content: center; + + position: relative; + gap: 10px; `; @@ -331,6 +330,24 @@ const StyledCheckbox = styled.div<{ } `; +const LineWidthOptionsCont = styled.div<{ + disabled: boolean; +}>` + display: flex; + align-items: center; + justify-content: center; + + background: ${({ disabled }) => (disabled ? '#242f3f' : '#2f3d52')}; + + width: 100%; + height: 100%; + + &:hover { + filter: ${({ disabled }) => + disabled ? 'brightness(1)' : 'brightness(1.2)'}; + } +`; + const LineWidthOptions = styled.div<{ backgroundColor: string | undefined; }>` @@ -568,4 +585,5 @@ export { LabelSettingsArrow, SliderContainer, AlphaSlider, + LineWidthOptionsCont, };