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

Merge pull request #1 from Gazook89/dropdownTextures-User-Themes

Browse Source 
Add dropdownTexture for user theme options
This commit is contained in:
David Bolack
2024-05-07 16:39:13 -05:00
committed by GitHub
parent 872ee339da dde8e28d07
commit 07ca134d98
2 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -200,9 +200,12 @@ const MetadataEditor = createClass({
const listThemes = (renderer)=>{ const listThemes = (renderer)=>{
return _.map(_.values(mergedThemes[renderer]), (theme)=>{ return _.map(_.values(mergedThemes[renderer]), (theme)=>{
const preview = theme?.thumbnail ? theme.thumbnail : `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`; const preview = theme?.thumbnail ? theme.thumbnail : `/themes/${theme.renderer}/${theme.path}/dropdownPreview.png`;
const texture = theme?.thumbnail ? theme.thumbnail : `/themes/${theme.renderer}/${theme.path}/dropdownTexture.png`;
return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme, renderer)} title={''}> return <div className='item' key={`${renderer}_${theme.name}`} onClick={()=>this.handleTheme(theme, renderer)} title={''}>
{`${renderer} : ${theme.name}`} {`${renderer} : ${theme.name}`}
<img src={`/themes/${theme.renderer}/${theme.path[0] == '#' ? '5ePHB' : theme.path}/dropdownTexture.png`}/> <div className='texture-container'>
<img src={`${texture}`}/>
</div>
<div className='preview'> <div className='preview'>
<h6>{`${theme.name}`} preview</h6> <h6>{`${theme.name}`} preview</h6>
<img src={`${preview}`}/> <img src={`${preview}`}/>

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

@@ -230,6 +230,14 @@
&:hover > .preview { &:hover > .preview {
opacity: 1; opacity: 1;
} }
.texture-container {
position: absolute;
width: 100%;
height: 100%;
min-height: 100%;
top: 0;
left: 0;
overflow: hidden;
> img { > img {
mask-image : linear-gradient(90deg, transparent, black 20%); mask-image : linear-gradient(90deg, transparent, black 20%);
-webkit-mask-image : linear-gradient(90deg, transparent, black 20%); -webkit-mask-image : linear-gradient(90deg, transparent, black 20%);
@@ -237,7 +245,8 @@
right : 0; right : 0;
top : 0px; top : 0px;
width : 50%; width : 50%;
height : 100%; min-height: 100%;
}
} }
} }
} }