feat(iconpicker): delete

yoyurec · Mar 4, 2023 · 8eab8cc · 8eab8cc
1 parent 70d4c63
commit 8eab8cc
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 20,148 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 ## Other my plugins/themes
+* ✨ [Tabler picker](https://github.com/yoyurec/logseq-tabler-picker)
 * 🪓 [Awesome UI](https://github.com/yoyurec/logseq-awesome-ui)
 * 🎨 [Awesome Styler](https://github.com/yoyurec/logseq-awesome-styler)
 * ⭐ [Awesome Links](https://github.com/yoyurec/logseq-awesome-links)
@@ -64,7 +65,7 @@ In addition to predefined set, you can extend set with your **own icons**!
 
 Just open `awesome-props-icons` page and add page props block with `prop:: iconCode` lines.
 
-Get codes via plugin toolbar icon picker.
+Get codes via ✨ [Tabler icon picker](https://github.com/yoyurec/logseq-tabler-picker)
 
 **PS:** 💡 You can share your configs pages via https://github.com/dangermccann/logseq-template-gallery
 

diff --git a/index.html b/index.html
@@ -7,7 +7,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <script src="/src/awesomeProps.ts" type="module"></script>
         <link rel="stylesheet" href="/css/awesomePropsInternal.css">
-        <link rel="stylesheet" href="/css/tabler-icons.min.css">
     </head>
     <body>
         <div id="app">
@@ -16,16 +15,10 @@
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke="none" d="M0 0h24v24H0z"/><path d="M4 10a2 2 0 1 0 4 0 2 2 0 1 0-4 0M6 4v4M6 12v8M10 16a2 2 0 1 0 4 0 2 2 0 1 0-4 0M12 4v10M12 18v2M16 7a2 2 0 1 0 4 0 2 2 0 1 0-4 0M18 4v1M18 9v11"/></svg>
                     AwesomeProps settings
                 </div>
-                <div id="icon-picker-btn" class="btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke="none" d="M0 0h24v24H0z"/><path d="M15 8h0M12 20H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v4.5"/><path d="m4 15 4-4c1-.9 2-.9 3 0l2 2M15 18a3 3 0 1 0 6 0 3 3 0 1 0-6 0M20.2 20.2 22 22"/></svg>
-                    Toggle icon picker
-                </div>
-                <div id="icon-picker">
-                    <input id="icon-picker-search" type="text">
-                    <div id="icon-picker-list-wrapper">
-                        <div id="icon-picker-list"></div>
-                    </div>
-                </div>
+                <a id="settings-page-link" href="#" class="btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke="none" d="M0 0h24v24H0z"/><path d="M10 14a2 2 0 1 0 4 0 2 2 0 1 0-4 0M12 10.5V12M12 16v1.5M15 12.3l-1.3.7M10.3 15l-1.3.8M15 15.8l-1.3-.8M10.3 13 9 12.2M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"/></svg>
+                    Custom icons config page
+                </a>
             </div>
         </div>
     </body>

diff --git a/public/css/awesomePropsInternal.css b/public/css/awesomePropsInternal.css
@@ -19,8 +19,8 @@ html, body {
 
 #app-inner {
     position: absolute;
-    width: 560px;
-    height: 540px;
+    width: 220px;
+    height: 74px;
     padding: 8px 0;
     background-color: var(--ls-primary-background-color);
     border: 1px solid var(--ls-border-color);
@@ -30,6 +30,8 @@ html, body {
 .btn {
     display: flex;
     padding: 10px 16px 9px 18px;
+    text-decoration: none;
+    color: var(--ls-primary-text-color);
     cursor: pointer;
     user-select: none;
 }
@@ -43,78 +45,3 @@ svg {
     margin-right: 6px;
     opacity: 0.6;
 }
-
-#icon-picker {
-    margin: 4px 20px;
-}
-
-#app-inner.hidden-picker {
-    height: 74px;
-}
-
-#app-inner.hidden-picker #icon-picker {
-    display: none;
-}
-
-#icon-picker-search {
-    width: 300px;
-    height: 30px;
-    margin: 0 50px 8px 50px;
-    padding: 0 4px;
-    font-family: var(--font-os-system);
-    font-size: 14px;
-    border: 1px solid var(--ls-border-color);
-    border-radius: 4px;
-    background-color: var(--ls-a-chosen-bg);
-}
-
-#icon-picker-search:focus {
-    outline: none;
-}
-
-#icon-picker-list-wrapper {
-    height: 420px;
-    overflow-y: auto;
-}
-
-#icon-picker-list {
-    display: grid;
-    grid-gap: 4px;
-    grid-template-columns: repeat(4, 1fr);
-}
-
-.icon-item {
-    text-align: center;
-    padding: 6px;
-    border-radius: 4px;
-    background-color: var(--ls-a-chosen-bg);
-}
-
-.icon-glyph {
-    width: 54px;
-    margin: 4px auto;
-    font-family: 'tabler-icons';
-    font-size: 30px;
-    border-radius: 4px;
-    user-select: auto;
-    cursor: pointer;
-}
-
-.icon-code {
-    display: inline-block;
-    margin: 4px 0;
-    padding: 6px 10px;
-    border: 1px dotted var(--ls-border-color);
-    user-select: auto;
-    cursor: pointer;
-}
-.icon-code:hover,
-.icon-glyph:hover {
-    background-color: var(--ls-primary-background-color);
-}
-
-.icon-name {
-    margin: 2px 0;
-    font-size: 12px;
-    user-select: none;
-}
diff --git a/public/css/tabler-icons.min.css b/public/css/tabler-icons.min.css
diff --git a/public/fonts/tabler-icons.woff2 b/public/fonts/tabler-icons.woff2