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

Merge pull request #3203 from 5e-Cleric/font-snippets

Browse Source 
fonts as snippets
This commit is contained in:
Trevor Buckner
2024-01-12 11:48:26 -05:00
committed by GitHub
parent b837ac5d6b 2ea65de0c0
commit 05a0d80c1b
3 changed files with 185 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -232,7 +232,7 @@ const SnippetGroup = createClass({
return _.map(snippets, (snippet)=>{ return _.map(snippets, (snippet)=>{
return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}> return <div className='snippet' key={snippet.name} onClick={(e)=>this.handleSnippetClick(e, snippet)}>
<i className={snippet.icon} /> <i className={snippet.icon} />
<span className='name'>{snippet.name}</span> <span className='name'title={snippet.name}>{snippet.name}</span>
{snippet.experimental && <span className='beta'>beta</span>} {snippet.experimental && <span className='beta'>beta</span>}
{snippet.subsnippets && <> {snippet.subsnippets && <>
<i className='fas fa-caret-right'></i> <i className='fas fa-caret-right'></i>

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

@@ -1,4 +1,6 @@
@import (less) './client/icons/customIcons.less'; @import (less) './client/icons/customIcons.less';
@import (less) '././././themes/fonts/5e/fonts.less';
.snippetBar{ .snippetBar{
@menuHeight : 25px; @menuHeight : 25px;
position : relative; position : relative;
@@ -22,16 +24,16 @@
&:hover,&.selected{ &:hover,&.selected{
background-color : #999; background-color : #999;
} }
&.text{ &.text {
.tooltipLeft('Brew Editor'); .tooltipLeft('Brew Editor');
} }
&.style{ &.style {
.tooltipLeft('Style Editor'); .tooltipLeft('Style Editor');
} }
&.meta{ &.meta {
.tooltipLeft('Properties'); .tooltipLeft('Properties');
} }
&.undo{ &.undo {
.tooltipLeft('Undo'); .tooltipLeft('Undo');
font-size : 0.75em; font-size : 0.75em;
color : grey; color : grey;
@@ -39,7 +41,7 @@
color : inherit; color : inherit;
} }
} }
&.redo{ &.redo {
.tooltipLeft('Redo'); .tooltipLeft('Redo');
font-size : 0.75em; font-size : 0.75em;
color : grey; color : grey;
@@ -47,12 +49,12 @@
color : inherit; color : inherit;
} }
} }
&.foldAll{ &.foldAll {
.tooltipLeft('Fold All'); .tooltipLeft('Fold All');
font-size : 0.75em; font-size : 0.75em;
color : inherit; color : inherit;
} }
&.unfoldAll{ &.unfoldAll {
.tooltipLeft('Unfold All'); .tooltipLeft('Unfold All');
font-size : 0.75em; font-size : 0.75em;
color : inherit; color : inherit;
@@ -69,7 +71,7 @@
&.divider { &.divider {
background: linear-gradient(currentColor, currentColor) no-repeat center/1px 100%; background: linear-gradient(currentColor, currentColor) no-repeat center/1px 100%;
width: 5px; width: 5px;
&:hover{ &:hover {
background-color: inherit; background-color: inherit;
} }
} }
@@ -87,29 +89,29 @@
background-color : inherit; background-color : inherit;
} }
} }
.snippetBarButton{ .snippetBarButton {
height : @menuHeight; height: @menuHeight;
line-height : @menuHeight; line-height: @menuHeight;
display : inline-block; display: inline-block;
padding : 0px 5px; padding: 0px 5px;
font-weight : 800; font-weight: 800;
font-size : 0.625em; font-size: 0.625em;
text-transform : uppercase; text-transform: uppercase;
cursor : pointer; cursor: pointer;
&:hover, &.selected{ &:hover, &.selected {
background-color : #999; background-color: #999;
} }
i{ i {
vertical-align : middle; vertical-align: middle;
margin-right : 3px; margin-right: 3px;
font-size : 1.4em; font-size: 1.4em;
} }
} }
.toggleMeta{ .toggleMeta {
position : absolute; position: absolute;
top : 0px; top: 0px;
right : 0px; right: 0px;
border-left : 1px solid black; border-left: 1px solid black;
.tooltipLeft("Edit Brew Properties"); .tooltipLeft("Edit Brew Properties");
} }
.snippetGroup{ .snippetGroup{
@@ -119,53 +121,79 @@
visibility : visible; visibility : visible;
} }
} }
.dropdown{ .dropdown {
position : absolute; position: absolute;
top : 100%; top: 100%;
visibility : hidden; visibility: hidden;
z-index : 1000; z-index: 1000;
margin-left : -5px; margin-left: -5px;
padding : 0px; padding: 0px;
background-color : #ddd; background-color: #ddd;
.snippet{ .snippet {
position: relative; position: relative;
.animate(background-color); .animate(background-color);
display : flex; display: flex;
align-items : center; align-items: center;
min-width : max-content; min-width: max-content;
padding : 5px; padding: 5px;
cursor : pointer; cursor: pointer;
font-size : 10px; font-size: 10px;
i{ i {
margin-right : 8px; margin-right: 8px;
font-size : 1.2em; font-size: 1.2em;
height : 1.2em; height: 1.2em;
&~i{ &~i {
margin-right: 0; margin-right: 0;
margin-left: 5px; margin-left: 5px;
} }
/* Fonts */
&.font {
height:auto;
&::before {
content:'F';
font-size:1.4em;
}
&.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 { .name {
margin-right : auto; margin-right: auto;
} }
.beta { .beta {
color : white; color: white;
padding : 4px 6px; padding: 4px 6px;
line-height : 1em; line-height: 1em;
margin-left : 5px; margin-left: 5px;
align-self : center; align-self: center;
background : grey; background: grey;
border-radius : 12px; border-radius: 12px;
font-family : monospace; font-family: monospace;
} }
&:hover{ &:hover {
background-color : #999; background-color: #999;
&>.dropdown{ &>.dropdown {
visibility : visible; visibility: visible;
&.side { &.side {
left: 100%; left: 100%;
top: 0%; top: 0%;
margin-left:0; margin-left: 0;
box-shadow: -1px 1px 2px 0px #999; box-shadow: -1px 1px 2px 0px #999;
} }
} }
@@ -173,4 +201,4 @@
} }
} }
} }
} }

93
themes/V3/Blank/snippets.js
View File

@@ -304,6 +304,99 @@ module.exports = [
} }
] ]
}, },
/**************** FONTS *************/
{
groupName : 'Fonts',
icon : 'fas fa-keyboard',
view : 'text',
snippets : [
{
name : 'Open Sans',
icon : 'font OpenSans',
gen : dedent`{{font-family:OpenSans Dummy Text}}`
},
{
name : 'Code Bold',
icon : 'font CodeBold',
gen : dedent`{{font-family:CodeBold Dummy Text}}`
},
{
name : 'Code Light',
icon : 'font CodeLight',
gen : dedent`{{font-family:CodeLight Dummy Text}}`
},
{
name : 'Scaly Sans Remake',
icon : 'font ScalySansRemake',
gen : dedent`{{font-family:ScalySansRemake Dummy Text}}`
},
{
name : 'Book Insanity Remake',
icon : 'font BookInsanityRemake',
gen : dedent`{{font-family:BookInsanityRemake Dummy Text}}`
},
{
name : 'Mr Eaves Remake',
icon : 'font MrEavesRemake',
gen : dedent`{{font-family:MrEavesRemake Dummy Text}}`
},
{
name: 'Solbera Imitation Remake',
icon: 'font SolberaImitationRemake',
gen: dedent`{{font-family:SolberaImitationRemake Dummy Text}}`
},
{
name: 'Scaly Sans Small Caps Remake',
icon: 'font ScalySansSmallCapsRemake',
gen: dedent`{{font-family:ScalySansSmallCapsRemake Dummy Text}}`
},
{
name: 'Walter Turncoat',
icon: 'font WalterTurncoat',
gen: dedent`{{font-family:WalterTurncoat Dummy Text}}`
},
{
name: 'Lato',
icon: 'font Lato',
gen: dedent`{{font-family:Lato Dummy Text}}`
},
{
name: 'Courier',
icon: 'font Courier',
gen: dedent`{{font-family:Courier Dummy Text}}`
},
{
name: 'Nodesto Caps Condensed',
icon: 'font NodestoCapsCondensed',
gen: dedent`{{font-family:NodestoCapsCondensed Dummy Text}}`
},
{
name: 'Overpass',
icon: 'font Overpass',
gen: dedent`{{font-family:Overpass Dummy Text}}`
},
{
name: 'Davek',
icon: 'font Davek',
gen: dedent`{{font-family:Davek Dummy Text}}`
},
{
name: 'Iokharic',
icon: 'font Iokharic',
gen: dedent`{{font-family:Iokharic Dummy Text}}`
},
{
name: 'Rellanic',
icon: 'font Rellanic',
gen: dedent`{{font-family:Rellanic Dummy Text}}`
},
{
name: 'Times New Roman',
icon: 'font TimesNewRoman',
gen: dedent`{{font-family:"Times New Roman" Dummy Text}}`
}
]
},
/**************** PAGE *************/ /**************** PAGE *************/