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 styles

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-05-18 12:13:01 +03:00
parent aa2885e413
commit 668c9c3619
3 changed files with 19 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/components/hotbar/hotbar-entity-icon.tsx
View File

@ -18,7 +18,6 @@
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import "./hotbar-icon.scss";
import React, { DOMAttributes } from "react";
import { observable } from "mobx";
@ -103,8 +102,6 @@ export class HotbarEntityIcon extends React.Component<Props> {
const isPersisted = this.isPersisted(entity);
const menuItems = this.contextMenu?.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === entity.metadata.source);
console.log(entity.metadata.name, isActive);
if (!isPersisted) {
menuItems.unshift({
title: "Pin to Hotbar",

32
src/renderer/components/hotbar/hotbar-icon.scss
View File

@ -36,11 +36,6 @@
border-radius: 6px;
}
&.active {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
transition: all 0s 0.8s;
}
&.disabled {
opacity: 0.4;
cursor: default;
@ -53,23 +48,24 @@
}
}
&.active, &.interactive:hover {
img {
opacity: 1;
}
}
&:hover {
&:not(.active) {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
}
}
&.isDragging {
box-shadow: none;
}
> .led {
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;

13
src/renderer/components/hotbar/hotbar-icon.tsx
View File

@ -32,6 +32,7 @@ import { ConfirmDialog } from "../confirm-dialog";
import { Icon } from "../icon";
import { Menu, MenuItem } from "../menu";
import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
import { observer } from "mobx-react";
interface Props extends DOMAttributes<HTMLElement> {
uid: string;
@ -83,8 +84,8 @@ function getNameParts(name: string): string[] {
return name.split(/@+/);
}
export function HotbarIcon(props: Props) {
const { uid, title, className, source, active, disabled, menuItems, onMenuOpen, children, ...rest } = props;
export const HotbarIcon = observer(({menuItems = [], ...props}: Props) => {
const { uid, title, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
const id = `hotbarIcon-${uid}`;
const [menuOpen, setMenuOpen] = useState(false);
@ -113,7 +114,7 @@ export function HotbarIcon(props: Props) {
<Avatar
{...rest}
variant="square"
className="active"
className={active ? "active" : "default"}
style={generateAvatarStyle(`${title}-${source}`)}
>
{getIconString()}
@ -143,8 +144,4 @@ export function HotbarIcon(props: Props) {
</Menu>
</div>
);
}
HotbarIcon.defaultProps = {
menuItems: []
};
});