working on the docs

frmlx · Apr 25, 2023 · d7d73bf · d7d73bf
1 parent 4529949
commit d7d73bf
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 11 deletions.
diff --git a/appdata/modules/FramelixDocs/public/dist/css/docs.min.css b/appdata/modules/FramelixDocs/public/dist/css/docs.min.css
@@ -1,11 +1,11 @@
 :root {
-  --accent-light: hsl(344, 100%, 20%);
-  --accent-heavy: hsl(344, 100%, 50%);
+  --accent-light: hsl(204, 100%, 20%);
+  --accent-heavy: hsl(204, 100%, 50%);
 }
 
 [data-color-scheme=dark] {
-  --accent-light: hsl(344, 100%, 90%);
-  --accent-heavy: hsl(344, 100%, 60%);
+  --accent-light: hsl(204, 100%, 90%);
+  --accent-heavy: hsl(204, 100%, 60%);
 }
 
 .framelix-content-inner .docs-page,
@@ -27,7 +27,7 @@
   display: block;
   content: "";
   height: 1px;
-  background: var(--color-page-bg-stencil);
+  background: var(--color-page-bg-stencil-weak);
 }
 .framelix-content-inner .docs-right-nav,
 .framelix-modal-inner .docs-right-nav {

diff --git a/appdata/modules/FramelixDocs/src/View/Features/Layout.php b/appdata/modules/FramelixDocs/src/View/Features/Layout.php
@@ -4,10 +4,15 @@
 
 use Framelix\Framelix\DateTime;
 use Framelix\Framelix\Network\JsCall;
+use Framelix\Framelix\Utils\HtmlUtils;
+use Framelix\Framelix\Utils\JsonUtils;
 use Framelix\FramelixDocs\Storable\SimpleDemoFile;
 use Framelix\FramelixDocs\View\Index;
 use Framelix\FramelixDocs\View\View;
 
+use function count;
+use function substr;
+
 class Layout extends View
 {
     protected string $pageTitle = 'Integrated responsive backend layout';
@@ -101,7 +106,7 @@ public function showContent(): void
         $demoFiles = SimpleDemoFile::getByCondition();
         $html = '';
         foreach ($demoFiles as $demoFile) {
-            $html .= '<h2>' . $demoFile->filename . '</h2>' . $demoFile->getImageTag();
+            $html .= '<h2>' . $demoFile->filename . "</h2>\n" . $demoFile->getImageTag() . "\n\n";
         }
 
         echo $this->getAnchoredTitle('images', 'Smart Images');
@@ -113,6 +118,35 @@ public function showContent(): void
         );
         $this->showHtmlExecutableSnippetsCodeBlock();
 
+        echo $this->getAnchoredTitle('icons', 'Icons (Microns)');
+
+        ?>
+        <p>
+            Framelix have a small icons font integrated, for the most commonly used icons.
+            It is small (7kb) compared to, for example, Material Icons (>150kb).
+            The icon set we use is called
+            <?= $this->getLinkToExternalPage('https://www.s-ings.com/projects/microns-icon-font/', 'Microns') ?> and is
+            also Open-Source. Thanks to the creator of this slick small icon set.<br/>
+        </p>
+        <p>
+            You can use that icons with our handy custom tag <code><?= HtmlUtils::escape(
+                    '<framelix-icon icon="CODE"></framelix-icon>'
+                ) ?></code>.
+        </p>
+
+            <?php
+            $icons = JsonUtils::readFromFile(__DIR__ . "/../../../../Framelix/node_modules/microns/icons.json");
+            echo '<p>Here are all icons (<b>' . count($icons) . '</b> in total)</p>';
+            echo '<div class="microns">';
+            foreach ($icons as $row) {
+                $code = substr($row['code'], 1);
+                echo '<div class="micron-card" title="Click to copy icon code (<b>' . $code . '</b>) for that icon  into clipboard" data-code="' .
+                    $code . '"><framelix-icon icon="' . $code . '"></framelix-icon></div>';
+            }
+            echo '</div>';
+            ?>
+        <?php
+
         echo $this->getAnchoredTitle('localtime', 'Local times in frontend');
         $this->addHtmlExecutableSnippet(
             'Time Tag',
@@ -122,6 +156,33 @@ public function showContent(): void
         );
         $this->showHtmlExecutableSnippetsCodeBlock();
         ?>
+        <style>
+          .microns {
+            gap: 5px;
+            display: flex;
+            flex-wrap: wrap;
+          }
+          .micron-card {
+            width: 30px;
+            height: 30px;
+            align-items: center;
+            justify-content: center;
+            display: flex;
+            cursor: pointer;
+            font-size: 1.3rem;
+          }
+          .micron-card:hover {
+            background: var(--color-page-bg-stencil-strong);
+          }
+        </style>
+        <script>
+          $(document).on('click', '.micron-card', function () {
+            navigator.clipboard.writeText($(this).attr('data-code')).then(function () {
+              FramelixToast.success('Text copied to clipboard')
+            }, function (err) {
+            })
+          })
+        </script>
         <?php
     }
 }
diff --git a/appdata/modules/FramelixDocs/vendor-frontend/scss/docs.scss b/appdata/modules/FramelixDocs/vendor-frontend/scss/docs.scss
@@ -1,11 +1,11 @@
 :root {
-  --accent-light: hsl(344, 100%, 20%);
-  --accent-heavy: hsl(344, 100%, 50%);
+  --accent-light: hsl(204, 100%, 20%);
+  --accent-heavy: hsl(204, 100%, 50%);
 }
 
 [data-color-scheme='dark'] {
-  --accent-light: hsl(344, 100%, 90%);
-  --accent-heavy: hsl(344, 100%, 60%);
+  --accent-light: hsl(204, 100%, 90%);
+  --accent-heavy: hsl(204, 100%, 60%);
 }
 
 .framelix-content-inner,
@@ -28,7 +28,7 @@
       display: block;
       content: "";
       height: 1px;
-      background: var(--color-page-bg-stencil);
+      background: var(--color-page-bg-stencil-weak);
     }
   }