website: improvements to the lab UI

2024-09-11 10:55:24 +03:00 · 2022-06-10 11:39:00 -07:00 · 2022-06-10 11:39:00 -07:00 · be8c71d7cb
commit be8c71d7cb
parent e28bcfe2fd
10 changed files with 101 additions and 86 deletions
--- a/docs/lab/icons/minimize-black.svg
+++ b/docs/lab/icons/minimize-black.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="2" fill="#000"/></svg>
--- a/docs/lab/icons/minimize.svg
+++ b/docs/lab/icons/minimize.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="2" fill="#fff"/></svg>
--- a/docs/lab/icons/popup-black.svg
+++ b/docs/lab/icons/popup-black.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 3.293l3.354 3.353-.707.708L8 4.707 5.354 7.354l-.708-.708L8 3.293zm0 8L5.354 8.646l-.708.708L8 12.707l3.354-3.353-.707-.708L8 11.293z" fill="#000"/></svg>
--- a/docs/lab/icons/popup.svg
+++ b/docs/lab/icons/popup.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 3.293l3.354 3.353-.707.708L8 4.707 5.354 7.354l-.708-.708L8 3.293zm0 8L5.354 8.646l-.708.708L8 12.707l3.354-3.353-.707-.708L8 11.293z" fill="#fff"/></svg>
--- a/docs/lab/icons/reset-black.svg
+++ b/docs/lab/icons/reset-black.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.993.893L6.95 2.817l1.272.187A6 6 0 112 9h1a5 5 0 105.928-4.914l-.005.032-.79-.116A5.078 5.078 0 008 4v-.018L6.684 3.79l2.214 2.908-.796.606-3.287-4.319L9.459.047l.534.846z" fill="#000"/></svg>
--- a/docs/lab/icons/reset.svg
+++ b/docs/lab/icons/reset.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.993.893L6.95 2.817l1.272.187A6 6 0 112 9h1a5 5 0 105.928-4.914l-.005.032-.79-.116A5.078 5.078 0 008 4v-.018L6.684 3.79l2.214 2.908-.796.606-3.287-4.319L9.459.047l.534.846z" fill="#fff"/></svg>
--- a/docs/lab/icons/settings-black.svg
+++ b/docs/lab/icons/settings-black.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H6V3h8v1zM4 4H2V3h2v1zm10 3H6V6h8v1zM4 7H2V6h2v1zm10 3H6V9h8v1zM4 10H2V9h2v1zm10 3H6v-1h8v1zM4 13H2v-1h2v1z" fill="#000"/></svg>
--- a/docs/lab/icons/settings.svg
+++ b/docs/lab/icons/settings.svg
@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 4H6V3h8v1zM4 4H2V3h2v1zm10 3H6V6h8v1zM4 7H2V6h2v1zm10 3H6V9h8v1zM4 10H2V9h2v1zm10 3H6v-1h8v1zM4 13H2v-1h2v1z" fill="#fff"/></svg>
--- a/docs/lab/index.html
+++ b/docs/lab/index.html
@ -32,14 +32,14 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    <link href="lab.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese">
  </head>
-  <body class="init-anim">
+  <body class="init-anim varfont">
    <div id="sidebar-button"></div>
    <div class="options">

      <div class="flex-x">
        <label title="Use variable font instead of static font files">
          <span>VF</span>
-          <input type="checkbox" name="varfont">
+          <input type="checkbox" name="varfont" checked>
        </label>
        <label class="italic-setting" title="Italic">
          <span>I</span>
@ -55,30 +55,31 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        </label>
      </div>

-      <label class="label-and-value">
+      <label class="label-and-value with-slider">
        <span>Size:</span>
-        <input type="range" value="22" step="1" min="4" max="128" name="_sizeRange">
-        <input type="number" value="22" step="1" min="4" max="1024" name="size">
+        <input type="number" value="22" step="1" min="6" max="1024" name="size">
+        <input type="range" value="22" step="1" min="6" max="256" name="_sizeRange">
        <!-- <note><span class="unit">dp</span></note> -->
      </label>

      <!-- Variable font controls (hidden when not using variable fonts) -->
