preparing for display in the panel

sdkjs-plugins/content/icons/README.md

@@ -16,8 +16,6 @@ npm run build:all
 
 ### Update Font Awesome Icons (windows)
 
-Generate icon paths by category
-
 ```bash
 cd .dev/svg-path-generator && npm i && npm run start && cd ../..
 ```

sdkjs-plugins/content/icons/config.json

@@ -26,7 +26,7 @@
             "url": "dist/index.html",
             "icons": "resources/%theme-type%(light|dark)/icon.svg",
             "EditorsSupport": ["word", "slide", "cell"],
-            "type": "window",
+            "type": "panel",
 
             "initDataType": "none",
             "buttons": [

sdkjs-plugins/content/icons/src/index.html

@@ -34,11 +34,11 @@
         <meta charset="UTF-8" />
         <base href="../" />
         <title>AI Constructor</title>
-        <link rel="stylesheet" href="dist/styles.css" />
         <link
             rel="stylesheet"
             href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css"
         />
+        <link rel="stylesheet" href="dist/styles.css" />
         <script
             type="text/javascript"
             src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"
@@ -55,16 +55,32 @@
             <div class="overlay-close"></div>
         </div>
         <section class="content">
-            <div class="sidebar">
+            <div id="search" class="search">
-                <div id="search" class="search">
+                <input
+                    type="text"
+                    id="searchFilter"
+                    placeholder="Enter the name of the icon"
+                />
+            </div>
+
+            <div id="categories-container" class="categories-container">
+                <span class="i18n">Category</span>
+                <div class="selectHolder">
                     <input
+                        id="categorySelect"
+                        class="control select text i18n"
                         type="text"
-                        id="searchFilter"
+                        placeholder="Enter category name"
-                        placeholder="Search icons"
+                        autocomplete="off"
                     />
-                </div>
+                    <div
-                <div id="categories-container" class="categories-container">
+                        id="categorySelectList"
-                    <div id="categories" class="categories"></div>
+                        class="selectList display-none"
+                    ></div>
+                    <div
+                        id="categories"
+                        class="categories selectList display-none form-control"
+                    ></div>
                 </div>
             </div>
             <div id="icons-container" class="icons-container">

sdkjs-plugins/content/icons/src/js/components/categories-picker.js

@@ -35,7 +35,7 @@
 /** @typedef {import('../types.js').IconCategoryType} IconCategoryType */
 
 class CategoriesPicker {
-    #container;
+    #categories;
     /**
      * @param {string} category
      */
@@ -48,7 +48,7 @@ class CategoriesPicker {
      */
     constructor(catalogOfIcons) {
         /** @type {HTMLDivElement} */
-        this.#container = document.getElementById("categories");
+        this.#categories = document.getElementById("categories");
         this.#addEventListener();
         this.#show(catalogOfIcons);
     }
@@ -70,11 +70,30 @@ class CategoriesPicker {
             const categoryName = document.createElement("span");
             categoryContainer.appendChild(categoryName);
             categoryName.textContent = label;
-            categoryName.setAttribute("data-id", id);
+            categoryName.setAttribute("data-value", id);
             categoryName.className = "category-name";
+
+            /** ******************** */
+            var el = document.createElement("span");
+            el.className = "category";
+            el.setAttribute("data-value", id);
+            el.textContent = label;
+
+            this.#categories?.appendChild(el);
+            /*el.onclick = onStyleSelectOther();
+            
+            if (json[i].name == lastStyle) {
+                el.setAttribute("selected", "");
+                selectInput(
+                    elements.styleSelect,
+                    el,
+                    elements.styleSelectList,
+                    false
+                );
+            }*/
         });
 
-        this.#container?.appendChild(fragment);
+        this.#categories?.appendChild(fragment);
     }
 
     reset() {
@@ -82,7 +101,7 @@ class CategoriesPicker {
             return;
         }
         this.#selectedCategory = "";
-        this.#container
+        this.#categories
             ?.querySelectorAll(".category.selected")
             .forEach((category) => {
                 category.classList.remove("selected");
@@ -97,7 +116,7 @@ class CategoriesPicker {
     }
 
     #addEventListener() {
-        this.#container?.addEventListener("click", (e) => {
+        /*this.#categories?.addEventListener("click", (e) => {
             let categoryName;
 
             const target = e.target;
@@ -108,14 +127,14 @@ class CategoriesPicker {
             if (!categoryName) {
                 return;
             }
-            let id = categoryName.getAttribute("data-id");
+            let id = categoryName.getAttribute("data-value");
             if (typeof id !== "string") {
                 id = "";
             }
             let category = categoryName.parentElement;
             let wasSelected = category?.classList.contains("selected");
 
-            this.#container
+            this.#categories
                 ?.querySelectorAll(".category.selected")
                 .forEach((category) => {
                     category.classList.remove("selected");
@@ -129,7 +148,7 @@ class CategoriesPicker {
                 this.#selectedCategory = id;
             }
             this.#onSelectCategoryCallback(this.#selectedCategory);
-        });
+        });*/
     }
 }
 

sdkjs-plugins/content/icons/src/styles.css

@@ -23,60 +23,57 @@ body {
     overflow-y: auto;
     height: inherit;
     display: flex;
+    flex-direction: column;
     box-sizing: border-box;
 }
 
-.sidebar {
+.search {
-    height: 100%;
+    margin: 4px 12px;
-    min-width: 215px;
+    height: 30px;
     box-sizing: border-box;
-    .search {
+    input {
-        margin: 4px 12px;
         height: 30px;
+        width: calc(100% - 12px);
         box-sizing: border-box;
-        input {
-            height: 30px;
-            width: calc(100% - 12px);
-            box-sizing: border-box;
-        }
     }
-    .categories-container {
+}
-        height: calc(100% - 38px);
+.categories-container {
-        overflow-y: scroll;
+    height: calc(100% - 38px);
-        box-sizing: border-box;
+    overflow-y: scroll;
-        background-color: var(--color-pad);
+    box-sizing: border-box;
-    }
+    background-color: var(--color-pad);
-    .category {
+}
-        cursor: pointer;
+.category {
-        color: var(--font-color);
+    cursor: pointer;
-        user-select: none;
+    color: var(--font-color);
-        line-height: 22px;
+    user-select: none;
-        position: relative;
+    line-height: 22px;
+    position: relative;
 
+    &::before {
+        content: "📁 ";
+        position: absolute;
+        left: 4px;
+    }
+    &.selected {
+        background: var(--color-pad-selected);
         &::before {
-            content: "📁 ";
+            content: "✅ ";
-            position: absolute;
-            left: 4px;
         }
-        &.selected {
+    }
-            background: var(--color-pad-selected);
+    .category-name {
-            &::before {
+        display: block;
-                content: "✅ ";
+        min-width: 160px;
-            }
+        box-sizing: border-box;
-        }
+        padding: 4px 12px 4px 33px;
-        .category-name {
+        border-radius: 3px;
-            display: block;
+        &:hover {
-            min-width: 160px;
+            color: var(--font-color-hover);
-            box-sizing: border-box;
+            background-color: var(--color-pad-hover);
-            padding: 4px 12px 4px 33px;
-            border-radius: 3px;
-            &:hover {
-                color: var(--font-color-hover);
-                background-color: var(--color-pad-hover);
-            }
         }
     }
 }
+
 .icons-container {
     height: 100%;
     width: 100%;