Icon properties: show "import { mdiAccount } from '@mdi/js';" version…

… too
Pictogrammers · Sep 27, 2019 · 1cb37b9 · 1cb37b9
1 parent e5c2159
commit 1cb37b9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/css/style.scss b/src/css/style.scss
@@ -53,7 +53,7 @@ body {
     color: $color-text-dark;
 
     cursor: default;
-    -webkit-user-select: none;
+    user-select: none;
 }
 
 * {
@@ -215,7 +215,7 @@ header.header {
         text-align: center;
         font-size: 19px;
         cursor: default;
-        -webkit-user-select: none;
+        user-select: none;
         opacity: 0.6;
 
         i {
@@ -310,16 +310,19 @@ header.header {
     align-items: center;
     border-radius: 10px 10px 0 0;
 
+    $icon-size: 56px;
+    $icon-margin-l: 5px;
+    $icon-margin-r: 20px;
+
     .icon-icon {
-        $icon-size: 1.6em;
         width: $icon-size;
         height: $icon-size;
         flex-shrink: 0;
         text-align: center;
         color: $icons-color-hover;
         line-height: $icon-size;
         font-size: 35px;
-        margin: 5px 20px 5px 5px;
+        margin: 5px $icon-margin-r 5px $icon-margin-l;
         border-radius: 50%;
         transition-duration: $timing-short;
     }
@@ -330,12 +333,13 @@ header.header {
 
     .properties {
         flex-grow: 1;
+        width: calc(100% - #{$icon-size + $icon-margin-l + $icon-margin-r});
 
         .icon-name {
             font-size: 20px;
             margin-top: 5px;
         }
-        .icon-class {
+        .icon-usage {
             display: block;
             font-family: monospace;
             white-space: pre;
@@ -353,8 +357,8 @@ header.header {
             @extend .elevation-negative;
         }
 
-        .icon-name, .icon-class {
-            -webkit-user-select: text;
+        .icon-name, .icon-usage {
+            user-select: text;
         }
 
         .icon-more {
@@ -363,7 +367,7 @@ header.header {
             margin-bottom: 8px;
 
             .icon-codepoint, .icon-version, .icon-author {
-                -webkit-user-select: text;
+                user-select: text;
             }
         }
     }

diff --git a/src/js/vue/IconsPicker.vue b/src/js/vue/IconsPicker.vue
@@ -141,7 +141,15 @@
                         </overflow-menu>
 
                         <div class="icon-name">{{ activeIcon && activeIcon.name }}</div>
-                        <div class="icon-class">{{ activeIcon && activeIcon.class }}</div>
+                        <div class="icon-usage">{{ activeIcon && activeIcon.class }}</div>
+                        <div class="icon-usage">
+                            <span style="color: #c084ba">import</span>
+                            <span style="color: #ffffff">{</span>
+                            <span style="color: #9ddcfc">mdi{{ activeIcon && activeIcon.name.split('-').map((name) => name.charAt(0).toUpperCase() + name.slice(1)).join('') }}</span>
+                            <span style="color: #ffffff">}</span>
+                            <span style="color: #c084ba">from</span>
+                            <span style="color: #cd917b">'@mdi/js'</span><span style="color: #ffffff">;</span>
+                        </div>
                         <div class="icon-more">
                             <span class="icon-codepoint">{{ activeIcon && activeIcon.codepoint }}</span>
                             <span