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

Merge pull request #3202 from Gazook89/theme-selector-styling

Browse Source 
Improve Theme selector styling
This commit is contained in:
Trevor Buckner
2024-01-10 14:12:01 -05:00
committed by GitHub
parent 84a0c43745 1a1acec2f3
commit 4dfe1a0914
2 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/homebrew/editor/snippetbar/snippetbar.jsx
View File

@@ -74,6 +74,7 @@ const Snippetbar = createClass({
} }
}, },
mergeCustomizer : function(valueA, valueB, key) { mergeCustomizer : function(valueA, valueB, key) {
if(key == 'snippets') { if(key == 'snippets') {
const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme const result = _.reverse(_.unionBy(_.reverse(valueB), _.reverse(valueA), 'name')); // Join snippets together, with preference for the current theme over the base theme
@@ -102,10 +103,12 @@ const Snippetbar = createClass({
this.props.onInject(injectedText); this.props.onInject(injectedText);
}, },
toggleThemeSelector : function(){ toggleThemeSelector : function(e){
this.setState({ if(e.target.tagName != 'SELECT'){
themeSelector : !this.state.themeSelector this.setState({
}); themeSelector : !this.state.themeSelector
});
}
}, },
changeTheme : function(e){ changeTheme : function(e){
@@ -119,7 +122,7 @@ const Snippetbar = createClass({
renderThemeSelector : function(){ renderThemeSelector : function(){
return <div className='themeSelector'> return <div className='themeSelector'>
<select value={this.props.currentEditorTheme} onChange={this.changeTheme} onMouseDown={(this.changeTheme)}> <select value={this.props.currentEditorTheme} onChange={this.changeTheme} >
{EditorThemes.map((theme, key)=>{ {EditorThemes.map((theme, key)=>{
return <option key={key} value={theme}>{theme}</option>; return <option key={key} value={theme}>{theme}</option>;
})} })}
@@ -176,8 +179,9 @@ const Snippetbar = createClass({
<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`} <div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
onClick={this.toggleThemeSelector} > onClick={this.toggleThemeSelector} >
<i className='fas fa-palette' /> <i className='fas fa-palette' />
{this.state.themeSelector && this.renderThemeSelector()}
</div> </div>
{this.state.themeSelector && this.renderThemeSelector()}
<div className='divider'></div> <div className='divider'></div>
<div className={cx('text', { selected: this.props.view === 'text' })} <div className={cx('text', { selected: this.props.view === 'text' })}
onClick={()=>this.props.onViewChange('text')}> onClick={()=>this.props.onViewChange('text')}>

29
client/homebrew/editor/snippetbar/snippetbar.less
View File

@@ -57,13 +57,13 @@
font-size : 0.75em; font-size : 0.75em;
color : inherit; color : inherit;
} }
&.editorTheme{ &.editorTheme {
.tooltipLeft('Editor Themes'); .tooltipLeft('Editor Themes');
font-size : 0.75em; font-size : 0.75em;
color : inherit; color : black;
&.active{ &.active {
color : white; position : relative;
background-color: black; background-color : #999;
} }
} }
&.divider { &.divider {
@@ -74,14 +74,17 @@
} }
} }
} }
.themeSelector{ .themeSelector {
position: absolute; position : absolute;
left: -65px; top : 25px;
top: 30px; right : 0;
z-index: 999; z-index : 1;
width: 170px; display : flex;
background-color: black; align-items : center;
border-radius: 5px; justify-content : center;
width : 170px;
height : inherit;
background-color : inherit;
} }
} }
.snippetBarButton{ .snippetBarButton{