Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Google Material Icons with Material Symbols #2432

Merged
merged 26 commits into from
Jan 9, 2025
Merged

Replace Google Material Icons with Material Symbols #2432

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
3ff716c
Replace Google Material Icons with Material Symbols
96LawDawg Jan 4, 2025
339cbcb
File updater
96LawDawg Jan 5, 2025
2b83e7b
Update tags in symbols.json
96LawDawg Jan 5, 2025
dac4536
Update Edit mode CSS auto-fill options to make it easier to use symbo…
96LawDawg Jan 5, 2025
d7c19ad
Some updates to symbols.json. Still need to work on duplicate categories
96LawDawg Jan 5, 2025
4b708cf
Switch to light version of font file. Only options are fill and nofill
96LawDawg Jan 5, 2025
a35648d
Remove unnecessary font-variation-settings since switching to light v…
96LawDawg Jan 5, 2025
a4f6dd0
Merge duplicate entries in symbols.json
96LawDawg Jan 5, 2025
c515299
Refactor symbols.json for Symbols. Still needs work
96LawDawg Jan 5, 2025
255217a
Revert "Refactor symbols.json for Symbols. Still needs work"
96LawDawg Jan 5, 2025
93882b0
Categories now match Google's page
96LawDawg Jan 6, 2025
2901645
Add Material Symbols copyright attribution to About
96LawDawg Jan 6, 2025
953d53f
Add material-symbols-nofill to show overlay; add pre-defined list of …
96LawDawg Jan 6, 2025
9a4f2ac
Fix fileUpdater; still missing meta data
96LawDawg Jan 6, 2025
580d966
Custom added missing tags
96LawDawg Jan 6, 2025
db05f8b
Add VTT Symbols tags
96LawDawg Jan 6, 2025
98e34ef
File update changes
96LawDawg Jan 6, 2025
a2eb68a
fix metadata when actually displaying it
ArnoldSmith86 Jan 7, 2025
7767e70
restore intext class (fixes external link symbol in Similar To metadata)
ArnoldSmith86 Jan 7, 2025
3d1e81d
changed wrong icon in Runway Roll
ArnoldSmith86 Jan 7, 2025
147df08
Remove font-variation-settings
96LawDawg Jan 7, 2025
4d94051
added nofill variants to symbol picker and fixed alignment for them i…
ArnoldSmith86 Jan 8, 2025
9e9d111
Fix Symbol Picker Client Crash (#2434)
96LawDawg Jan 7, 2025
52321fe
Merge branch 'main' into feature-addGoogleMaterialSymbols
ArnoldSmith86 Jan 8, 2025
c2a66a7
Delete MaterialIconsOutlined-Regular.otf
96LawDawg Jan 8, 2025
4c776d7
Add word-spacing default to Material Symbol to be consistent with for…
96LawDawg Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/fonts/MaterialSymbols-Outlined.woff2
View file
Open in desktop
Binary file not shown.
57,390 changes: 39,911 additions & 17,479 deletions assets/fonts/symbols.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions client/css/editor/sidebarModules.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
border: 3px solid var(--VTTblue);
}
.editorModule .widgetSelectionButton.selected::after {
font-family: 'Material Icons';
font-family: 'Material Symbols';
line-height: 1.25em;
text-align: center;
height: 1.25em;
Expand Down Expand Up @@ -194,7 +194,7 @@
}

.image.editorModule .externalLink::after {
font-family: "Material Icons";
font-family: "Material Symbols";
font-size: 40px;
position: absolute;
top: 5px;
Expand Down
101 changes: 22 additions & 79 deletions client/css/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,86 +227,27 @@
font-family: "Gugi";
}


@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
font-display: block;
src: url("i/fonts/MaterialIcons-Regular.ttf") format("truetype");
font-display: block;
}

@font-face {
font-family: "Material Icons Outlined";
font-style: normal;
font-weight: 400;
src: url("i/fonts/MaterialIconsOutlined-Regular.otf") format("opentype");
font-display: block;
}

@font-face {
font-family: "Material Icons Round";
font-style: normal;
font-weight: 400;
src: url("i/fonts/MaterialIconsRound-Regular.otf") format("opentype");
font-display: block;
}

@font-face {
font-family: "Material Icons Sharp";
font-style: normal;
font-weight: 400;
src: url("i/fonts/MaterialIconsSharp-Regular.otf") format("opentype");
font-display: block;
}

@font-face {
font-family: "Material Icons Two Tone";
font-style: normal;
font-weight: 400;
src: url("i/fonts/MaterialIconsTwoTone-Regular.otf") format("opentype");
font-display: block;
}

