alchemy-chimera 1.2.3 → 1.2.5

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.2.5 (2023-06-17)
+
+* Improve stylings
+
+## 1.2.4 (2023-04-20)
+
+* Add document watcher & toolbar manager support
+
 ## 1.2.3 (2023-03-10)
 
 * Add support for setting a record preview action per model

package/assets/stylesheets/chimera/chimera.scss

@@ -210,6 +210,10 @@ body {
 		display: block;
 		font-size: 1.2rem;
 	}
+
+	> al-widgets-column > [type="header"] h1 {
+		padding-top: 0;
+	}
 }
 
 al-widgets-navigation {
@@ -532,20 +536,6 @@ al-field[mode="inline"] {
 		}
 	}
 
-	.chimera-confirm-page {
-		flex: 1;
-		justify-content: center;
-		display: flex;
-		align-items: center;
-		flex-flow: column;
-		flex-direction: column;
-
-		.action-buttons {
-			display: flex;
-			gap: 1rem;
-		}
-	}
-
 	al-file {
 		button {
 			@extend .btn;
@@ -565,6 +555,32 @@ al-field[mode="inline"] {
 			background: initial;
 		}
 	}
+
+	al-editor-toolbar {
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+
+		[data-area="buttons"] {
+			display: flex;
+			gap: 1rem;
+		}
+	}
+}
+
+.chimera-centered-page,
+.chimera-confirm-page {
+	flex: 1;
+	justify-content: center;
+	display: flex;
+	align-items: center;
+	flex-flow: column;
+	flex-direction: column;
+
+	.action-buttons {
+		display: flex;
+		gap: 1rem;
+	}
 }
 
 al-field {

package/controller/00-chimera_controller.js

@@ -13,4 +13,35 @@ let ChimeraController = Function.inherits('Alchemy.Controller', 'Alchemy.Control
 	if (alchemy.plugins.chimera.theme) {
 		this.view_render.setTheme(alchemy.plugins.chimera.theme);
 	}
+});
+
+/**
+ * Do something before the action is executed
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.2.4
+ * @version  1.2.4
+ */
+ChimeraController.setMethod(function beforeAction() {
+	this.set('toolbar_manager', this.toolbar_manager);
+	this.toolbar_manager.queueModelFallback(this.conduit.params.model);
+});
+
+/**
+ * Get this client's toolbar manager
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.2.4
+ * @version  1.2.4
+ *
+ * @return   {Alchemy.Widget.EditorToolbarManager}
+ */
+ChimeraController.enforceProperty(function toolbar_manager(new_value) {
+
+	if (!new_value && this.conduit) {
+		new_value = Classes.Alchemy.Widget.EditorToolbarManager.create(this.conduit);
+		new_value.scenario = 'chimera';
+	}
+
+	return new_value;
 });

package/controller/chimera_editor_controller.js

@@ -12,7 +12,7 @@ const Editor = Function.inherits('Alchemy.Controller.Chimera', 'Editor');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    1.0.1
- * @version  1.0.5
+ * @version  1.2.4
  *
  * @param    {String}    title
  */
@@ -39,6 +39,22 @@ Editor.setMethod(function setTitle(title) {
 
 	this.set('page_title', page_title);
 	this.set('window_title', window_title || page_title);
+	this.toolbar_manager.title = page_title;
+});
+
+/**
+ * Set the context document
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    1.2.4
+ * @version  1.2.4
+ *
+ * @param    {Document}    doc
+ */
+Editor.setMethod(function setContextDocument(doc) {
+	let document_watcher = this.toolbar_manager.setDocument(doc);
+	this.toolbar_manager.setModel(doc.$model_name);
+	document_watcher.addWatcher(this.conduit);
 });
 
 /**
@@ -125,7 +141,7 @@ Editor.setAction(async function add(conduit, model_name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  1.2.3
+ * @version  1.2.4
  *
  * @param    {Conduit}   conduit
  * @param    {String}    model_name
@@ -185,6 +201,8 @@ Editor.setAction(async function edit(conduit, model_name, pk_val) {
 		this.set('add_preview_button', true);
 	}
 
+	this.setContextDocument(record);
+
 	this.set('record_pk', record.$pk);
 	this.set('model_name', model.model_name.toLowerCase());
 	this.set('widget_config', widget_config);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-chimera",
 	"description": "Chimera plugin for Alchemy MVC",
-	"version": "1.2.3",
+	"version": "1.2.5",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",

package/view/chimera/toolbar/create_button.hwk

@@ -0,0 +1,8 @@
+<a
+	!Route="Chimera.Editor#add"
+	#model={% model_name %}
+	class="btn"
+>
+	<al-icon icon-name="plus"></al-icon>
+	{%t "new" model=model_name %}
+</a>

package/view/chimera/toolbar/edit_in_chimera_button.hwk

@@ -0,0 +1,10 @@
+<a
+	!Route="Chimera.Editor#edit"
+	+model={% model_name %}
+	+pk={% record_pk %}
+	class="btn"
+	target="_blank"
+>
+	<al-icon icon-name="pencil"></al-icon>
+	{%t "edit" model=model_name in="backend" %}
+</a>

package/view/chimera/toolbar/preview_button.hwk

@@ -0,0 +1,10 @@
+<a
+	!Route="Chimera.Editor#preview"
+	+model={% model_name %}
+	+pk={% record_pk %}
+	class="btn"
+	target="_blank"
+>
+	<al-icon icon-name="eye"></al-icon>
+	{%t "preview" model=model_name %}
+</a>

package/view/layouts/chimera_body.hwk

@@ -12,9 +12,40 @@
 	</div>
 	<div class="chimera-content">
 		<div class="chimera-page-header">
-			<div class="page-title" data-he-name="page-title"></div>
-			<div class="page-notification" data-he-name="page-notification"></div>
-			<div class="page-actions" data-he-name="page-actions"></div>
+			<div hidden>
+				<div class="page-title" data-he-name="page-title"></div>
+				<div class="page-notification" data-he-name="page-notification"></div>
+				<div class="page-actions" data-he-name="page-actions"></div>
+			</div>
+
+			<al-editor-toolbar
+				#toolbar_manager={% toolbar_manager %}
+			>
+				<div slot="left">
+					<div class="page-title">
+						<span data-toolbar="title"></span>
+					</div>
+					<div data-area="left-content"></div>
+				</div>
+
+				<div slot="center">
+					<al-user-avatar-group
+						class="watchers"
+					></al-user-avatar-group>
+				</div>
+
+				<div slot="right">
+					<div data-area="buttons">
+
+					</div>
+				</div>
+			</al-editor-toolbar>
+
+			{#
+				<al-user-avatar
+					#user={% Acl.data %}
+				></al-user-avatar>
+			#}
 		</div>
 		<div data-he-name="main" class="chimera-main">