Add simple icons list page

area17 · Jul 6, 2020 · 948985e · 948985e
1 parent e8dd269
commit 948985e
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 7 deletions.
diff --git a/config/twill.php b/config/twill.php
@@ -160,7 +160,12 @@
     'vendor_path' => 'vendor/area17/twill',
     'custom_components_resource_path' => 'assets/js/components',
     'build_timeout' => 300,
-
+    'internal_icons' => [
+        'content-editor.svg',
+        'close_modal.svg',
+        'edit_large.svg',
+        'google-sign-in.svg',
+    ],
     /*
     |--------------------------------------------------------------------------
     | Twill app locale

diff --git a/routes/admin.php b/routes/admin.php
@@ -1,7 +1,7 @@
 <?php
 
-use Illuminate\Support\Facades\Route;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Route;
 
 if (config('twill.enabled.users-management')) {
     Route::module('users', ['except' => ['sort', 'feature']]);
@@ -41,7 +41,7 @@
     })->toArray();
 
     foreach ($bucketsRoutes as $bucketSectionKey => $routePrefix) {
-        Route::group(['prefix' => str_replace(".","/",$routePrefix), 'as' => $routePrefix . '.'], function () use ($bucketSectionKey) {
+        Route::group(['prefix' => str_replace(".", "/", $routePrefix), 'as' => $routePrefix . '.'], function () use ($bucketSectionKey) {
             Route::get($bucketSectionKey, ['as' => $bucketSectionKey, 'uses' => 'FeaturedController@index']);
             Route::group(['prefix' => $bucketSectionKey, 'as' => $bucketSectionKey . '.'], function () {
                 Route::post('save', ['as' => 'save', 'uses' => 'FeaturedController@save']);
@@ -64,4 +64,5 @@
     Route::name('search')->get('search', 'DashboardController@search');
 }
 
+Route::name('icons.index')->get('/admin/icons', 'IconsController@index');
 Route::name('icons.show')->get('/admin/icons/{file}', 'IconsController@show');
diff --git a/src/Commands/ListIcons.php b/src/Commands/ListIcons.php
@@ -2,10 +2,10 @@
 
 namespace A17\Twill\Commands;
 
-use Illuminate\Support\Str;
-use Illuminate\Support\Collection;
-use Illuminate\Filesystem\Filesystem;
 use Illuminate\Config\Repository as Config;
+use Illuminate\Filesystem\Filesystem;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Str;
 use Symfony\Component\Finder\SplFileInfo;
 
 class ListIcons extends Command
@@ -55,6 +55,10 @@ private function isAllowed($icon)
             );
         }
 
+        if (in_array($icon['name'] . '.svg', config('twill.internal_icons'))) {
+            return false;
+        }
+
         return true;
     }
 
@@ -97,6 +101,7 @@ public function handle()
         });
 
         $this->table(['Icon', 'Preview URL'], $icons->toArray());
+        $this->info("All icons viewable at: " . route('admin.icons.index'));
 
         return parent::handle();
     }

diff --git a/src/Http/Controllers/Admin/IconsController.php b/src/Http/Controllers/Admin/IconsController.php
@@ -4,6 +4,9 @@
 
 use A17\Twill\Services\Blocks\BlockMaker;
 use Illuminate\Filesystem\Filesystem;
+use Illuminate\Support\Collection;
+use Str;
+use Symfony\Component\Finder\SplFileInfo;
 
 class IconsController extends Controller
 {
@@ -13,6 +16,36 @@ public function __construct(Filesystem $files, BlockMaker $blockMaker)
         $this->blockMaker = $blockMaker;
     }
 
+    public function index()
+    {
+        $icons = collect(
+            config('twill.block_editor.directories.source.icons')
+        )->reduce(function (Collection $keep, $path) {
+            if (!$this->files->exists($path)) {
+                return $keep;
+            }
+
+            $files = collect($this->files->files($path))->map(function (
+                SplFileInfo $file
+            ) {
+                if (in_array($file->getFilename(), config('twill.internal_icons'))) {
+                    return null;
+                }
+
+                return [
+                    'name' => Str::before($file->getFilename(), '.svg'),
+                    'url' => route('admin.icons.show', [
+                        'file' => $file->getFilename(),
+                    ]),
+                ];
+            })->filter();
+
+            return $keep->merge($files);
+        }, collect());
+
+        return view('twill::blocks.icons', compact('icons'));
+    }
+
     public function show($file)
     {
         $file = $this->blockMaker->getIconFile($file, false);
@@ -23,6 +56,7 @@ public function show($file)
 
         return response()->stream(function () use ($file) {
             echo $this->files->get($file);
-        });
+        }, 200, ["Content-Type" => "image/svg+xml"]);
+
     }
 }
diff --git a/views/blocks/icons.blade.php b/views/blocks/icons.blade.php
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Twill icons</title>
+</head>
+<style>
+    body {
+      margin: 0 auto;
+      font-family: system-ui;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      grid-auto-rows: minmax(150px, auto);
+      grid-gap: 10px;
+      background-color: #eee;
+    }
+
+    .icon {
+      background: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 150px;
+    }
+
+    .icon__inner {
+        display:flex;
+        flex-direction:column;
+    }
+
+    .icon__inner img {
+        padding-bottom: 20px;
+        height: 16px;
+    }
+</style>
+<body>
+    <div class="grid">
+        @foreach($icons as $icon)
+            <div class="icon">
+                <div class="icon__inner">
+                    <img src="{{ $icon['url'] }}" />
+                    <span>{{ $icon['name'] }}</span>
+                </div>
+            </div>
+        @endforeach
+    </div>
+</body>
+</html>