0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-31 06:32:37 +00:00

Merge pull request #3853 from 5e-Cleric/fix-snippetbar-behaviour

fix snippetbar weirdness
This commit is contained in:
Trevor Buckner
2024-10-23 22:45:39 -04:00
committed by GitHub
2 changed files with 35 additions and 24 deletions

View File

@@ -150,6 +150,7 @@ const Snippetbar = createClass({
renderSnippetGroups : function(){ renderSnippetGroups : function(){
const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view); const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
if(snippets.length === 0) return null;
return <div className='snippets'> return <div className='snippets'>
{_.map(snippets, (snippetGroup)=>{ {_.map(snippets, (snippetGroup)=>{
@@ -206,21 +207,16 @@ const Snippetbar = createClass({
renderEditorButtons : function(){ renderEditorButtons : function(){
if(!this.props.showEditButtons) return; if(!this.props.showEditButtons) return;
let foldButtons; const foldButtons = <>
if(this.props.view == 'text'){ <div className={`editorTool foldAll ${this.props.view !== 'meta' && this.props.foldCode ? 'active' : ''}`}
foldButtons = onClick={this.props.foldCode} >
<> <i className='fas fa-compress-alt' />
<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`} </div>
onClick={this.props.foldCode} > <div className={`editorTool unfoldAll ${this.props.view !== 'meta' && this.props.unfoldCode ? 'active' : ''}`}
<i className='fas fa-compress-alt' /> onClick={this.props.unfoldCode} >
</div> <i className='fas fa-expand-alt' />
<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`} </div>
onClick={this.props.unfoldCode} > </>;
<i className='fas fa-expand-alt' />
</div>
</>;
}
return <div className='editors'> return <div className='editors'>
<div className='historyTools'> <div className='historyTools'>

View File

@@ -7,19 +7,23 @@
display : flex; display : flex;
flex-wrap : wrap-reverse; flex-wrap : wrap-reverse;
justify-content : space-between; justify-content : space-between;
min-width : 331px;
height : auto; height : auto;
color : black; color : black;
background-color : #DDDDDD; background-color : #DDDDDD;
.snippets { .snippets {
display : flex; display : flex;
justify-content : space-evenly; justify-content : flex-start;
min-width : 327.58px;
} }
.editors { .editors {
display : flex; display : flex;
justify-content : space-between; justify-content : flex-end;
min-width : 225px;
&:only-child { margin-left : auto; }
>div { >div {
display : flex; display : flex;
flex : 1; flex : 1;
@@ -59,12 +63,14 @@
&.foldAll { &.foldAll {
.tooltipLeft('Fold All'); .tooltipLeft('Fold All');
font-size : 0.75em; font-size : 0.75em;
color : inherit; color : grey;
&.active { color : inherit; }
} }
&.unfoldAll { &.unfoldAll {
.tooltipLeft('Unfold All'); .tooltipLeft('Unfold All');
font-size : 0.75em; font-size : 0.75em;
color : inherit; color : grey;
&.active { color : inherit; }
} }
&.history { &.history {
.tooltipLeft('History'); .tooltipLeft('History');
@@ -218,9 +224,18 @@
} }
} }
} }
@container editor (width < 553px) { @container editor (width < 553px) {
.editors,.snippets { flex : 1; } .snippetBar {
.editors { border-bottom : 1px solid;} .editors {
.snippetBar .editors > div.history > .dropdown { right : unset; } flex : 1;
justify-content : space-between;
border-bottom : 1px solid;
}
.snippets {
flex : 1;
justify-content : space-evenly;
}
.editors > div.history > .dropdown { right : unset; }
}
} }