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

Merge pull request #3635 from naturalcrit/snippet-bar-wrapping

Browse Source 
Snippet bar wrapping
This commit is contained in:
Trevor Buckner
2024-10-20 13:04:48 -04:00
committed by GitHub
parent 79e1f4caf7 0e9021049c
commit c723f820f7
3 changed files with 154 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/homebrew/editor/editor.less
View File

@@ -2,6 +2,7 @@
.editor { .editor {
position : relative; position : relative;
width : 100%; width : 100%;
container: editor / inline-size;
.codeEditor { .codeEditor {
height : 100%; height : 100%;

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

@@ -151,17 +151,20 @@ 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);
return _.map(snippets, (snippetGroup)=>{ return <div className='snippets'>
return <SnippetGroup {_.map(snippets, (snippetGroup)=>{
brew={this.props.brew} return <SnippetGroup
groupName={snippetGroup.groupName} brew={this.props.brew}
icon={snippetGroup.icon} groupName={snippetGroup.groupName}
snippets={snippetGroup.snippets} icon={snippetGroup.icon}
key={snippetGroup.groupName} snippets={snippetGroup.snippets}
onSnippetClick={this.handleSnippetClick} key={snippetGroup.groupName}
cursorPos={this.props.cursorPos} onSnippetClick={this.handleSnippetClick}
/>; cursorPos={this.props.cursorPos}
}); />;
})
}
</div>;
}, },
replaceContent : function(item){ replaceContent : function(item){
@@ -220,40 +223,46 @@ const Snippetbar = createClass({
} }
return <div className='editors'> return <div className='editors'>
<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`} <div className='historyTools'>
onClick={this.toggleHistoryMenu} > <div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
<i className='fas fa-clock-rotate-left' /> onClick={this.toggleHistoryMenu} >
{ this.state.showHistory && this.renderHistoryItems() } <i className='fas fa-clock-rotate-left' />
{ this.state.showHistory && this.renderHistoryItems() }
</div>
<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
onClick={this.props.undo} >
<i className='fas fa-undo' />
</div>
<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
onClick={this.props.redo} >
<i className='fas fa-redo' />
</div>
</div> </div>
<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`} <div className='codeTools'>
onClick={this.props.undo} > {foldButtons}
<i className='fas fa-undo' /> <div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
</div> onClick={this.toggleThemeSelector} >
<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`} <i className='fas fa-palette' />
onClick={this.props.redo} > {this.state.themeSelector && this.renderThemeSelector()}
<i className='fas fa-redo' /> </div>
</div>
<div className='divider'></div>
{foldButtons}
<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
onClick={this.toggleThemeSelector} >
<i className='fas fa-palette' />
{this.state.themeSelector && this.renderThemeSelector()}
</div> </div>
<div className='divider'></div>
<div className={cx('text', { selected: this.props.view === 'text' })} <div className='tabs'>
onClick={()=>this.props.onViewChange('text')}> <div className={cx('text', { selected: this.props.view === 'text' })}
<i className='fa fa-beer' /> onClick={()=>this.props.onViewChange('text')}>
</div> <i className='fa fa-beer' />
<div className={cx('style', { selected: this.props.view === 'style' })} </div>
onClick={()=>this.props.onViewChange('style')}> <div className={cx('style', { selected: this.props.view === 'style' })}
<i className='fa fa-paint-brush' /> onClick={()=>this.props.onViewChange('style')}>
</div> <i className='fa fa-paint-brush' />
<div className={cx('meta', { selected: this.props.view === 'meta' })} </div>
onClick={()=>this.props.onViewChange('meta')}> <div className={cx('meta', { selected: this.props.view === 'meta' })}
<i className='fas fa-info-circle' /> onClick={()=>this.props.onViewChange('meta')}>
<i className='fas fa-info-circle' />
</div>
</div> </div>
</div>; </div>;
}, },
@@ -293,7 +302,7 @@ const SnippetGroup = createClass({
<i className={snippet.icon} /> <i className={snippet.icon} />
<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span> <span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
{snippet.experimental && <span className='beta'>beta</span>} {snippet.experimental && <span className='beta'>beta</span>}
{snippet.disabled && <span className='beta' title="temporarily disabled due to large slowdown; under re-design">disabled</span>} {snippet.disabled && <span className='beta' title='temporarily disabled due to large slowdown; under re-design'>disabled</span>}
{snippet.subsnippets && <> {snippet.subsnippets && <>
<i className='fas fa-caret-right'></i> <i className='fas fa-caret-right'></i>
<div className='dropdown side'> <div className='dropdown side'>

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

@@ -4,97 +4,108 @@
.snippetBar { .snippetBar {
@menuHeight : 25px; @menuHeight : 25px;
position : relative; position : relative;
height : @menuHeight; display : flex;
flex-wrap : wrap-reverse;
justify-content : space-between;
min-width : 331px;
height : auto;
color : black; color : black;
background-color : #DDDDDD; background-color : #DDDDDD;
.snippets {
display : flex;
justify-content : space-evenly;
}
.editors { .editors {
position : absolute;
top : 0px;
right : 0px;
display : flex; display : flex;
justify-content : space-between; justify-content : space-between;
height : @menuHeight; >div {
& > div { display : flex;
width : @menuHeight; flex : 1;
height : @menuHeight; justify-content : space-around;
line-height : @menuHeight;
text-align : center; &:first-child { border-left : none; }
cursor : pointer;
&:hover,&.selected { background-color : #999999; } & > div {
&.text { position : relative;
.tooltipLeft('Brew Editor'); width : @menuHeight;
} height : @menuHeight;
&.style { line-height : @menuHeight;
.tooltipLeft('Style Editor'); text-align : center;
} cursor : pointer;
&.meta { &:hover,&.selected { background-color : #999999; }
.tooltipLeft('Properties'); &.text {
} .tooltipLeft('Brew Editor');
&.undo {
.tooltipLeft('Undo');
font-size : 0.75em;
color : grey;
&.active { color : inherit; }
}
&.redo {
.tooltipLeft('Redo');
font-size : 0.75em;
color : grey;
&.active { color : inherit; }
}
&.foldAll {
.tooltipLeft('Fold All');
font-size : 0.75em;
color : inherit;
}
&.unfoldAll {
.tooltipLeft('Unfold All');
font-size : 0.75em;
color : inherit;
}
&.history {
.tooltipLeft('History');
font-size : 0.75em;
color : grey;
position : relative;
&.active {
color : inherit;
} }
&>.dropdown{ &.style {
right : -1px; .tooltipLeft('Style Editor');
&>.snippet{ }
padding-right : 10px; &.meta {
.tooltipLeft('Properties');
}
&.undo {
.tooltipLeft('Undo');
font-size : 0.75em;
color : grey;
&.active { color : inherit; }
}
&.redo {
.tooltipLeft('Redo');
font-size : 0.75em;
color : grey;
&.active { color : inherit; }
}
&.foldAll {
.tooltipLeft('Fold All');
font-size : 0.75em;
color : inherit;
}
&.unfoldAll {
.tooltipLeft('Unfold All');
font-size : 0.75em;
color : inherit;
}
&.history {
.tooltipLeft('History');
position : relative;
font-size : 0.75em;
color : grey;
border : none;
&.active { color : inherit; }
& > .dropdown {
right : -1px;
& > .snippet { padding-right : 10px; }
} }
} }
} &.editorTheme {
&.editorTheme { .tooltipLeft('Editor Themes');
.tooltipLeft('Editor Themes'); font-size : 0.75em;
font-size : 0.75em; color : black;
color : black; &.active {
&.active { position : relative;
position : relative; background-color : #999999;
background-color : #999999; }
}
&.divider {
width : 5px;
background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
&:hover { background-color : inherit; }
} }
} }
&.divider { .themeSelector {
width : 5px; position : absolute;
background : linear-gradient(currentColor, currentColor) no-repeat center/1px 100%; top : 25px;
&:hover { background-color : inherit; } right : 0;
z-index : 10;
display : flex;
align-items : center;
justify-content : center;
width : 170px;
height : inherit;
background-color : inherit;
} }
} }
.themeSelector {
position : absolute;
top : 25px;
right : 0;
z-index : 10;
display : flex;
align-items : center;
justify-content : center;
width : 170px;
height : inherit;
background-color : inherit;
}
} }
.snippetBarButton { .snippetBarButton {
display : inline-block; display : inline-block;
@@ -104,6 +115,7 @@
font-weight : 800; font-weight : 800;
line-height : @menuHeight; line-height : @menuHeight;
text-transform : uppercase; text-transform : uppercase;
text-wrap : nowrap;
cursor : pointer; cursor : pointer;
&:hover, &.selected { background-color : #999999; } &:hover, &.selected { background-color : #999999; }
i { i {
@@ -120,7 +132,7 @@
.tooltipLeft('Edit Brew Properties'); .tooltipLeft('Edit Brew Properties');
} }
.snippetGroup { .snippetGroup {
border-right : 1px solid currentColor;
&:hover { &:hover {
& > .dropdown { visibility : visible; } & > .dropdown { visibility : visible; }
} }
@@ -142,11 +154,11 @@
cursor : pointer; cursor : pointer;
.animate(background-color); .animate(background-color);
i { i {
min-width : 25px;
height : 1.2em; height : 1.2em;
margin-right : 8px; margin-right : 8px;
font-size : 1.2em; font-size : 1.2em;
min-width: 25px; text-align : center;
text-align: center;
& ~ i { & ~ i {
margin-right : 0; margin-right : 0;
margin-left : 5px; margin-left : 5px;
@@ -179,7 +191,7 @@
} }
} }
.name { margin-right : auto; } .name { margin-right : auto; }
.disabled { text-decoration: line-through; } .disabled { text-decoration : line-through; }
.beta { .beta {
align-self : center; align-self : center;
padding : 4px 6px; padding : 4px 6px;
@@ -205,4 +217,10 @@
} }
} }
} }
} }
@container editor (width < 553px) {
.editors,.snippets { flex : 1; }
.editors { border-bottom : 1px solid;}
.snippetBar .editors > div.history > .dropdown { right : unset; }
}