hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix drawer icons unexpected outline (#4364)

Browse Source 
* Removing MenuItem border in MenuActions

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding hover effect to catalog details icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-17 11:30:54 +03:00 committed by GitHub
parent ca15919218
commit 0587301cc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
View File

@ -87,6 +87,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
items.push( items.push(
<MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}> <MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>
<Icon <Icon
interactive
tooltip={menuItem.title} tooltip={menuItem.title}
{...{ [key]: menuItem.icon }} {...{ [key]: menuItem.icon }}
/> />
@ -98,8 +99,8 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
<HotbarToggleMenuItem <HotbarToggleMenuItem
key="hotbar-toggle" key="hotbar-toggle"
entity={entity} entity={entity}
addContent={<Icon material="push_pin" small tooltip="Add to Hotbar"/>} addContent={<Icon material="push_pin" interactive small tooltip="Add to Hotbar"/>}
removeContent={<Icon svg="push_off" small tooltip="Remove from Hotbar"/>} removeContent={<Icon svg="push_off" interactive small tooltip="Remove from Hotbar"/>}
/>, />,
); );

10
src/renderer/components/menu/menu-actions.scss
View File

@ -21,7 +21,7 @@
.MenuActions { .MenuActions {
&.toolbar { &.toolbar {
--flex-gap: #{$padding * 0.5}; --flex-gap: var(--padding);
position: static; position: static;
padding: 0; padding: 0;
@ -31,8 +31,8 @@
margin-right: var(--flex-gap) !important; margin-right: var(--flex-gap) !important;
.Icon { .Icon {
color: var(--textColorAccent); width: 21px;
padding-right: 0; height: 21px;
} }
.title, .arrow { .title, .arrow {
@ -42,6 +42,10 @@
> .MenuItem { > .MenuItem {
background: none !important; background: none !important;
padding: 0; padding: 0;
margin-bottom: 0;
border: none;
width: 21px;
height: 21px;
> .SubMenu { > .SubMenu {
$offset: $margin; $offset: $margin;