f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-08-06 06:47:38 +00:00
Code Wiki Activity

restore styling to work with new structure.

Browse Source 
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Gazook89
2026-04-23 22:10:51 -05:00
parent 4f953da0fe
commit 8bebbdac5d
3 changed files with 82 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/dropdown/dropdown.jsx
+2 -2
View File
@@ -48,10 +48,10 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, i
}; };
return ( return (
<div className='menu-wrapper' style={{ anchorName }} role='none'> <div className={['menu-wrapper', className].join(' ')} style={{ anchorName }} role='none' >
<button <button
id={groupName.replace(' ', '-')} id={groupName.replace(' ', '-')}
className={['menu-item', color, className].join(' ')} className={['menu-item', color].join(' ')}
popoverTarget={menuId} popoverTarget={menuId}
icon={icon} icon={icon}
aria-haspopup='menu' aria-haspopup='menu'
client/homebrew/editor/snippetbar/snippetbar.jsx
+3 -4
View File
@@ -336,7 +336,7 @@ const SnippetGroup = createReactClass({
return _.map(snippets, (snippet)=>{ return _.map(snippets, (snippet)=>{
if(!snippet.subsnippets){ if(!snippet.subsnippets){
return ( return (
<div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}> <div className='menu-item' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
<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>}
@@ -345,7 +345,7 @@ const SnippetGroup = createReactClass({
); );
} else if(snippet.subsnippets){ } else if(snippet.subsnippets){
return ( return (
<Dropdown groupName={snippet.name} className='dropdown side'> <Dropdown groupName={snippet.name}>
{this.renderSnippets(snippet.subsnippets)} {this.renderSnippets(snippet.subsnippets)}
</Dropdown> </Dropdown>
) )
@@ -355,8 +355,7 @@ const SnippetGroup = createReactClass({
}, },
render : function(){ render : function(){
const snippetGroup = `snippetGroup snippetBarButton ${this.props.snippets.length === 0 ? 'disabledSnippets' : ''}`; return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon}>
return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon} className={snippetGroup}>
{this.renderSnippets(this.props.snippets)} {this.renderSnippets(this.props.snippets)}
</Dropdown>; </Dropdown>;
}, },
client/homebrew/editor/snippetbar/snippetbar.less
+77 -86
View File
@@ -11,6 +11,10 @@
height : auto; height : auto;
color : black; color : black;
background-color : #DDDDDD; background-color : #DDDDDD;
font-size : .65rem;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: 800;
.snippets { .snippets {
display : flex; display : flex;
@@ -22,7 +26,7 @@
display : flex; display : flex;
justify-content : flex-end; justify-content : flex-end;
min-width : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied min-width : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
font-size: .85rem;
&:only-child {min-width : unset; margin-left : auto;} &:only-child {min-width : unset; margin-left : auto;}
>div { >div {
@@ -57,32 +61,27 @@
} }
&.undo { &.undo {
.tooltipLeft('Undo'); .tooltipLeft('Undo');
font-size : 0.75em;
color : grey; color : grey;
&.active { color : inherit; } &.active { color : inherit; }
} }
&.redo { &.redo {
.tooltipLeft('Redo'); .tooltipLeft('Redo');
font-size : 0.75em;
color : grey; color : grey;
&.active { color : inherit; } &.active { color : inherit; }
} }
&.foldAll { &.foldAll {
.tooltipLeft('Fold All'); .tooltipLeft('Fold All');
font-size : 0.75em;
color : grey; color : grey;
&.active { color : inherit; } &.active { color : inherit; }
} }
&.unfoldAll { &.unfoldAll {
.tooltipLeft('Unfold All'); .tooltipLeft('Unfold All');
font-size : 0.75em;
color : grey; color : grey;
&.active { color : inherit; } &.active { color : inherit; }
} }
&.history { &.history {
.tooltipLeft('History'); .tooltipLeft('History');
position : relative; position : relative;
font-size : 0.75em;
color : grey; color : grey;
border : none; border : none;
&.active { color : inherit; } &.active { color : inherit; }
@@ -93,7 +92,6 @@
} }
&.editorTheme { &.editorTheme {
.tooltipLeft('Editor Themes'); .tooltipLeft('Editor Themes');
font-size : 0.75em;
color : inherit; color : inherit;
&.active { &.active {
position : relative; position : relative;
@@ -144,90 +142,83 @@
border-left : 1px solid black; border-left : 1px solid black;
.tooltipLeft('Edit Brew Properties'); .tooltipLeft('Edit Brew Properties');
} }
.snippetGroup {
&:hover {
& > .dropdown { visibility : visible; } .menu-wrapper {
} .menu-list {
.dropdown {
position : absolute;
top : 100%;
z-index : 1000;
visibility : hidden;
padding : 0px; padding : 0px;
margin-left : -5px;
background-color : #DDDDDD; background-color : #DDDDDD;
.snippet {
position : relative; }
display : flex; }
align-items : center;
min-width : max-content;
padding : 5px;
font-size : 10px;
cursor : pointer;
.animate(background-color);
i {
min-width : 25px;
height : 1.2em;
margin-right : 8px;
font-size : 1.2em;
text-align : center;
& ~ i {
margin-right : 0;
margin-left : 5px;
}
/* Fonts */
&.font {
height : auto;
&::before {
font-size : 1em;
content : 'ABC';
}
&.OpenSans {font-family : 'OpenSans';} .menu-item {
&.CodeBold {font-family : 'CodeBold';} position : relative;
&.CodeLight {font-family : 'CodeLight';} display : flex;
&.ScalySansRemake {font-family : 'ScalySansRemake';} justify-content: space-between;
&.BookInsanityRemake {font-family : 'BookInsanityRemake';} align-items : center;
&.MrEavesRemake {font-family : 'MrEavesRemake';} min-width : max-content;
&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';} padding : 5px;
&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';} cursor : pointer;
&.WalterTurncoat {font-family : 'WalterTurncoat';} width: 100%;
&.Lato {font-family : 'Lato';} .animate(background-color);
&.Courier {font-family : 'Courier';} i {
&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';} min-width : 25px;
&.Overpass {font-family : 'Overpass';} height : 1.2em;
&.Davek {font-family : 'Davek';} margin-right : 8px;
&.Iokharic {font-family : 'Iokharic';} font-size : 1.2em;
&.Rellanic {font-family : 'Rellanic';} text-align : center;
&.TimesNewRoman {font-family : 'Times New Roman';} &.caret {
} margin-right: 0;
}
.name { margin-right : auto; }
.disabled { text-decoration : line-through; }
.beta {
align-self : center;
padding : 4px 6px;
margin-left : 5px;
font-family : monospace;
line-height : 1em;
color : white;
background : grey;
border-radius : 12px;
}
&:hover {
background-color : #999999;
& > .dropdown {
visibility : visible;
&.side {
top : 0%;
left : 100%;
margin-left : 0;
box-shadow : -1px 1px 2px 0px #999999;
}
}
}
} }
&.caret:is(.menu-wrapper .menu-wrapper * ) {
text-align: right;
}
& ~ i {
margin-right : 0;
margin-left : 5px;
}
/* Fonts */
&.font {
height : auto;
&::before {
font-size : 1em;
content : 'ABC';
}
&.OpenSans {font-family : 'OpenSans';}
&.CodeBold {font-family : 'CodeBold';}
&.CodeLight {font-family : 'CodeLight';}
&.ScalySansRemake {font-family : 'ScalySansRemake';}
&.BookInsanityRemake {font-family : 'BookInsanityRemake';}
&.MrEavesRemake {font-family : 'MrEavesRemake';}
&.SolberaImitationRemake {font-family : 'SolberaImitationRemake';}
&.ScalySansSmallCapsRemake {font-family : 'ScalySansSmallCapsRemake';}
&.WalterTurncoat {font-family : 'WalterTurncoat';}
&.Lato {font-family : 'Lato';}
&.Courier {font-family : 'Courier';}
&.NodestoCapsCondensed {font-family : 'NodestoCapsCondensed';}
&.Overpass {font-family : 'Overpass';}
&.Davek {font-family : 'Davek';}
&.Iokharic {font-family : 'Iokharic';}
&.Rellanic {font-family : 'Rellanic';}
&.TimesNewRoman {font-family : 'Times New Roman';}
}
}
.name { margin-right : auto; }
.disabled { text-decoration : line-through; }
.beta {
align-self : center;
padding : 4px 6px;
margin-left : 5px;
font-family : monospace;
line-height : 1em;
color : white;
background : grey;
border-radius : 12px;
}
&:hover {
background-color : #999999;
} }
} }
.disabledSnippets { .disabledSnippets {