-      <label class="label-and-value varfontControl">
-        <span title="Weight">wght:</span>
-        <input type="range" value="400" step="1" min="100" max="900" name="varWeight">
-        <input type="number" value="400" step="1" min="100" max="900" name="varWeightNum">
-      </label>

-      <label class="label-and-value varfontControl">
-        <span title="Slant">slnt:</span>
-        <input type="range" value="0" step="0.01" min="0" max="10" name="varSlant">
-        <input type="number" value="0" step="0.01" min="0" max="10" name="varSlantNum">
-      </label>
-
-      <label class="label-and-value varfontControl">
+      <label class="label-and-value with-slider varfontControl">
        <span title="Optical size">opsz:</span>
-        <input type="range" value="0" step="0.01" min="16" max="32" name="varOpsz">
-        <input type="number" value="0" step="0.01" min="16" max="32" name="varOpszNum">
+        <input type="number" value="0" step="1" min="14" max="32" name="varOpszNum">
+        <input type="range" value="0" step="0.01" min="14" max="32" name="varOpsz">
+      </label>
+
+      <label class="label-and-value with-slider varfontControl">
+        <span title="Weight">wght:</span>
+        <input type="number" value="400" step="1" min="100" max="900" name="varWeightNum">
+        <input type="range" value="400" step="1" min="100" max="900" name="varWeight">
+      </label>
+
+      <label class="label-and-value with-slider varfontControl">
+        <span title="Slant">slnt:</span>
+        <input type="number" value="0" step="0.1" min="0" max="10" name="varSlantNum">
+        <input type="range" value="0" step="0.01" min="0" max="10" name="varSlant">
      </label>

      <label class="label-and-value staticfontControl">
