Doc update

app/js/editors/inspectors/glyph-iitem.js

@@ -274,6 +274,7 @@ class GlyphVariantInspectorItem extends base {
                 static: true,
                 content: mkfWidgets.GlyphPreview
             });
+            this._popoutPreview.content.classList.add(`floating`);
             this._popoutPreview.content.data = this._data;
             this._popoutPreview.content.glyphInfos = this._glyphInfos;
             this._UpdatePreviewLayer();

app/js/editors/inspectors/glyph-list-inspector.js

@@ -157,7 +157,7 @@ class GlyphListInspector extends base {
                     },
                 ]
             },
-            [                
+            [
                 { cl: mkfWidgets.LayersViewSilent, member: `_layersView`, css: `foldout-item` },
             ]
         );
@@ -286,7 +286,9 @@ class GlyphListInspector extends base {
 
     _UpdatePreviews() {
         this._groupPreview.data = this._data ? this._data.analytics.existing : null;
-        //Would need to update popout there, too
+        if (this._popoutPreview) {
+            this._popoutPreview.content.data = this._data ? this._data.analytics.existing : null;
+        }
     }
 
     _OnGlyphBumped(p_data, p_infos) { this._UpdatePreviews(); }
@@ -343,6 +345,7 @@ class GlyphListInspector extends base {
                 content: mkfWidgets.GlyphPreviewGroup
             });
 
+            this._popoutPreview.content.classList.add(`floating`);
             this._popoutPreview.content.data = this._data ? this._data.analytics.existing : null;
             //this._popoutPreview.content.glyphInfos = atop ? atop.glyph.unicodeInfos : null;
             //this._UpdatePreviewLayer();

app/js/widgets/glyph-preview-group.js

