malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Prototype font detection and cards

Browse Source
This commit is contained in:
Tetrakern 2024-02-06 17:40:54 +01:00
parent 3950f8cd01
commit 45bc94a00f
4 changed files with 139 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/settings.css
View File

File diff suppressed because one or more lines are too long

10
fonts/open-sans-v27-latin-ext_latin/info.txt Normal file
View File

@ -0,0 +1,10 @@
Name: Open Sans
CSS: 'Open Sans'
Styles: normal, italic
Weights: 300, 325, 350, 400, 500, 600, 700
Charsets: Cyrillic (Ext.), Greek (Ext.), Hebrew, Latin (Ext.), Math, Symbols, Vietnamese
Formats: woff2
Version: 27
About: Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.
Note: Custom version with added 325 and 350 font weights.
Sources: Google Fonts|https://fonts.google.com/specimen/Open+Sans ||| Google Webfonts Helper|https://gwfh.mranftl.com/fonts/open-sans?subsets=cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin,latin-ext,math,symbols,vietnamese

109
includes/functions/settings/_settings_page_fonts.php
View File

@ -22,9 +22,18 @@ if ( is_dir( $font_dir ) ) {
}
$full_path = $font_dir . '/' . $font_folder;
$info_file = $full_path . '/info.txt';
if ( is_dir( $full_path ) ) {
$fonts[] = $font_folder;
if ( is_dir( $full_path ) && file_exists( $info_file ) ) {
$info = [];
$lines = file( $info_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES );
foreach ( $lines as $line ) {
list( $key, $value ) = explode( ':', $line, 2 );
$info[ trim( strtolower( $key ) ) ] = trim( $value );
}
$fonts[ $info_file ] = $info;
}
}
}
@ -38,13 +47,103 @@ if ( is_dir( $font_dir ) ) {
<div class="fictioneer-settings__content">
<div class="fictioneer-single-column">
<?php foreach ( $fonts as $font ) : ?>
<?php foreach ( $fonts as $key => $font ) : ?>
<?php
$name = $font['name'] ?? $key;
$css = $font['css'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
$version = $font['version'] ?? 'XX';
$charsets = $font['charsets'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
$formats = $font['formats'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
$about = $font['about'] ?? _x( 'No description provided', 'Settings font card.', 'fictioneer' );
$weights = $font['weights'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
$styles = $font['styles'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
$sources = explode( '|||', $font['sources'] ?? '' );
$links = [];
$note = $font['note'] ?? '';
if ( ! empty( $sources ) ) {
$links = array_map(
function( $source ) {
$parts = explode( '|', $source );
if ( count( $parts ) < 2 ) {
$parts = [ _x( 'Link', 'Settings font card.', 'fictioneer' ), $parts[0] ];
}
return sprintf( '<a href="%s" target="_blank">%s</a>', trim( $parts[1] ), trim( $parts[0] ) );
},
$sources
);
}
?>
<div class="fictioneer-card">
<div class="fictioneer-card__wrapper">
<h3 class="fictioneer-card__header"><?php echo $font; ?></h3>
<h3 class="fictioneer-card__header"><?php printf( '%s (v%d)', $name, $version ); ?></h3>
<div class="fictioneer-card__content">
<div class="fictioneer-card__row">This is a font folder.</div>
<div class="fictioneer-card__row"><?php
echo $about;
if ( ! empty( $links ) ) {
echo _nx(
' <strong>Source:</strong> ',
' <strong>Sources:</strong> ',
count( $sources ),
'Settings font card.',
'fictioneer'
);
echo implode( ', ', $links );
}
?></div>
<?php if ( ! empty( $note ) ): ?>
<div class="fictioneer-card__row"><?php
printf( _x( '<strong>Note:</strong> %s', 'Settings font card.', 'fictioneer' ), $note );
?></div>
<?php endif; ?>
<div class="fictioneer-card__row fictioneer-card__row--boxes">
<div class="fictioneer-card__box" style="flex-grow: 2;">
<div class="fictioneer-card__box-title"><?php
_ex( 'Weights', 'Settings font card.', 'fictioneer' );
?></div>
<div class="fictioneer-card__box-content"><?php echo $weights; ?></div>
</div>
<div class="fictioneer-card__box">
<div class="fictioneer-card__box-title"><?php
_ex( 'Styles', 'Settings font card.', 'fictioneer' );
?></div>
<div class="fictioneer-card__box-content"><?php echo $styles; ?></div>
</div>
<div class="fictioneer-card__box">
<div class="fictioneer-card__box-title"><?php
_ex( 'Formats', 'Settings font card.', 'fictioneer' );
?></div>
<div class="fictioneer-card__box-content"><?php echo $formats; ?></div>
</div>
<div class="fictioneer-card__box">
<div class="fictioneer-card__box-title"><?php
_ex( 'CSS', 'Settings font card.', 'fictioneer' );
?></div>
<div class="fictioneer-card__box-content"><?php echo $css; ?></div>
</div>
<div class="fictioneer-card__box" style="flex-grow: 8;">
<div class="fictioneer-card__box-title"><?php
_ex( 'Charsets', 'Settings font card.', 'fictioneer' );
?></div>
<div class="fictioneer-card__box-content"><?php echo $charsets; ?></div>
</div>
</div>
</div>
</div>

25
src/scss/admin/settings.scss
View File

@ -424,13 +424,22 @@ body[class*="fictioneer_page_"] {
margin-left: 24px;
}
&--capabilities {
&--capabilities,
&--boxes {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
}
&--boxes {
align-items: stretch;
> div {
flex: 1 1 130px;
}
}
&--buttons,
&--single-form-submit {
display: flex;
@ -461,6 +470,20 @@ body[class*="fictioneer_page_"] {
}
}
&__box {
background: #f6f7f7;
font-size: 11px;
text-align: center;
padding: 8px 10px 10px;
&-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 4px;
}
}
&__footer {
padding: 12px;
}