f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-02 06:22:43 +00:00
Code Wiki Activity

Themes dropdown previews

Browse Source
This commit is contained in:
Victor Losada Hernandez
2023-01-18 19:38:38 +01:00
parent 128b299f25
commit 45c7ac4b85
7 changed files with 37 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -184,6 +184,10 @@ const MetadataEditor = createClass({
return <div className='item' key={''} onClick={()=>this.handleTheme(theme)} title={''}>
{`${theme.renderer} : ${theme.name}`}
<img src={`/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`}/>
<div className='preview'>
<h6>{`${theme.name}`} preview</h6>
<img src={`/themes/${theme.renderer}/${theme.path}/dropdownPreview.jpg`}/>
</div>
</div>;
});
};

37
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -188,18 +188,45 @@
padding : 3px 3px;
border-top : 1px solid rgb(118, 118, 118);
position : relative;
overflow : hidden;
overflow : visible;
background-color : white;
.preview {
display: flex;
flex-direction: column;
background: #ccc;
border-radius: 5px;
box-shadow: 0 0 5px black;
width: 200px;
color:black;
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: opacity 250ms ease;
z-index: 1;
overflow:hidden;
h6 {
font-weight: 900;
padding-inline:1em;
padding-block:.5em;
border-bottom:2px solid hsl(0,0%,40%);
}
}
&:hover {
background-color : @blue;
color : white;
}
img {
&:hover > .preview {
opacity: 1;
}
>img {
mask-image : linear-gradient(90deg, transparent, black 20%);
-webkit-mask-image : linear-gradient(90deg, transparent, black 20%);
position : absolute;
left : ~"max(100px, 100% - 300px)";
top : 0px;
position : absolute;
right : 0;
top : 0px;
width : 50%;
height : 100%;
}
}
}