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:
@@ -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'>
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user