diff --git a/src/renderer/components/+catalog/catalog.scss b/src/renderer/components/+catalog/catalog.scss index 5f8131dfaa..02db315b24 100644 --- a/src/renderer/components/+catalog/catalog.scss +++ b/src/renderer/components/+catalog/catalog.scss @@ -69,7 +69,28 @@ } } + .TableCell.icon { + max-width: 40px; + .HotbarIcon { + --size: 24px; + position: relative; + top: -3px; + .MuiAvatar-root { + font-size: 8px; + border-radius: 3px; + &:hover { + box-shadow: none; + } + } + } + } + + .TableCell.source { + max-width: 100px; + } + .TableCell.status { + max-width: 100px; &.connected { color: var(--colorSuccess); } diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 5211e034c2..15b89f792c 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -40,6 +40,7 @@ import { CatalogAddButton } from "./catalog-add-button"; import type { RouteComponentProps } from "react-router"; import type { ICatalogViewRouteParam } from "./catalog.route"; import { Notifications } from "../notifications"; +import { HotbarIcon } from "../hotbar/hotbar-icon"; enum sortBy { name = "name", @@ -174,6 +175,23 @@ export class Catalog extends React.Component { ); } + renderIcon(item: CatalogEntityItem) { + const category = catalogCategoryRegistry.getCategoryForEntity(item.entity); + + if (!category) { + return null; + } + + return ( + <> + + + ); + } + render() { if (!this.catalogEntityStore) { return null; @@ -202,12 +220,14 @@ export class Catalog extends React.Component { (entity: CatalogEntityItem) => entity.searchFields, ]} renderTableHeader={[ + { title: "", className: "icon" }, { title: "Name", className: "name", sortBy: sortBy.name }, { title: "Source", className: "source", sortBy: sortBy.source }, { title: "Labels", className: "labels" }, { title: "Status", className: "status", sortBy: sortBy.status }, ]} renderTableContents={(item: CatalogEntityItem) => [ + this.renderIcon(item), item.name, item.source, item.labels.map((label) => ), diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss index 018faf9085..8008f0ad6c 100644 --- a/src/renderer/components/hotbar/hotbar-icon.scss +++ b/src/renderer/components/hotbar/hotbar-icon.scss @@ -20,92 +20,6 @@ */ .HotbarMenu { - .HotbarIcon { - --size: 37px; - - border-radius: 6px; - user-select: none; - cursor: pointer; - transition: none; - text-shadow: 0 0 4px #0000008f; - position: relative; - - div.MuiAvatar-colorDefault { - font-weight:500; - text-transform: uppercase; - border-radius: 6px; - } - - &.disabled { - opacity: 0.4; - cursor: default; - filter: grayscale(0.7); - - &:hover { - &:not(.active) { - box-shadow: none; - } - } - } - - &.isDragging { - box-shadow: none; - } - - div.MuiAvatar-root { - &.active { - box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent); - transition: all 0s 0.8s; - } - - &:hover { - &:not(.active) { - box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30; - } - } - } - - .led { - position: absolute; - left: 3px; - top: 3px; - background-color: var(--layoutBackground); - border: 1px solid var(--clusterMenuBackground); - border-radius: 50%; - padding: 0px; - width: 8px; - height: 8px; - - &.online { - background-color: var(--primary); - box-shadow: 0 0 5px var(--clusterMenuBackground), 0 0 5px var(--primary); - } - } - - .badge { - position: absolute; - right: -2px; - bottom: -3px; - margin: -8px; - font-size: var(--font-size-small); - background: var(--clusterMenuBackground); - color: var(--textColorAccent); - padding: 0px; - border-radius: 50%; - border: 2px solid var(--clusterMenuBackground); - width: 15px; - height: 15px; - - svg { - width: 13px; - } - } - - img { - width: var(--size); - height: var(--size); - } - } .HotbarIconMenu { left: 30px; @@ -116,3 +30,93 @@ } } } + +.HotbarIcon { + --size: 37px; + + border-radius: 6px; + user-select: none; + cursor: pointer; + transition: none; + text-shadow: 0 0 4px #0000008f; + position: relative; + + div.MuiAvatar-colorDefault { + font-weight:500; + text-transform: uppercase; + border-radius: 6px; + } + + &.disabled { + opacity: 0.4; + cursor: default; + filter: grayscale(0.7); + + &:hover { + &:not(.active) { + box-shadow: none; + } + } + } + + &.isDragging { + box-shadow: none; + } + + div.MuiAvatar-root { + width: var(--size); + height: var(--size); + + &.active { + box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent); + transition: all 0s 0.8s; + } + + &:hover { + &:not(.active) { + box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30; + } + } + } + + .led { + position: absolute; + left: 3px; + top: 3px; + background-color: var(--layoutBackground); + border: 1px solid var(--clusterMenuBackground); + border-radius: 50%; + padding: 0px; + width: 8px; + height: 8px; + + &.online { + background-color: var(--primary); + box-shadow: 0 0 5px var(--clusterMenuBackground), 0 0 5px var(--primary); + } + } + + .badge { + position: absolute; + right: -2px; + bottom: -3px; + margin: -8px; + font-size: var(--font-size-small); + background: var(--clusterMenuBackground); + color: var(--textColorAccent); + padding: 0px; + border-radius: 50%; + border: 2px solid var(--clusterMenuBackground); + width: 15px; + height: 15px; + + svg { + width: 13px; + } + } + + img { + width: var(--size); + height: var(--size); + } +}