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

Jump to bottom

Improve UI font sources panel #1739

Merged
merged 20 commits into from
Oct 24, 2024
Merged

Improve UI font sources panel #1739

Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
dcd11bf
toggle all via altKey + unfolded cards by default
ollimeier Oct 17, 2024
c5e2651
Make a new compact card design if folded
ollimeier Oct 17, 2024
f0cf35c
Refactoring code
ollimeier Oct 22, 2024
4f51636
get formatted location string for one-liner
ollimeier Oct 22, 2024
55d5792
Refactor and format oneliner
ollimeier Oct 22, 2024
2bfad00
Make the menu of font info and application settings sticky to the top…
ollimeier Oct 22, 2024
1c03ac0
Change color of default axis string for sources oneliner
ollimeier Oct 22, 2024
74267c5
Revert "Make the menu of font info and application settings sticky to…
ollimeier Oct 23, 2024
3db9945
Fix issue with folded cards we found yesterday within cross-axis mapp…
ollimeier Oct 24, 2024
63fb940
Reset value without reloading the whole UI.
ollimeier Oct 24, 2024
0a3e839
Round axis value to two digits for better UI of oneliner
ollimeier Oct 24, 2024
889f41b
Store isClosed information and use it when calling setupUI()
ollimeier Oct 24, 2024
c80c117
Update src/fontra/views/fontinfo/panel-sources.js
ollimeier Oct 24, 2024
392af88
Add gap after name of oneliner via css and remove space
ollimeier Oct 24, 2024
6373e72
Refactor onelinerElement.lastChild
ollimeier Oct 24, 2024
4abfcf3
Update src/fontra/views/fontinfo/panel-sources.js
ollimeier Oct 24, 2024
d606a4b
better css class name + make the gap between name and location bigger
ollimeier Oct 24, 2024
88cd08a
Update src/fontra/views/fontinfo/panel-sources.js
ollimeier Oct 24, 2024
c0587fd
use .isClosed instead of ["isClosed"]
ollimeier Oct 24, 2024
c5149e4
swap .not-default to axis-is-at-default and the dependencies + adjust…
ollimeier Oct 24, 2024
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
114 changes: 100 additions & 14 deletions src/fontra/views/fontinfo/panel-sources.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
labeledTextInput,
textInput,
} from "../core/ui-utils.js";
import { round } from "../core/utils.js";
import { enumerate, round } from "../core/utils.js";
import { BaseInfoPanel } from "./panel-base.js";
import {
locationToString,
Expand All @@ -20,6 +20,8 @@ import "/web-components/add-remove-buttons.js";
import "/web-components/designspace-location.js";
import { dialogSetup, message } from "/web-components/modal-dialog.js";

const cardsInfos = {};

export class SourcesPanel extends BaseInfoPanel {
static title = "sources.title";
static id = "sources-panel";
Expand Down Expand Up @@ -51,6 +53,9 @@ export class SourcesPanel extends BaseInfoPanel {
sources,
this.fontAxesSourceSpace
)) {
if (!cardsInfos[identifier]) {
cardsInfos[identifier] = {};
}
container.appendChild(
new SourceBox(
this.fontAxesSourceSpace,
Expand Down Expand Up @@ -291,9 +296,11 @@ addStyleSheet(`
overflow: scroll;
}

fontra-ui-font-info-sources-panel-source-box.min-height,
.fontra-ui-font-info-sources-panel-header.min-height,
.fontra-ui-font-info-sources-panel-source-box.min-height,
.fontra-ui-font-info-sources-panel-column.min-height {
height: 45px;
height: 0;
display: none;
}

.fontra-ui-font-info-sources-panel-line-metrics-hor {
Expand All @@ -319,6 +326,27 @@ fontra-ui-font-info-sources-panel-source-box.min-height,
transform: rotate(180deg);
}

.fontra-ui-font-info-sources-panel-oneliner > .source-name {
color: var(--foreground-color);
font-weight: bold;
margin-right: 1em;
}

.fontra-ui-font-info-sources-panel-oneliner > .not-default {
color: var(--foreground-color);
}

.fontra-ui-font-info-sources-panel-oneliner {
color: #888;
display: none;
}

.fontra-ui-font-info-sources-panel-oneliner.min-height {
display: block;
align-content: center;
grid-column-start: span 3;
}

`);

class SourceBox extends HTMLElement {
Expand Down Expand Up @@ -400,7 +428,6 @@ class SourceBox extends HTMLElement {

if (errorMessage) {
message(`Can’t edit font source`, errorMessage);
this.setupUI();
return false;
}
return true;
Expand Down Expand Up @@ -428,13 +455,62 @@ class SourceBox extends HTMLElement {
}
}

toggleShowHide() {
const element = this.querySelector("#open-close-icon");
element.classList.toggle("item-closed");
toggleShowHide(altKey) {
const cardElements = !altKey
? [this]
: document.querySelectorAll(".fontra-ui-font-info-sources-panel-source-box");

const thisIconElement = this.querySelector("#open-close-icon");
const isClosed = thisIconElement.classList.contains("item-closed");

for (const cardElement of cardElements) {
const elementIcon = cardElement.querySelector("#open-close-icon");
if (isClosed) {
cardsInfos[cardElement.sourceIdentifier].isClosed = false;
cardElement.classList.remove("item-closed");
elementIcon.classList.remove("item-closed");
for (const child of cardElement.children) {
child.classList.remove("min-height");
}
} else {
cardsInfos[cardElement.sourceIdentifier].isClosed = true;
cardElement.classList.add("item-closed");
elementIcon.classList.add("item-closed");
for (const child of cardElement.children) {
child.classList.add("min-height");
}
}
}
}

getOneliner() {
const onelinerElement = html.div({
class: "fontra-ui-font-info-sources-panel-oneliner",
});
onelinerElement.appendChild(
html.span({ class: "source-name" }, [this.source.name])
);

for (const [i, axis] of enumerate(this.fontAxesSourceSpace)) {
if (i > 0) {
onelinerElement.append(", ");
}
const axisElement = document.createElement("span");
const sourceLocationValue = round(
this.source.location.hasOwnProperty(axis.name)
? this.source.location[axis.name]
: axis.defaultValue,
2
);
axisElement.innerText = `${axis.name}=${sourceLocationValue}`;

for (const child of this.children) {
child.classList.toggle("min-height");
if (axis.defaultValue != sourceLocationValue) {
ollimeier marked this conversation as resolved.
Show resolved Hide resolved
axisElement.classList.add("not-default");
}
onelinerElement.appendChild(axisElement);
}

return onelinerElement;
}

_updateContents() {
Expand All @@ -449,6 +525,7 @@ class SourceBox extends HTMLElement {
this.controllers.general.addListener((event) => {
if (event.key == "name") {
if (!this.checkSourceEntry("name", undefined, event.newValue.trim())) {
this.controllers.general.model.name = this.source.name;
return;
}
}
Expand All @@ -463,6 +540,7 @@ class SourceBox extends HTMLElement {

this.controllers.location.addListener((event) => {
if (!this.checkSourceLocation(event.key, event.newValue)) {
this.controllers.location.model[event.key] = this.source.location[event.key];
return;
}
this.editSource((source) => {
Expand All @@ -483,14 +561,17 @@ class SourceBox extends HTMLElement {
this.innerHTML = "";
this.append(
html.createDomElement("icon-button", {
class: "fontra-ui-font-info-sources-panel-icon open-close-icon item-closed",
class: "fontra-ui-font-info-sources-panel-icon open-close-icon",
id: "open-close-icon",
src: "/tabler-icons/chevron-up.svg",
open: false,
onclick: (event) => this.toggleShowHide(),
onclick: (event) => this.toggleShowHide(event.altKey),
})
);

// This is the oneliner for the folded card –> only visible when folded.
this.append(this.getOneliner());

for (const key in models) {
this.append(
html.div({ class: "fontra-ui-font-info-sources-panel-header" }, [
Expand Down Expand Up @@ -518,6 +599,11 @@ class SourceBox extends HTMLElement {
this.append(
buildElementLineMetricsHor(this.controllers.lineMetricsHorizontalLayout)
);

const isClosed = !!cardsInfos[this.sourceIdentifier].isClosed;
if (isClosed) {
this.toggleShowHide(false);
}
}
}

Expand Down Expand Up @@ -545,7 +631,7 @@ function buildElement(controller) {
}

return html.div(
{ class: "fontra-ui-font-info-sources-panel-column min-height" },
{ class: "fontra-ui-font-info-sources-panel-column" },
items
.map(([labelName, keyName, value]) => {
if (typeof value === "boolean") {
Expand All @@ -572,7 +658,7 @@ function buildElementLineMetricsHor(controller) {
return html.div(
{
class:
"fontra-ui-font-info-sources-panel-column min-height fontra-ui-font-info-sources-panel-line-metrics-hor",
"fontra-ui-font-info-sources-panel-column fontra-ui-font-info-sources-panel-line-metrics-hor",
},
items
.map(([labelName, keyName]) => {
Expand All @@ -588,7 +674,7 @@ function buildElementLineMetricsHor(controller) {
function buildElementLocations(controller, fontAxes) {
const locationElement = html.createDomElement("designspace-location", {
continuous: false,
class: `fontra-ui-font-info-sources-panel-column min-height`,
class: `fontra-ui-font-info-sources-panel-column`,
});
locationElement.axes = fontAxes;
locationElement.controller = controller;
Expand Down