Skip to content

Commit

Permalink
bugfix/ fix floating toolbar linq & border options positioning
Browse files Browse the repository at this point in the history
  • Loading branch information
zcelbir committed Sep 26, 2024
1 parent 171bf4f commit be44354
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 47 deletions.
4 changes: 4 additions & 0 deletions src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarCss.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -107,6 +109,8 @@ const OptionsTabSize = styled.div<{
justify-content: center;
cursor: pointer;
z-index: 1000;
background: ${({ backgroundColor }) =>
backgroundColor ? backgroundColor : 'transparent'};
Expand Down
178 changes: 137 additions & 41 deletions src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
LabelSettingsArrow,
SliderContainer,
AlphaSlider,
LineWidthOptionsCont,
} from './FloatingToolbarSettingsCss';
import { SketchPicker } from 'react-color';
import {
Expand Down Expand Up @@ -487,17 +488,25 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
closeAllOptions('lineSize');
}}
>
<LineWidthOptions
backgroundColor={'#cfd7e3'}
style={{
borderTopWidth:
selectedDrawnShape?.data
.line.lineWidth + 'px',
}}
></LineWidthOptions>
<LineWidthOptionsCont
disabled={
!selectedDrawnShape?.data.line
.active
}
>
<LineWidthOptions
backgroundColor={'#cfd7e3'}
style={{
borderTopWidth:
selectedDrawnShape?.data
.line.lineWidth +
'px',
}}
></LineWidthOptions>
</LineWidthOptionsCont>

{selectedDrawnShape &&
(isLineSizeOptionTabActive ||
isBorderSizeOptionTabActive) && (
isLineSizeOptionTabActive && (
<OptionsTab
style={{
transform:
Expand All @@ -511,15 +520,10 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
<OptionsTabSize
backgroundColor={
item.value ===
(isLineSizeOptionTabActive
? selectedDrawnShape
.data
.line
.lineWidth
: selectedDrawnShape
.data
.border
.lineWidth)
selectedDrawnShape
.data
.line
.lineWidth
? '#434c58'
: undefined
}
Expand Down Expand Up @@ -579,8 +583,7 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
alt=''
/>
{selectedDrawnShape &&
(isLineStyleOptionTabActive ||
isBorderStyleOptionTabActive) && (
isLineStyleOptionTabActive && (
<OptionsTab
style={{
transform:
Expand All @@ -595,15 +598,10 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
backgroundColor={
item
.value[0] ===
(isLineStyleOptionTabActive
? selectedDrawnShape
.data
.line
.dash[0]
: selectedDrawnShape
.data
.border
.dash[0])
selectedDrawnShape
.data
.line
.dash[0]
? '#434c58'
: undefined
}
Expand Down Expand Up @@ -715,15 +713,64 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
closeAllOptions('borderSize');
}}
>
<LineWidthOptions
backgroundColor={'#cfd7e3'}
style={{
borderTopWidth:
selectedDrawnShape?.data
.border.lineWidth +
'px',
}}
></LineWidthOptions>
<LineWidthOptionsCont
disabled={
!selectedDrawnShape?.data.line
.active
}
>
<LineWidthOptions
backgroundColor={'#cfd7e3'}
style={{
borderTopWidth:
selectedDrawnShape?.data
.border.lineWidth +
'px',
}}
></LineWidthOptions>
</LineWidthOptionsCont>

{selectedDrawnShape &&
isBorderSizeOptionTabActive && (
<OptionsTab
style={{
transform:
'translateY(62%)',
position: 'absolute',
width: '130px',
}}
>
{sizeOptions.map(
(item, index) => (
<OptionsTabSize
backgroundColor={
item.value ===
selectedDrawnShape
.data
.border
.lineWidth
? '#434c58'
: undefined
}
key={index}
onClick={(
e: MouseEvent<HTMLElement>,
) => {
e.stopPropagation();
handleEditSize(
item.value,
isLineSizeOptionTabActive,
isBorderSizeOptionTabActive,
);
}}
>
{item.icon}{' '}
{item.name}
</OptionsTabSize>
),
)}
</OptionsTab>
)}
</OptionStyleContainer>

<OptionStyleContainer
Expand Down Expand Up @@ -759,6 +806,53 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
}
alt=''
/>
{selectedDrawnShape &&
isBorderStyleOptionTabActive && (
<OptionsTab
style={{
transform:
'translateY(60%)',
position: 'absolute',
width: '130px',
}}
>
{styleOptions.map(
(item, index) => (
<OptionsTabStyle
backgroundColor={
item
.value[0] ===
selectedDrawnShape
.data
.border
.dash[0]
? '#434c58'
: undefined
}
key={index}
onClick={(
e: MouseEvent<HTMLElement>,
) => {
e.stopPropagation();
handleEditStyle(
item.value,
isLineStyleOptionTabActive,
isBorderStyleOptionTabActive,
);
}}
>
<img
src={
item.icon
}
alt=''
/>{' '}
{item.name}
</OptionsTabStyle>
),
)}
</OptionsTab>
)}
</OptionStyleContainer>
</LineSettingsRight>
</LineSettings>
Expand Down Expand Up @@ -884,7 +978,8 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
></OptionColor>

{isFibBackgroundTabActive &&
index + 1 === selectedFibLevel && (
index + 1 ===
selectedFibLevel && (
<ColorPickerTab
style={{
position:
Expand All @@ -904,7 +999,8 @@ function FloatingToolbarSettings(props: FloatingToolbarSettingsProps) {
? selectedDrawnShape
?.data
.extraData[
selectedFibLevel - 1
selectedFibLevel -
1
]
.lineColor
: colorPicker.background
Expand Down
30 changes: 24 additions & 6 deletions src/pages/platformAmbient/Chart/Draw/FloatingToolbar/FloatingToolbarSettingsCss.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,6 @@ const OptionStyleContainer = styled.div<{
padding: 1px;
display: flex;
&:hover {
filter: ${({ disabled }) =>
disabled ? 'brightness(1)' : 'brightness(1.2)'};
}
`;

const LabelStyleContainer = styled.div`
Expand Down Expand Up @@ -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;
`;

Expand Down Expand Up @@ -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;
}>`
Expand Down Expand Up @@ -568,4 +585,5 @@ export {
LabelSettingsArrow,
SliderContainer,
AlphaSlider,
LineWidthOptionsCont,
};

0 comments on commit be44354

Please sign in to comment.