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

Convert HotbarSelector to use css modules

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-01-12 14:42:30 +03:00
parent 49352aa4d0
commit 8daee0e708
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/components/hotbar/hotbar-selector.scss → src/renderer/components/hotbar/hotbar-selector.module.scss
View File

@ -20,6 +20,8 @@
*/ */
.HotbarSelector { .HotbarSelector {
display: flex;
align-items: center;
height: 26px; height: 26px;
background-color: var(--layoutBackground); background-color: var(--layoutBackground);
position: relative; position: relative;
@ -33,7 +35,13 @@
top: -20px; top: -20px;
} }
.SelectorIndex { .HotbarIndex {
display: flex;
flex-grow: 1;
align-items: center;
}
.Badge {
cursor: pointer; cursor: pointer;
background: var(--secondaryBackground); background: var(--secondaryBackground);
width: 100%; width: 100%;

17
src/renderer/components/hotbar/hotbar-selector.tsx
View File

@ -19,7 +19,7 @@
* 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-selector.scss"; import styles from "./hotbar-selector.module.scss";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { Badge } from "../badge"; import { Badge } from "../badge";
@ -30,6 +30,7 @@ import { observer } from "mobx-react";
import type { Hotbar } from "../../../common/hotbar-types"; import type { Hotbar } from "../../../common/hotbar-types";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import commandOverlayInjectable from "../command-palette/command-overlay.injectable"; import commandOverlayInjectable from "../command-palette/command-overlay.injectable";
import { cssNames } from "../../utils";
export interface HotbarSelectorProps { export interface HotbarSelectorProps {
hotbar: Hotbar; hotbar: Hotbar;
@ -70,15 +71,19 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommand
}; };
return ( return (
<div className="HotbarSelector flex align-center"> <div className={styles.HotbarSelector}>
<Icon material="play_arrow" className="previous box" onClick={() => onArrowClick(hotbarManager.switchToPrevious)} /> <Icon
<div className="box grow flex align-center"> material="play_arrow"
className={cssNames(styles.Icon, styles.previous)}
onClick={() => onArrowClick(hotbarManager.switchToPrevious)}
/>
<div className={styles.HotbarIndex}>
<Badge <Badge
id="hotbarIndex" id="hotbarIndex"
small small
label={hotbarManager.getDisplayIndex(hotbarManager.getActive())} label={hotbarManager.getDisplayIndex(hotbarManager.getActive())}
onClick={() => openCommandOverlay(<HotbarSwitchCommand />)} onClick={() => openCommandOverlay(<HotbarSwitchCommand />)}
className="SelectorIndex" className={styles.Badge}
onMouseEnter={onMouseEvent} onMouseEnter={onMouseEvent}
onMouseLeave={onMouseEvent} onMouseLeave={onMouseEvent}
/> />
@ -90,7 +95,7 @@ const NonInjectedHotbarSelector = observer(({ hotbar, hotbarManager, openCommand
{hotbar.name} {hotbar.name}
</Tooltip> </Tooltip>
</div> </div>
<Icon material="play_arrow" className="next box" onClick={() => onArrowClick(hotbarManager.switchToNext)} /> <Icon material="play_arrow" className={styles.Icon} onClick={() => onArrowClick(hotbarManager.switchToNext)} />
</div> </div>
); );
}); });