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

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

@ -36,11 +36,6 @@
border-radius: 6px; border-radius: 6px;
} }
&.active {
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
transition: all 0s 0.8s;
}
&.disabled { &.disabled {
opacity: 0.4; opacity: 0.4;
cursor: default; 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 { &.isDragging {
box-shadow: none; 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; position: absolute;
left: 3px; left: 3px;
top: 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 { Icon } from "../icon";
import { Menu, MenuItem } from "../menu"; import { Menu, MenuItem } from "../menu";
import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip"; import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
import { observer } from "mobx-react";
interface Props extends DOMAttributes<HTMLElement> { interface Props extends DOMAttributes<HTMLElement> {
uid: string; uid: string;
@ -83,8 +84,8 @@ function getNameParts(name: string): string[] {
return name.split(/@+/); return name.split(/@+/);
} }
export function HotbarIcon(props: Props) { export const HotbarIcon = observer(({menuItems = [], ...props}: Props) => {
const { uid, title, className, source, active, disabled, menuItems, onMenuOpen, children, ...rest } = props; const { uid, title, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
const id = `hotbarIcon-${uid}`; const id = `hotbarIcon-${uid}`;
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
@ -113,7 +114,7 @@ export function HotbarIcon(props: Props) {
<Avatar <Avatar
{...rest} {...rest}
variant="square" variant="square"
className="active" className={active ? "active" : "default"}
style={generateAvatarStyle(`${title}-${source}`)} style={generateAvatarStyle(`${title}-${source}`)}
> >
{getIconString()} {getIconString()}
@ -143,8 +144,4 @@ export function HotbarIcon(props: Props) {
</Menu> </Menu>
</div> </div>
); );
} });
HotbarIcon.defaultProps = {
menuItems: []
};