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

Adding pin icon next to entity names

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-09-15 11:16:07 +03:00
parent 64fb590377
commit 690c5f28c4
2 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,10 +19,19 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.list :global(.TableRow) {
.pinIcon {
@apply ml-5 opacity-0 mt-[-1px];
transition: opacity 200ms;
}
&:hover .pinIcon {
@apply opacity-100;
}
}
.iconCell {
max-width: 40px;
display: flex;
align-items: center;
@apply flex items-center max-w-[40px];
}
.iconCell > div * {

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

@ -43,6 +43,7 @@ import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
import { CatalogMenu } from "./catalog-menu";
import { HotbarIcon } from "../hotbar/hotbar-icon";
import { RenderDelay } from "../render-delay/render-delay";
import { Icon } from "../icon";
export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");
@ -186,6 +187,18 @@ export class Catalog extends React.Component<Props> {
);
};
renderName(item: CatalogEntityItem<CatalogEntity>) {
return (
<>
{item.name}
<Icon className={styles.pinIcon} material="push_pin" small tooltip="Pin to Hotbar" onClick={(event) => {
event.stopPropagation();
this.addToHotbar(item);
}}/>
</>
);
}
renderIcon(item: CatalogEntityItem<CatalogEntity>) {
return (
<RenderDelay>
@ -216,7 +229,7 @@ export class Catalog extends React.Component<Props> {
renderHeaderTitle={activeCategory?.metadata.name || "Browse All"}
isSelectable={false}
isConfigurable={true}
className="CatalogItemList"
className={styles.list}
store={this.catalogEntityStore}
sortingCallbacks={{
[sortBy.name]: item => item.name,
@ -240,7 +253,7 @@ export class Catalog extends React.Component<Props> {
})}
renderTableContents={item => [
this.renderIcon(item),
item.name,
this.renderName(item),
!activeCategory && item.kind,
item.source,
item.getLabelBadges(),