@emailmaker/filemanager 0.0.9 → 0.10.0

package/components/FolderSidebar/FolderSidebar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Folder, MenuItem, LibraryMenuKey } from '../../types';
+import { Folder, LibraryMenuKey, MenuItem } from '../../types';
 interface FolderSidebarProps {
     selectedFolder: string | null;
     generateMenuItems: () => MenuItem[];

package/components/PixieEditor/PixieController.d.ts

@@ -0,0 +1,40 @@
+import type { PixieConfig } from 'pixie/dist/types/src/config/default-config';
+import { Tools } from 'pixie/dist/types/src/tools/init-tools';
+export declare const PIXIE_CONTAINER_CLASS_NAME = "fm-pixie-editor";
+/**
+ * Контроллер для работы с редактором Pixie.
+ * Pixie использует глобальное состояние, поэтому повторная инициализация вызывает ошибки.
+ * Этот класс сохраняет контейнер, в который рендерится Pixie, и переиспользует его.
+ * Для поддержки нескольких экземпляров Pixie потребуется переработка.
+ */
+export declare class PixieController {
+    /** Контейнер для рендера Pixie */
+    private readonly _container;
+    /** Экземпляр Pixie */
+    private _instance;
+    constructor();
+    /** Возвращает селектор контейнера */
+    get className(): string;
+    /** Получает HTMLCanvasElement редактора, если он инициализирован */
+    get canvas(): HTMLCanvasElement | null;
+    /** Получает инструменты Pixie, если редактор инициализирован */
+    get tools(): Tools | undefined;
+    /** Проверяет, инициализирован ли редактор */
+    isLoaded(): boolean;
+    /**
+     * Устанавливает конфигурацию Pixie
+     * @param config Конфигурация Pixie
+     */
+    private _setConfig;
+    /**
+     * Отображает редактор Pixie в указанном родительском элементе
+     * @param config Конфигурация Pixie
+     * @param parent Родительский элемент, куда вставляется редактор
+     * @param nextSibling Элемент перед которым вставляется контейнер (по умолчанию первый ребёнок)
+     */
+    show(config: PixieConfig, parent: ParentNode, nextSibling?: ChildNode | null): Promise<void>;
+    /** Закрывает редактор Pixie, удаляя контейнер из DOM */
+    close(): void;
+}
+/** Глобальный экземпляр контроллера Pixie */
+export declare const pixieController: PixieController;

package/file-manager.css

@@ -392,6 +392,8 @@
 .em-filemanager .uploadButton {
   display: grid;
   grid-template-columns: 3fr 1fr;
+  width: 100%;
+  margin-bottom: 8px;
 }
 
 .em-filemanager .folderMenu {
@@ -463,164 +465,185 @@
   margin: 12px 0 !important;
 }
 
-/* Стили для кнопки загрузки */
-.em-filemanager .uploadButton {
-  width: 100%;
-  margin-bottom: 8px;
-}
-
-/* .folderMenu :global(.ant-tree-treenode-selected) .folderLabelItem {
-  color: #1890ff !important;
-} */
-.em-filemanager .container {
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  z-index: 1000;
-  max-width: 400px;
-  min-width: 320px;
-}
-
-.em-filemanager .uploadCard {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border-radius: 8px;
-  border: 1px solid #d9d9d9;
-}
-
-.em-filemanager .header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.em-filemanager .headerButton {
-  padding: 0;
-  width: 24px;
-  height: 24px;
+.em-filemanager .uploadButton .ant-btn {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 8px;
 }
 
-.em-filemanager .headerButton:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-.em-filemanager .fileList {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.em-filemanager .fileItem {
-  padding: 8px 0 !important;
-  border-bottom: 1px solid var(--colorBorderSecondary);
-}
-
-.em-filemanager .fileItem:last-child {
-  border-bottom: none;
-}
-
-.em-filemanager .fileAvatar {
-  background-color: transparent !important;
-}
-
-.em-filemanager .fileInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.em-filemanager .fileName {
-  font-size: 13px;
-  line-height: 1.2;
-  max-width: 200px;
-}
-
-.em-filemanager .fileSize {
-  font-size: 11px;
-  line-height: 1;
-}
-
-.em-filemanager .progressBar {
-  margin-top: 4px;
-}
-
-.em-filemanager .errorNote {
-  margin-top: 8px;
-  padding: 8px;
-  background-color: #fff2f0;
-  border: 1px solid #ffccc7;
-  border-radius: 4px;
-}
-
-/* Минимизированное состояние */
-.em-filemanager .minimizedContainer {
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  z-index: 1000;
-}
-
-.em-filemanager .minimizedButton {
-  font-size: 12px;
-  height: 28px;
-  padding: 0 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Скроллбар для списка файлов */
-.em-filemanager .fileList::-webkit-scrollbar {
-  width: 6px;
-}
-
-.em-filemanager .fileList::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.em-filemanager .fileList::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.em-filemanager .fileList::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-
-/* Анимации */
-.em-filemanager .container {
-  animation: slideInFromLeft 0.3s ease-out;
-}
+/* .folderMenu :global(.ant-tree-treenode-selected) .folderLabelItem {
+  color: #1890ff !important;
+} */
 
-.em-filemanager .minimizedContainer {
-  animation: slideInFromLeft 0.3s ease-out;
+.em-filemanager .buttonWrapper {
+  overflow: hidden;
+  margin-bottom: 24px;
+  border-radius: calc(var(--borderRadius) * 1px);
 }
 
-@keyframes slideInFromLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
+.em-filemanager .uploadButtonTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* Адаптивность */
-@media (max-width: 768px) {
-  .em-filemanager .container {
-    left: 10px;
-    right: 10px;
-    max-width: calc(100vw - 20px);
-    min-width: auto;
-  }
-
-  .em-filemanager .minimizedContainer {
-    left: 10px;
-  }
+.em-filemanager .emptyFolderContainer {
+  margin-left: -40px;
+  -webkit-user-select: none;
+          user-select: none;
+  cursor: default;
+  color: var(--colorTextTertiary);
 }
+.em-filemanager .container {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 1000;
+  max-width: 400px;
+  min-width: 320px;
+}
+
+.em-filemanager .uploadCard {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+}
+
+.em-filemanager .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.em-filemanager .headerButton {
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.em-filemanager .headerButton:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.em-filemanager .fileList {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.em-filemanager .fileItem {
+  padding: 8px 0 !important;
+  border-bottom: 1px solid var(--colorBorderSecondary);
+}
+
+.em-filemanager .fileItem:last-child {
+  border-bottom: none;
+}
+
+.em-filemanager .fileAvatar {
+  background-color: transparent !important;
+}
+
+.em-filemanager .fileInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.em-filemanager .fileName {
+  font-size: 13px;
+  line-height: 1.2;
+  max-width: 200px;
+}
+
+.em-filemanager .fileSize {
+  font-size: 11px;
+  line-height: 1;
+}
+
+.em-filemanager .progressBar {
+  margin-top: 4px;
+}
+
+.em-filemanager .errorNote {
+  margin-top: 8px;
+  padding: 8px;
+  background-color: #fff2f0;
+  border: 1px solid #ffccc7;
+  border-radius: 4px;
+}
+
+/* Минимизированное состояние */
+.em-filemanager .minimizedContainer {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 1000;
+}
+
+.em-filemanager .minimizedButton {
+  font-size: 12px;
+  height: 28px;
+  padding: 0 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Скроллбар для списка файлов */
+.em-filemanager .fileList::-webkit-scrollbar {
+  width: 6px;
+}
+
+.em-filemanager .fileList::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.em-filemanager .fileList::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.em-filemanager .fileList::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Анимации */
+.em-filemanager .container {
+  animation: slideInFromLeft 0.3s ease-out;
+}
+
+.em-filemanager .minimizedContainer {
+  animation: slideInFromLeft 0.3s ease-out;
+}
+
+@keyframes slideInFromLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .em-filemanager .container {
+    left: 10px;
+    right: 10px;
+    max-width: calc(100vw - 20px);
+    min-width: auto;
+  }
+
+  .em-filemanager .minimizedContainer {
+    left: 10px;
+  }
+}
 
 .em-filemanager .gifTab {
   padding: 16px;
@@ -1204,8 +1227,9 @@
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-dropdown-button {
   grid-template-columns: 10fr 40px;
-  margin-bottom: 24px;
+  margin-bottom: 0;
   gap: 2px;
+  border-radius: calc(var(--borderRadius) * 1px);
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-dropdown-button button {
   height: 44px;
@@ -1214,6 +1238,7 @@
 .em-filemanager .file-manager__layout .file-manager-sider .ant-dropdown-button .ant-btn-compact-first-item {
   justify-content: flex-start;
   width: 100%;
+  min-width: 160px;
   border-radius: calc(var(--borderRadius) * 1px) 2px 2px calc(var(--borderRadius) * 1px);
   background-color: var(--colorPrimary);
 }
@@ -1273,9 +1298,10 @@
   width: inherit;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-switcher {
-  height: 40px;
-  width: 40px;
-  margin-top: 0;
+  height: 36px;
+  width: 36px;
+  margin-top: 2px;
+  margin-left: -4px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1283,8 +1309,15 @@
   flex-shrink: 0; /* Запрещаем сжатие переключателя */
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-switcher:before {
-  height: 40px;
-  width: 40px;
+  margin-top: 2px;
+  margin-left: -2px;
+  height: 36px;
+  width: 36px;
+}
+.em-filemanager .file-manager__layout .file-manager-sider .ant-tree .ant-tree-switcher > .anticon {
+  font-size: 14px;
+  margin-left: -4px;
+  margin-top: 2px;
 }
 .em-filemanager .file-manager__layout .file-manager-sider .ant-tree .folder-item-container {
   width: 100%;
@@ -1516,6 +1549,7 @@
 .em-filemanager .file-manager__layout .sidebar-container {
   height: 100%;
   padding: 36px 24px 36px 40px;
+  overflow: hidden;
 }
 .em-filemanager .file-manager__layout .sidebar-container .ant-tree-treenode {
   display: flex;