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

Styling hotbar selector

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-04-25 17:24:10 +03:00
parent 7c7748778a
commit 1cc44fcc84
2 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/renderer/components/hotbar/hotbar-menu.scss
View File

@ -4,8 +4,8 @@
position: relative; position: relative;
text-align: center; text-align: center;
background: $clusterMenuBackground; background: $clusterMenuBackground;
padding: 28px 0; padding-top: 28px;
min-width: 75px; width: 75px;
.is-mac &:before { .is-mac &:before {
content: ""; content: "";
@ -14,7 +14,8 @@
.HotbarItems { .HotbarItems {
--cellWidth: 40px; --cellWidth: 40px;
--cellHeight: 60px; --cellHeight: 40px;
--cellFullHeight: 60px;
box-sizing: content-box; box-sizing: content-box;
margin: 0 auto; margin: 0 auto;
@ -23,8 +24,8 @@
.HotbarCell { .HotbarCell {
width: var(--cellWidth); width: var(--cellWidth);
height: 40px; height: var(--cellHeight);
min-height: 40px; min-height: var(--cellHeight);
margin: 12px; margin: 12px;
background: var(--layoutBackground); background: var(--layoutBackground);
border-radius: 6px; border-radius: 6px;
@ -67,12 +68,39 @@
} }
.HotbarSelector { .HotbarSelector {
position: absolute; height: 26px;
bottom: 0; background-color: var(--layoutBackground);
width: 100%; position: relative;
&:before {
content: " ";
position: absolute;
width: 100%;
height: 30px;
background: linear-gradient(0deg, var(--clusterMenuBackground), transparent);
top: -30px;
}
.Badge { .Badge {
cursor: pointer; cursor: pointer;
background: var(--secondaryBackground);
width: 100%;
color: var(--settingsColor);
padding-top: 3px;
}
.Icon {
--size: 16px;
padding: 0 4px;
&:hover {
box-shadow: none;
background-color: transparent;
}
&.previous {
transform: rotateY(180deg);
}
} }
} }
@ -86,6 +114,7 @@
border-radius: 6px; border-radius: 6px;
transition: all 0.2s; transition: all 0.2s;
cursor: pointer; cursor: pointer;
z-index: 1;
&:hover { &:hover {
background-color: var(--sidebarBackground); background-color: var(--sidebarBackground);

10
src/renderer/components/hotbar/hotbar-menu.tsx
View File

@ -60,7 +60,7 @@ export class HotbarMenu extends React.Component<Props> {
const element = document.querySelector<HTMLDivElement>(".HotbarItems"); const element = document.querySelector<HTMLDivElement>(".HotbarItems");
const height = element.offsetHeight; const height = element.offsetHeight;
const cellHeight = cssVar(element).get("--cellHeight").toString(); const cellHeight = cssVar(element).get("--cellFullHeight").toString();
const cellsFit = Math.floor(height / parseInt(cellHeight)) - 1; const cellsFit = Math.floor(height / parseInt(cellHeight)) - 1;
this.hotbar.items = [...Array.from(Array(cellsFit).fill(null))]; this.hotbar.items = [...Array.from(Array(cellsFit).fill(null))];
@ -111,12 +111,12 @@ export class HotbarMenu extends React.Component<Props> {
{this.renderGrid()} {this.renderGrid()}
{this.renderAddCellButton()} {this.renderAddCellButton()}
</div> </div>
<div className="HotbarSelector flex gaps auto"> <div className="HotbarSelector flex align-center">
<Icon material="chevron_left" className="previous box" onClick={() => this.previous()} /> <Icon material="play_arrow" className="previous box" onClick={() => this.previous()} />
<div className="box"> <div className="box grow flex align-center">
<Badge small label={hotbarIndex} onClick={() => this.openSelector()} /> <Badge small label={hotbarIndex} onClick={() => this.openSelector()} />
</div> </div>
<Icon material="chevron_right" className="next box" onClick={() => this.next()} /> <Icon material="play_arrow" className="next box" onClick={() => this.next()} />
</div> </div>
</div> </div>
); );