f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-15 17:02:38 +00:00
Code Wiki Activity

changes as requested, wrapping of editor tools, and linting

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-10-18 00:52:26 +02:00
parent 8538ccabe6
commit 5a75182aff
2 changed files with 145 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,7 +151,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);
return <div className="snippets"> return <div className='snippets'>
{_.map(snippets, (snippetGroup)=>{ {_.map(snippets, (snippetGroup)=>{
return <SnippetGroup return <SnippetGroup
brew={this.props.brew} brew={this.props.brew}
@@ -161,10 +161,10 @@ const Snippetbar = createClass({
key={snippetGroup.groupName} key={snippetGroup.groupName}
onSnippetClick={this.handleSnippetClick} onSnippetClick={this.handleSnippetClick}
cursorPos={this.props.cursorPos} cursorPos={this.props.cursorPos}
/>; />;
}) })
} }
</div> </div>;
}, },
replaceContent : function(item){ replaceContent : function(item){
@@ -223,56 +223,44 @@ 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' })}
onClick={()=>this.props.onViewChange('text')}>
<i className='fa fa-beer' />
</div>
<div className={cx('style', { selected: this.props.view === 'style' })}
onClick={()=>this.props.onViewChange('style')}>
<i className='fa fa-paint-brush' />
</div>
<div className={cx('meta', { selected: this.props.view === 'meta' })}
onClick={()=>this.props.onViewChange('meta')}>
<i className='fas fa-info-circle' />
</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 className='divider'></div> <div className='tabs'>
<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`} <div className={cx('text', { selected: this.props.view === 'text' })}
onClick={this.props.undo} > onClick={()=>this.props.onViewChange('text')}>
<i className='fas fa-undo' /> <i className='fa fa-beer' />
</div> </div>
<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`} <div className={cx('style', { selected: this.props.view === 'style' })}
onClick={this.props.redo} > onClick={()=>this.props.onViewChange('style')}>
<i className='fas fa-redo' /> <i className='fa fa-paint-brush' />
</div>
<div className={cx('meta', { selected: this.props.view === 'meta' })}
onClick={()=>this.props.onViewChange('meta')}>
<i className='fas fa-info-circle' />
</div>
</div> </div>
</div>; </div>;
@@ -280,9 +268,8 @@ const Snippetbar = createClass({
render : function(){ render : function(){
return <div className='snippetBar'> return <div className='snippetBar'>
{this.renderEditorButtons()}
{this.renderSnippetGroups()} {this.renderSnippetGroups()}
{this.renderEditorButtons()}
</div>; </div>;
} }
}); });
@@ -315,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'>

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

@@ -5,102 +5,113 @@
@menuHeight : 25px; @menuHeight : 25px;
position : relative; position : relative;
min-width : 331px; min-width : 331px;
height : @menuHeight; height : auto;
color : black; color : black;
background-color : #DDDDDD; background-color : #DDDDDD;
display: flex; display: flex;
justify-content: space-between;
flex-wrap:wrap-reverse;
.snippets { .snippets {
position : absolute; display : flex;
top : 0px; justify-content : space-between;
right : 0px;
} }
.editors { .editors {
display : flex; display : flex;
justify-content : space-between; justify-content : space-between;
height : @menuHeight; >div {
display:flex;
justify-content: space-around;
flex:1;
border-left:1px solid;
& > div { &:first-child {
width : @menuHeight; border-left: none;
height : @menuHeight;
line-height : @menuHeight;
text-align : center;
cursor : pointer;
&:hover,&.selected { background-color : #999999; }
&.text {
.tooltipLeft('Brew Editor');
} }
&.style {
.tooltipLeft('Style Editor'); & > div {
} width : @menuHeight;
&.meta { height : @menuHeight;
.tooltipLeft('Properties'); line-height : @menuHeight;
} text-align : center;
&.undo { cursor : pointer;
.tooltipLeft('Undo'); &:hover,&.selected { background-color : #999999; }
font-size : 0.75em; &.text {
color : grey; .tooltipLeft('Brew Editor');
&.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');
font-size : 0.75em;
color : grey;
position : relative;
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;
@@ -111,6 +122,7 @@
line-height : @menuHeight; line-height : @menuHeight;
text-transform : uppercase; text-transform : uppercase;
cursor : pointer; cursor : pointer;
text-wrap: nowrap;
&:hover, &.selected { background-color : #999999; } &:hover, &.selected { background-color : #999999; }
i { i {
margin-right : 3px; margin-right : 3px;
@@ -126,7 +138,8 @@
.tooltipLeft('Edit Brew Properties'); .tooltipLeft('Edit Brew Properties');
} }
.snippetGroup { .snippetGroup {
border-left : 1px solid currentColor; border-right : 1px solid currentColor;
&:hover { &:hover {
& > .dropdown { visibility : visible; } & > .dropdown { visibility : visible; }
} }
@@ -213,15 +226,16 @@
} }
} }
@container editor (width < 538px) { @container editor (width < 568px) {
.snippetBar { .editors,.snippets {
display : flex; width:332.59px;
flex-wrap : wrap;
height : 50px;
.snippets {
position : static;
}
} }
.editors {
border-right:1px solid;
}
.snippetBar .editors>div.history>.dropdown {
right:unset;
}
} }