.material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp, .material-icons-twotone, .font-material-icons {
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-feature-settings: "liga";
}

.material-icons.intext {
font-size: 20px;
}

.material-icons, .font-material-icons {
font-family: "Material Icons";
}

.material-icons-outlined {
font-family: "Material Icons Outlined";
}

.material-icons-round {
font-family: "Material Icons Round";
font-family: "Material Symbols";
font-style: normal;
font-weight: 400;
src: url("i/fonts/MaterialSymbols-Outlined.woff2") format("woff2");
font-display: block;
}

.material-icons-sharp {
font-family: "Material Icons Sharp";
}

.material-icons-twotone {
font-family: "Material Icons Two Tone";
.material-symbols, .font-material-symbols {
font-family: "Material Symbols";
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}

@font-face {
Expand All @@ -332,13 +273,14 @@

.icon {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "VTT-Symbols", "Material Icons" !important;
font-family: "VTT-Symbols", "Material Symbols" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;

/* Enable Ligatures ================ */
letter-spacing: 0;
Expand Down Expand Up @@ -511,7 +453,7 @@
#symbolPickerOverlay.hideImages .gameicons,
#symbolPickerOverlay.hideFonts h2.fontCategory,
#symbolPickerOverlay.hideFonts .symbols,
#symbolPickerOverlay.hideFonts .material-icons,
#symbolPickerOverlay.hideFonts .material-symbols,
#symbolPickerOverlay.hideFonts .emoji-monochrome {
display: none;
}
Expand Down Expand Up @@ -546,10 +488,11 @@ p[icon] {
}
p[icon]::before {
content: attr(icon);
font-family: "Material Icons";
font-family: "Material Symbols";
font-size: 200%;
position: absolute;
left: -40px;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
@media (max-width: 600px), (max-height: 375px) {
p[icon] {
Expand Down
2 changes: 1 addition & 1 deletion client/css/jsonedit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,7 +491,7 @@ body.jsonEdit #toolbar {
}

[id=jeTopButtons] button.material {
font-family: 'Material Icons';
font-family: 'Material Symbols';
}

#jeTopButtons button:disabled {
Expand Down
14 changes: 8 additions & 6 deletions client/css/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -717,13 +717,14 @@ div[icon] {

div[icon]::before {
content: attr(icon);
font-family: "Material Icons";
font-family: "Material Symbols";
color: #f8f8f8;
font-size: 250px;
line-height: 250px;
position: absolute;
right: -40px;
top: -10px;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

div[icon] * {
Expand Down Expand Up @@ -890,14 +891,15 @@ button[icon] {
}
button[icon]::before {
content: attr(icon);
font-family: "Material Icons";
font-family: "Material Symbols";
text-transform: lowercase;
margin-right: .25rem;
font-size: 24px;
font-weight: normal;
line-height: 1;
width: 24px;
overflow: clip;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
button[icon]:empty {
padding: 5px;
Expand Down Expand Up @@ -1007,7 +1009,7 @@ button.visualProgress {
.richtextSymbol.symbols {
top: 0.15em;
}
.richtextSymbol.material-icons {
.richtextSymbol.material-symbols {
top: 0.2em;
}
.richtextSymbol.gameicons, img.emoji {
Expand Down Expand Up @@ -1459,7 +1461,7 @@ button:disabled:hover {

.inputexpandselect {
text-align: right;
font-family: "Material Icons";
font-family: "Material Symbols";
font-size: 20px;
line-height: 20px;
position: absolute;
Expand Down Expand Up @@ -1693,7 +1695,7 @@ input:invalid{
color: red;
}
input:invalid+span::after, .inputError::before {
font-family: 'Material Icons';
font-family: 'Material Symbols';
content: 'error';
position: absolute;
right: 5px;
Expand Down Expand Up @@ -1732,7 +1734,7 @@ input:invalid+span::after, .inputError::before {
border: 3px solid var(--VTTblue);
}
.inputpalette > div input[type="radio"]:checked+label::after, .inputchoose .selected.inputchooseWidgetWrapper::after {
font-family: 'Material Icons';
font-family: 'Material Symbols';
line-height: 1.25em;
text-align: center;
height: 1.25em;
Expand Down
12 changes: 6 additions & 6 deletions client/css/overlays/states.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
padding: 10px;
}

#stateFilters .material-icons {
#stateFilters .material-symbols {
line-height: 0.5;
position: relative;
top: 6px;
Expand All @@ -24,7 +24,7 @@
border-radius: 11px;
}

#filterByTextWrapper .material-icons {
#filterByTextWrapper .material-symbols {
font-size: 20px;
left: -2px;
}
Expand Down Expand Up @@ -477,7 +477,7 @@ div:nth-of-type(2) > .list > .roomState .star {
margin-top: 0;
margin-bottom: 8px;
}
#mainDetails .material-icons, #similarDetails .material-icons {
#mainDetails .material-symbols, #similarDetails .material-symbols {
top: 5px;
position: relative;
}
Expand Down Expand Up @@ -530,15 +530,15 @@ div:nth-of-type(2) > .list > .roomState .star {
position: relative;
min-height: 24px;
}
#similarDetails > .details > .hideForEdit > i.material-icons {
#similarDetails > .details > .hideForEdit > i.material-symbols {
position: absolute;
top: -2px;
}
#similarDetails > .details > .hideForEdit > span, #similarDetails > .details > .hideForEdit > a {
margin-left: 28px;
display: inline-block;
}
#similarDetails > .details > .hideForEdit > a .material-icons {
#similarDetails > .details > .hideForEdit > a .material-symbols {
line-height: 0;
}
#similarDetails h1 {
Expand Down Expand Up @@ -753,7 +753,7 @@ div:nth-of-type(2) > .list > .roomState .star {
font-size: 14px;
margin-right: 10px;
}
#mainDetails .material-icons {
#mainDetails .material-symbols {
font-size: 18px;
top: 3px;
}
Expand Down
4 changes: 2 additions & 2 deletions client/css/overlays/welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@
margin-top: 0;
margin-bottom: 8px;
}
.mainStateDetails .material-icons {
.mainStateDetails .material-symbols {
top: 5px;
position: relative;
}
Expand Down Expand Up @@ -175,7 +175,7 @@
font-size: 14px;
margin-right: 10px;
}
.mainStateDetails .material-icons {
.mainStateDetails .material-symbols {
font-size: 18px;
top: 3px;
}
Expand Down
2 changes: 1 addition & 1 deletion client/js/domhelpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,7 @@ export async function loadSymbolPicker() {
if(symbol[0] == '[')
className = 'symbols';
else if(symbol.match(/^[a-z0-9_]+$/))
className = 'material-icons';
className = 'material-symbols';
if(className != 'emoji-monochrome' || !skipForNotoMonochrome(symbol))
list += `<i class="${className}" title="${className}: ${symbol}" data-type="${className}" data-symbol="${symbol}" data-keywords="${symbol},${keywords.join().toLowerCase()}" style="--url:url('i/noto-emoji/emoji_u${emojiToFilename(symbol)}.svg')">${toNotoMonochrome(symbol)}</i>`;
}
Expand Down
2 changes: 1 addition & 1 deletion client/js/editor/toolbar/grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ class GridButton extends PersistentToolbarToggleButton {
const cancelButton = document.createElement('button');
cancelButton.textContent = 'close';
cancelButton.addEventListener('click', () => showOverlay('gridOverlay'));
cancelButton.className = 'ui-button pilecancelbutton material-icons';
cancelButton.className = 'ui-button pilecancelbutton material-symbols';
$('#gridOverlay > .modal').appendChild(document.createElement('div').appendChild(cancelButton));
} else {
$('body').classList.remove('gridLines', 'gridLines33', 'gridLines25', 'gridLines20');
Expand Down
4 changes: 2 additions & 2 deletions client/js/jsonedit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ const jeCommands = [
}
},
show: function() {
return [ 'symbols', 'material-icons', 'emoji-monochrome' ].indexOf(jeStateNow.classes) != -1;
return [ 'symbols', 'material-symbols', 'emoji-monochrome' ].indexOf(jeStateNow.classes) != -1;
}
},
{
Expand Down Expand Up @@ -1254,7 +1254,7 @@ function displayComputeOps() {

function jeAddCSScommands() {
const string_presets = {
"border": "1px solid black", "background": "white", "font-size": "16px", "color": "black", "background-image": "url('')"
"border": "1px solid black", "background": "white", "font-size": "16px", "color": "black", "background-image": "url('')", "font-variation-settings":"'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24"
};
const nested_presets = {
'[a-z]+': {
Expand Down
2 changes: 1 addition & 1 deletion client/js/widgets/pile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ class Pile extends Widget {
cancelButton.addEventListener('click', async e=>{
showOverlay('pileOverlay');
});
cancelButton.className = 'ui-button pilecancelbutton material-icons';
cancelButton.className = 'ui-button pilecancelbutton material-symbols';
buttonBar4.appendChild(cancelButton);


Expand Down
Loading
Loading