@@ -32,13 +32,20 @@ class GlyphPreviewGroup extends base {
             ':host': {
                 '@': ['fade-in'],
                 'position': 'relative',
-                'grid-gap': `10px`,
+                'width': '320px',
+                'grid-gap': `5px`,
                 'display': 'grid',
                 'grid-template-columns': 'auto auto',
                 'grid-template-rows': 'auto auto',
                 'justify-content': `center`,
                 'align-content': `space-between`, //center
             },
+            ':host(.floating)':{
+                'margin': `5px`,
+            },
+            ':host(.floating) .box':{
+                'border-radius': '3px',
+            },
             '.box': {
                 'position': 'relative',
                 'display': 'flex',
@@ -118,6 +125,7 @@ class GlyphPreviewGroup extends base {
 
     _CleanUp() {
         this.glyphLayer = null;
+        this.classList.remove(`floating`);
         super._CleanUp();
     }
 

app/js/widgets/glyph-preview.js

@@ -40,6 +40,10 @@ class GlyphPreview extends base {
                 'background-color': 'rgba(0,0,0,0.5)',
                 'border-radius': '5px',
             },
+            ':host(.floating)':{
+                'margin': `5px`,
+                'border-radius': '3px',
+            },
             ':host(:not(.null-glyph)) .placeholder, :host(.null-glyph) .renderer': { 'display': 'none' },
             '.renderer': {
                 'position': 'relative',
@@ -138,6 +142,7 @@ class GlyphPreview extends base {
 
     _CleanUp(){
         this.glyphLayer = null;
+        this.classList.remove(`floating`);
         super._CleanUp();
     }
 

docs/404.html

@@ -10,7 +10,7 @@
 <li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/assets-prep.html" class="nav-list-link">Asset preparation</a></li>
 <li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/font-regular.html" class="nav-list-link">Simple font</a></li>
 <li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/font-icon.html" class="nav-list-link">Simple icon font</a></li>
-<li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/font-icon-complex.html" class="nav-list-link">Complex icon font</a></li>
+<li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/font-icon-complex.html" class="nav-list-link">Composite icon font</a></li>
 <li class="nav-list-item ">
 <a href="#" class="nav-list-expander"><svg viewbox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="https://nebukam.github.io/mkfont/guides/third-party/" class="nav-list-link">Third parties</a><ul class="nav-list">
 <li class="nav-list-item "> <a href="https://nebukam.github.io/mkfont/guides/third-party/illustrator.html" class="nav-list-link">Adobe© Illustrator</a> </li>

docs/_sources/docs/views/foldout-components.md

@@ -23,7 +23,7 @@ nav_order: 8
 
 >Generally speaking, components are kindda like layers, or Adobe© Illustrator Symbols, or Prefab in Unity : they can turn any existing glyph into a re-usable asset that self-updates  whenever modified.  
 >  
->They can be used for many many things : easily make and maintained composite letters with modifiers such as `é`, `à` etc; but the logic also applies to creating flexible icon libraries. Check out the {% include lk id='Complex icon font' %} guide to get a grasp on the possibilities.
+>They can be used for many many things : easily make and maintained composite letters with modifiers such as `é`, `à` etc; but the logic also applies to creating flexible icon libraries. Check out the {% include lk id='Composite icon font' %} guide to get a grasp on the possibilities.
 {: .infos}
 
 Using component is rather straightforward, yet there is a few not-so-obvious subtleties that make them really flexible.  

docs/_sources/guides/font-icon-complex.md

@@ -1,10 +1,10 @@
 ---
 layout: page
 parent: Guides
-title: Complex icon font
+title: Composite icon font
 subtitle: How to make an icon font
 summary: A font with complex component interactions.
-splash: icons/icon_checkbox-radio.svg
+splash: icons/icon_component.svg
 preview_img: placeholder.jpg
 color: white
 nav_order: 3
@@ -242,6 +242,35 @@ What we want to do now is rebuild our initial icons using the re-usable pieces w
 
 ### Start with the easy ones
 
+{% include img a='guides/cfont/comp-hl-arr-1.png' %} 
+
+We're going to start with the obvious, easy ones : arrows with basic transformations.
+
+{% include webm a='guides/cfont/add-c-arrow-big.webm' %} 
+
+#### What's going on here :
+{: .no_toc}
+- First, we'll turn the search ON, and look for ligatures with `arr-big` in their names. *These will be the 8 arrows icon pointing at cardinal directions.*
+- We then select the 8 glyphs in the viewport.
+- With the group selection active *(which, since everything is empty, doesn't look like much)*, we move to the {% include lk id='Glyph components' %} and open the glyph picker ({% include btn ico="component-new" %}).
+- From there, we select which glyphs we want to create components from : there's just one in our case.
+- Confirm the component creation with {% include btn ico="new" label="Add selected" %}.
+- Change the boundary mode of the component so it fits the component itself -- this way it's perfectly centered
+- Up the scale a bit, since the initial arrow felt a bit too small. We can change it later anyway.
+
+Then, we will individually edit each component to give it the right orientation.
+
+{% include img a='guides/cfont/comp-arrow-orient.png' %} 
+
+We do so by selecting each ligature individually, and edit the `Rotation` value in the {% include lk id='Glyph component' a='#advanced-properties' %}'s Advanced properties. And that's it, we're all set with the first batch of big arrows.  
+
+Rince & repeat for the other arrows
+
+---
+
+>## WORK IN PROGRESS.
+>Come back later (～￣▽￣)～ 
+{: .error}
 
 ---
 

docs/_sources/guides/font-icon.md

@@ -21,4 +21,8 @@ This guide is about creating a simple icon font using MkFont from scratch. It on
 {: .fs-6 .fw-300 }
 
 #### Credits
-This example is using [Kenney's Game Icons](https://www.kenney.nl/assets/game-icons), which you will find packaged along with this guide' files, downloadable [here](https://nebukam.github.io/mkfont/assets/guides/simple-icon-font.zip).
+This example is using [Kenney's Game Icons](https://www.kenney.nl/assets/game-icons), which you will find packaged along with this guide' files, downloadable [here](https://nebukam.github.io/mkfont/assets/guides/simple-icon-font.zip).
+
+>## WORK IN PROGRESS.
+>Come back later (～￣▽￣)～ 
+{: .error}

docs/_sources/guides/font-regular.md

@@ -20,4 +20,8 @@ nav_order: 2
 This guide is about creating a font using MkFont from scratch. It only assumes that you have some assets to work with, and that you are using Adobe© Illustrator, because that's what you'll see in the screenshots -- but any SVG editor will work. 
 {: .fs-6 .fw-300 }
 
-You can find all the assets used in this example in the following package.
+You can find all the assets used in this example in the following package.
+
+>## WORK IN PROGRESS.
+>Come back later (～￣▽￣)～ 
+{: .error}

docs/_sources/guides/tips-and-tricks.md

@@ -25,7 +25,7 @@ What I tend to do is keep sets of glyphs in separate .mkfont files that I use as
 
 Since components work by importing existing glyphs, it comes in handy to create ligatures with human-readable names *(like you would with layers in a tidy photoshop document)*, set them to not be exported along with the font, and voila, you got yourself a component library!
 
-> This is especially useful when working with complex icon sets, or when naming artboards as Unicode value isn't an option. The {% include lk id='Complex icon font' %} guide is a good demonstration of that.
+> This is especially useful when working with complex icon sets, or when naming artboards as Unicode value isn't an option. The {% include lk id='Composite icon font' %} guide is a good demonstration of that.
 {: .infos}
 
 ---

docs/about/index.html

@@ -10,7 +10,7 @@
 <li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/assets-prep.html" class="nav-list-link">Asset preparation</a></li>
 <li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/font-regular.html" class="nav-list-link">Simple font</a></li>
 <li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/font-icon.html" class="nav-list-link">Simple icon font</a></li>
-<li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/font-icon-complex.html" class="nav-list-link">Complex icon font</a></li>
+<li class="nav-list-item "><a href="https://nebukam.github.io/mkfont/guides/font-icon-complex.html" class="nav-list-link">Composite icon font</a></li>
 <li class="nav-list-item ">
 <a href="#" class="nav-list-expander"><svg viewbox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="https://nebukam.github.io/mkfont/guides/third-party/" class="nav-list-link">Third parties</a><ul class="nav-list">
 <li class="nav-list-item "> <a href="https://nebukam.github.io/mkfont/guides/third-party/illustrator.html" class="nav-list-link">Adobe© Illustrator</a> </li>