@ -378,7 +379,7 @@ class BoundVar {

  getValue(ev) {
    return this.valueGetter ? this.valueGetter(this.e, this.lastValue, ev)
-         : this.isCheckbox ? (this.e.checked || null)
+         : this.isCheckbox ? this.e.checked
         : this.isNumber ? this.e.valueAsNumber
         : this.e.value
  }
@ -500,7 +501,7 @@ class Vars {

  refreshValue(name) {
    let v = this.vars.get(name)
-    return v ? this._refreshValue(v) : null
+    return v === undefined || v === null ? null : this._refreshValue(v)
  }

  _refreshValue(v, ev) {
@ -593,7 +594,9 @@ class Vars {
      if (v.isNumber) {
        existingValue = parseFloat(existingValue)
      } else if (v.isCheckbox) {
-        existingValue = existingValue != '0' && existingValue != 'false' && existingValue != 'off'
+        existingValue = existingValue != '0' &&
+                        existingValue != 'false' &&
+                        existingValue != 'off'
      }
      v.setValue(existingValue)
    } else {
@ -873,7 +876,7 @@ function main() {
  let varState = {
    weight: 400, // 400..900
    slant: 0,    // 0..-10
-    opsz: 16,    // 16..32
+    opsz: 14,    // 14..32
  }

  function updateVarFont() {
@ -927,62 +930,59 @@ function main() {
    updateVarFont()
  })

-  let varWeightNum = vars.bind('varWeightNum', (e, v) => {
+  let varWeightNum = vars.bind('_wght', '[name="varWeightNum"]', (e, v) => {
    if (varWeightRange && !varWeightSettingValueImpl)
-      varWeightRange.setValue(v)
+      vars.setValue("wght", v)
  })

-  let varSlantNum = vars.bind('varSlantNum', (e, v) => {
+  let varSlantNum = vars.bind('_slnt', '[name="varSlantNum"]', (e, v) => {
    if (varSlantRange && !varSlantSettingValueImpl)
-      varSlantRange.setValue(v)
+      vars.setValue("slnt", v)
  })

-  let varOpszNum = vars.bind('varOpszNum', (e, v) => {
+  let varOpszNum = vars.bind('_opsz', '[name="varOpszNum"]', (e, v) => {
    if (varOpszRange && !varOpszSettingValueImpl)
-      varOpszRange.setValue(v)
+      vars.setValue("opsz", v)
  })

-  varWeightRange = vars.bind('varWeight', (e, v) => {
+  function snapValue(v, factor) {
+    if (shiftKeyPressed && (keyPressed == "" || keyPressed == "Shift"))
+      v = Math.round(v / factor) * factor
+    return v
+  }
+
+  varWeightRange = vars.bind('wght', '[name="varWeight"]', (e, v) => {
    varState.weight = v
    varWeightSettingValueImpl = true
    varWeightNum.setValue(v)
    varWeightSettingValueImpl = false
    updateVarFont()
  }, (e, prevValue, ev) => {
-    if (prevValue === undefined) {
+    if (prevValue === undefined)
      return 400
-    }
-    v = e.valueAsNumber
-    if (shiftKeyPressed && (keyPressed == "" || keyPressed == "Shift")) {
-      v = Math.round(v / 100) * 100
-    }
-    return v
+    return snapValue(e.valueAsNumber, 100)
  })

-  varSlantRange = vars.bind('varSlant', (e, v) => {
+  varSlantRange = vars.bind('slnt', '[name="varSlant"]', (e, v) => {
    varState.slant = v
    varSlantSettingValueImpl = true
    varSlantNum.setValue(v)
    varSlantSettingValueImpl = false
    updateVarFont()
  }, (e, prevValue, ev) => {
-    if (prevValue === undefined) {
+    if (prevValue === undefined)
      return 0
-    }
-    return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
+    return snapValue(e.valueAsNumber, 1)
  })

-  varOpszRange = vars.bind('varOpsz', (e, v) => {
+  varOpszRange = vars.bind('opsz', '[name="varOpsz"]', (e, v) => {
    varState.opsz = v
    varOpszSettingValueImpl = true
    varOpszNum.setValue(v)
    varOpszSettingValueImpl = false
    updateVarFont()
  }, (e, prevValue, ev) => {
-    if (prevValue === undefined) {
-      return 0
-    }
-    return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value
+    return snapValue(e.valueAsNumber, 1)
  })


--- a/docs/lab/lab.css
+++ b/docs/lab/lab.css
@ -82,10 +82,10 @@
  --highlight-bg: #ddd;
  --guide-color: rgba(255,0,255,0.15);

-  --icon-minimize: url(../res/icons/minimize-black.svg);
-  --icon-popup: url(../res/icons/popup-black.svg);
-  --icon-reset: url(../res/icons/reset-black.svg);
-  --icon-settings: url(../res/icons/settings-black.svg);
+  --icon-minimize: url(icons/minimize-black.svg);
+  --icon-popup: url(icons/popup-black.svg);
+  --icon-reset: url(icons/reset-black.svg);
+  --icon-settings: url(icons/settings-black.svg);
 }

 :root.color-scheme-dark {
@ -116,10 +116,10 @@
  --highlight-bg: #333;
  --guide-color: rgba(255,100,255,0.15);

-  --icon-minimize: url(../res/icons/minimize.svg);
-  --icon-popup: url(../res/icons/popup.svg);
-  --icon-reset: url(../res/icons/reset.svg);
-  --icon-settings: url(../res/icons/settings.svg);
+  --icon-minimize: url(icons/minimize.svg);
+  --icon-popup: url(icons/popup.svg);
+  --icon-reset: url(icons/reset.svg);
+  --icon-settings: url(icons/settings.svg);
 }

 /* document ———————————————————————————————————————————————————————————————————————————— */
@ -129,7 +129,7 @@ body {
  --fgColorMax: var(--fgColor);
  background-color: var(--bgColor);
  color: var(--fgColor);
-  font: 11px var(--font-family), sans-serif;
+  font: 11px var(--font-family),-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400; /*300=light, 400=regular, 500=medium, 600=semibold*/
  transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
  transition-property: color, background;
@ -175,6 +175,10 @@ label {
  margin: 2px 0;
 }

+input[type="number"], input[type="text"] {
+  font: inherit;
+}
+
 input[type="number"] {
  width:50px;
  background: none;
@ -183,6 +187,8 @@ input[type="number"] {
  padding: 4px;
  border-radius: 2px;
  background: var(--input-color-bg);
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
 }

 select {
@ -200,7 +206,9 @@ select {
  background-position: right center;
 }
 /* fix for Firefox issue:; */
-select option { font-family:var(--font-family),Inter; }
+select option {
+  font-family:var(--font-family),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
+}

 input[type="number"]:focus,
 input[type="text"]:focus,
@ -444,7 +452,7 @@ body.sidebar-minimized #sidebar-button {
  background: var(--bgColor);
  padding: 16px 24px 24px 24px;
  user-select:none; -moz-user-select: none; -webkit-user-select:none;
-  font-family: var(--font-family), sans-serif;
+  font-family: var(--font-family),-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  overflow: auto;
  letter-spacing:0.012em;
  transform-origin:100% 0%;
@ -492,9 +500,6 @@ body.sidebar-minimized .options {
    overflow: hidden;
    text-overflow: ellipsis;
  }
-  /*.options select[name="sample"] {
-    width:225px;
-  }*/
  .options input::placeholder {
    color: var(--fgColor);
    opacity: 0.4;
@ -504,10 +509,11 @@ body.sidebar-minimized .options {
  }
  .options .label-and-value {
    display: flex;
-    flex-wrap: nowrap;
+    /*flex-wrap: nowrap;*/
+    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
-    height: var(--fieldHeight);
+    min-height: var(--fieldHeight);
  }
  .options .label-and-value > *:first-child {
    flex: 0 0 auto;
@ -515,18 +521,26 @@ body.sidebar-minimized .options {
    text-align: left;
    margin-right:6px;
  }
+  .options .label-and-value select {
+    width:90px;
+  }
  .options .label-and-value input {
    width: 50px;
    max-height: var(--fieldHeight);
    box-sizing: border-box;
  }
+  .options .label-and-value.with-slider input[type="number"] {
+    width: auto;
+    flex: 1 1 auto;
+    border: none;
+    padding: 2px;
+    margin-left: -2px;
+    background: transparent;
+  }
  .options label input[type="checkbox"] + * {
    display: inline-block;
    min-width:50%;
  }
-  /*.options label input[type="checkbox"] + *:hover {
-    color: var(--fgColorMax);
-  }*/
  .options label.rasterizePhrase {
    margin-left:20px;
    margin-bottom:20px;
@ -542,46 +556,39 @@ body.sidebar-minimized .options {
  .options input[type="checkbox"] + * {
    user-select: none; -moz-user-select: none; -webkit-user-select:none;
  }
+  .options .label-and-value.with-slider {
+    display: flex;
+    height: calc(var(--fieldHeight) * 2);
+    margin-bottom: var(--rowBottomMargin);
+  }
  .options .varfontControl,
  .options .staticfontControl {
    transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
    transition-property: opacity, height, margin;
  }
-  .options .varfontControl,
+  .options .label-and-value.with-slider.varfontControl,
  body.varfont .options .staticfontControl {
+    display: block;
    pointer-events:none;
    overflow: hidden;
-    opacity:0;
+    opacity: 0;
    height: 0;
+    min-height: 0;
    margin: 0;
  }
-  body.varfont .options .varfontControl {
+  body.varfont .options .label-and-value.with-slider.varfontControl {
+    display: flex;
    overflow: visible;
    pointer-events:all;
    opacity:1;
-    height: var(--fieldHeight);
+    height: calc(var(--fieldHeight) * 2);
    margin-bottom: var(--rowBottomMargin);
  }
-  /*body.varfont .options .staticfontControl {
-    display: none;
-  }*/
-  .options .varfontControl .label-and-value {
-    display: flex;
-  }
-  /*body.varfont .options select[name="weight"] {
-    pointer-events: none;
-    opacity: 0.4;
-  }*/
  .options input[type="range"] {
    flex: 1 1 auto;
  }
-  .options input[type="range"] + input[type="number"] {
-    flex: 0 1 auto;
-    width: 40px;
-    border: none;
-    padding: 2px;
-    margin-left: 4px;
-    background: transparent;
+  .options input[type="number"] + input[type="range"] {
+    flex: 0 0 100%;
  }
  .options .label-and-value input + note,
  .options .label-and-value select + note {
				`@ -0,0 +1 @@`
				`<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="2" fill="#000"/></svg>`