From 144fc5de3b747b3b2274813d850cbe1676322a32 Mon Sep 17 00:00:00 2001 From: McKayla Lankau Date: Wed, 18 Oct 2023 04:01:47 -0400 Subject: [PATCH] Toolbar+ fixes (#4386) * better icon for stop play mode * fix selected insert element style * insert menu search color fixes * insert menu item icon color on hover ifx --- .../icons/light/tools/stop-black-18x18@2x.png | Bin 0 -> 719 bytes .../icons/light/tools/stop-blue-18x18@2x.png | Bin 0 -> 744 bytes .../icons/light/tools/stop-darkgray-18x18@2x.png | Bin 0 -> 738 bytes .../icons/light/tools/stop-gray-18x18@2x.png | Bin 0 -> 690 bytes .../icons/light/tools/stop-lightblue-18x18@2x.png | Bin 0 -> 706 bytes .../icons/light/tools/stop-lightgray-18x18@2x.png | Bin 0 -> 695 bytes .../icons/light/tools/stop-white-18x18@2x.png | Bin 0 -> 623 bytes editor/src/components/editor/canvas-toolbar.tsx | 12 ++++++++---- editor/src/components/editor/insertmenu.tsx | 10 +++++----- 9 files changed, 13 insertions(+), 9 deletions(-) create mode 100644 editor/resources/editor/icons/light/tools/stop-black-18x18@2x.png create mode 100644 editor/resources/editor/icons/light/tools/stop-blue-18x18@2x.png create mode 100644 editor/resources/editor/icons/light/tools/stop-darkgray-18x18@2x.png create mode 100644 editor/resources/editor/icons/light/tools/stop-gray-18x18@2x.png create mode 100644 editor/resources/editor/icons/light/tools/stop-lightblue-18x18@2x.png create mode 100644 editor/resources/editor/icons/light/tools/stop-lightgray-18x18@2x.png create mode 100644 editor/resources/editor/icons/light/tools/stop-white-18x18@2x.png diff --git a/editor/resources/editor/icons/light/tools/stop-black-18x18@2x.png b/editor/resources/editor/icons/light/tools/stop-black-18x18@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..179cb28bc2ac9e9138343de1bbde51da8a6f4f2c GIT binary patch literal 719 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 YUUA1bbsA{k)c^nh07*qoM6N<$g8tts2LJ#7 literal 0 HcmV?d00001 diff --git a/editor/resources/editor/icons/light/tools/stop-lightblue-18x18@2x.png b/editor/resources/editor/icons/light/tools/stop-lightblue-18x18@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..488c14ce5430d9364d39f82c2c3c17098c68484f GIT binary patch literal 706 zcmV;z0zLhSP)at5VQ9hz=bbGKoXf z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I` zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q zKaMSOS71;sj{+>pL`e}7vc&VypY?`La=`luFqi^{?Li}Bd`J!$OvwL8|Vg>4Ri!I z&<*g_7gk^dpM_YDibS+c8`4B$?n}y_l)HYkFLwaL{29VFAqzDVHC9StNv{#YP|`SH zf=tHZ0$-s<1{I2cBA;Rt#3re+@$(v+7nzbqjxZ!`-UwH$=`P_Vq_F5@EPpbD-p&i8 zCZUlfHfm?{P%>Jm$)#}Wt>G#3HCV_63%Ot+7cAt0gat5VQ9hz=bbGKoXf z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I` zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q zKaMSOS71;sj{+>pL`e}7vc&VypY?`La=`luFqi^{?D>#A!5b!?(37TupkUkJ{Uqaf3-t}wyawRg1g^|U6gb>zk+aA!}cU_lLip8?* ziRR{n&yb{nf?(1+d(F_lPQc( z9=Ugtkdp#OS5>8wVK^6ZKl))V&2cm{Oi06oG)zdtgfvV@!-O#+d=V@1uL$@Q`dkCobzM;ckgFKVW3+c^&g`B+;+6444nX%3JKCut*kqaV dC1V(~=M5}Rczm67k-Go@002ovPDHLkV1o1fE^7b) literal 0 HcmV?d00001 diff --git a/editor/resources/editor/icons/light/tools/stop-white-18x18@2x.png b/editor/resources/editor/icons/light/tools/stop-white-18x18@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..0b5eee271b2eda2bbdf78be049abf0e260f05c5e GIT binary patch literal 623 zcmV-#0+9WQP)at5VQ9hz=bbGKoXf z(h7EQXe$&&FjNJrQ<{DWZG0ptQgIVkDfk~)!C7#yh*WTKa1cZX5#5|RDY$5O-j`I` zBHqX4{WzR+xm>^-P#G)s0x0R0kxay-wbZ)gdxM9bQ>tdNsG=+i{{6e_^U?L*Pl#Df zyLJ%SPh6MIE|+$m0#kqeUDcn-ni~Dz)Ip6I7T}SIm2Ha&-X$I}Xer{V;JnMng3~Ua zJD!zfocNYl(h6#ZxJfLhJM?@9mx^VrwS(B+pVe2F#T@EU%wZEI7>ZC)fdmENfBe&q zKaMSOS71;sj{+>pL`e}7vc&VypY?`La=`luFqi^{?fI;0BHm zH;ECH1M!F+5e44|4+Kg0?zkTb5dcp?L_V5a!{P^P{!{N18J6?lnAAJslxx28_n_&> zhivXU<)&DT&Tzy?O89)xBkEAW { { highlight onClick={props.onClick} disabled={canvasInLiveMode && !keepActiveInLiveMode} - overriddenBackground={secondary ? colorTheme.bg5.value : undefined} + overriddenBackground={secondary ? 'transparent' : undefined} onMouseEnter={setIsHoveredTrue} onMouseLeave={setIsHoveredFalse} > @@ -827,7 +827,11 @@ const InsertModeButton = React.memo((props: InsertModeButtonProps) => { height={props.size ?? 18} testId={props.testid == null ? undefined : `${props.testid}-icon`} color={ - isHovered && !props.primary ? 'dynamic' : props.primary ? 'on-highlight-main' : 'main' + (isHovered && !props.primary) || props.secondary + ? 'dynamic' + : props.primary + ? 'on-highlight-main' + : 'main' } /> diff --git a/editor/src/components/editor/insertmenu.tsx b/editor/src/components/editor/insertmenu.tsx index 4e5963b1bdea..f80adb4232b0 100644 --- a/editor/src/components/editor/insertmenu.tsx +++ b/editor/src/components/editor/insertmenu.tsx @@ -378,7 +378,7 @@ const Option = React.memo((props: OptionProps) => { ({ container: (styles): CSSObject => ({ height: '100%', - paddingLeft: 8, - paddingRight: 8, }), control: (styles): CSSObject => ({ background: 'transparent', @@ -445,6 +443,8 @@ function useSelectStyles(hasResults: boolean): StylesConfig { @@ -454,7 +454,7 @@ function useSelectStyles(hasResults: boolean): StylesConfig { controlShouldRenderValue={false} hideSelectedOptions={false} menuIsOpen - placeholder='Filter…' + placeholder='Select…' tabSelectsValue={false} options={options} onKeyDown={onKeyDown}