Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
20 changes: 13 additions & 7 deletions src/gui/src/UI/UIWindowFontPicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,22 @@ const font_list = new Set([
async function UIWindowFontPicker (options) {
// set sensible defaults
if ( arguments.length > 0 ) {
// if first argument is a string, then assume it is the default color
// if first argument is a string, then assume it is the default font
if ( window.isString(arguments[0]) ) {
options = {};
options.default = arguments[0];
options.defaultValue = arguments[0];
}
}
options = options || {};
const defaultFont = options.defaultValue || options.defaultFont || options.default;

return new Promise(async (resolve) => {
let h = '';
h += '<div>';
h += '<div style="padding: 20px; border-bottom: 1px solid #ced7e1; width: 100%; box-sizing: border-box;">';
h += '<div class="font-list" style="margin-bottom: 10px; height: 200px; overflow-y: scroll; background-color: white; padding: 0 10px;">';
fontAvailable.forEach(element => {
h += `<p class="font-selector disable-user-select ${options.default === element ? 'font-selector-active' : ''}" style="font-family: '${html_encode(element)}';" data-font-family="${html_encode(element)}">${html_encode(element)}</p>`; // 👉️ one, two, three, four
h += `<p class="font-selector disable-user-select ${defaultFont === element ? 'font-selector-active' : ''}" style="font-family: '${html_encode(element)}';" data-font-family="${html_encode(element)}">${html_encode(element)}</p>`;
});
h += '</div>';

Expand Down Expand Up @@ -89,10 +90,15 @@ async function UIWindowFontPicker (options) {
on_close: () => {
resolve(false);
},
onAppend: function (window) {
let active_font = $(window).find('.font-selector-active');
onAppend: function (elWindow) {
let active_font = $(elWindow).find('.font-selector-active');
if ( active_font.length > 0 ) {
window.scrollParentToChild($(window).find('.font-list').get(0), active_font.get(0));
const font_list = $(elWindow).find('.font-list').get(0);
if ( window.scrollParentToChild ) {
window.scrollParentToChild(font_list, active_font.get(0));
Comment on lines +96 to +98
} else {
active_font.get(0).scrollIntoView({ block: 'nearest' });
}
}
},
window_class: 'window-login',
Expand All @@ -118,4 +124,4 @@ async function UIWindowFontPicker (options) {
});
}

export default UIWindowFontPicker;
export default UIWindowFontPicker;
11 changes: 8 additions & 3 deletions src/puter-js/src/modules/UI.js
Original file line number Diff line number Diff line change
Expand Up @@ -854,16 +854,21 @@ class UI extends EventListener {
};

showFontPicker (options) {
const opts = typeof options === 'string' ? { defaultValue: options } : (options ?? {});
const defaultFont = opts.defaultValue || opts.defaultFont || opts.default || 'System UI';
const normalizedOptions = {
...opts,
defaultValue: defaultFont,
};

if ( this.messageTarget ) {
return new Promise((resolve) => {
this.#postMessageWithCallback('showFontPicker', resolve, { options: options ?? {} });
this.#postMessageWithCallback('showFontPicker', resolve, { options: normalizedOptions });
});
}
// Standalone fallback: render web component
return new Promise((resolve) => {
const opts = typeof options === 'string' ? { defaultFont: options } : (options ?? {});
const el = document.createElement('puter-font-picker');
const defaultFont = opts.defaultFont || opts.default || 'System UI';
el.setAttribute('default-font', defaultFont);
el.addEventListener('response', (e) => resolve(e.detail));
document.body.appendChild(el);
Expand Down
1 change: 1 addition & 0 deletions src/puter-js/types/modules/ui.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export interface ColorPickerOptions {

export interface FontPickerOptions {
defaultFont?: string;
defaultValue?: string;
}

export interface DirectoryPickerOptions {
Expand Down
Loading