@silexlabs/silex 3.0.0-alpha.152 → 3.0.0-alpha.153

package/dist/client/client/grapesjs/index.d.ts

@@ -1,5 +1,9 @@
 import { Editor, EditorConfig } from 'grapesjs';
 import { ClientConfig } from '../config';
+export declare const cmdToggleLayers = "open-layers";
+export declare const cmdToggleBlocks = "open-blocks";
+export declare const cmdToggleSymbols = "open-symbols";
+export declare const cmdToggleNotifications = "open-notifications";
 export declare function getEditorConfig(config: ClientConfig): EditorConfig;
 export declare function initEditor(config: EditorConfig): Promise<Editor>;
 export declare function getEditor(): Editor;

package/dist/client/client/grapesjs/keymaps.d.ts

@@ -0,0 +1,71 @@
+import { Editor, PluginOptions } from 'grapesjs';
+/**
+ * Escapes the current context in this order : modal, Publish dialog, left panel.
+ * If none of these are open, it selects the body.
+ * @param editor The editor.
+ */
+declare function escapeContext(editor: Editor): void;
+export declare const cmdSelectBody = "select-body";
+export declare let prefixKey: string;
+export declare const defaultKms: {
+    kmOpenSettings: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmOpenPublish: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmOpenFonts: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmPreviewMode: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+        options: {
+            prevent: boolean;
+        };
+    };
+    kmLayers: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmBlocks: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmNotifications: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmPages: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmSymbols: {
+        id: string;
+        keys: string;
+        handler: (editor: any) => void;
+    };
+    kmClosePanel: {
+        id: string;
+        keys: string;
+        handler: typeof escapeContext;
+    };
+    kmSelectBody: {
+        id: string;
+        keys: string;
+        handler: string;
+    };
+};
+export declare function keymapsPlugin(editor: Editor, opts: PluginOptions): void;
+export {};

package/dist/client/client/grapesjs/project-bar.d.ts

@@ -5,6 +5,7 @@ export interface PanelObject {
     command: string | ((editor: Editor) => void);
     text: string;
     className: string;
+    name?: string;
     attributes: {
         title?: string;
         containerClassName?: string;

package/dist/client/client/utils.d.ts

@@ -4,3 +4,10 @@ export declare function onAll(editor: Editor, cbk: (c: Component) => void): void
  * SHA256 hash a string
  */
 export declare function hashString(str: string): Promise<string>;
+/**
+ * Select the <body> element in the editor.
+ * @param editor The GrapesJS editor.
+ */
+export declare function selectBody(editor: Editor): void;
+export declare function isTextOrInputField(element: HTMLElement): boolean;
+export declare function titleCase(str: string, sep?: string): string;

package/dist/client/css/admin.css

@@ -4575,6 +4575,108 @@ form.silex-form .silex-form__group.col2 {
   margin-left: 10px;
 }
 
+#publish-dialog header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 0.95rem;
+  transition: 200ms;
+}
+#publish-dialog header svg {
+  width: 1.4rem;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+#publish-dialog header button {
+  border: solid 2px #484848;
+  border-radius: 50px;
+  padding: 4px 9px;
+  background-color: #444;
+  color: #ddd;
+}
+#publish-dialog header .connector {
+  color: #A291FF;
+}
+#publish-dialog main {
+  max-height: none;
+}
+#publish-dialog main .buttons {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-row-gap: 0.5rem;
+  transition: 200ms;
+}
+#publish-dialog main svg {
+  height: 0.9rem;
+  margin-left: 5px;
+}
+#publish-dialog main h3 {
+  margin: 0;
+}
+#publish-dialog main p {
+  margin-top: 0;
+}
+#publish-dialog main details {
+  border-radius: 5px;
+  border: solid #222 2px;
+  background-color: #222;
+  margin: 10px 0;
+  padding: 10px;
+  word-break: break-word;
+  overflow-y: auto;
+  max-height: 200px;
+  position: relative;
+}
+#publish-dialog main details pre {
+  word-break: break-word;
+}
+#publish-dialog main details summary {
+  font-size: 0.95rem;
+  opacity: 0.7;
+}
+#publish-dialog main details .logs {
+  font-family: monospace;
+}
+#publish-dialog main details .logs * {
+  margin: 0;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  border-radius: 5px;
+  list-style: "-";
+}
+#publish-dialog main details .logs *:hover {
+  transition: 200ms;
+  background-color: rgba(255, 255, 255, 0.05);
+}
+#publish-dialog main details:hover {
+  transition: 200ms;
+  border-color: #575757;
+  background-color: #292929;
+}
+#publish-dialog main details * {
+  transition: 200ms;
+}
+#publish-dialog main details[open] summary {
+  margin-bottom: 10px;
+}
+#publish-dialog main .silex-button {
+  padding: 10px;
+  width: 100%;
+  transition: 200ms;
+}
+#publish-dialog main .silex-button:hover {
+  filter: brightness(1.2);
+}
+#publish-dialog main .silex-button:active {
+  filter: brightness(0.8);
+}
+#publish-dialog main .silex-button--primary {
+  background-color: #8873FE;
+}
+
 .gjs-suggest {
   max-height: 30vh;
   overflow-y: scroll;