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