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

Adjust pin icon styles

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-09-15 13:53:52 +03:00
parent c31328db13
commit ab38cd32b5
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/renderer/components/+catalog/catalog.module.css
View File

@ -20,13 +20,30 @@
*/ */
.list :global(.TableRow) { .list :global(.TableRow) {
.pinIcon { .entityName {
@apply ml-5 opacity-0 mt-[-1px]; position: relative;
transition: opacity 200ms; width: min-content;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 24px;
.pinIcon {
position: absolute;
right: 0;
opacity: 0;
transition: none;
&:hover {
/* Drop styles defined for <Icon/> */
background-color: transparent;
box-shadow: none;
}
}
} }
&:hover .pinIcon { &:hover .pinIcon {
@apply opacity-100; opacity: 1;
} }
} }

4
src/renderer/components/+catalog/catalog.tsx
View File

@ -189,13 +189,13 @@ export class Catalog extends React.Component<Props> {
renderName(item: CatalogEntityItem<CatalogEntity>) { renderName(item: CatalogEntityItem<CatalogEntity>) {
return ( return (
<> <div className={styles.entityName}>
{item.name} {item.name}
<Icon className={styles.pinIcon} material="push_pin" small tooltip="Pin to Hotbar" onClick={(event) => { <Icon className={styles.pinIcon} material="push_pin" small tooltip="Pin to Hotbar" onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
this.addToHotbar(item); this.addToHotbar(item);
}}/> }}/>
</> </div>
); );
} }